总结HTML中的文本标签

引言

在构建网页时，文本是传递信息的主要载体。HTML提供了丰富的文本标签，让我们能够以不同的方式呈现和组织文本。本文将详细介绍HTML中常见的文本标签，帮助你更好地掌握网页文本的排版和展示。

一、标题标签（h1 - h6）

标题标签用于定义网页中的标题，从h1到h6，重要性逐渐降低，字体大小也逐渐变小。h1通常作为页面的主标题，而h6则用于较小的子标题。

语法示例

<h1>这是主标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

使用建议

• 每个页面应该只有一个h1标签，用于突出页面的核心主题。
• 合理使用不同级别的标题，构建清晰的页面结构，有助于搜索引擎优化（SEO）。

默认样式：一般有上下margin和font-size属性

/* 以h1标签说明 */
h1{
    display: block;
    font-size: 2em;
    /*在CSS世界中，inline元素的排列默认是水平的，从左往右，block元素的排列是垂直的，从上往下。

所以，在中文或英文网页环境中，默认情况下，margin-inline指的是水平方向的margin控制，而margin-block指的是垂直方向的margin控制。*/
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

二、段落标签（p）

段落标签用于将文本分成不同的段落，浏览器会自动在段落之间添加空白行。

语法示例

<p>这是第一段文本。它可以包含多个句子，用于阐述一个完整的观点或信息。</p>
<p>这是第二段文本。与第一段文本分开，表达不同的内容。</p>

使用建议

• 当文本内容需要分段时，使用p标签，而不是多个换行标签（br）。
• 可以通过CSS样式对段落的字体、颜色、行高、边距等进行个性化设置。

默认样式：一般默认有上下边距。

/* 段落标签默认样式 */
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

三、文本节点标签（span）

span标签是一个内联元素，用于对文本中的部分内容进行分组或样式设置。它本身没有语义，通常需要配合CSS使用。

语法示例

<p>这是一段包含 <span style="color: red;">红色文本</span> 的段落。</p>

使用建议

• 当需要对文本中的部分内容应用特定样式时，使用span标签。
• 避免滥用span标签，确保HTML结构的语义化。

默认样式：默认为inline，一般没有上下边距等其他样式。

/* 文本标签默认样式 */
span {
    display: inline;
}

四、粗体标签（b）和粗体强调文本标签（strong）

这两个标签都可以将文本显示为粗体，但它们的语义有所不同。b标签只是单纯的视觉效果，而strong标签表示文本的重要性。

语法示例

<p>这是 <b>普通粗体</b> 文本，仅用于视觉强调。</p>
<p>这是 <strong>重要</strong> 文本，强调其重要性。</p>

使用建议

• 当只是为了让文本看起来更醒目时，使用b标签。
• 当需要强调文本的重要性时，使用strong标签，有助于搜索引擎理解页面内容。

默认样式：以下是默认的CSS样式说明：

/* 粗体标签默认样式 */
b, strong {
    font-weight: bolder;
}

五、斜体标签（i）和强调文本标签（em）

这两个标签都可以将文本显示为斜体，但i标签主要用于视觉效果，而em标签表示文本的强调语气。

语法示例

<p>这是 <i>普通斜体</i> 文本，仅用于视觉效果。</p>
<p>这是 <em>强调</em> 文本，表达强调的语气。</p>

使用建议

• 当只是为了让文本呈现斜体效果时，使用i标签。
• 当需要强调文本的语气时，使用em标签，有助于传达语义。

默认样式：以下是默认的CSS样式说明：

/* 斜体标签默认样式 */
i, em {
    font-style: italic;
}

六、下划线标签（u和ins）

下划线标签有两种：u标签和ins标签。u标签通常用于为文本添加下划线，而ins标签表示插入的文本，默认会显示下划线。

语法示例

<p>这是 <u>带有下划线</u> 的文本。</p>
<p>这是 <ins>插入的文本</ins>，表示内容是新增的。</p>

使用建议

• 由于下划线在网页中通常与超链接关联，使用u标签时要谨慎，避免引起混淆。
• 当表示插入的文本时，使用ins标签，它具有更好的语义。

默认样式：以下是默认的CSS样式说明：

/* 下划线标签默认样式 */
u, ins {
    text-decoration: underline;
}

七、删除线标签（del）

删除线标签用于在文本上添加一条横线，表示该文本已被删除或不再有效。

语法示例

<p>原价：<del>100元</del>，现价：80元</p>

使用建议

• 当需要显示文本的变更历史或价格变化时，使用del标签。

默认样式：以下是默认的CSS样式说明：

/* 删除线标签默认样式 */
del {
    text-decoration: line-through;
}

八、上标标签（sup）和下标标签（sub）

上标标签用于将文本显示在基准线的上方，下标标签用于将文本显示在基准线的下方。常用于数学公式、化学方程式等。

语法示例

<p>数学公式：x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
<p>化学方程式：H<sub>2</sub>O</p>

使用建议

• 在需要表示指数、脚注等内容时，使用上标标签。
• 在需要表示化学分子式、同位素等内容时，使用下标标签。

默认样式：以下是默认的CSS样式说明：

/* 上标和下标标签默认样式 */
sup {
    vertical-align: super;
    font-size: smaller;
}
sub {
    vertical-align: sub;
    font-size: smaller;
}

九、换行标签（br）和水平分割线（hr）

换行标签用于在文本中强制换行，而水平分割线用于在页面中添加一条水平的分隔线。

语法示例

<p>这是第一行文本<br>这是第二行文本</p>
<hr>
<p>这是分割线后的文本</p>

使用建议

• 尽量避免使用多个br标签来创建段落间距，应使用CSS的margin或padding属性。
• 水平分割线可以用于分隔不同的内容区域，但要避免过度使用，以免影响页面的整体美观。

默认样式：以下是默认的CSS样式说明：

/* 换行标签和水平分割线默认样式 */
br {
    /* 换行标签在CSS中无直接样式对应 */
}
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

HTML中的文本标签为我们提供了丰富的文本排版和展示方式。合理使用这些标签，不仅可以让网页内容更加清晰易读，还能提高页面的语义化程度，有助于搜索引擎优化和无障碍访问。希望本文能够帮助你更好地掌握HTML文本标签的使用方法，在网页开发中发挥出它们的最大价值。