1.有序列表的type屬性
不同的type值表示不同的排序標號
<body>
<ol>
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>
<ol type="1">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>
<ol type="a">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>
<ol type="A">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>
<ol type="i">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>
<ol type="I">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京東</li>
</ol>
<ol>
<li>100</li>
<li>
<ol>
<li>201</li>
<li>202</li>
<li>203</li>
</ol>
</li>
<li>300</li>
</ol>
</body>
2.無序列表
無序列表的type屬性
<body>
? ? <ul>
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>
? ? <ul type="disc">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>
? ? <ul type="circle">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>
? ? <ul type="square">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>
? ? <ul type="none">
<li>尚學堂</li>
<li>itbaizhan</li>
<li>京東</li>
<li>阿里</li>
</ul>
? ? <ul>
<li>100</li>
<li>
<ul>
<li>201</li>
<li>202</li>
<li>203</li>
<li>204</li>
</ul>
</li>
<li>300</li>
</ul>
</body>
</html>
<ul>
<li>Xiaomi手機</li>
<li>Redmi手機</li>
<li>電視</li>
<li>筆記本</li>
</ul>
<ul>
<li><a href="https://itbaizhan.com">itbaizhan</a></li>
<li><a href="https://mi.com">小米</a></li>
<li><a href="https://jd.com">京東</a></li>
</ul>
有序無序自定義列表都可以添加快捷鍵
4。自定義列表:
可以把自定義列表理解成生活里的 “物品 + 說明書” 組合 —— 它不只是簡單列一堆東西,而是給每個東西都配上專門的解釋 / 說明,就像你買了個家電,既有 “家電名稱”(項目),又有 “家電用法”(注釋),兩者是一一對應的關系。
先看一個最直觀的例子:用自定義列表介紹 3 種水果(項目)和它們的特點(注釋),代碼和效果對應如下:
<!-- 自定義列表的核心結構:dl(列表容器)、dt(項目,即“物品”)、dd(注釋,即“說明書”) -->
<dl><!-- 第一個項目:蘋果 --><dt>蘋果</dt><!-- 蘋果的注釋:解釋它的特點 --><dd>常見水果,口感脆甜,富含維生素C,能直接吃或做沙拉。</dd><!-- 第二個項目:香蕉 --><dt>香蕉</dt><!-- 香蕉的注釋:解釋它的特點 --><dd>熱帶水果,口感軟糯,富含鉀元素,能快速補充能量。</dd><!-- 第三個項目:葡萄 --><dt>葡萄</dt><!-- 葡萄的注釋:解釋它的特點 --><dd>串狀水果,分甜、酸兩種口味,富含花青素,適合鮮食或釀葡萄酒。</dd>
</dl>
這個例子里,你能清楚看到 “項目 + 注釋” 的組合邏輯:
<dt>
?標簽就像 “商品名稱”,只寫核心的 “項目”(蘋果、香蕉、葡萄),是列表里的 “主角”;<dd>
?標簽就像 “商品說明”,專門解釋對應?<dt>
?的細節(口感、營養、用法),是 “主角的補充信息”;- 整個?
<dl>
?標簽把這些 “主角 + 補充說明” 打包成一個完整的列表,不是零散的文字堆。
如果對比無序列表(只列 “蘋果、香蕉、葡萄”,沒有解釋),你就會明白:自定義列表的核心不是 “列項目”,而是 “給每個項目配專屬注釋”,就像你記筆記時,先寫 “知識點標題”(項目),再寫 “知識點詳解”(注釋),兩者綁定在一起,看的時候能直接對應,不會混亂。