巧用 HTML 列表:<ul>、<ol>、<dl>的实用指南

目录

无序列表

容器级标签

有序列表

定义列表

一个dt配很多dd

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

一个dl配多个dt

多级列表


无序列表

<ul>标签用于定义无序列表。无序列表的特点是各个列表项之间没有特定的顺序,通常以小圆点作为先导符号。所有主流浏览器都支持<ul>标签。

列表项<li>不能单独存在,必须包裹在<ul>标签内部。也就是说,<ul>的子标签只能是<li>,不能有其他元素。

浏览器会默认给无序列表添加小圆点的先导符号,但<ul>标签的主要作用并非仅仅是为文字增加小圆点,更重要的是增加无序列表的语义,让页面的结构更加清晰,便于用户和搜索引擎理解。

<ul>标签在实际应用中有很多场景,比如用作导航条。例如常见的网站导航菜单可以使用无序列表来实现,每个导航项都是一个<li>标签,包裹在<ul>中。例如:

正确示例:

html 复制代码
<ul>  
    <li>html课程</li>  
    <li>css课程</li>  
    <li>JavaScript课程</li>  
</ul>  

错误示例:

html 复制代码
<li>html课程</li>  

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

html 复制代码
<ul>    
    <h1>前端教程</h1>  
    <li>html课程</li>    
    <li>css课程</li>    
    <li>JavaScript课程</li>    
</ul>  

容器级标签

在 HTML中,<li>标签、<dt>标签以及<dd>标签都属于容器级标签,可以包裹各种文本、链接、图像等元素。

示例代码如下:

html 复制代码
<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>配合特定的样式来实现顺序的展示。

示例代码如下:

html 复制代码
<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

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

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

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

一个dl配多个dt

html 复制代码
<dl>  
    <dt>JavaScript教程</dt>  
    <dt>JavaScript作用</dt>  
    <dd>主要负责页面行为</dd>  
</dl>  

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

多级列表


示例代码如下:

html 复制代码
<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>  

运行结果:

相关推荐
逐·風43 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js