html简介及常用标签
目錄
一.html的簡介
1.什么是html?
2.第一個html程序
3.html的規范（遵循）
4.html的操作思想
二、html中常用的標簽
1.文字標簽和注釋標簽
2.注釋標簽
3.標題標簽、水平線標簽和特殊字符
4.列表標簽
? ? ? ? (1)定義列表
?????????(2)有序列表
????? ? (3)無序列表
5.圖像標簽
6.路徑的介紹
7.超鏈接標簽
8.表格標簽
9.表單標簽
10.其他常用標簽
11.html頭標簽的使用
一.html的簡介
1.什么是html?
? ? ? ??HperText Markup Launguage:超文本標記語言。
????? ? 超文本：超出文本的范疇，使用html可以輕松實現這種操作。
????? ? 標記：html所有的操作都是通過標記來實現的，標記就是標簽。 ? ?<標簽名稱>
2.第一個html程序
????? ? 創建java文件.java
????????? ? 先編譯，然后在運行（jvm）
????? ? html后綴是.html .htm
????????? ? 直接通過瀏覽器就可以運行
?????????代碼：
????????????????這是我的<font size="5" color="red">第一個html程序</font>3.html的規范（遵循）
????? ? (1)一個html文件開始標簽和結束標簽? ? ?<html></html>
????? ? (2)html包含兩部分內容
????????????? ? ①<head>設置相關信息</head>
????????????????② <body>顯示在頁面上的內容都寫在body里面</body>
????? ? (3)html的標簽有開始標簽 ?也要有結束標簽
????????????? ? <head></head>
????? ? (4)html的代碼不區分大小寫
????? ? (5)有些標簽，沒有結束標簽，在標簽內結束
????????????? ? ?比如:換行 <br/> 水平線<hr/>?
4.html的操作思想
網頁中有很多數據，不同的數據可能需要不同的顯示效果,這個時候需要使用標簽把要操作的數據封裝起來，通過修改標簽的屬性值實現標簽內數據樣式的變化。
一個標簽相當于一個容器，想要修改容器內數據的樣式，只需要改變容器的屬性值，就可以實現容器內數據樣式的變化。
二、html中常用的標簽
1.文字標簽和注釋標簽
????? ? - 文字標簽:修改文字的樣式
????????????? ? <font></font>
????????????????? ?屬性:
????????????????????????? ?size:文字的大小
????????????????????????? ?color:文字的顏色
2.注釋標簽
????????????????<!-- 注釋內容-->3.標題標簽、水平線標簽和特殊字符
????? ? （1）標題標簽
????????? ? <h1></h1> <h2></h2>.........<h6></h6>
? ? ? ? （2）水平線標簽
????????? ? <hr/>
????????????? ? 屬性:
????????????????????? ?size:水平線的粗細
????????????????????? ?color:水平線的顏色
? ? ? ? （3）特殊字符
????????? ? <: ? ? ?<
????????? ? >: ? ? ?>
????????? ? 空格: ?
????????? ? &: ? ? &
? 代碼演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>代碼演示</title> </head><body> <!--標題標簽演示--><h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6><!--水平線標簽演示 --><hr size="3" color="#FF0000"/><!-- 特殊字符演示-->< <!--小于--> > <!--大于--> <p>段落間的空格 段落間的空格</p> <!--空格--> </body> </html>4.列表標簽
? ? ? ? (1)定義列表
<!--定義列表演示--> <dl><dt>NBA球隊</dt><dd>騎士隊</dd><dd>熱火隊</dd><dd>馬刺隊</dd> </dl>?????????(2)有序列表
<!--有序列表演示--> 你最喜歡的水果？ <ol type="A"><li>蘋果</li><li>葡萄</li><li>橘子</li><li>香蕉</li> </ol>????? ? (3)無序列表
<!--無序列表演示--> <ul type="square"><li>市場營銷部</li><li>人力資源部</li><li>財務部</li> </ul>5.圖像標簽
????? ? <img src="圖片路徑" />
????????????? ?屬性:
????????????????????? ? src:圖片的路徑
????????????????????? ? width:圖片的寬度
????????????????????? ? height:圖片的高度
????????????????????? ? alt:圖片上顯示的內容
6.路徑的介紹
? ? ? ? - 絕對路徑:是從盤符開始的路徑。
????????????C:\windows\system32\cmd.exe
? ? ? ? - 相對路徑:是從當前路徑開始的路徑。
? ? ? ? ? ? --- 假如當前路徑為C:\windows 要描述上述路徑，只需輸入:
?????????????system32\cmd.exe
? ? ? ? ? ? --- 假如當前路徑為c:\program files?要描述上述路徑，只需輸入:
????????????..\windows\system32\cmd.exe
????????????? ? 注: ? ?..\表示上級目錄 ? ?..\..\ 表示上級的上級目錄
7.超鏈接標簽
????? ? <鏈接資源>
????? ? <a href="要鏈接到資源的路徑">顯示在頁面上的內容</a>
????????? ? 屬性:
????????????????? ? href:鏈接的資源的地址
????????????????? ? target:設置打開的方式
????????????????????_blank:在一個新窗口打開
? ? ? ? ? ? ? ? ? ??_self:在當前窗口打開(默認)
????????? ? 當超鏈接不需要到任何的地址，只需要在href里面加一個#
<a href="http://www.baidu.com">百度</a> <a href="#">沒有指向任何地址的超鏈接</a>????? ? <定位資源>
<!--先定義一個位置--> <p name="top">頂部</p> <!--回到這個位置 --> <a href="#top">回到頂部</a>8.表格標簽
????? ? <table></table> ?表示表格的范圍?
????????????? ? 屬性:
????????????????????? ? border:表格線
????????????????????? ? bordercolor:表格線的顏色
????????????????????? ? cellspacing:單元格之間的距離
????????????????????? ? width:表格的寬度
????????????????????? ? height:表格的高度
????? ? <tr></tr> ?在table里面設置 代表行
????????<td></td> ?在tr里面設置 代表列
????????????????????? ? align: left right center ?文本對齊方式
????? ? <caption></caption> ?表格的標題
????? ? <th></th 表頭標簽 ?內容自動加粗+居中
????? ? 合并單元格:
????????? ? - ?rowspan:合并行
????????????<tr rowspan="2">合并兩行</tr>????????? ? - ?colspan:合并列
????????????<td colspan="3">合并三列</td>9.表單標簽
<!--表單標簽:<form></form>action:提交路徑method:提交方法 get/posttarget:以何種方式打開 blank self parent top普通輸入項:<input type="text"/>密碼輸入項：<input type="password"/>單選輸入項：<input type="radio"/>必須有屬性name,name的屬性必須相同復選輸入項：<input type="checkbox"/>必須有屬性name,name的屬性必須相同checked屬性: 默認選中狀態文件輸入項：<input type="file"/>下拉輸入項：<select><option></option><option></option></select>selected屬性:默認選中狀態文本域<textarea cols="10" rows="10"></textarea>cols:列數rows:行數隱藏項:<input type="hidden"/> 不會顯示在頁面上提交按鈕:<input type="submit"/>value:按鈕顯示的名稱使用圖片提交:<input type="image" src="圖片路徑"/>重置表單:<input type="reset"/>普通按鈕:<input type="button"/> 不會產生任何效果，與javascript配合使用 --> <form> 帳號:<input type="text" /> <br /> 密碼:<input type="password" /> <br /> 性別:<input type="radio" name="sex" value="boy" />男<input type="radio" name="sex" value="girl" />女 <br /> 愛好:<input type="checkbox" name="hobby" value="basketball" checked="checked"/>籃球<input type="checkbox" name="hobby" value="football" />足球<input type="checkbox" name="hobby" value="pingpang" />乒乓球<br /> 文件:<input type="file" /><br /> 城市:<select name="city"><option value="tianjing">天津</option><option value="beijing" selected="selected">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option></select> <br /> 自我介紹:<textarea cols="20" rows="10"></textarea> 隱藏項:<input type="hidden" /> <br /> <input type="submit" value="注冊" /> <input type="image" src="1.jpg" /> <input type="reset" value="重置"/> <input type="button" value="普通按鈕" /> </form>10.其他常用標簽
<!--<b></b>:加粗<s></s>:刪除線<u></u>:下劃線<i></i>:斜體<pre></pre>:原樣輸出<sub></sub>:下標<sup></sup>:上標<p></p>:段落標簽<div></div>:自動換行<span></span>:在一行顯示 --><b>加粗字體</b> <s>刪除線</s> <u>下劃線</u> <i>斜體</i> <pre>public static void main(String[] args){System.out.println("hello java";} </pre> H<sub>2</sub>O x<sup>2</sup>=4 <p>這是一個段落</p> <p>這是一個段落</p>11.html頭標簽的使用
????? ? title:標簽文檔的標題
????? ? meta標簽:??
????????????????<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />???
????? ? base標簽:設置超鏈接的打開方式
?????????????????<base target="_blank"/>??
????? ? link標簽:引入外部文件
?????????????????<link href="a.css" rel="stylesheet" type="text/css" />
?
? ??
?
總結
以上是生活随笔為你收集整理的html简介及常用标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++书籍笔记目录汇总【目前1本读书笔记
- 下一篇： CSS选择器、盒子模型及布局