HTML 格式化入门教程 – wiki基地

作者： /

HTML 格式化入门教程：让你的网页内容井井有条

欢迎来到HTML格式化的世界！如果你刚开始学习网页开发，了解如何用HTML正确地组织和格式化文本内容是至关重要的第一步。HTML（HyperText Markup Language）不仅仅是用来写网页文字，它更像是一个骨架，用来定义页面上内容的结构、层次和基本呈现方式。本教程将带你深入了解HTML中常用的格式化标签，让你能够创建出清晰、易读、结构良好的网页内容。

第一部分：HTML格式化的基础概念

什么是HTML格式化？

在HTML中，格式化通常指的是使用特定的HTML标签来定义文本的结构和语义，从而影响文本在浏览器中的显示方式。这里的“格式化”与我们在字处理软件中进行的字体、颜色、字号等视觉样式设置有所不同。HTML的格式化更多关注的是内容的结构和含义，例如：

  • 这段文字是一个标题吗？
  • 这段文字是一个段落吗？
  • 这段文字是需要强调的吗？
  • 这是一个列表项吗？

虽然浏览器会为大多数HTML格式化标签提供默认的视觉样式（比如标题会变大变粗，段落之间会有间距），但更复杂的视觉样式通常是通过CSS（Cascading Style Sheets）来实现的。HTML负责结构和语义，CSS负责表现和样式。在本教程中，我们主要关注HTML提供的结构和基本格式化能力。

为什么HTML格式化很重要？

  1. 结构清晰： 良好的HTML格式化使得网页内容结构清晰，易于作者组织和维护，也易于阅读者理解内容的层次。
  2. 可读性： 合理使用标题、段落、列表等标签，可以大大提高网页内容的可读性。一大段没有分行的文字会让人望而却步。
  3. 辅助技术（Accessibility）： 屏幕阅读器等辅助技术依赖于HTML结构来向视障或有阅读障碍的用户传达页面内容。例如，它们会识别标题来帮助用户快速浏览页面内容。
  4. 搜索引擎优化（SEO）： 搜索引擎通过分析页面的HTML结构来理解内容的重要性（比如H1标签通常表示页面最重要的标题），这有助于提高网页在搜索结果中的排名。
  5. 与其他技术的协作： CSS和JavaScript等技术通常通过选择特定的HTML标签来应用样式或实现交互功能。结构良好的HTML为这些技术提供了坚实的基础。

现在，让我们开始探索具体的HTML格式化标签吧！

第二部分：基本的文本格式化标签

1. 段落标签 <p>

段落是网页中最基本的文本块。HTML中使用<p>标签来定义一个段落。浏览器会在段落之间自动添加一些垂直间距，使其与周围的内容分隔开。

“`html

这是第一个段落的内容。

这是第二个段落的内容。每个段落都应该用p标签包裹起来。

“`

2. 标题标签 <h1> 到 <h6>

标题用于组织内容的层次结构。HTML提供了六级标题，从<h1>（最高级标题）到<h6>（最低级标题）。<h1>通常用于页面的主标题，而其他级别的标题用于区分不同的章节和副标题。

“`html

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

“`

重要提示： 不要仅仅为了让文字变大或变粗而使用标题标签。标题标签具有重要的语义意义，表示其包裹的内容是其下文的主题或标题。页面的<h1>标签通常只使用一次。

3. 换行标签 <br>

<br>标签用于在文本中插入一个强制的换行。它是一个空标签（自闭合标签），不需要结束标签。请注意，<br>标签用于在同一段落内创建换行，而不是用来分隔段落（应该使用<p>标签）。

“`html

第一行文字。
这是强制换行后的第二行文字。


这是第三行文字。

“`

最佳实践： 避免使用多个<br>标签来增加元素之间的垂直间距。这应该通过CSS的margin属性来实现。<br>只应用于那些内容中确实需要强制换行的场景，比如诗歌的每一行、地址的多行显示等。

4. 水平分隔线 <hr>

<hr>标签用于在文档中绘制一条水平线，表示内容的主题切换或分隔。它也是一个空标签。

“`html

这是上面的内容。

这是水平分隔线下面的内容，表示内容主题的转变。

“`

第三部分：文本级别格式化标签（语义化与表现）

HTML提供了多种标签来格式化文本的特定部分，比如加粗、斜体等。早期的HTML版本包含了一些纯粹用于表现的标签（如<b>、<i>），而现代HTML更倾向于使用具有语义意义的标签（如<strong>、<em>）。理解它们的区别很重要。

表现型标签 (Presentational – 推荐使用CSS代替进行纯样式控制)：

  • <b>：加粗文本。仅表示视觉上的加粗，没有语义意义。
  • <i>：斜体文本。仅表示视觉上的斜体，没有语义意义。常用于表示技术术语、外语词汇、想法等（但<em>通常更合适）。
  • <u>：下划线文本。仅表示视觉上的下划线。容易与链接混淆，应谨慎使用。
  • <s> 或 <del>：删除线文本。表示不再准确或不再相关的文本。
  • <tt>：等宽字体文本（已废弃）。

语义化标签 (Semantic – 推荐)：

  • <strong>：表示文本的重要性、严肃性或紧急性。浏览器通常会将其显示为加粗，但它的主要目的是传达“重要”的语义。
  • <em>：表示文本的强调。浏览器通常会将其显示为斜体，但它的主要目的是传达“强调”的语义。
  • <mark>：标记或高亮显示的文本。表示出于参考目的而标记出的相关文本。
  • <del>：表示已被删除的文本。与<s>类似，但更强调“删除”的行为或状态。
  • <ins>：表示已被插入的文本。通常会带有下划线。常与<del>一起用于表示文档的修改。
  • <sub>：下标文本。通常用于化学公式（如 H₂O）。
  • <sup>：上标文本。通常用于数学公式（如 x²）或脚注标记。
  • <small>：小号文本。表示附注、免责声明、版权信息等细则文本。

示例：

“`html

这是一段非常重要的文本。

这是一段需要强调的文本。

这段话中，我需要高亮显示这个关键词。

原价：¥100 现价：¥80

化学式：H2O

数学公式：x2

本内容版权所有，翻版必究。

“`

理解语义化的重要性：

尽管<b>和<strong>在视觉上可能都显示为加粗，<i>和<em>都显示为斜体，但它们的含义不同。<strong>告诉浏览器和辅助技术，“这段文字很重要，请特别关注”，而<b>仅仅是说“这段文字看起来应该是粗的”。搜索引擎和辅助技术更能理解语义化的标签，从而更好地理解你的内容。除非你只是想单纯改变文本的视觉样式而没有任何特定的语义（这通常应该用CSS来完成），否则优先使用语义化标签。

第四部分：列表格式化标签

列表是网页中常用的一种组织信息的方式，比如导航菜单、商品列表、文章目录等。HTML提供了三种类型的列表：无序列表、有序列表和定义列表。

1. 无序列表 <ul> 和 <li>

无序列表用于列出项目，项目之间没有特定的顺序。每个列表项前面通常会有一个小圆点（bullet point）。<ul>标签表示整个无序列表，而<li>标签表示列表中的每一个列表项（List Item）。

“`html

我喜欢的水果：

  • 苹果
  • 香蕉
  • 橙子

“`

你可以在无序列表中嵌套其他列表：

“`html

我喜欢的水果和它们的颜色：

  • 苹果
    • 红色
    • 绿色
  • 香蕉
    • 黄色

“`

2. 有序列表 <ol> 和 <li>

有序列表用于列出需要按照特定顺序排列的项目。每个列表项前面通常会有一个编号（数字、字母或罗马数字）。<ol>标签表示整个有序列表，<li>标签表示列表项。

“`html

做蛋糕的步骤：

  1. 准备材料
  2. 混合材料
  3. 烘烤
  4. 冷却

“`

有序列表可以有一些属性来控制编号的样式和起始值（尽管这些样式更推荐用CSS控制）：

  • type：指定编号类型（1 数字 – 默认, a 小写字母, A 大写字母, i 小写罗马数字, I 大写罗马数字）。
  • start：指定列表的起始编号。
  • reversed：倒序排列。

“`html

前三名选手：

  1. 小明
  2. 小红
  3. 小刚

字母排序：

  1. 第一项
  2. 第二项
  3. 第三项

“`

3. 定义列表 <dl>，<dt> 和 <dd>

定义列表用于列出术语及其定义、名字及其描述等一对一的关系。<dl>标签表示整个定义列表，<dt>标签表示术语（Definition Term），<dd>标签表示术语的定义（Definition Description）。

“`html

HTML
超文本标记语言，用于创建网页的标记语言。
CSS
层叠样式表，用于控制网页的样式和布局。
JavaScript
一种编程语言，用于使网页具有交互性。

“`

第五部分：引用和代码格式化标签

在网页中引用他人的话或展示代码是常见需求。HTML提供了专门的标签来处理这些内容。

1. 引用标签

  • <blockquote>：用于表示块级引用（通常用于引用大段文本）。浏览器通常会对其进行缩进。可以使用cite属性指定引用的来源URL。

    html
    <p>以下是关于学习编程的一段引言：</p>
    <blockquote cite="https://example.com/quote">
    <p>学习编程不仅仅是学习语法，更是学习一种解决问题的思维方式。</p>
    <p>—— 某位智者</p>
    </blockquote>
    <p>这段引言非常有启发性。</p>

  • <q>：用于表示行内引用（通常用于引用短语或句子）。浏览器会自动在引用内容前后添加引号。同样可以使用cite属性。

    html
    <p>正如某人所说，<q cite="https://example.com/proverb">学如逆水行舟，不进则退。</q> 我们应该不断学习。</p>

2. 代码格式化标签

  • <code>：用于表示计算机代码。通常会以等宽字体显示。常用于行内代码片段。

    html
    <p>在HTML中，使用<code>&lt;p&gt;</code>标签定义段落。</p>
    （注意：在HTML中显示尖括号 < 和 > 需要使用它们的实体编码 &lt; 和 &gt;，以防止浏览器将其解析为标签。）

  • <pre>：用于表示预格式化文本。它会保留文本中的空格和换行符。常与<code>结合使用来显示代码块，保持代码的原始格式。

    “`html

      
function greet(name) {
  console.log("Hello, " + name + "!");
}
    

    greet("World");

    ``
    **重要提示：**    pre标签保留原始格式，包括缩进。所以放在

    `标签内的代码，其缩进会直接呈现在页面上。

  • <kbd>：表示用户输入（键盘输入）。

    html
    <p>请按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制选中的内容。</p>

  • <samp>：表示计算机程序的输出示例。

    html
    <p>运行上面的代码，控制台将输出：<samp>Hello, World!</samp></p>

  • <var>：表示编程中的变量。

    html
    <p>假设我们有一个变量 <var>count</var>，初始值为 0。</p>

第六部分：注释标签 <!-- ... -->

虽然不是用于直接格式化页面内容的显示，但HTML注释对于保持代码的可读性和可维护性至关重要。注释会被浏览器忽略，不会显示在页面上。

```html


这是页面内容。

```

注释可以用来：
* 解释代码段的功能。
* 临时禁用某些HTML代码进行测试。
* 给其他开发者（或未来的自己）留下信息。

第七部分：格式化与CSS的关系（简要）

再次强调，HTML主要负责内容的结构和语义。虽然HTML标签有默认的格式（比如<h1>很大，<strong>加粗），但这些默认样式是很基础的。

现代网页开发中，几乎所有的视觉格式（字体颜色、大小、背景、边距、布局等）都是通过CSS来实现的。

例如，你想改变所有段落的字体颜色为蓝色，不应该去寻找一个“蓝色文字”的HTML标签，而是使用CSS：

```html

这段文字会是蓝色的。

这段文字也会是蓝色的。

```

css
/* CSS (通常写在<style>标签内或独立的.css文件中) */
p {
color: blue; /* 将所有p标签的文字颜色设为蓝色 */
}

理解这一点非常重要。使用HTML标签来正确地构建内容的结构，然后使用CSS来控制这些结构的视觉呈现。这是网页开发的核心原则。

第八部分：最佳实践和总结

  • 语义化优先： 尽量使用具有语义意义的标签（如<strong>, <em>）而不是纯表现的标签（如<b>, <i>），除非确实没有合适的语义标签且只为视觉效果（但通常这种情况也应由CSS负责）。
  • 结构清晰： 合理使用标题、段落、列表等标签来组织内容层次。
  • 代码可读性： 使用正确的缩进、换行和注释来提高代码的可读性。
  • 验证你的HTML： 使用W3C等提供的HTML验证器检查你的代码是否有语法错误。错误的HTML结构可能会导致格式化不正确。
  • HTML用于结构，CSS用于样式： 牢记这个原则，避免滥用HTML标签进行纯粹的样式控制。

总结

HTML格式化是网页开发的基础。通过掌握 <p>, <h1>-<h6>, <br>, <hr>, <strong>, <em>, <ul>, <ol>, <dl>, <blockquote>, <q>, <code>, <pre> 等标签的用法，你可以有效地组织和呈现网页内容，使其具有良好的结构、可读性和可访问性。随着你学习的深入，你会发现HTML与CSS紧密配合，共同创造出丰富多彩的网页。

现在，就开始动手练习吧！尝试用这些标签创建自己的网页，你会越来越熟练地运用它们。

祝你学习愉快！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部