【0011】HTML其他文本格式化标签详解(em标签、strong标签、b标签、i标签、sup标签、sub标签......)

如果你觉得我的文章写的不错,请关注我哟,请点赞、评论,收藏此文章,谢谢!

本文内容体系结构如下:

本文旨在深入探讨HTML中其他的文本格式化标签,主要有<em> 标签、<strong> 标签、<b><i> 标签、<q> 标签、<blockquote> 标签、 <mark> 标签、<del> 标签、<ins><u> 标签、<small> 标签、 <sup><sub> 标签、<code> 标签、<pre> 标签、<kbd><samp><var> 标签等。通过本文,您将能够熟练掌握这些标签的用法,从而更有效地控制网页中文本的显示和语义。

一、强调与重要性标签

1.1 <em> 标签

  • 功能:表示强调的文本,通常呈现为斜体。
  • 语义:向搜索引擎和浏览器传达该文本具有额外的强调意义。
  • 示例
html 复制代码
<p>这是一段普通文本,但<em>这部分</em>被强调了。</p>

浏览器渲染效果如下:

1.2 <strong> 标签

  • 功能:表示语气更强的强调文本,通常呈现为粗体。
  • 语义 :与<em>相比,<strong>传达的强调程度更高,通常用于表示重要或需要特别注意的文本。
  • 示例
html 复制代码
<p>请务必注意<strong>这个重要信息</strong>。</p>

浏览器渲染效果如下:

1.3 <b><i> 标签

  • 功能<b>用于使文本加粗,<i>用于使文本斜体。
  • 语义 :这两个标签仅改变文本的显示样式,不传达任何额外的语义信息。因此,在需要强调文本语义时,应优先使用<em><strong>
  • 示例
html 复制代码
<p>这是<b>加粗</b>文本,这是<i>斜体</i>文本。</p>

浏览器渲染效果如下:

二、引用与标记标签

2.1 <q> 标签

  • 功能:表示短小的引用文本。
  • 语义:向浏览器和搜索引擎传达该文本是引用自其他来源的。
  • 示例
html 复制代码
<p>他说:"<q>这是一个很好的建议。</q>"</p>

浏览器渲染效果如下:

2.2 <blockquote> 标签

  • 功能:表示较长的引用段落。
  • 语义 :与<q>相比,<blockquote>更适合用于引用整段或较长的文本。
  • 示例
html 复制代码
<blockquote>
    <p>这是一个较长的引用段落,通常用于引用他人的观点或文章。</p>
</blockquote>

浏览器渲染效果如下:

2.3 <mark> 标签

  • 功能:表示需要标记或高亮显示的文本。
  • 语义:向浏览器和搜索引擎传达该文本是特别标记的,通常用于突出显示重要信息。
  • 示例
html 复制代码
<p>请查看<mark>这个标记的文本</mark>。</p>

浏览器渲染效果如下:

三、删除与插入标签

3.1 <del> 标签

  • 功能:表示被删除的文本。
  • 语义:向浏览器和搜索引擎传达该文本已被删除或不再有效。
  • 示例
html 复制代码
<p>这个<del>文本</del>已被删除。</p>

浏览器渲染效果如下:

3.2 <ins><u> 标签

  • 功能<ins>表示新插入的文本,<u>用于为文本添加下划线(但通常不推荐仅用于样式目的,因为<u>不传达任何语义信息)。
  • 语义<ins>向浏览器和搜索引擎传达该文本是新插入的。
  • 示例
html 复制代码
<p>这是<ins>新插入的文本</ins>。</p>
<p>这是<u>下划线文本</u>(不推荐用于仅样式目的)。</p>

浏览器渲染效果如下:

四、小型文本标签与上标/下标标签

4.1 <small> 标签

  • 功能:使文本以较小的字体显示。
  • 语义:向浏览器和搜索引擎传达该文本是次要或辅助信息。
  • 示例
html 复制代码
<p>这是正常大小的文本,这是<small>较小</small>的文本。</p>

浏览器渲染效果如下:

4.2 <sup><sub> 标签

  • 功能<sup>使文本以上标形式显示,<sub>使文本以下标形式显示。
  • 语义:这两个标签通常用于数学公式、化学符号或脚注等场景。
  • 示例
html 复制代码
<p>这是上标文本<sup>2</sup>,这是下标文本<sub>2</sub>。</p>

浏览器渲染效果如下:

五、代码与计算机相关文本标签

5.1 <code> 标签

  • 功能:表示代码片段或计算机程序中的文本。
  • 语义:向浏览器和搜索引擎传达该文本是代码或计算机指令。
  • 示例
html 复制代码
<p>这是一个<code>代码片段</code>。</p>

浏览器渲染效果如下:

5.2 <pre> 标签

  • 功能:表示预格式化的文本,通常用于显示代码或ASCII艺术等。
  • 语义:保留文本中的空格和换行符,不进行任何格式调整。
  • 示例
html 复制代码
<pre>
这是预格式化的文本。
    保留空格和换行符。
</pre>

浏览器渲染效果如下:

5.3 <kbd><samp><var> 标签

  • <kbd>:表示用户输入的内容,如键盘按键。
  • <samp>:表示计算机程序的示例输出。
  • <var>:表示变量名或程序中的其他元素。
  • 示例
html 复制代码
<p>按下<kbd>Ctrl + C</kbd>复制文本。</p>
<p>示例输出:<samp>Hello, World!</samp></p>
<p>变量名:<var>x</var>。</p>

浏览器渲染效果如下:

六、最佳实践与注意事项

  • 语义优先 :在可能的情况下,优先使用具有语义的标签(如<em><strong><blockquote>等),而不是仅改变样式的标签(如<b><i><u>等)。
  • 可读性:确保文本格式化的方式有助于提高内容的可读性和理解性。
  • 一致性:在整个网页中保持文本格式化的一致性,以提供良好的用户体验。

七、实战演练

7.1 任务

使用上述文本格式化标签,创建一个包含强调文本、引用、标记文本、代码片段等元素的示例网页。

7.2 示例代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签示例</title>
</head>
<body>
    <h2>文本格式化标签示例</h2>
    
    <p>这是一段普通文本,但<em>这部分</em>被强调了,而<strong>这部分</strong>则具有更强的强调效果。</p>
    
    <p>他说:"<q>这是一个很好的建议。</q>"</p>
    
    <blockquote>
        <p>这是一个较长的引用段落,用于展示<blockquote>标签的用法。</p>
    </blockquote>
    
    <p>请查看<mark>这个标记的文本</mark>,它表示需要特别注意的内容。</p>
    
    <p>这个<del>文本</del>已被删除,而这是<ins>新插入的文本</ins>。</p>
    
    <p>这是<small>较小</small>的文本,用于表示次要信息。</p>
    
    <p>这是上标文本<sup>2</sup>,这是下标文本<sub>2</sub>。</p>
    
    <p>以下是一个<code>代码片段</code>:</p>
    <pre>
    function helloWorld() {
        console.log('Hello, World!');
    }
    </pre>
    
    <p>按下<kbd>Ctrl + C</kbd>复制文本,示例输出:<samp>Hello, World!</samp>,变量名:<var>x</var>。</p>
</body>
</html>

7.3 显示效果

八、总结

通过本课程的学习,您将能够更深入地理解HTML中文本格式化标签的用法和语义,从而更有效地控制网页中文本的显示和传达的信息。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试