下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。

列表標籤

一、無序列表(unordered list)(雙標籤)

1、作用

給一堆內容新增無序列表語義(一個沒有先後順序整體)，列表中的條目是不分先後

2、格式

<ul>
  <li>北京</li>
  <li>上海</li>
  <li>深圳</li>
  <li>武漢</li>
</ul>
​
 

3、應用場景

1. 導航條

2. 商品列表

3. 新聞列表

4、說明

1. 這裡指的無序是指對於主體來說內容沒有先後之分

2. 瀏覽器會給無需列表自動新增先導符號但是一定一定千萬千萬要記住，ul的作用並不是給文字新增小圓點，而是增加無序列表的語義

3. 其實ul還有一個type屬性，可以修改先導符號的樣式，取值有disc、square、circle幾種，但以後樣式都是通過css來完成，所以瞭解一下就行

4. ul是一個組標籤，一定是一坨一坨的出現，也就是說li標籤不能單獨存在，必須包裹在ul裡面

5. 由於ul和li是一個整體, 所以ul裡面不推薦包裹其它標籤，永遠記住ul裡面最好只寫li標籤

6. 雖然ul中推薦只能寫li標籤, 但是li標籤是一個容器標籤, li標籤中可以新增任意標籤, 甚至可以新增ul標籤

5、應用場景

1. 新聞導航

   

2. 商品列表

   

3. 頂部導航

   

4. 底部導航

   

二、有序列表(ordered list)(雙標籤)

1、作用

給一堆內容新增有序列表語義(一個有順序整體)，列表中的條目有先後之分。

2、格式

<h4>期中考試排名</h4>
<ol>
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
    <li>隔壁老王</li>
</ol>
​
 

3、應用場景

其實ol應用場景並不多，因為能用ol做的用ul都能做

4、說明

1. ol和ul就是語義不一樣，怎麼使用都是一樣的以及注意點都一樣

2. 其實ul還有兩個常見屬性start、type屬性, 可以修改先導符號的樣式和序號

3. 但是由於樣式將來都是通過css來完成，所以瞭解一下就行

三、定義列表(definition list)(雙標籤)

1、作用

給一堆內容新增列表語義, 通過dt羅列出列表的條目，然後再通過dd給每個條目進行相應的描述

2、格式

<dl>
  <dt>dt英文definition title, 翻譯為定義標題</dt>
  <dd>dd英文definition description, 翻譯為定義描述資訊</dd>
</dl>

3、應用場景：

1. 網站底部相關資訊

2. 但凡看到一堆內容都是用於描述某一個內容的時候就要想到dl

4、說明：

1. 由於dl和dt、dd是一個整體, 所以dl裡面不推薦包裹其它標籤

2. dd和dt和li標籤一樣是容器標籤，裡面可以新增任意標籤

3. 定義列表非常靈活，可以給一個dt配置多個dd，但是最好不要出現多個dt對應一個dd，dd的語義是描述離它最近的一個dt，所以其它dt相當於沒有描述，而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述

4. 定義列表非常靈活，可以將多個dt+dd組合拆分為多個dl

5. dt內不能使用h1-h6標籤，也就是說，dt不能放標題標籤如h1、h2、h3、h4等

5、應用截圖

1. 天貓

   

2. 京東

   

3. 公司簡介

   

下一篇：Web前端-Html部分筆記（四）