巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南

金歌 · 2024-8-31 16:12:44

目录
无序列表
容器级标签
有序列表
定义列表
一个dt配许多dd
每一个dl里面只有一个dt和dd
一个dl配多个dt
多级列表

无序列表

        <ul>标签用于定义无序列表。无序列表的特点是各个列表项之间没有特定的次序，通常以小圆点作为先导符号。全部主流浏览器都支持<ul>标签。
        列表项<li>不能单独存在，必须包裹在<ul>标签内部。也就是说，<ul>的子标签只能是<li>，不能有其他元素。
        浏览器会默认给无序列表添加小圆点的先导符号，但<ul>标签的主要作用并非仅仅是为文字增长小圆点，更紧张的是增长无序列表的语义，让页面的结构更加清楚，便于用户和搜刮引擎理解。
        <ul>标签在实际应用中有许多场景，比如用作导航条。例如常见的网站导航菜单可以使用无序列表来实现，每个导航项都是一个<li>标签，包裹在<ul>中。例如：
        精确示例：

<ul>
<li>html课程</li>
<li>css课程</li>
<li>JavaScript课程</li>
</ul>

复制代码

错误示例：

<li>html课程</li>

复制代码

如果出现如下写法也是错误的，因为<ul>标签内部只能包罗<li>标签。例如：

<ul> <h1>前端教程</h1> <li>html课程</li> <li>css课程</li> <li>JavaScript课程</li> </ul>

复制代码

容器级标签

在 HTML中，<li>标签、<dt>标签以及<dd>标签都属于容器级标签，可以包裹各种文本、链接、图像等元素。
示例代码如下：

<ul>
<li>
<h4>html入门教程</h4>
<p>￥49.00</p>
<p>html入门教程简介</p>
</li>
<li>
<h4>css快速掌握教程</h4>
<p>￥59.00</p>
<p>css快速掌握教程简介</p>
</li>
<li>
<h4>JavaScript从入门到精通教程</h4>
<p>￥89.00</p>
<p>JavaScript从入门到精通教程简介</p>
</li>
</ul>

复制代码

有序列表

        <ol>标签定义有序列表。同样，全部主流浏览器都支持<ol>标签。
        <ol>和<ul>主要的区别在于语义不同，<ol>表示有次序的列表，而<ul>表示无次序的列表。在使用方法上，两者较为相似，<ol>里面只能有<li>，<li>必须被<ol>包裹，因为<li>是容器级标签。
        在实际应用中，<ol>的使用相对较少。如果想表达次序，许多时间人们会选择使用<ul>，并通过自定义的方式来表示次序，比如百度音乐排行榜、京东轮播图数字 1 - 5 等，大概会使用<ul>配合特定的样式来实现次序的展示。
        示例代码如下：

<ol>
<li>html零基础教程</li>
<li>css从入门到精通教程</li>
<li>JavaScript经典入门教程</li>
</ol>

复制代码

定义列表

<dl>标签定义了定义列表。在定义列表中，<dt>用于定义列表中的项目，<dd>用于描述列表中的项目。<dt>和<dd>只能在<dl>里面，即<dl>里面只能有<dt>和<dd>，并且<dt>和<dd>都是容器级标签。
定义列表的用法非常灵活，可以一个<dt>搭配多个<dd>，用于描述一个项目的多个方面；也可以拆开，让每一个<dl>里面只有一个<dt>和<dd>；甚至可以在一个<dl>中出现多个<dt>。示例代码如下：
一个dt配许多dd

<dl>
<dt>html入门教程</dt>
<dd>适合初学者学习</dd>
<dd>包含html基本骨架、文本级和容器级标签</dd>
</dl>

复制代码

每一个dl里面只有一个dt和dd

<dl>
<dt>css从入门到精通教程</dt>
<dd>主要负责页面的样式</dd>
</dl>

复制代码

一个dl配多个dt

<dl>
<dt>JavaScript教程</dt>
<dt>JavaScript作用</dt>
<dd>主要负责页面行为</dd>
</dl>

复制代码

总结：在实际应用中，<dl>标签也有特定的场景，比如京东版权信息上方的 “购物指南、配送方式” 等导航菜单，以及京东导航左侧 “全部商品分类” 每一个菜单右侧的内容等，都可以使用定义列表来实现。

多级列表

示例代码如下：

<body>
<h3>前端开发书籍</h3>
<ul>
<li>
html入门教程
<ul>
<li>h系列标签</li>
<li>p标签</li>
<li>
a标签
<ul>
<li>页面内的锚点</li>
<li>页面外的锚点</li>
</ul>
</li>
</ul>
</li>
<li>
css从入门到精通教程
<ul>
<li>css选择器</li>
<li>css清除浮动</li>
</ul>
</li>
<li>
JavaScript经典教程
<ul>
<li>for循环语句</li>
<li>if条件语句</li>
</ul>
</li>
</ul>
</body>

复制代码

运行结果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南

0 个回复

快速回复

楼主热帖

标签云