WEB前端：(4)HTML5③列表

最新推荐文章于 2023-11-27 09:48:00 发布

原创最新推荐文章于 2023-11-27 09:48:00 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML中的各种列表类型，包括有序列表、无序列表及自定义列表，并展示了如何在列表条目中嵌套超链接。通过实例演示了不同列表的应用场景及其在网页布局中的作用。

@有序列表order list

<h3>有序列表</h3>

<!--有序列表-->
<ol type="1">
    <!--列表条目-->
    <li>学习html</li>
    <li>学习css</li>
    <li>学习javascript</li>
</ol>

里面的条目：<li></li>

@无序列表unorder list

<h3>无序列表</h3>
<!--type squre方块 disc原点 circle圆圈-->
<ul type="circle">
    <li>新闻标题一</li>
    <li>新闻标题一</li>
    <li>新闻标题一</li>
    <li>新闻标题一</li>
</ul>

@列表条目中嵌套超链接

<h3>列表条目中嵌套超链接</h3>
<ul>
    <li><a href="http://www.baidu.com"><img src="../../ztest/images/pic2x.jpg"></a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
    <li><a href="http://www.baidu.com">新闻标题</a></li>
</ul>

点击图片或者新闻标题跳转到百度网页。

@自定义列表：展示目录大纲的时候非常适用

<h3>自定义列表</h3>
<dl>
    <!--列表名称-->
    <dh>前端三大利器</dh>

    <!--一个dt统帅若干个dd-->
    <dt>html</dt>
    <dd><a href="http://www.baidu.com">负责页面的结构</a></dd>
    <dd>负责页面的结构</dd>
    <dd>负责页面的结构</dd>
</dl>

<dl></dl> :自定义列表
<dh></dh>: 表头
<dt></dt>: 一个dt代表局部标题
<dd></dd> :<dd>代表标题下的内容