程序猿指南
Search K

Appearance

2.1 文本元素 ​

关键词: HTML5文本元素, 标题元素, 段落元素, 文本格式化, 引用元素, 代码元素, 上下标, 语义化标签

学习目标 ​

  • 掌握HTML5中各种文本元素的使用方法和语法规则
  • 理解标题元素的层级结构和语义意义
  • 学会使用段落和文本格式化元素进行内容标记
  • 掌握引用元素和代码元素的正确用法
  • 理解文本语义化的重要性和最佳实践

2.1.1 标题元素（h1-h6） ​

标题层级结构 ​

HTML5提供了六个级别的标题元素，从h1到h6，用于创建文档的层级结构。每个标题元素都有其特定的语义意义。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题元素示例</title>
</head>
<body>
    <h1>一级标题 - 页面主标题</h1>
    <h2>二级标题 - 主要章节</h2>
    <h3>三级标题 - 次要章节</h3>
    <h4>四级标题 - 小节标题</h4>
    <h5>五级标题 - 子小节</h5>
    <h6>六级标题 - 最小标题</h6>
</body>
</html>

标题的语义层次 ​

正确的标题层次对于文档结构和可访问性非常重要：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档结构示例</title>
</head>
<body>
    <h1>HTML5学习指南</h1>
    
    <h2>第一章：基础知识</h2>
    <p>这一章介绍HTML5的基础概念...</p>
    
    <h3>1.1 HTML5简介</h3>
    <p>HTML5是最新的超文本标记语言...</p>
    
    <h4>HTML5的发展历史</h4>
    <p>HTML5的发展经历了多个阶段...</p>
    
    <h4>HTML5的新特性</h4>
    <p>HTML5引入了许多新特性...</p>
    
    <h3>1.2 环境搭建</h3>
    <p>开始学习HTML5需要准备相应的开发环境...</p>
    
    <h2>第二章：元素详解</h2>
    <p>这一章详细介绍各种HTML5元素...</p>
</body>
</html>

标题使用最佳实践 ​

  1. 每页只使用一个h1标题
  2. 不要跳过标题级别
  3. 标题应该简洁明了
  4. 使用标题建立文档大纲
html
<!-- 正确的标题层级 -->
<h1>网站主标题</h1>
<h2>主要栏目</h2>
<h3>子栏目</h3>
<h4>具体内容</h4>

<!-- 错误：跳过了h2直接使用h3 -->
<h1>网站主标题</h1>
<h3>直接跳到三级标题</h3> <!-- 不推荐 -->

标题元素的语法规则 ​

html
<!-- 基本语法 -->
<h1>标题内容</h1>
<h2>标题内容</h2>
<h3>标题内容</h3>
<h4>标题内容</h4>
<h5>标题内容</h5>
<h6>标题内容</h6>

<!-- 标题可以包含其他内联元素 -->
<h1>产品介绍：<em>革命性</em>的新技术</h1>
<h2><strong>重要通知</strong>：系统升级</h2>
<h3>价格：<del>原价999元</del> 现价<mark>699元</mark></h3>

2.1.2 段落元素（p） ​

段落的基本用法 ​

<p>元素用于定义段落，是HTML中最常用的文本容器元素：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落元素示例</title>
</head>
<body>
    <h1>关于HTML5段落元素</h1>
    
    <p>段落元素（p）是HTML中用于组织文本内容的基本单位。每个段落都应该包含一个完整的思想或概念。</p>
    
    <p>HTML5中的段落元素具有语义意义，它告诉浏览器和其他用户代理这里是一段文本内容。段落之间会自动产生间距，形成良好的视觉层次。</p>
    
    <p>在编写HTML时，应该合理使用段落元素来组织内容，避免使用多个<br>标签来创建段落间距。</p>
</body>
</html>

段落的语义和结构 ​

段落不仅仅是文本的容器，它还具有重要的语义意义：

html
<article>
    <h2>文章标题</h2>
    
    <p>这是文章的第一段，通常包含文章的引言或概述内容。</p>
    
    <p>这是文章的第二段，展开第一段的内容，提供更多详细信息。</p>
    
    <p>这是文章的最后一段，通常包含总结或结论。</p>
</article>

段落与其他元素的关系 ​

html
<!-- 段落可以包含多种内联元素 -->
<p>这段文字包含<strong>粗体文本</strong>、<em>斜体文本</em>和<a href="#">链接</a>。</p>

<!-- 段落不能包含块级元素 -->
<p>这是正确的段落内容</p>
<!-- 错误：段落内不能包含div等块级元素 -->
<!-- <p><div>这是错误的</div></p> -->

<!-- 正确的做法是分开使用 -->
<p>第一段内容</p>
<div>这里是div内容</div>
<p>第二段内容</p>

2.1.3 文本格式化元素 ​

强调元素 ​

HTML5提供了多种文本格式化元素，用于表达不同的语义含义：

strong元素 - 重要性强调 ​

html
<p><strong>重要提示：</strong>请在规定时间内完成任务。</p>
<p>这个功能<strong>非常重要</strong>，请务必了解。</p>

em元素 - 语调强调 ​

html
<p>我<em>真的</em>需要这个功能。</p>
<p>这<em>不是</em>我想要的结果。</p>

b元素 - 引起注意 ​

html
<p><b>注意：</b>以下内容仅供参考。</p>
<p>产品名称：<b>HTML5学习手册</b></p>

i元素 - 不同语调或语境 ​

html
<p>这是一个<i>外来词汇</i>的例子。</p>
<p><i>Carpe diem</i>是拉丁语，意思是"把握今天"。</p>

标记和删除元素 ​

mark元素 - 高亮标记 ​

html
<p>在搜索结果中，<mark>关键词</mark>会被高亮显示。</p>
<p>请注意第<mark>三</mark>条规则的变更。</p>

del元素 - 删除的文本 ​

html
<p>原价：<del>999元</del></p>
<p>会议时间从<del>下午2点</del>改为下午3点。</p>

ins元素 - 插入的文本 ​

html
<p>会议时间：<del>下午2点</del><ins>下午3点</ins></p>
<p>新增功能：<ins>支持多语言</ins></p>

s元素 - 不再准确的内容 ​

html
<p><s>限时优惠，仅限今日</s></p>
<p>原计划：<s>明天发布</s> 实际：后天发布</p>

下标和上标元素 ​

sub元素 - 下标 ​

html
<p>水的化学分子式是H<sub>2</sub>O。</p>
<p>数学公式：x<sub>1</sub> + x<sub>2</sub> = y</p>

sup元素 - 上标 ​

html
<p>爱因斯坦的质能方程：E = mc<sup>2</sup></p>
<p>脚注引用<sup>[1]</sup>和<sup>[2]</sup></p>

小号文本元素 ​

small元素 - 附属细则 ​

html
<p>版权所有 © 2024 我的公司</p>
<small>本网站内容受法律保护</small>

<p>产品价格：999元</p>
<small>*价格不含运费</small>

完整的文本格式化示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本格式化示例</title>
</head>
<body>
    <h1>产品发布公告</h1>
    
    <p><strong>重要通知：</strong>我们的新产品<em>HTML5学习平台</em>即将发布！</p>
    
    <p>发布时间：<del>2024年1月1日</del><ins>2024年1月15日</ins></p>
    
    <p>产品特色：</p>
    <ul>
        <li><mark>互动式</mark>学习体验</li>
        <li><b>实时</b>代码编辑器</li>
        <li><i>Progressive Web App</i>技术</li>
    </ul>
    
    <p>价格：<del>原价999元</del> <strong>限时特价699元</strong></p>
    <small>*特价活动截止到2024年2月1日</small>
    
    <p>技术规格：</p>
    <ul>
        <li>支持HTML<sup>5</sup>标准</li>
        <li>兼容CSS<sup>3</sup>特性</li>
        <li>数据传输采用HTTP<sub>S</sub>协议</li>
    </ul>
</body>
</html>

2.1.4 引用元素 ​

blockquote元素 - 块级引用 ​

用于引用来自其他来源的大段文本：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>引用元素示例</title>
</head>
<body>
    <h1>关于Web标准的重要性</h1>
    
    <p>Tim Berners-Lee在谈到Web标准时说过：</p>
    
    <blockquote>
        <p>Web的力量在于其普遍性。无论残疾与否，每个人都能访问是一个重要方面。</p>
    </blockquote>
    
    <p>这句话强调了Web可访问性的重要性。</p>
</body>
</html>

带引用来源的blockquote ​

html
<blockquote cite="https://www.w3.org/People/Berners-Lee/">
    <p>万维网最初被设计为一个通用的信息空间，人们可以在其中进行通信、分享信息和知识。</p>
    <footer>
        —— <cite>Tim Berners-Lee</cite>，万维网的发明者
    </footer>
</blockquote>

q元素 - 内联引用 ​

用于短小的内联引用：

html
<p>老师说：<q>学习HTML5需要多加练习</q>，这句话很有道理。</p>

<p>莎士比亚写道：<q cite="https://example.com/hamlet">生存还是毁灭，这是一个问题</q>。</p>

cite元素 - 引用来源 ​

用于标记作品的标题或引用来源：

html
<p>我最近在读<cite>《HTML5权威指南》</cite>这本书。</p>

<p>电影<cite>《黑客帝国》</cite>展现了数字世界的可能性。</p>

<blockquote>
    <p>代码是诗歌，程序员是诗人。</p>
    <footer>—— 引用自<cite>《代码之美》</cite></footer>
</blockquote>

引用元素的完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>引用元素完整示例</title>
</head>
<body>
    <article>
        <h1>关于编程的思考</h1>
        
        <p>在<cite>《计算机程序的构造和解释》</cite>一书中，作者提到了一个重要观点：</p>
        
        <blockquote cite="https://mitpress.mit.edu/sites/default/files/sicp/index.html">
            <p>我们写程序不仅是为了让计算机执行，更是为了让人类阅读。</p>
        </blockquote>
        
        <p>这个观点强调了代码可读性的重要性。正如Donald Knuth所说的那样：<q>过早的优化是万恶之源</q>。</p>
        
        <p>在学习编程的过程中，我们应该记住<cite>《代码整洁之道》</cite>中的建议，始终保持代码的简洁和可读性。</p>
    </article>
</body>
</html>

2.1.5 代码元素 ​

code元素 - 内联代码 ​

用于标记文档中的程序代码片段：

html
<p>在HTML中，使用<code>&lt;p&gt;</code>标签创建段落。</p>

<p>JavaScript中的<code>console.log()</code>方法用于输出信息到控制台。</p>

<p>CSS属性<code>color</code>用于设置文字颜色。</p>

pre元素 - 预格式化文本 ​

保持文本的格式，包括空白字符和换行：

html
<h2>HTML基本结构</h2>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;页面标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;p&gt;这是一个段落。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

code与pre的结合使用 ​

html
<h3>JavaScript函数示例</h3>
<pre><code>function greetUser(name) {
    if (name) {
        return "Hello, " + name + "!";
    } else {
        return "Hello, Guest!";
    }
}

// 调用函数
console.log(greetUser("Alice"));
</code></pre>

kbd元素 - 键盘输入 ​

表示用户输入的键盘按键：

html
<p>要保存文档，请按<kbd>Ctrl</kbd>+<kbd>S</kbd>。</p>

<p>在Mac上，使用<kbd>Cmd</kbd>+<kbd>C</kbd>复制文本。</p>

<p>按<kbd>F12</kbd>打开浏览器开发者工具。</p>

samp元素 - 计算机输出 ​

表示计算机程序的输出结果：

html
<p>当程序运行成功时，会显示：</p>
<samp>编译成功！程序已启动。</samp>

<p>如果出现错误，可能会看到：</p>
<samp>Error: 文件未找到</samp>

var元素 - 变量 ​

表示数学公式或程序中的变量：

html
<p>在方程<var>y</var> = <var>mx</var> + <var>b</var>中，<var>m</var>是斜率。</p>

<p>函数<code>calculate(<var>x</var>, <var>y</var>)</code>接受两个参数。</p>

代码元素完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码元素示例</title>
</head>
<body>
    <h1>HTML5代码标记教程</h1>
    
    <h2>基本HTML结构</h2>
    <p>每个HTML文档都以<code>&lt;!DOCTYPE html&gt;</code>声明开始。</p>
    
    <h3>完整示例</h3>
    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;我的第一个网页&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎学习HTML5&lt;/h1&gt;
    &lt;p&gt;这是我的第一个网页！&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
    
    <h3>操作说明</h3>
    <ol>
        <li>按<kbd>Ctrl</kbd>+<kbd>N</kbd>新建文件</li>
        <li>输入上述代码</li>
        <li>按<kbd>Ctrl</kbd>+<kbd>S</kbd>保存为.html文件</li>
        <li>双击文件在浏览器中打开</li>
    </ol>
    
    <h3>预期结果</h3>
    <p>如果一切正常，浏览器会显示：</p>
    <samp>
    欢迎学习HTML5
    
    这是我的第一个网页！
    </samp>
    
    <h3>代码说明</h3>
    <p>在这个例子中，变量<var>lang</var>设置为"zh-CN"，表示中文内容。</p>
</body>
</html>

2.1.6 其他文本元素 ​

time元素 - 时间和日期 ​

用于标记时间、日期或时间段：

html
<p>会议时间：<time datetime="2024-01-15 14:00">2024年1月15日下午2点</time></p>

<p>文章发布于<time datetime="2024-01-01">2024年1月1日</time></p>

<p>活动持续时间：<time datetime="PT2H30M">2小时30分钟</time></p>

abbr元素 - 缩写 ​

用于标记缩写或首字母缩略词：

html
<p><abbr title="HyperText Markup Language">HTML</abbr>是网页的标记语言。</p>

<p><abbr title="Cascading Style Sheets">CSS</abbr>用于网页样式设计。</p>

<p><abbr title="World Wide Web Consortium">W3C</abbr>是Web标准制定组织。</p>

dfn元素 - 定义 ​

用于标记术语的定义实例：

html
<p><dfn>HTML5</dfn>是最新版本的超文本标记语言。</p>

<p><dfn title="Responsive Web Design">响应式网页设计</dfn>是指网页能够适应不同设备屏幕的设计方法。</p>

address元素 - 联系信息 ​

用于标记文档或section的联系信息：

html
<address>
    作者：张三<br>
    邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
    电话：138-0000-0000
</address>

文本元素综合示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5文本元素综合示例</title>
</head>
<body>
    <article>
        <header>
            <h1>HTML5学习指南</h1>
            <p>发布时间：<time datetime="2024-01-01">2024年1月1日</time></p>
        </header>
        
        <h2>什么是HTML5？</h2>
        <p><dfn>HTML5</dfn>是<abbr title="HyperText Markup Language">HTML</abbr>的第五个主要版本，它引入了许多新的特性和改进。</p>
        
        <h2>重要特性</h2>
        <p><strong>HTML5</strong>的主要特性包括：</p>
        <ul>
            <li><em>语义化</em>标签：如<code>&lt;header&gt;</code>、<code>&lt;nav&gt;</code>、<code>&lt;article&gt;</code></li>
            <li><mark>多媒体支持</mark>：原生的<code>&lt;audio&gt;</code>和<code>&lt;video&gt;</code>元素</li>
            <li><b>表单增强</b>：新的输入类型和验证功能</li>
        </ul>
        
        <h2>代码示例</h2>
        <p>创建一个基本的HTML5文档：</p>
        <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;我的网页&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到HTML5世界&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        
        <h2>学习建议</h2>
        <blockquote>
            <p>学习HTML5最好的方法就是动手实践。</p>
            <footer>—— 引用自<cite>《Web开发最佳实践》</cite></footer>
        </blockquote>
        
        <p>记住这个公式：<var>实践</var> = <var>理论</var> + <var>动手操作</var></p>
        
        <footer>
            <address>
                作者：Web开发团队<br>
                联系方式：<a href="mailto:team@example.com">team@example.com</a>
            </address>
            <small>© 2024 版权所有</small>
        </footer>
    </article>
</body>
</html>

本节要点回顾 ​

  • 标题元素（h1-h6）：建立文档层次结构，每页只用一个h1，不跳级使用
  • 段落元素（p）：组织文本内容的基本单位，具有重要的语义意义
  • 文本格式化元素：strong强调重要性，em语调强调，mark高亮，del删除等
  • 引用元素：blockquote块级引用，q内联引用，cite标记引用来源
  • 代码元素：code内联代码，pre预格式化，kbd键盘输入，samp程序输出

相关学习资源 ​

常见问题FAQ ​

Q: 什么时候使用strong，什么时候使用b？ ​

A: strong元素表示内容的重要性，具有语义意义；b元素仅仅是为了吸引注意，不具有特殊语义。优先使用strong表示重要内容。

Q: em和i元素有什么区别？ ​

A: em元素表示语调上的强调，具有语义意义；i元素用于表示不同的语调或语境，如外来词、技术术语等，但不表示强调。

Q: 如何正确使用标题层级？ ​

A: 按顺序使用h1-h6，不要跳级。每页只用一个h1作为主标题，h2-h6用于子标题。标题应该准确描述后续内容。

Q: 什么时候使用blockquote，什么时候使用q？ ​

A: blockquote用于长段落的引用，通常独立成段；q用于短小的内联引用，嵌入在段落中。两者都可以使用cite属性标明来源。

Q: code元素与pre元素有什么区别？ ​

A: code元素用于标记内联的代码片段；pre元素用于保持文本格式，通常与code结合使用来显示代码块。pre会保持空白字符和换行。

下一节预览：下一节我们将学习第2章第2节 - 列表元素，重点介绍HTML5中无序列表、有序列表和描述列表的使用方法。