HTML简介

HTML语法基础

HTML文档结构

HTML标签属性

文档类型定义

HTML语法规则

文本基础

标题与段落

文本格式化

列表

链接

图像

表格

多媒体

表单基础

表单进阶

表单验证

表单样式

语义化标签

HTML5新特性

HTML5文本语义

Canvas绘图

SVG图形

Web存储

IndexedDB

Web Workers

地理位置API

拖放API

历史记录API

剪贴板API

拖放API中级

WebSockets

通知API

全屏API

剪贴板API进阶

文件API

拖放API进阶

CSS集成基础

CSS选择器

CSS盒模型

CSS布局技术

响应式设计

代码规范

可访问性

Web安全

隐私保护

个人网站项目

博客系统项目

电商网站项目

社交平台项目

开发工具

版本控制

包管理器

构建工具

Web Components

PWA渐进式应用

WebAssembly

性能优化

Web发展趋势

AI与Web

Web安全未来

Web技术展望

列表

列表概述

列表是HTML中用于组织相关内容的重要元素，使信息结构清晰、易于阅读。

东巴文（db-w.cn） 认为：列表是网页内容组织的基石，合理使用列表可以提升用户体验和SEO效果。

列表类型

列表分类

东巴文列表分类：

列表类型	标签	说明	使用场景
无序列表	`<ul>`	项目符号列表	导航、特性列表
有序列表	`<ol>`	编号列表	步骤、排名
定义列表	`<dl>`	定义列表	术语解释、键值对
嵌套列表	组合使用	多级列表	多级导航、目录

无序列表

基本语法

<ul>标签创建无序列表，<li>标签定义列表项。

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

东巴文说明：

默认显示实心圆点（•）
列表项无先后顺序
适用于并列关系的内容

无序列表类型

通过CSS的list-style-type属性可以改变项目符号：

<style>
    .disc { list-style-type: disc; }      /* 实心圆点 */
    .circle { list-style-type: circle; }  /* 空心圆点 */
    .square { list-style-type: square; }  /* 实心方块 */
    .none { list-style-type: none; }      /* 无符号 */
</style>

<ul class="disc">
    <li>实心圆点（默认）</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

<ul class="circle">
    <li>空心圆点</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

<ul class="square">
    <li>实心方块</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

<ul class="none">
    <li>无符号</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

无序列表使用场景

东巴文使用场景：

<!-- 导航菜单 -->
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/courses">课程</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
    </ul>
</nav>

<!-- 特性列表 -->
<article>
    <h2>东巴文特色</h2>
    <ul>
        <li>专业的编程教程</li>
        <li>丰富的实例代码</li>
        <li>互动式学习体验</li>
        <li>实时在线练习</li>
    </ul>
</article>

<!-- 功能列表 -->
<section>
    <h2>主要功能</h2>
    <ul>
        <li>在线编程环境</li>
        <li>代码实时预览</li>
        <li>项目实战训练</li>
        <li>学习进度跟踪</li>
    </ul>
</section>

有序列表

基本语法

<ol>标签创建有序列表，<li>标签定义列表项。

<ol>
    <li>学习HTML基础</li>
    <li>学习CSS样式</li>
    <li>学习JavaScript</li>
    <li>实战项目练习</li>
</ol>

东巴文说明：

默认显示阿拉伯数字（1, 2, 3...）
列表项有先后顺序
适用于步骤、流程、排名

有序列表属性

`type`属性

type属性指定编号类型：

<!-- 数字编号（默认） -->
<ol type="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- 大写字母 -->
<ol type="A">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- 小写字母 -->
<ol type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- 大写罗马数字 -->
<ol type="I">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- 小写罗马数字 -->
<ol type="i">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

东巴文type属性值：

属性值	说明	示例
`1`	数字编号（默认）	1, 2, 3...
`A`	大写字母	A, B, C...
`a`	小写字母	a, b, c...
`I`	大写罗马数字	I, II, III...
`i`	小写罗马数字	i, ii, iii...

`start`属性

start属性指定起始编号：

<ol start="5">
    <li>第五项</li>
    <li>第六项</li>
    <li>第七项</li>
</ol>

<ol type="A" start="3">
    <li>第三项（C）</li>
    <li>第四项（D）</li>
    <li>第五项（E）</li>
</ol>

`reversed`属性

reversed属性使列表倒序排列：

<ol reversed>
    <li>第三项</li>
    <li>第二项</li>
    <li>第一项</li>
</ol>

有序列表使用场景

东巴文使用场景：

<!-- 步骤说明 -->
<article>
    <h2>如何学习HTML</h2>
    <ol>
        <li>了解HTML基本概念</li>
        <li>学习HTML标签语法</li>
        <li>掌握常用HTML标签</li>
        <li>实践编写HTML页面</li>
        <li>深入学习HTML5特性</li>
    </ol>
</article>

<!-- 操作流程 -->
<section>
    <h2>注册流程</h2>
    <ol>
        <li>访问东巴文官网（db-w.cn）</li>
        <li>点击"注册"按钮</li>
        <li>填写注册信息</li>
        <li>验证邮箱地址</li>
        <li>完成注册，开始学习</li>
    </ol>
</section>

<!-- 排名列表 -->
<article>
    <h2>最受欢迎的课程</h2>
    <ol>
        <li>HTML基础教程</li>
        <li>CSS样式设计</li>
        <li>JavaScript入门</li>
        <li>Python编程</li>
        <li>React前端框架</li>
    </ol>
</article>

定义列表

基本语法

<dl>标签创建定义列表，<dt>定义术语，<dd>定义描述。

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language，超文本标记语言</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets，层叠样式表</dd>
    
    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于网页交互</dd>
</dl>

东巴文说明：

<dl>：定义列表容器
<dt>：定义术语（Definition Term）
<dd>：定义描述（Definition Description）
<dd>默认有缩进

定义列表使用场景

东巴文使用场景：

<!-- 术语解释 -->
<article>
    <h2>HTML术语表</h2>
    <dl>
        <dt>标签</dt>
        <dd>HTML的基本组成单位，用于标记内容</dd>
        
        <dt>属性</dt>
        <dd>为标签提供附加信息</dd>
        
        <dt>元素</dt>
        <dd>标签及其内容的整体</dd>
    </dl>
</article>

<!-- 键值对信息 -->
<section>
    <h2>课程信息</h2>
    <dl>
        <dt>课程名称</dt>
        <dd>HTML基础教程</dd>
        
        <dt>讲师</dt>
        <dd>东巴文教研团队</dd>
        
        <dt>时长</dt>
        <dd>20小时</dd>
        
        <dt>难度</dt>
        <dd>初级</dd>
    </dl>
</section>

<!-- 问答列表 -->
<article>
    <h2>常见问题</h2>
    <dl>
        <dt>什么是HTML？</dt>
        <dd>HTML是构建网页的基础语言，使用标签来描述网页结构。</dd>
        
        <dt>如何学习HTML？</dt>
        <dd>建议从基础标签开始学习，多动手实践，逐步掌握各种标签的用法。</dd>
        
        <dt>东巴文是什么？</dt>
        <dd>东巴文（db-w.cn）是一个专业的编程学习平台，提供优质的编程教程和实践环境。</dd>
    </dl>
</article>

多个描述

一个术语可以有多个描述：

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dd>超文本标记语言</dd>
    <dd>用于构建网页结构</dd>
</dl>

多个术语

多个术语可以共享一个描述：

<dl>
    <dt>图片</dt>
    <dt>图像</dt>
    <dd>使用&lt;img&gt;标签插入，通过src属性指定路径</dd>
</dl>

嵌套列表

基本语法

列表可以嵌套使用，形成多级列表：

<ul>
    <li>前端技术
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端技术
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

东巴文说明：

嵌套列表必须包含在<li>标签内
可以多层嵌套
不同类型列表可以混合嵌套

嵌套列表示例

东巴文嵌套列表示例：

<!-- 多级导航 -->
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li>课程
            <ul>
                <li><a href="/html">HTML教程</a></li>
                <li><a href="/css">CSS教程</a></li>
                <li><a href="/javascript">JavaScript教程</a>
                    <ul>
                        <li><a href="/js-basic">基础语法</a></li>
                        <li><a href="/js-dom">DOM操作</a></li>
                        <li><a href="/js-advanced">高级特性</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="/about">关于</a></li>
    </ul>
</nav>

<!-- 目录结构 -->
<article>
    <h2>HTML教程目录</h2>
    <ol>
        <li>HTML基础
            <ol>
                <li>HTML简介</li>
                <li>HTML语法</li>
                <li>HTML文档结构</li>
            </ol>
        </li>
        <li>HTML标签
            <ol>
                <li>文本标签</li>
                <li>列表标签</li>
                <li>表格标签</li>
            </ol>
        </li>
        <li>HTML表单
            <ol>
                <li>表单基础</li>
                <li>表单控件</li>
                <li>表单验证</li>
            </ol>
        </li>
    </ol>
</article>

<!-- 混合嵌套 -->
<section>
    <h2>学习路径</h2>
    <ol>
        <li>前端基础
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>
        <li>前端框架
            <ul>
                <li>React</li>
                <li>Vue</li>
                <li>Angular</li>
            </ul>
        </li>
    </ol>
</section>

列表样式

CSS列表属性

东巴文CSS列表属性：

属性	说明	值
`list-style-type`	列表符号类型	disc, circle, square, none等
`list-style-position`	符号位置	inside, outside
`list-style-image`	自定义符号	url()
`list-style`	简写属性	以上三个的组合

列表样式示例

<style>
    /* 自定义符号 */
    .custom-marker {
        list-style-image: url('marker.png');
    }
    
    /* 符号位置 */
    .inside {
        list-style-position: inside;
    }
    
    .outside {
        list-style-position: outside;
    }
    
    /* 无符号列表 */
    .no-marker {
        list-style: none;
        padding: 0;
    }
    
    /* 自定义样式 */
    .custom-list {
        list-style: none;
        padding-left: 20px;
    }
    
    .custom-list li::before {
        content: "✓ ";
        color: #4CAF50;
        font-weight: bold;
    }
</style>

<ul class="custom-marker">
    <li>自定义符号列表</li>
    <li>使用图片作为符号</li>
</ul>

<ul class="inside">
    <li>符号在内部</li>
    <li>符号属于内容的一部分</li>
</ul>

<ul class="outside">
    <li>符号在外部</li>
    <li>符号在内容区域外</li>
</ul>

<ul class="no-marker">
    <li>无符号列表</li>
    <li>常用于导航菜单</li>
</ul>

<ul class="custom-list">
    <li>自定义样式列表</li>
    <li>使用CSS伪元素</li>
</ul>

列表最佳实践

东巴文列表法则

法则1：选择合适的列表类型

<!-- ✅ 推荐：无序列表用于并列内容 -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- ✅ 推荐：有序列表用于步骤 -->
<ol>
    <li>第一步：学习HTML</li>
    <li>第二步：学习CSS</li>
    <li>第三步：学习JavaScript</li>
</ol>

<!-- ✅ 推荐：定义列表用于术语解释 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
</dl>

法则2：语义化使用列表

<!-- ✅ 推荐：导航使用列表 -->
<nav>
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/courses">课程</a></li>
    </ul>
</nav>

<!-- ❌ 不推荐：使用div模拟列表 -->
<nav>
    <div><a href="/">首页</a></div>
    <div><a href="/courses">课程</a></div>
</nav>

法则3：合理嵌套列表

<!-- ✅ 推荐：正确的嵌套 -->
<ul>
    <li>前端
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>

<!-- ❌ 不推荐：错误的嵌套 -->
<ul>
    <li>前端</li>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
</ul>

法则4：避免空列表

<!-- ❌ 不推荐：空列表 -->
<ul>
</ul>

<!-- ✅ 推荐：有内容的列表 -->
<ul>
    <li>内容</li>
</ul>

学习检验

知识点测试

问题1：以下哪个标签用于创建有序列表？

A. <ul> B. <ol> C. <dl> D. <li>

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：<ol>标签用于创建有序列表，<ul>用于无序列表，<dl>用于定义列表，<li>是列表项标签。

</details>

问题2：定义列表中，哪个标签用于定义术语？

A. <dl> B. <dt> C. <dd> D. <li>

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：<dt>标签用于定义术语（Definition Term），<dd>用于定义描述（Definition Description），<dl>是定义列表容器。

</details>

实践任务

任务：创建一个包含以下内容的文档：

一个无序列表（至少3项）
一个有序列表（至少3项，使用字母编号）
一个定义列表（至少2个术语）
一个嵌套列表（至少2层）

<details> <summary>点击查看参考答案</summary>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表示例 - 东巴文</title>
</head>
<body>
    <article>
        <h1>列表示例</h1>
        
        <h2>无序列表</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        
        <h2>有序列表（字母编号）</h2>
        <ol type="A">
            <li>学习HTML基础</li>
            <li>学习CSS样式</li>
            <li>学习JavaScript交互</li>
        </ol>
        
        <h2>定义列表</h2>
        <dl>
            <dt>HTML</dt>
            <dd>HyperText Markup Language，超文本标记语言</dd>
            
            <dt>CSS</dt>
            <dd>Cascading Style Sheets，层叠样式表</dd>
        </dl>
        
        <h2>嵌套列表</h2>
        <ul>
            <li>前端技术
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </li>
            <li>后端技术
                <ul>
                    <li>Python</li>
                    <li>Java</li>
                    <li>Node.js</li>
                </ul>
            </li>
        </ul>
        
        <footer>
            <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
        </footer>
    </article>
</body>
</html>

</details>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！

上一章：文本格式化

下一章：链接

列表

列表概述

列表类型

列表分类

无序列表

基本语法

无序列表类型

无序列表使用场景

有序列表

基本语法

有序列表属性

type属性

start属性

reversed属性

有序列表使用场景

定义列表

基本语法

定义列表使用场景

多个描述

多个术语

嵌套列表

基本语法

嵌套列表示例

列表样式

CSS列表属性

列表样式示例

列表最佳实践

东巴文列表法则

法则1：选择合适的列表类型

法则2：语义化使用列表

法则3：合理嵌套列表

法则4：避免空列表

学习检验

知识点测试

实践任务

`type`属性

`start`属性

`reversed`属性