乐趣区

关于html:前端编程之路一一HTML常用列表标签

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

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

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

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

退出移动版