共计 2632 个字符，预计需要花费 7 分钟才能阅读完成。
[HTML 罕用列表标签]()
关注我，不迷路~
罕用列表标签
在书写 HTML 文档时，遇到雷同类型的内容，须要思考用列表来实现（导航、排名、相干文章等），
通常状况下应用的列表有三种，有序列表、无序列表和自定义列表。
一、有序列表 ol
有序列表：有肯定工夫、先后、高下等程序，如排名、热度，
ol，order list
只有一个类型的子元素
li，list item
搜寻热点
<!-- 默认排序款式 -->
<ol>
<li>HTC 区块链手机 </li>
<li> 军运会奖牌榜第一 </li>
<li> 切尔西 1 - 0 纽卡 </li>
<li> 微信钱包银行储蓄 </li>
<li> 小学生偷开奥迪 </li>
</ol>
<!-- 按大写字母排序 -->
<ol type="A">
<li>HTC 区块链手机 </li>
<li> 军运会奖牌榜第一 </li>
<li> 切尔西 1 - 0 纽卡 </li>
<li> 微信钱包银行储蓄 </li>
<li> 小学生偷开奥迪 </li>
</ol>
<!-- 按小写字母排序 -->
<ol type="a">
<li>HTC 区块链手机 </li>
<li> 军运会奖牌榜第一 </li>
<li> 切尔西 1 - 0 纽卡 </li>
<li> 微信钱包银行储蓄 </li>
<li> 小学生偷开奥迪 </li>
</ol>
<!-- 按大写罗马数字排序 -->
<ol type="I">
<li>HTC 区块链手机 </li>
<li> 军运会奖牌榜第一 </li>
<li> 切尔西 1 - 0 纽卡 </li>
<li> 微信钱包银行储蓄 </li>
<li> 小学生偷开奥迪 </li>
</ol>
<!-- 按小写罗马数字排序 -->
<ol type="i">
<li>HTC 区块链手机 </li>
<li> 军运会奖牌榜第一 </li>
<li> 切尔西 1 - 0 纽卡 </li>
<li> 微信钱包银行储蓄 </li>
<li> 小学生偷开奥迪 </li>
</ol>
二、无序列表 ul
无序列表：类别雷同，但没有具体的程序，个别用于导航栏、相干资，
ul，unorder list
只有一个类型的子元素
li，list item
相干资讯
<!-- 以下单词内容批量随机生成无意义 -->
<!-- 和不设置 type 一样，默认前置符号 -->
<ul type="disc">
<li>Temporibus asperiores incidunt laborum.</li>
<li>Odit repellat placeat blanditiis!</li>
<li>Sit ipsam error consequatur.</li>
<li>Deserunt beatae molestiae assumenda.</li>
<li>Reiciendis aut deserunt soluta?</li>
</ul>
<!-- 革除前置符号 -->
<ul type="none">
<li>Lorem ipsum dolor sit.</li>
<li>Illo aliquid consequatur unde?</li>
<li>Est sequi quia nulla.</li>
<li>Voluptate enim officiis quas.</li>
<li>Iusto, et. Eos, nam.</li>
</ul>
<!-- 设置空心圆符号 -->
<ul type="circle">
<li>Maxime incidunt temporibus mollitia?</li>
<li>Reprehenderit optio quibusdam ad.</li>
<li>Natus labore impedit placeat?</li>
<li>Tenetur rerum illum repellat!</li>
<li>Ipsum officia laudantium distinctio!</li>
</ul>
<!-- 设置实心方块符号 -->
<ul type="square">
<li>Veritatis id voluptatem vitae.</li>
<li>Accusamus corrupti voluptate officiis?</li>
<li>Exercitationem voluptatibus alias quod.</li>
<li>Aut cumque ipsa dignissimos.</li>
<li>Distinctio commodi eaque soluta?</li>
</ul>
三、自定义列表 dl
自定义列表：个别用于名词解释，用的蛮少的，
dl，defined list
dt，示意关键字（词）
dd，示意对 dt 的形容内容
名词解释
<dl>
<dt> 计算机
<dd>Lorem, ipsum dolor.</dd>
</dt>
<dt>CPU
<dd>Quasi, aut beatae.</dd>
</dt>
<dt> 主板
<dd>Quam, assumenda fugit.</dd>
</dt>
</dl>
<dl>
<dt> 计算机 </dt>
<dd>Lorem, ipsum dolor.</dd>
<dt>CPU </dt>
<dd>Quasi, aut beatae.</dd>
<dt> 主板 </dt>
<dd>Quam, assumenda fugit.</dd>
</dl>两种一样的哟，都意识
四、列表嵌套
不论是有序无序还是自定义列表，列表项外部都能够应用段落、换行符、图片、链接以及其余列表等等。
应用其余列表，就是列表嵌套
到底有序套无序还是无序套有序，甚至互相套来套去 … 就看你喜爱和需要了。
列表嵌套
<ul>
<li> 咖啡 </li>
<ol type="a">
<li> 红茶 </li>
<li> 绿茶 </li>
</ol>
<li> 茶
<ol type="A">
<li> 红茶 </li>
<li> 绿茶 </li>
</ol>
</li>
<li> 牛奶
<ul type="circle">
<li> 酸奶 </li>
<li> 纯牛奶 </li>
</ul>
</li>
</ul></pre>
五、总结
基本上罕用就这三个罕用的列表，还有目录列表之类，性能反复，慢慢就不必了。列表后面符号也能够换成图标小图片，不过要依赖 CSS 帮忙了。
下面说过 ol 或者 ul 只有一个子元素 li，然而最初嵌套的时候，我用了一个 ol 和 li 并列作为列表的子元素，后果浏览器辨认出了我“”想要的“”后果，这是不可取的。
其实你写一些其余标签，它也能显示进去，尽管浏览器能辨认，然而最好别这么写。这是格调，标准问题。
就如同人与人相处，都讲究礼貌待人，然而总有那么些人不是那么好相处，能够吗？如同也没什么不能够。然而礼貌总是好的。
所以最好依照个别标准、规定书写，代码写多了，格调和标准是很重要的，很重要的，很重要的。