首页 › HTML › HTML 基础 › 文本标签与列表

标题 <h1> ~ <h6>

HTML 提供六级标题，<h1> 最重要，<h6> 最次要。

<h1>一级标题（文章标题）</h1>
<h2>二级标题（章节标题）</h2>
<h3>三级标题（小节标题）</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题使用规范

• 每页只有一个 <h1>，一般对应文章标题或站点名称
• 标题层级不能跳跃（<h1> → <h3> 中间缺少 <h2> 是错误做法）
• 标题用于结构化内容，而非控制字号大小

<!-- ✅ 正确的层级 -->
<h1>HTML 教程</h1>
  <h2>文本标签</h2>
    <h3>标题</h3>
    <h3>段落</h3>
  <h2>列表</h2>

<!-- ❌ 跳跃层级 -->
<h1>HTML 教程</h1>
  <h3>文本标签</h3>    <!-- 缺少 h2 -->

段落与换行

<p> 段落

<p>这是第一个段落。段落之间会自动产生间距。</p>
<p>这是第二个段落。注意 HTML 中的</p>
<!-- 空格折叠：上面的换行不会导致换行效果 -->

<br> 换行

在段落内部需要强制换行时使用：

<p>
  第一行文字<br>
  第二行文字（仍在同一段落中）<br>
  第三行文字
</p>

不要用 <br> 制造段落间距——那是 CSS 的工作。段落间距应用 <p>。

<hr> 主题分割

<h2>第一部分</h2>
<p>内容...</p>

<hr>

<h2>第二部分</h2>
<p>内容...</p>

<hr> 表示主题的转换，视觉上是一条水平线。

文本格式化

短语标签（语义化）

<em>强调内容</em>         <!-- 浏览器默认斜体，表示强调 -->
<strong>重要内容</strong>  <!-- 浏览器默认粗体，表示重要性 -->
<mark>高亮文本</mark>      <!-- 标记/高亮，如搜索结果 -->
<small>免责声明</small>    <!-- 旁注/小字 -->
<cite>作品标题</cite>      <!-- 引用作品名 -->
<address>联系方式</address> <!-- 联系信息 -->
<time datetime="2026-05-16">2026年5月16日</time> <!-- 日期时间 -->

<p>
  <strong>警告：</strong>
  本操作不可撤销。<em>请确认后再点击。</em>
</p>
<p>
  搜索结果中包含 <mark>HTML</mark> 关键词的页面。
</p>
<p>
  <cite>《JavaScript 高级程序设计》</cite> 是一本经典书籍。
</p>
<address>
  作者：张三<br>
  邮箱：zhangsan@example.com
</address>

内联 vs 块级文本元素

元素	类别	用途
<p>	块级	段落
<h1>~<h6>	块级	标题
<hr>	块级	分割线
<blockquote>	块级	长引用（块级）
<pre>	块级	预格式化文本
<span>	内联	通用内联容器
<em>	内联	强调
<strong>	内联	重要
<q>	内联	短引用（行内）
<abbr>	内联	缩写
<code>	内联	代码片段

<span> 通用内联容器

<span> 本身没有语义，用于给内联内容分组：

<p>用户 <span class="username">张三</span> 已登录。</p>

<div> 通用块级容器

<div> 没有语义，用于分组块级内容：

<div class="article">
  <h2>文章标题</h2>
  <p>文章内容...</p>
</div>

引用

<!-- 短引用（内联） -->
<p>孔子说：<q>学而时习之，不亦说乎。</q></p>

<!-- 长引用（块级） -->
<blockquote cite="https://example.com/source">
  <p>这是从别处引用的一大段文字。浏览器通常会缩进显示块级引用。</p>
  <p>可以包含多个段落。</p>
</blockquote>

<!-- 引用来源 -->
<p>以上内容出自 <cite>《论语》</cite></p>

代码与预格式化

<p>在 HTML 中，<code>&lt;p&gt;</code> 用于定义段落。</p>

<pre>
  function hello() {
    console.log("Hello!");
  }
</pre>

<pre> 保留空格和换行，常用于代码展示。

列表

无序列表 <ul>

项目符号列表：

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

有序列表 <ol>

编号列表：

<ol>
  <li>打开电源</li>
  <li>登录系统</li>
  <li>开始工作</li>
</ol>

自定义列表 <dl>

术语及其描述：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页样式。</dd>
</dl>

渲染效果：

<ul>	<ol>	<dl>
• 苹果	1. 打开电源	HTML — 超文本...
• 香蕉	2. 登录系统	CSS — 层叠...
• 橘子	3. 开始工作

嵌套列表

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

<ol> 的属性

<ol type="A">    <!-- A, B, C ... -->
  <li>第一项</li>
  <li>第二项</li>
</ol>

<ol type="i">    <!-- i, ii, iii ... -->
  <li>第一项</li>
  <li>第二项</li>
</ol>

<ol start="5">   <!-- 从 5 开始编号 -->
  <li>第五项</li>
  <li>第六项</li>
</ol>

<ol reversed>   <!-- 倒序 -->
  <li>第三项</li>
  <li>第二项</li>
  <li>第一项</li>
</ol>

小结

标签	用途
<h1>~<h6>	标题，一级最重要
<p>	段落
<br> / <hr>	换行 / 分割线
<strong> / <em>	重要 / 强调
<span> / <div>	通用内联 / 块级容器
<ul> / <ol>	无序 / 有序列表
<dl> / <dt> / <dd>	自定义列表
<pre> / <code>	预格式化 / 代码片段
<blockquote> / <q>	长引用 / 短引用

上一节：标签语法与全局属性 下一节：路径与字符实体

贡献者: 布欧-Lewyon