列表

HTML 教程 · 第 7 章 · 8 次浏览

列表用来组织有并列或顺序关系的内容。HTML 有三种列表：无序列表 <ul>（圆点）、有序列表 <ol>（数字）、自定义列表 <dl>（术语与说明）。列表项统一用 <li>。

无序列表与有序列表

<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

<ol>
    <li>第一步：安装编辑器</li>
    <li>第二步：新建 html 文件</li>
</ol>

什么时候用哪种：顺序重要（步骤、排行、时间线）用 ol，顺序无关（属性列表、导航、菜单）用 ul。

ol 的常用属性

属性	作用	示例
type	编号样式	type="a" 显示 a、b、c；type="i" 显示罗马数字
start	起始编号	start="3" 从 3 开始
reversed	倒序编号	reversed

嵌套列表

列表可以嵌套，子列表放在 <li> 里面，浏览器会自动缩进并换一种项目符号：

<ul>
    <li>前端
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>后端</li>
</ul>

自定义列表 dl

<dl> 用于"术语 + 描述"结构，<dt> 是术语，<dd> 是说明，适合做 FAQ、术语表、键值对：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，定义网页结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，定义网页外观</dd>
</dl>

列表的样式控制

列表的项目符号（圆点、数字）可以用 CSS 的 list-style 属性控制：list-style: none 去掉符号（导航菜单常用），list-style: square 改成方块等。注意：语义上该用列表的地方（导航、菜单、步骤）就老老实实用列表标签，去掉符号用 CSS，不要用一堆 div 拼。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表示例</title>
</head>
<body>
    <h2>无序列表</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <h2>有序列表</h2>
    <ol type="1" start="1">
        <li>安装编辑器</li>
        <li>编写代码</li>
        <li>浏览器预览</li>
    </ol>
    <h2>嵌套列表</h2>
    <ul>
        <li>前端
            <ul>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </li>
        <li>后端</li>
    </ul>
    <h2>自定义列表</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，定义网页结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，定义网页外观</dd>
    </dl>
</body>
</html>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明