第一章 HTML基础

第二节 文本格式化与结构

概述

本节内容主要介绍HTML中用于文本格式化和文本结构组织的相关标签与技术。掌握这些内容是Web程序设计的基础，能够帮助考生理解如何有效地控制网页文本的显示效果、层次结构和语义表达。通过学习本节，考生将能够熟练应用常用的文本格式化标签，合理构建文本内容的结构，提升网页的可读性与美观性。学习目标包括：

• 理解HTML文本格式化的基本标签及其语义
• 掌握文本结构标签的使用方法和作用
• 能够进行常见文本格式化操作，如加粗、斜体、下划线等
• 理解块级元素与内联元素的区别与应用
• 掌握列表、引用、代码等结构化文本的实现

---

核心概念

1. 文本格式化标签

文本格式化标签用于定义文本的外观样式和强调语义，常见标签有：

• <b>：加粗文本，表示视觉上的加粗效果
• <strong>：强调文本，表示语义上的重要性，通常浏览器会加粗显示
• <i>：斜体文本，表示视觉上的斜体
• <em>：强调文本，表示语义上的强调，通常浏览器会斜体显示
• <u>：下划线文本，表示视觉上的下划线
• <mark>：高亮文本，表示标记文本
• <small>：小号文本，表示较小的字体尺寸
• <del>：删除线文本，表示文本已被删除
• <ins>：插入文本，表示新添加的文本

2. 文本结构标签

文本结构标签用于对文本内容进行语义分组和层次划分，是网页内容组织的基础，主要包括：

• 块级元素：<p>, <div>, <h1>~`

  ,

  ,

  `等，通常独占一行

• 内联元素：<span>, <a>, <strong>, <em>等，通常不会独占一行
• 标题标签：<h1>至<h6>，用于定义不同级别的标题，表示内容层级关系
• 段落标签：<p>，定义文本段落
• 列表标签：<ul>无序列表，<ol>有序列表，<li>列表项
• 引用标签：<blockquote>长引用，<q>短引用
• 预格式化文本：<pre>，保留空白和换行

3. 块级元素与内联元素

• 块级元素：新起一行，占据父元素的全部宽度，常用于布局和内容分块。
• 内联元素：不新起一行，只占据其内容所需宽度，常用于文本中的局部样式。

了解这两类元素的区别对于网页布局和文本格式化至关重要。

---

原理分析

HTML文本格式化与结构的核心原理在于浏览器根据标签的语义和默认样式对文本进行渲染。标签不仅改变文本的视觉效果，还传递语义信息，有助于搜索引擎优化（SEO）和辅助技术（如屏幕阅读器）理解网页内容。

• 视觉效果：如加粗、斜体、下划线等通过CSS或浏览器默认样式实现。
• 语义结构：如<strong>表示重要性，<em>表示强调，这些标签对内容含义有指示作用。
• 层级关系：标题标签<h1>~`

  `定义文档结构，便于内容组织和导航。

• 列表与引用：通过语义化标签增强内容的逻辑性和可读性。

此外，区分块级和内联元素对于合理排版和响应式设计非常关键。错误使用可能导致布局错乱或文本显示不符合预期。

---

详细内容

1. 常用文本格式化标签详解

1.1 加粗与强调

• <b>标签纯粹是视觉加粗，适用于不涉及语义强调的场景。
• <strong>标签表示语义上重要的文本，通常浏览器显示为加粗。

示例：

<p>这是一个<b>加粗</b>的词。</p>
<p>这是一个<strong>强调</strong>的词。</p>

1.2 斜体与强调

• <i>标签是视觉斜体，常用于术语、外语单词等。
• <em>标签表示语义上的强调，通常用斜体显示。

示例：

<p>这是一个<i>斜体</i>的词。</p>
<p>这是一个<em>强调</em>的词。</p>

1.3 其他格式化标签

• <u>：下划线，通常用于链接或特别标记。
• <mark>：高亮文本，适合突出显示内容。
• <small>：小号字体，用于注释或版权信息。
• <del>与<ins>：分别表示删除和新增内容，常用于版本控制和修订。

2. 文本结构标签详解

2.1 标题标签

• <h1>至<h6>表示不同等级的标题，<h1>最高级别，<h6>最低。
• 标题标签对网页内容结构化和SEO优化至关重要。

2.2 段落与分块

• <p>定义文本段落，是最常用的文本容器。
• <div>是通用容器，主要用于布局和分组，不具备语义。

2.3 列表标签

• <ul>定义无序列表，项目通常以圆点显示。
• <ol>定义有序列表，项目有数字序号。
• <li>定义列表项，必须嵌套在<ul>或<ol>中。

示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

2.4 引用与预格式化文本

• <blockquote>适合长段落引用，通常缩进显示。
• <q>适合短引用，通常加引号显示。
• <pre>保持文本格式不变，适用于代码显示。

3. 块级元素与内联元素

特征	块级元素	内联元素
显示方式	独占一行	与其他元素在同一行
可嵌套元素	可以包含块级元素和内联元素	只能包含内联元素
常见标签	<div>, <p>, <h1>~` , `等	<span>, <a>, <strong>, <em>等

正确理解和使用这两种元素是网页排版的基础。

---

实例分析

实例1：构建文章正文格式

背景：设计一个新闻网页的文章正文，需要有标题、段落、强调词汇和引用。

代码示例：

<h1>最新科技新闻</h1>
<p>近日，<strong>人工智能</strong>领域取得重大突破。研究人员发现了一种新算法，能够大幅提升计算效率。</p>
<p>该算法被认为是未来发展的关键<em>技术</em>。</p>
<blockquote>“这是计算机科学的里程碑。” —— 专家评论</blockquote>

分析：

• 使用<h1>定义标题，突出层级
• 用<p>分段，确保阅读舒适
• 通过<strong>和<em>区别强调内容的不同语义
• 使用<blockquote>引用专家的话，增强权威感

结论：合理运用文本格式化和结构标签，提升内容条理和视觉效果。

实例2：制作导航菜单

背景：制作网页顶部导航菜单，使用无序列表实现。

代码示例：

<ul>
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于我们</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

分析：

• 使用<ul>和<li>构建结构清晰的菜单
• <a>为内联元素，实现链接功能

结论：文本结构标签不仅用于文章，也适合导航等界面元素。

实例3：代码片段展示

背景：在教程网页中需要展示HTML代码示例，保持格式不变。

代码示例：

<pre>
&lt;html&gt;
  &lt;head&gt;...&lt;/head&gt;
  &lt;body&gt;...&lt;/body&gt;
&lt;/html&gt;
</pre>

分析：

• <pre>标签保留空格和换行，适合代码展示
• 使用实体字符<和>防止浏览器解析为标签

结论：预格式化文本标签是展示代码和格式敏感内容的必备工具。

---

常见误区

1. 混淆视觉格式化与语义强调

   • 误用<b>代替<strong>，忽略语义，影响SEO和辅助工具。
   • 正确做法：根据内容含义选择标签，语义重要用<strong>。

2. 错误嵌套块级和内联元素

   • 将块级元素置于内联元素内，导致布局异常。
   • 正确做法：内联元素只能包含内联元素，块级元素可包含两者。

3. 滥用<div>代替语义标签

   • 用<div>替代标题、段落等，降低网页语义清晰度。
   • 正确做法：合理使用语义标签，提升网页结构。

4. 忽视标题层级顺序

   • 跳跃使用标题标签，如<h1>后直接用<h4>。
   • 正确做法：按层级顺序使用，方便内容组织和导航。

5. 未使用预格式化文本显示代码

   • 直接用<p>显示代码，格式乱序。
   • 正确做法：用<pre>标签包裹，保持格式。

---

应用场景

• 网页文章排版：通过标题、段落和格式化标签构建清晰的文章结构，提高可读性。
• 导航菜单设计：利用列表标签制作结构化的菜单，方便用户浏览。
• 用户评论与引用展示：使用引用标签规范展示引用内容，增强权威性。
• 代码示例和教程页面：用预格式化文本标签显示代码，保持格式完整。
• 表单说明与提示信息：利用小号字体和高亮标签区分辅助信息和重点提示。

---

知识拓展

• CSS与HTML文本格式化结合使用：虽然HTML提供基本格式化标签，但现代网页更倾向于使用CSS控制样式，保持内容与表现分离。
• ARIA标签与辅助技术：为提升无障碍访问，可结合ARIA属性为文本结构赋予更多语义。
• HTML5语义标签：如<article>, <section>, <header>等，补充文本结构的语义层次。
• Markdown与HTML文本结构的关系：理解Markdown的文本格式如何转换为HTML标签，有助于快速编写内容。

---

总结回顾

本节重点围绕HTML文本格式化与结构进行系统讲解，主要内容包括：

• 理解文本格式化标签的视觉和语义区别，如<b>与<strong>、<i>与<em>
• 掌握标题、段落、列表、引用和预格式化文本的语义与使用方法
• 明确块级元素与内联元素的区别及合理布局原则
• 通过典型实例学习如何构建结构清晰、格式规范的网页文本内容
• 避免常见误区，提升网页语义化和可访问性

熟练掌握本节内容将为后续Web程序设计的深入学习打下坚实基础，同时也是全国计算机等级考试二级Web程序设计科目的重要考点。建议考生结合实际编码练习，巩固理解，提升操作能力。

---