编辑“︁HTML基本格式化”︁

= HTML基本格式化 =

HTML（超文本标记语言）的基本格式化是指通过HTML标签对文本内容进行结构化排版，使其在浏览器中呈现出清晰、易读的格式。HTML提供了一系列标签，用于控制文本的显示方式，包括标题、段落、换行、水平线、字体样式等。这些标签是构建网页内容的基础，也是初学者必须掌握的核心知识。

== 基本格式化标签 ==

以下是HTML中最常用的基本格式化标签：

=== 标题（Headings） ===
HTML提供了6级标题，从<h1>到<h6>，其中<h1>是最高级标题，<h6>是最低级标题。标题标签会自动加粗文本并添加一定的上下边距。

<syntaxhighlight lang="html">
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</syntaxhighlight>

输出效果：
<h1 style="font-size: 2em; margin: 0.67em 0;">这是一级标题</h1>
<h2 style="font-size: 1.5em; margin: 0.83em 0;">这是二级标题</h2>
<h3 style="font-size: 1.17em; margin: 1em 0;">这是三级标题</h3>
<h4 style="font-size: 1em; margin: 1.33em 0;">这是四级标题</h4>
<h5 style="font-size: 0.83em; margin: 1.67em 0;">这是五级标题</h5>
<h6 style="font-size: 0.67em; margin: 2.33em 0;">这是六级标题</h6>

=== 段落（Paragraphs） ===
<p>标签用于定义段落，浏览器会自动在段落前后添加一定的空白。

<syntaxhighlight lang="html">
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</syntaxhighlight>

输出效果：
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

=== 换行（Line Breaks） ===
<br>标签用于在文本中插入一个换行符，它是一个空标签（没有结束标签）。

<syntaxhighlight lang="html">
这是一行文本。<br>
这是新的一行文本。
</syntaxhighlight>

输出效果：
这是一行文本。<br>
这是新的一行文本。

=== 水平线（Horizontal Rules） ===
<hr>标签用于在页面中创建一条水平线，通常用于分隔内容。

<syntaxhighlight lang="html">
<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>
</syntaxhighlight>

输出效果：
<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>

== 文本格式化标签 ==

HTML还提供了一系列标签用于格式化文本：

=== 加粗文本 ===
使用<b>或<strong>标签可以加粗文本。虽然视觉效果相似，但<strong>表示语义上的重要性。

<syntaxhighlight lang="html">
<b>这是加粗文本</b>
<strong>这也是加粗文本（语义更强）</strong>
</syntaxhighlight>

输出效果：
<b>这是加粗文本</b><br>
<strong>这也是加粗文本（语义更强）</strong>

=== 斜体文本 ===
使用<i>或<em>标签可以使文本变为斜体。<em>表示语义上的强调。

<syntaxhighlight lang="html">
<i>这是斜体文本</i>
<em>这也是斜体文本（带有强调）</em>
</syntaxhighlight>

输出效果：
<i>这是斜体文本</i><br>
<em>这也是斜体文本（带有强调）</em>

=== 下划线和删除线 ===
<u>标签用于下划线文本，<s>或<del>标签用于删除线文本。

<syntaxhighlight lang="html">
<u>这是下划线文本</u>
<s>这是删除线文本</s>
<del>这也是删除线文本</del>
</syntaxhighlight>

输出效果：
<u>这是下划线文本</u><br>
<s>这是删除线文本</s><br>
<del>这也是删除线文本</del>

=== 上标和下标 ===
<sup>标签用于上标，<sub>标签用于下标。

<syntaxhighlight lang="html">
H<sub>2</sub>O 是水的化学式。<br>
E = mc<sup>2</sup> 是爱因斯坦的质能方程。
</syntaxhighlight>

输出效果：
H<sub>2</sub>O 是水的化学式。<br>
E = mc<sup>2</sup> 是爱因斯坦的质能方程。

== 预格式化文本 ==

<pre>标签用于保留文本中的空格和换行符，通常用于显示代码或诗歌等需要保留原始格式的文本。

<syntaxhighlight lang="html">
<pre>
    静夜思
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。
</pre>
</syntaxhighlight>

输出效果：
<pre>
    静夜思
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。
</pre>

== 引用和代码 ==

<blockquote>标签用于长引用，<q>标签用于短引用，<code>标签用于显示代码片段。

<syntaxhighlight lang="html">
<blockquote>
这是长引用内容，通常会缩进显示。
</blockquote>

<q>这是短引用</q>

<code>var x = 5;</code>
</syntaxhighlight>

输出效果：
<blockquote>
这是长引用内容，通常会缩进显示。
</blockquote>

<q>这是短引用</q><br>

<code>var x = 5;</code>

== 实际应用案例 ==

以下是一个结合多种格式化标签的实际例子：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>格式化示例</title>
</head>
<body>
    <h1>HTML格式化示例</h1>
    <hr>
    
    <h2>文章标题</h2>
    <p>这是一篇关于<strong>HTML格式化</strong>的文章。<em>请注意</em>各种格式化标签的使用。</p>
    
    <h3>代码示例</h3>
    <pre>
    <code>
    function greet() {
        console.log("Hello, World!");
    }
    </code>
    </pre>
    
    <h3>引用</h3>
    <blockquote>
        <p>知识就是力量。</p>
        <p><small>— 弗朗西斯·培根</small></p>
    </blockquote>
    
    <h3>科学公式</h3>
    <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
</body>
</html>
</syntaxhighlight>

== 格式化标签的层次结构 ==

HTML格式化标签可以嵌套使用，但必须遵循正确的嵌套顺序。以下是常见的嵌套结构：

<mermaid>
graph TD
    html --> body
    body --> h1
    body --> p
    p --> strong
    p --> em
    body --> pre
    pre --> code
    body --> blockquote
    blockquote --> p
    p --> small
</mermaid>

== 注意事项 ==

1. 虽然HTML提供了多种格式化标签，但在现代网页开发中，许多视觉效果通常使用CSS来实现，以保持结构与样式的分离。
2. 语义化标签（如<strong>、<em>）不仅影响外观，还传达了内容的含义，对SEO和可访问性有益。
3. 避免过度使用格式化标签，保持代码简洁易读。
4. 某些标签（如<font>、<center>）在HTML5中已被废弃，应使用CSS替代。

== 总结 ==

HTML基本格式化是构建网页内容的基础技能。通过合理使用标题、段落、文本样式等标签，可以创建结构清晰、易于阅读的网页内容。虽然CSS在现代网页设计中承担了更多的样式控制功能，但HTML格式化标签仍然是内容结构的基础，特别是在语义化标记方面发挥着重要作用。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML基础]]