HTML常用標(biāo)簽
1. web標(biāo)準(zhǔn)
1.1 web標(biāo)準(zhǔn)的構(gòu)成
主要包括結(jié)構(gòu)、表現(xiàn)和行為三個(gè)方面,。
| 標(biāo)準(zhǔn) |
說明 |
| 結(jié)構(gòu) |
用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類（HTML） |
| 表現(xiàn) |
用于設(shè)置網(wǎng)頁元素的外觀樣式（CSS） |
| 行為 |
網(wǎng)頁模型的定義及交互的編寫（JavaScript） |
如果將web標(biāo)準(zhǔn)比喻為一只鳥,，則
- 結(jié)構(gòu)=身體
- 表現(xiàn)=羽毛
- 行為=動(dòng)作（飛行、站立等）
1.2 標(biāo)簽關(guān)系
雙標(biāo)簽關(guān)系分為：
- 包含關(guān)系（父子）
- 并列關(guān)系（兄弟）
(1)包含關(guān)系
<!--head標(biāo)簽包含title標(biāo)簽-->
<head>
<title></title>
</head>
(2)并列關(guān)系
<!--head標(biāo)簽與body標(biāo)簽并列-->
<head></head>
<body></body>
2. HTML基本結(jié)構(gòu)
| 標(biāo)簽名 |
定義 |
| <html></html> |
html標(biāo)簽 |
| <head></head> |
文檔的頭部 |
| <title></title> |
文檔的標(biāo)題 |
| <body></body> |
文檔的主體 |
<!DOCTYPE html> <!--文檔類型聲明標(biāo)簽-->
<html lang="en"> <!--en:英語,，zh-CN:中文-->
<head>
<!--字符集,，UTF-8為萬國(guó)碼，統(tǒng)一使用-->
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
3. HTML常用標(biāo)簽
3.1 標(biāo)題標(biāo)簽
一個(gè)標(biāo)題獨(dú)占一行,。（塊級(jí)元素）
<h1>
一級(jí)標(biāo)題（字號(hào)最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
六級(jí)標(biāo)題（字號(hào)最?。?</h6>
3.2 段落標(biāo)簽
用于將HTML文檔分割為若干段落。
特點(diǎn)：
- 文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行
- 段落之間有空隙
<p>
這是一個(gè)段落
</p>
3.3 換行標(biāo)簽
用于強(qiáng)制換行,。
特點(diǎn)：
<br>這是換行標(biāo)簽
3.4 文本格式化標(biāo)簽
| 語義 |
標(biāo)簽 |
| 加粗 |
<strong></strong> |
| 傾斜 |
<em></em> |
| 刪除線 |
<del></del> |
| 下劃線 |
<ins></ins> |
3.5 盒子標(biāo)簽
用于界面布局,。
特點(diǎn)：
- div一行只能放一個(gè)（塊級(jí)元素）
- span一行可以放多個(gè)（行級(jí)元素）
<div>
這是大盒子
</div>
<span>這是小盒子</span>
3.6 圖像標(biāo)簽和路徑
(1)圖像標(biāo)簽
用于定義頁面中的圖像。
<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">
| 屬性 |
說明 |
| src |
圖片路徑（必須屬性） |
| alt |
圖像不能顯示時(shí)的替換文本 |
| title |
鼠標(biāo)放到圖像上顯示的提示文本 |
| width |
設(shè)置圖像的寬度 |
| height |
設(shè)置圖像的高度 |
| border |
設(shè)置圖像的邊框粗細(xì)（在CSS中修改） |
注：圖像的寬和高一般只修改其中一個(gè),，另一個(gè)會(huì)隨之調(diào)整,。
(2)路徑
- 相對(duì)路徑：文件相對(duì)于HTML頁面的位置
| 相對(duì)路徑分類 |
符號(hào) |
說明 |
| 同一級(jí) |
|
src="文件名" |
| 下一級(jí) |
/ |
src="同一級(jí)文件夾名稱/文件名" |
| 上一級(jí) |
../ |
src="../文件名" |
- 絕對(duì)路徑：完整的路徑名稱（一般很少用）。eg. C:\\xxx\\xxxx.jpg
注意：絕對(duì)路徑用“\”分隔,，相對(duì)路徑用“/”分隔,。
3.7 超鏈接標(biāo)簽和鏈接分類
(1)超鏈接標(biāo)簽
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
| 屬性 |
作用 |
| href |
鏈接目標(biāo)的url（必須屬性） |
| target |
鏈接頁面的打方式。_self：在當(dāng)前窗口打開（默認(rèn)值）,，_blank：在新窗口打開 |
(2)鏈接分類
-
外部鏈接：例如http://www.bilibili.com
-
內(nèi)部鏈接：網(wǎng)站內(nèi)部頁面之間的相互鏈接,，例如index.html
-
空鏈接：#
-
下載鏈接：地址里是一個(gè)文件或壓縮包
-
網(wǎng)頁元素鏈接：在網(wǎng)頁中的各種網(wǎng)頁元素都可以添加超鏈接
-
錨點(diǎn)鏈接：可以快速定位到頁面中的某個(gè)位置
3.8 注釋和特殊字符
(1)注釋
<!--這是一行注釋-->
(2)特殊字符
| 特殊字符 |
描述 |
字符的代碼 |
|
空格符 |
|
| < |
小于號(hào) |
< |
| > |
大于號(hào) |
> |
| & |
和號(hào) |
& |
| ￥ |
人民幣 |
¥ |
| ? |
版權(quán) |
© |
| ? |
注冊(cè)商標(biāo) |
® |
| ° |
攝氏度 |
° |
| ± |
正負(fù)號(hào) |
± |
| ? |
乘號(hào) |
× |
| ? |
除號(hào) |
÷ |
| 2 |
平方 |
² |
| 3 |
立方 |
³ |
注：重點(diǎn)記住前三個(gè),。
|
