[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并列作为列表的子元素，后果浏览器辨认出了我“”想要的“”后果，这是不可取的。

其实你写一些其余标签，它也能显示进去，尽管浏览器能辨认，然而最好别这么写。这是格调，标准问题。

就如同人与人相处，都讲究礼貌待人，然而总有那么些人不是那么好相处，能够吗？如同也没什么不能够。然而礼貌总是好的。

所以最好依照个别标准、规定书写，代码写多了，格调和标准是很重要的，很重要的，很重要的。