1.1 列表类型
HTML中的列表是组织和结构化信息的重要工具。它们允许用数字或粗体点（标记）显示元素。我们将详细查看HTML中每个列表元素：<ul>、<ol>和<li>。
无序列表 (<ul>)
标签<ul>用于创建无序（标记）列表。列表元素用标记（点、圆、方形）显示。
例子：
HTML
<ul>
<li>列表的第一个元素</li>
<li>列表的第二个元素</li>
<li>列表的第三个元素</li>
</ul>
有序列表 (<ol>)
标签<ol>用于创建有序列表。列表元素用数字或字母显示。
例子：
HTML
<ol>
<li>列表的第一个元素</li>
<li>列表的第二个元素</li>
<li>列表的第三个元素</li>
</ol>
1.2 列表元素 <li>
标签<li>用于标识列表中的每个元素，无论是无序还是有序。它总是应该嵌套在<ul>或<ol>内。
如何轻松记住这些标签：
- Ordered List – 有序（编号）列表
- Unordered List – 无序（不编号）列表
- List Item – 列表元素
属性type
这个属性可以在<ul>和<ol>中使用，以改变标记或编号的类型。例如，对于<ol>可以使用值"1"、"A"、"a"、"I"、"i"，而对于 <ul>，可以是"disc"、"circle"、"square"。
<ul>的标记类型更改示例：
HTML
<ul type="square">
<li>列表的第一个元素</li>
<li>列表的第二个元素</li>
</ul>
<ol>的编号类型更改示例：
HTML
<ol type="A">
<li>列表的第一个元素</li>
<li>列表的第二个元素</li>
</ol>
属性start:
此属性仅用于<ol>以指定编号的起始数字。
例如：
HTML
<ol start="5">
<li>列表的第五个元素</li>
<li>列表的第六个元素</li>
</ol>
嵌套列表
列表可以嵌套，从而创建更复杂的结构。
嵌套列表的示例：
HTML
<ul>
<li>列表的第一个元素</li>
<ul type="circle">
<li>嵌套的第一个元素</li>
<li>嵌套的第二个元素</li>
</ul>
<li>列表的第二个元素</li>
<li>列表的第三个元素</li>
</ul>
重要!
CSS属性
list-style-type提供了比属性
type更多的标记类型。而且，属性
type被认为是过时的。
1.3 列表样式设置
可以使用CSS来设置列表样式，改变标记的颜色、标记类型和缩进。
样式设置示例：
CSS
ul.custom-list {
list-style-type: katakana; /* 日语片假名 */
color: blue; /* 文本颜色 */
}
ol.custom-list {
list-style-type: hiragana-iroha; /* 日语平假名 */
color: green; /* 文本颜色 */
}
HTML
<ul class="custom-list">
<li>列表的第一个元素</li>
<li>列表的第二个元素</li>
</ul>
<ol class="custom-list">
<li>列表的第一个元素</li>
<li>列表的第二个元素</li>
</ol>
因此，使用<ul>、<ol>和<li>有助于对内容进行结构化，并提高其在网页上的可读性。
GO TO FULL VERSION