HTML文档的列表标签是什么？如何运行HTML文件？
对于刚接触前端开发的初学者来说，理解HTML的基础标签以及如何查看代码效果是学习的第一步。本文将详细解析HTML文档中常用的列表标签，并手把手教你如何运行一个HTML文件。
一、HTML文档的列表标签是什么？
在HTML中，列表标签用于组织和展示具有逻辑关联的信息。HTML提供了三种主要的列表类型：无序列表、有序列表和定义列表。
1. 无序列表 (<ul>)
无序列表用于表示列表项之间没有先后顺序的情况，列表项前通常会显示默认的实心圆点（可以通过CSS修改）。它由外层标签 <ul> (Unordered List) 和内层标签 <li> (List Item) 组成。
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
2. 有序列表 (<ol>)
有序列表用于表示列表项之间存在先后顺序的情况，列表项前会自动显示数字序号。它由外层标签 <ol> (Ordered List) 和内层标签 <li> 组成。
<ol> <li>第一步：打开编辑器</li> <li>第二步：编写代码</li> <li>第三步：保存文件</li> </ol>
3. 定义列表 (<dl>)
定义列表用于表示术语及其解释说明的列表。它包含三个标签：<dl> (Definition List) 定义列表容器，<dt> (Definition Term) 定义术语，<dd> (Definition Description) 定义对术语的描述。
<dl> <dt>HTML</dt> <dd>超文本标记语言，用于构建网页结构。</dd> <dt>CSS</dt> <dd>层叠样式表，用于美化网页样式。</dd> </dl>
4. 列表的嵌套
在实际开发中，列表经常需要嵌套使用，以实现多级菜单或复杂的层级结构。只需在一个 <li> 标签内部再包含一个新的列表标签即可。
<ul> <li>水果 <ol> <li>苹果</li> <li>香蕉</li> </ol> </li> <li>蔬菜 <ul> <li>西红柿</li> <li>黄瓜</li> </ul> </li> </ul>
二、如何运行HTML文件？
编写完HTML代码后，你需要知道如何在浏览器中查看它的运行效果。以下是运行HTML文件的几种常见方法：
方法一：直接双击用浏览器打开（最简单）
这是最基础、最快捷的方式，适合初学者查看静态页面效果。
打开系统自带的记事本或任意文本编辑器。
编写你的HTML代码。
将文件保存，文件名后缀必须为
.html或.htm（例如：index.html），注意保存时将编码设置为UTF-8以防止中文乱码。找到保存好的文件，直接双击它，系统会自动调用默认浏览器打开并运行该HTML文件。
方法二：使用代码编辑器的实时预览功能
现代前端开发通常使用专业的代码编辑器（如VS Code）。借助编辑器插件，可以实现代码修改后实时在浏览器中刷新的效果。
在VS Code中安装
Live Server插件。打开你的HTML文件。
在编辑区点击鼠标右键，选择
Open with Live Server。此时浏览器会自动打开，并且当你修改代码并保存时，页面会自动刷新更新。
方法三：通过本地Web服务器运行（进阶）
如果你的HTML页面中引入了外部的数据文件（如JSON），或者使用了某些需要服务器环境支持的API（如Ajax请求），直接双击打开文件（协议为file:///）会因为跨域安全策略而报错，此时需要通过本地服务器运行。
在项目根目录下启动本地服务器（可以使用Node.js的http-server、Python的SimpleHTTPServer等）。
服务器启动后，终端会显示一个本地地址，通常是
http://localhost:端口号。打开浏览器，在地址栏输入对应的地址即可运行。当你将网页部署到真实的网络服务器后，就可以通过规范的网址格式来访问运行它了，例如访问
https://www.ipipp.com/index.html。
三、综合示例
下面是一个完整的HTML文件示例，它包含了列表标签，你可以将以下代码复制并保存为 list-demo.html，然后使用上述的任意方法运行它。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML列表示例</title> </head> <body> <h1>我的学习计划</h1> <h2>学习科目（无序列表）</h2> <ul> <li>HTML基础</li> <li>CSS样式</li> <li>JavaScript编程</li> </ul> <h2>学习步骤（有序列表）</h2> <ol> <li>了解HTML标签语义</li> <li>掌握CSS布局技巧</li> <li>学习JS交互逻辑</li> </ol> </body> </html>
掌握了HTML列表标签的使用以及运行HTML文件的多种途径，你就可以顺利地迈出前端开发的第一步，逐步构建出结构清晰、逻辑严密的网页了。