列表標簽 無序列表: 無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。 無序列表使用 <ul> 標簽 <ul> <li>劉備</li> <li>關羽</li> <li>孫尚香</li> <li>諸葛亮</li> <li>劉禪</li> </ul> 有序列表: 有序列表也是一 ...
列表標簽
- 無序列表:
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。
無序列表使用 <ul> 標簽
<ul>
<li>劉備</li>
<li>關羽</li>
<li>孫尚香</li>
<li>諸葛亮</li>
<li>劉禪</li>
</ul>
- 有序列表:
有序列表也是一列項目,列表項目使用數字進行標記。 有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。
列表項使用數字來標記。
<ol>
<li>打開冰箱門</li>
<li>把大象裝進去</li>
<li>關上冰箱門</li>
</ol>
-
自定義列表:
自定義列表不僅僅是一列項目,而是項目及其註釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dt>蔬菜</dt>
<dd>大白菜</dd>
</dl>
- 列表嵌套: 有序和無序可以任意無限嵌套
圖片標簽img
- 支持的圖片格式: jpg/jpeg, png, gif
- src圖片路徑: 相對路徑:訪問站內資源時使用width/height:設置圖片的寬高 兩種賦值方式:1. 像素 2. 上級元素的百分比 如果只設置寬度,高度會等比例縮放
- 和頁面同級目錄: 直接寫圖片名
- 在頁面的上級:../圖片名
- 在頁面的下級: 文件夾名/圖片名 絕對路徑:訪問站外資源時使用,訪問站外資源又稱為圖片盜鏈(好處:可以節省本站資源,壞處:有可能會找不到圖片)
- title: 滑鼠在圖片上懸停時顯示的文本
- alt: 圖片不能正常顯示時顯示的文本
超鏈接a
- href: 資源路徑, 使用方式類似src,支持相對路徑和絕對路徑, 如果訪問的資源瀏覽器支持瀏覽則直接瀏覽如果瀏覽器不支持瀏覽則觸發下載
- 圖片超鏈接: 用a標簽包裹圖片就是圖片超鏈接
- 頁面內部跳轉: 在目的地標簽裡面添加id="xxx", 在點擊的超鏈接中href="#xxx" 即可跳轉到頁面中id為xxx的元素位置
分區標簽
- 分區標簽可以理解成是一個容器,對多個相關性的標簽進行統一管理
- 常見的分區標簽div和span
- div:塊級分區元素,特點是獨占一行
- span:行內分區元素,特點是共占一行
- html5標準中新增了分區標簽,作用和div是一樣的,主要是為了提高代碼的可讀性,包括:header頭,footer腳,article正文,nav導航,section區域
<header></header>
<article></article>或<section></section>
<footer></footer>