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=https://www.cnblogs.com/chiYiN-zZZ/p/"影像的url" alt="" title="">
| 屬性 | 說明 |
|---|---|
| src | 圖片路徑（必須屬性） |
| alt | 影像不能顯示時的替換文本 |
| title | 滑鼠放到影像上顯示的提示文本 |
| width | 設定影像的寬度 |
| height | 設定影像的高度 |
| border | 設定影像的邊框粗細（在CSS中修改） |
注：影像的寬和高一般只修改其中一個，另一個會隨之調整，
(2)路徑
- 相對路徑：檔案相對于HTML頁面的位置
| 相對路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級 | src=https://www.cnblogs.com/chiYiN-zZZ/p/"檔案名" | |
| 下一級 | / | src=https://www.cnblogs.com/chiYiN-zZZ/p/"同一級檔案夾名稱/檔案名" |
| 上一級 | ../ | src=https://www.cnblogs.com/chiYiN-zZZ/p/"../檔案名" |
- 絕對路徑：完整的路徑名稱（一般很少用），eg. C:\\xxx\\xxxx.jpg
注意：絕對路徑用“\”分隔，相對路徑用“/”分隔，
3.7 超鏈接標簽和鏈接分類
(1)超鏈接標簽
<a href=https://www.cnblogs.com/chiYiN-zZZ/p/"跳轉目標" target="目標視窗的彈出方式">文本或影像
| 屬性 | 作用 |
|---|---|
| href | 鏈接目標的url（必須屬性） |
| target | 鏈接頁面的打方式，_self：在當前視窗打開（默認值），_blank：在新視窗打開 |
(2)鏈接分類
-
外部鏈接：例如http://www.bilibili.com
-
內部鏈接：網站內部頁面之間的相互鏈接，例如index.html
-
空鏈接：#
-
下載鏈接：地址里是一個檔案或壓縮包
-
網頁元素鏈接：在網頁中的各種網頁元素都可以添加超鏈接
-
錨點鏈接：可以快速定位到頁面中的某個位置
-
鏈接：<a href=https://www.cnblogs.com/chiYiN-zZZ/p/"#名字">
-
找到目標位置標簽，里面添加一個id屬性，<h2 id="名字"></h2>
-
回傳頂部：<a href=https://www.cnblogs.com/chiYiN-zZZ/p/"#">
-
3.8 注釋和特殊字符
(1)注釋
<!--這是一行注釋-->
(2)特殊字符
| 特殊字符 | 描述 | 字符的代碼 |
|---|---|---|
| 空格符 | | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和號 | & |
| ￥ | 人民幣 | ¥ |
| ? | 著作權 | © |
| ? | 注冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| ? | 乘號 | × |
| ? | 除號 | ÷ |
| 2 | 平方 | ² |
| 3 | 立方 | ³ |
注：重點記住前三個，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4010.html
標籤：Html/Css
上一篇：CSS基礎-03
下一篇：HTML標簽區別