列表的創(chuàng)建過程
創(chuàng)建一個HTML列表需要兩個元素哎壳,這兩個元素結合使用就可以創(chuàng)建一個HTML列表颊埃。
第一個元素用來標記列表項,第二個元素決定你創(chuàng)建的列表類型:有序還是無序亭罪。
- 第一步:
把每個列表項目放到一個< li>元素中
把每個列表項目放到各自的< li>元素中創(chuàng)建列表复哆。這意味著把內容放在< li>和< /li>之間欣喧。
<li>我是一個列表項目<li>
- 第二步
用< ul>和< ol>封裝列表元素。
如果使用< ul>封裝列表元素梯找,則列表為無序列表唆阿;如果使用< ol>封裝列表元素,則列表為有序列表锈锤。
無序列表:
<ul>
<li>Javascript</li>
<li>Java</li>
<ul>
有序列表:
<ol>
<li>第一天</li>
<li>第二天</li>
</ol>
運行結果:
<ul> <li>Javascript</li> <li>Java</li> <ul> <ol> <li>第一天</li> <li>第二天</li> </ol>
列表的嵌套使用
在制作列表的時有時候需要也個列表嵌套使用驯鳖,比如:目錄
列表在嵌套創(chuàng)建時可以在有序列表中嵌套無序列表,也可以在無序列表中嵌套有序列表久免。
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
</ol>
</ul>
運行結果:
<ul> <li>JavaScript</li> <ol> <li>第一章</li> <ul> <li>const</li> <li>let</li> </ul> </ol></ul>
列表的使用注意事項
- < ol>和< li>必須一起使用嗎?
必須一起使用浅辙,它們唇齒相依,缺一不可阎姥。 - 我們可以在< ol>或< ul>中添加其他元素或文字嗎记舆?
不行,< ol>和< ul>的誕生只是為了配合< li>的使用丁寄。 - 列表有有序列表和無序列表氨淌,還有其他的類型嗎?
還有自定義列表伊磺,列表中的每個項目都有一個限項< dt>和一個描述< dd>。
自定義列表示例:
<dl>
<dt>HTML</dt>
<dd>HTML 是用來描述網頁內容的一種語言删咱。全稱超文本標記語言 (Hyper Text Markup Language)</dd>
<dt>JavaScript</dt>
<dd>JavaScript屑埋,一種高級編程語言</dd>
</dl>
運行結果:
<dl> <dt>HTML</dt> <dd>HTML 是用來描述網頁內容的一種語言。全稱超文本標記語言 (Hyper Text Markup Language)</dd> <dt>JavaScript</dt><dd>JavaScript痰滋,一種高級編程語言</dd>
</dl>