HTML常用標籤
阿新 • • 發佈：2020-07-24
HTML常用標籤
1. web標準
1.1 web標準的構成
主要包括結構、表現和行為三個方面。
| 標準 | 說明 |
|---|---|
| 結構 | 用於對網頁元素進行整理和分類（HTML） |
| 表現 | 用於設定網頁元素的外觀樣式（CSS） |
| 行為 | 網頁模型的定義及互動的編寫（JavaScript） |
如果將web標準比喻為一隻鳥，則
- 結構=身體
- 表現=羽毛
- 行為=動作（飛行、站立等）
1.2 標籤關係
雙標籤關係分為：
- 包含關係（父子）
- 並列關係（兄弟）
(1)包含關係
<!--head標籤包含title標籤--> <head> <title></title> </head>
(2)並列關係
<!--head標籤與body標籤並列-->
<head></head>
<body></body>
2. HTML基本結構
| 標籤名 | 定義 |
|---|---|
| <html></html> | html標籤 |
| <head></head> | 文件的頭部 |
| <title></title> | 文件的標題 |
| <body></body> | 文件的主體 |
<!DOCTYPE html> <!--文件型別宣告標籤--> <html lang="en"> <!--en:英語，zh-CN:中文--> <head> <!--字符集，UTF-8為萬國碼，統一使用--> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
3. HTML常用標籤
3.1 標題標籤
一個標題獨佔一行。（塊級元素）
<h1>
一級標題（字號最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
六級標題（字號最小）
</h6>
3.2 段落標籤
用於將HTML文件分割為若干段落。
特點：
- 文字在一個段落中會根據瀏覽器視窗的大小自動換行
- 段落之間有空隙
<p>
這是一個段落
</p>
3.3 換行標籤
用於強制換行。
特點：
- 單標籤
- 換行沒有像段落那樣的空隙
<br>這是換行標籤
3.4 文字格式化標籤
| 語義 | 標籤 |
|---|---|
| 加粗 | <strong></strong> |
| 傾斜 | <em></em> |
| 刪除線 | <del></del> |
| 下劃線 | <ins></ins> |
3.5 盒子標籤
用於介面佈局。
特點：
- div一行只能放一個（塊級元素）
- span一行可以放多個（行級元素）
<div>
這是大盒子
</div>
<span>這是小盒子</span>
3.6 影象標籤和路徑
(1)影象標籤
用於定義頁面中的影象。
<!--屬性與屬性之間用空格分開-->
<img src="影象的url" alt="" title="">
| 屬性 | 說明 |
|---|---|
| src | 圖片路徑（必須屬性） |
| alt | 影象不能顯示時的替換文字 |
| title | 滑鼠放到影象上顯示的提示文字 |
| width | 設定影象的寬度 |
| height | 設定影象的高度 |
| border | 設定影象的邊框粗細（在CSS中修改） |
注：影象的寬和高一般只修改其中一個，另一個會隨之調整。
(2)路徑
- 相對路徑：檔案相對於HTML頁面的位置
| 相對路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級 | src="檔名" | |
| 下一級 | / | src="同一級資料夾名稱/檔名" |
| 上一級 | ../ | src="../檔名" |
- 絕對路徑：完整的路徑名稱（一般很少用）。eg. C:\\xxx\\xxxx.jpg
注意：絕對路徑用“\”分隔，相對路徑用“/”分隔。
3.7 超連結標籤和連結分類
(1)超連結標籤
<a href="跳轉目標" target="目標視窗的彈出方式">文字或影象</a>
| 屬性 | 作用 |
|---|---|
| href | 連結目標的url（必須屬性） |
| target | 連結頁面的打方式。_self：在當前視窗開啟（預設值），_blank：在新視窗開啟 |
(2)連結分類
-
外部連結：例如http://www.bilibili.com
-
內部連結：網站內部頁面之間的相互連結，例如index.html
-
空連結：#
-
下載連結：地址裡是一個檔案或壓縮包
-
網頁元素連結：在網頁中的各種網頁元素都可以新增超連結
-
錨點連結：可以快速定位到頁面中的某個位置
-
連結：<a href="#名字"></a>
-
找到目標位置標籤，裡面新增一個id屬性，<h2 id="名字"></h2>
-
返回頂部：<a href="#"></a>
-
3.8 註釋和特殊字元
(1)註釋
<!--這是一行註釋-->
(2)特殊字元
| 特殊字元 | 描述 | 字元的程式碼 |
|---|---|---|
| 空格符 | | |
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| ￥ | 人民幣 | ¥ |
| © | 版權 | © |
| ® | 註冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| ✖ | 乘號 | × |
| ➗ | 除號 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
注：重點記住前三個。