基本標籤
| 標籤 | 含義 | 說明 |
|---|---|---|
| br | 換行標籤 | 非關閉型 |
| p | 段落標籤 | 關閉型，塊級標籤，前後有明顯間隔 |
| h1、h2、h3...h6 | 標題標籤 | 按照h1到h6逐漸變小，塊級標籤，加粗顯示 |
| pre | 預格式化文本標籤 | 保留編碼的格式 |
| div | 分區標籤 | 常作用容器來使用，一般用來頁面佈局，塊級標籤 |
| span | 範圍標籤 | 默認沒有任何效果，一般設置行內的特殊樣式 |
| ol、li | 有序列表 | 有順序的項目列表 |
| ul、li | 無序列表 | 無順序的列表 |
| dl、dt、dd | 定義列表 | 對術語、圖片等進行描述定義 |
| hr | 水平線標籤 | 非關閉型 |
| img | 圖像標籤 | 非關閉型 |
其他標籤
| 標籤 | 含義 | 說明 |
|---|---|---|
| i | 斜體標籤 | italic |
| em | 強調的內容 | 在瀏覽器中顯示時一般爲斜體 |
| address | 地址 | 在瀏覽器中顯示時一般爲斜體,塊級標籤 |
| b | 加粗顯示 | bold |
| strong | 強調的內容 | 在瀏覽器中顯示一般爲加粗 |
| del | 刪除線 | delete |
| ins | 下劃線 | |
| sub | 下標 | |
| sup | 上標 | |
| bdo | 設置文本方向 | 通過屬性dir="rtl"設置文本從右到左顯示right to left |
| abbr | 設置文字縮寫 | 通過title屬性設置當屬性停留在文字上時顯示的提示信息 |
| small | 相當於當前字號減小一號 | |
| big | 相當於當前字號增加一號 |
爲了更好的語義化
頭部標籤
- meta定義網頁的摘要信息：如字符編碼、關鍵字、描述、作者等
- title定義網頁的標題
- sytle定義內部css樣式
- link引用外部css樣式
- script定義或引用腳本
- base定義基礎路徑
默認當前頁面文件所在的位置爲相對路徑的參照
有序列表
ol:orderd list
li:list item
默認使用阿拉伯數字，從1開始標記，可以通過屬性進行修改
- type屬性：設置列表的符號標記，取值:數字1(默認)、字母a或A、羅馬數字i或I
- start屬性:設置起始值，值必須是數字
無序列表
ul:unordered list
li:list item
默認使用實心圓作爲符號標記，可以通過屬性進行修改
- type屬性：設置列表前的符號標記，取值：disc實心圓（默認）、circle空心圓,square正文形、nono不顯示符號
定義列表
dl:definition list
dt:definition title
dd:definition description
水平線標籤
hr:horizontal
常用屬性
- color:顏色
兩種寫法：
顏色名稱：如red、green、blue、white、black、pink、orange等
16進制的RGB：Red、Green、Blue,用法：#RRGGBB，每個顏色的範圍是0-255，轉換爲16進製爲00-FF
如#FF0000,#00FF00,#0000FF,#FFFFFF,#000000,#CCCCCC
- size粗細，數值
- width寬度
兩種寫法
像素：絕對值（固定值）
百分比，相對值，相對於父容器寬度的百分比
- align對齊
取值：center(默認)，left,right
圖像標籤
img:image
常見圖片格式：.jpg、.png、.gif、.bmp
常見屬性：
- src:source指定圖片的路徑（來源），必須有
如果圖片與html頁面在同一個文件中，可以直接寫圖片名稱
習慣上，會將多個圖片放到統一一文件夾中，如images,此時需要在圖片名稱的前面 添加文件夾的名稱images/
- alt:當圖片無法顯示時的提示信息
- title:當鼠標停留在圖片上時顯示的提示信息
- width/height:設置圖片的寬和高
默認圖片原尺寸顯示
如果只設置其中的一個，則另一個按比例縮放
如果同時設置寬和高，可能會導致圖片變形
兩種寫法
像素：絕對值（固定值）
百分比：相對值，相對於父容器的尺寸的百分比
標籤嵌套
一個標籤中嵌套着另一個標籤
標籤不能瞎嵌套，如以下嵌套是錯誤的：<p><div></div></p>
瀏覽器渲染後顯示的頁面代碼與編碼時有所不同
瀏覽器提供的開發工具，用來幫助開發人員查看和調試頁面
如何打開：
- 在頁面中右擊-檢查/審查元素/查看元素
- 按F12
常用工具
- Elements:從瀏覽器的角度查看頁面，瀏覽器渲染頁面時的結構內容
- Console:控制檯，顯示各種警告和錯誤信息
- Network:查看網絡請求信息，瀏覽器向服務器請求了哪些資源、資源大小、加載資源花費的時間