【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> 标签
- 功能：表示强调的文本，通常呈现为斜体。
- 语义：向搜索引擎和浏览器传达该文本具有额外的强调意义。
- 示例：
<p>这是一段普通文本，但<em>这部分</em>被强调了。</p>
浏览器渲染效果如下：
1.2 <strong> 标签
- 功能：表示语气更强的强调文本，通常呈现为粗体。
- 语义：与
<em>相比，<strong>传达的强调程度更高，通常用于表示重要或需要特别注意的文本。 - 示例：
<p>请务必注意<strong>这个重要信息</strong>。</p>
浏览器渲染效果如下：
1.3 <b> 和 <i> 标签
- 功能：
<b>用于使文本加粗，<i>用于使文本斜体。 - 语义：这两个标签仅改变文本的显示样式，不传达任何额外的语义信息。因此，在需要强调文本语义时，应优先使用
<em>和<strong>。 - 示例：
<p>这是<b>加粗</b>文本，这是<i>斜体</i>文本。</p>
浏览器渲染效果如下：
二、引用与标记标签
2.1 <q> 标签
- 功能：表示短小的引用文本。
- 语义：向浏览器和搜索引擎传达该文本是引用自其他来源的。
- 示例：
<p>他说：“<q>这是一个很好的建议。</q>”</p>
浏览器渲染效果如下：
2.2 <blockquote> 标签
- 功能：表示较长的引用段落。
- 语义：与
<q>相比，<blockquote>更适合用于引用整段或较长的文本。 - 示例：
<blockquote><p>这是一个较长的引用段落，通常用于引用他人的观点或文章。</p>
</blockquote>
浏览器渲染效果如下：
2.3 <mark> 标签
- 功能：表示需要标记或高亮显示的文本。
- 语义：向浏览器和搜索引擎传达该文本是特别标记的，通常用于突出显示重要信息。
- 示例：
<p>请查看<mark>这个标记的文本</mark>。</p>
浏览器渲染效果如下：
三、删除与插入标签
3.1 <del> 标签
- 功能：表示被删除的文本。
- 语义：向浏览器和搜索引擎传达该文本已被删除或不再有效。
- 示例：
<p>这个<del>文本</del>已被删除。</p>
浏览器渲染效果如下：
3.2 <ins> 和 <u> 标签
- 功能：
<ins>表示新插入的文本，<u>用于为文本添加下划线（但通常不推荐仅用于样式目的，因为<u>不传达任何语义信息）。 - 语义：
<ins>向浏览器和搜索引擎传达该文本是新插入的。 - 示例：
<p>这是<ins>新插入的文本</ins>。</p>
<p>这是<u>下划线文本</u>（不推荐用于仅样式目的）。</p>
浏览器渲染效果如下：
四、小型文本标签与上标/下标标签
4.1 <small> 标签
- 功能：使文本以较小的字体显示。
- 语义：向浏览器和搜索引擎传达该文本是次要或辅助信息。
- 示例：
<p>这是正常大小的文本，这是<small>较小</small>的文本。</p>
浏览器渲染效果如下：
4.2 <sup> 和 <sub> 标签
- 功能：
<sup>使文本以上标形式显示，<sub>使文本以下标形式显示。 - 语义：这两个标签通常用于数学公式、化学符号或脚注等场景。
- 示例：
<p>这是上标文本<sup>2</sup>，这是下标文本<sub>2</sub>。</p>
浏览器渲染效果如下：
五、代码与计算机相关文本标签
5.1 <code> 标签
- 功能：表示代码片段或计算机程序中的文本。
- 语义：向浏览器和搜索引擎传达该文本是代码或计算机指令。
- 示例：
<p>这是一个<code>代码片段</code>。</p>
浏览器渲染效果如下：
5.2 <pre> 标签
- 功能：表示预格式化的文本，通常用于显示代码或ASCII艺术等。
- 语义：保留文本中的空格和换行符，不进行任何格式调整。
- 示例：
<pre>
这是预格式化的文本。保留空格和换行符。
</pre>
浏览器渲染效果如下：
5.3 <kbd>、<samp> 和 <var> 标签
<kbd>：表示用户输入的内容，如键盘按键。<samp>：表示计算机程序的示例输出。<var>：表示变量名或程序中的其他元素。- 示例：
<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 示例代码
<!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中文本格式化标签的用法和语义，从而更有效地控制网页中文本的显示和传达的信息。
相关文章：
【0011】HTML其他文本格式化标签详解（em标签、strong标签、b标签、i标签、sup标签、sub标签......）
如果你觉得我的文章写的不错，请关注我哟，请点赞、评论，收藏此文章，谢谢！ 本文内容体系结构如下： 本文旨在深入探讨HTML中其他的文本格式化标签，主要有<em> 标签、<strong> 标签、…...
在分布式系统中，解决因锁持有者故障导致锁无法释放的问题
分布式锁的自动释放与容错机制 在分布式系统中，如果锁的持有者因故障无法主动释放锁，可能会导致死锁或业务阻塞。为了提高系统的稳定性和可用性，需要结合自动释放机制和容错设计。以下是几种关键解决方案： 1. 设置锁的自动过期时…...
结构型模式--组合模式
概念 组合人模式是结构型设计模式的一种，主要是用于解决代码中出现类像树一样进行组合而出现的组合结构的相关操作问题。使其树中的任意一个节点（无论是子节点还是父节点）都可以使用同一套接口进行操作。 使用场景 1、如果希望我们对象组合…...
时间复杂度练习题（6道题，C语言）
// 第一道int x 90;int y 100;while (y>0)if(x>100){x x -10;y--;}else x; // 第二道for (int i 0;i<n;i){for (int j 0;j<m;j){a[i][j] 0;}}// 第三道s 0;for(int i 1;i<n;i){for(int j 1;j<n;j){s B[i][j];}}sum s; // 第四道i 1;while (i<…...
第十四届蓝桥杯大赛软件赛国赛C/C++大学C组
A 【跑步计划——日期问题】-CSDN博客 B 【残缺的数字】-CSDN博客 C 题目 代码 #include <bits/stdc.h> using namespace std;void change(int &x) {int sum 0, t x;while(t){sum t % 10;t / 10;}x - sum; } int main() {int n;cin >> n;int ans 0;…...
【WPF】绑定报错：双向绑定需要 Path 或 XPath
背景 最开始使用的是 TextBlock: <ItemsControl ItemsSource"{Binding CameraList}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel Orientation"Horizontal"/></ItemsPanelTemplate></ItemsControl.Item…...
谈谈 ES 6.8 到 7.10 的功能变迁（6）- 其他
这是 ES 7.10 相较于 ES 6.8 新增内容的最后一篇，主要涉及算分方法和同义词加载的部分。 自定义算分：script_score 2.0 Elasticsearch 7.0 引入了新一代的函数分数功能，称为 script_score 查询。这一新功能提供了一种更简单、更灵活的方式来…...
huggingface下载模型到本地缓存环境变量配置详解
1.安装huggingface-cli 命令行工具，进行模型文件下载 pip install -U huggingface_hub huggingface-cli --help 帮助命令 2.从huggingface下载模型方法 方法1： git clone 下载模型 方法2：huggingface-cli 工具下载模型 方法3&…...
u-boot的环境变量设置、保存、汇总与说明【同时对u-boot的环境变量`bootcmd`和网络启动(run netboot)方式进行了详细解释】
前言 在 U-Boot 中，环境变量用于配置系统的启动参数和行为。是否能正确理解和设置u-boot中的环境变量是启动Linux系统的关键，所以有必要认真学习了解下各环境变量的意思和作用。 最好的学习材料就是实际的例子，所以本篇博文把我遇到过的各个…...
【后端】Docker一本通
长期更新补充，建议关注收藏点赞 目录 Docker概述安装部署Docker基本操作使用docker部署tomcat使用docker部署mysql Docker概述 docker是⼀个应⽤级隔离的虚拟化技术docker三大核心概念 镜像：是具有源的所有特征的⼀个标记⽂件 仓库：存放镜像…...
基于Spring Boot和Vue的餐饮管理系统设计与实现
大家好，今天要和大家聊的是一款基于Spring Boot和Vue的餐饮管理系统的设计与实现。项目源码以及部署相关事宜请联系我，文末附上联系方式。 项目简介 基于Spring Boot和Vue的餐饮管理系统设计与实现的主要使用者分为管理员、员工和用户。没有授权的用户无…...
如何快速的解除oracle dataguard
有些时候，我们为了使oracle dg的standby库另做他用，需要解除oracle dataguard数据同步。我本地因为standby库存储出现故障，导致dg存在问题，故需要解除。今天，我们通过使用部分命令，实现dg的快速解除。 1&a…...
C语言【指针篇】（四）
前言：正文1. 字符指针变量2. 数组指针变量2.1 数组指针变量是什么?2.2 数组指针变量怎么初始化 3. 二维数组传参的本质4. 函数指针变量4.1 函数指针变量的创建4.2 函数指针变量的使用4.3 两段有趣的代码4.3.1 typedef关键字 5. 函数指针数组6. 转移表 总结 前言&am…...
Python基于Django的网络课程在线学习平台【附源码】
博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...
vscode集成DeepSeek
vscode 扩展 安装 Cline Meet Cline，一个可以使用你的CLI和编辑器的AI助手。 得益于 Claude 3.5 Sonnet的代理编码功能，Cline 可以逐步处理复杂的软件开发任务。借助让他创建和编辑文件、探索大型项目、使用浏览器和执行终端命令(在您授予权限后)的工具&…...
【TCAD】Sentaurus 中的“陷阱trap”仿真设置
13.1 陷阱类型 13.2 定义陷阱 13.3 陷阱态密度的类型 13.4 陷阱空间分布 13.5 陷阱占据 13.6 陷阱横截面 13.7 陷阱作为掺杂 13.8 陷阱填充控制 13.9 陷阱可视化 目标 演示如何使用 Sentaurus 设备在模拟中使用陷阱。13.1 陷阱类型...
Lucene硬核解析专题系列（三）：查询解析与执行
Lucene的索引构建为高效搜索奠定了基础，而查询解析与执行则是将用户意图转化为实际结果的关键环节。本篇将从查询的解析开始，逐步深入到查询类型、评分模型和执行流程，揭示Lucene搜索能力的底层原理。 一、查询语法与QueryParser的工作原理 Lucene的查询过程始于用户输入的…...
Linux操作系统5-进程信号3（信号产生总结与核心转储）
上篇文章：Linux操作系统5-进程信号2（信号的4种产生方式，signal系统调用）-CSDN博客 本篇Gitee仓库：myLerningCode/l25 橘子真甜/Linux操作系统与网络编程学习 - 码云 - 开源中国 (gitee.com) 本篇重点：核心…...
家用可燃气体探测器——家庭燃气安全的坚实防线
随着社会的发展和变迁，天然气为我们的生活带来了诸多便利，无论是烹饪美食，还是温暖取暖，都离不开它的支持。然而，燃气安全隐患如影随形，一旦发生泄漏，可能引发爆炸、火灾等严重事故，…...
【学习笔记】网络设备（华为交换机）基础知识 9 —— 堆叠配置
提示：学习华为交换机堆叠配置，含堆叠的概念、功能、角色、ID和优先级；堆叠的建立过程以及注意事项；包含堆叠的配置命令，以及堆叠的配置案例 一、前期准备 1.已经可以正常访问交换机的命令行接口 Console口本地访问教…...
【Linux】Linux的进程控制
目录 1. 学习思维导图 2.进程创建（fork） 2.1 fork创建进程失败 3.进程终止 3.1 进程退出情况 3.1.1main函数 3.1.2 退出码 3.2 exit/_exit函数 1. exit() 函数 2. _exit() 函数 4.进程等待 4.1 实现进程等待的方法 wait/waitpid方法 区别&a…...
电子电气架构 --- 汽车行业技术变革
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身…...
【告别双日期面板！一招实现el-date-picker智能联动日期选择】
告别双日期面板！一招实现el-date-picker智能联动日期选择 1.需求背景2.DateTimePicker 现状图3.日期选择器实现代码4.日期选择器实现效果图5.日期时间选择器实现代码6.日期时间选择器实现效果图 1.需求背景 在用户使用时间查询时，我们经常需要按月份筛选…...
利用 Python 爬虫进行跨境电商数据采集
1 引言2 代理IP的优势3 获取代理IP账号4 爬取实战案例---（某电商网站爬取）4.1 网站分析4.2 编写代码4.3 优化代码 5 总结 1 引言 在数字化时代，数据作为核心资源蕴含重要价值，网络爬虫成为企业洞察市场趋势、学术研究探索未知领域…...
2. 在后端代码中加入日志记录模块
1. 说明 日志模块基本上是每一个软件系统开发中必不可少的，主要用于持久记录一些代码运行中的输出信息，辅助编码人员进行代码调试，以及后期软件上线运行报错分析。在Python中加入日志模块比较简单，只需要借助logging和RotatingFi…...
C++ 17 允许在 for 循环，if 语句，switch 语句中初始化变量
看到 c 有这个特性，python 和 java 似乎都没有，根据 AI 的回答进行了一些整理总结。 文章目录 **1. 在 for 循环中初始化变量****特点****多个变量初始化** **2. 在 if 语句中初始化变量（C17 及以上）****示例****特点** **3. 在 s…...
Pycharm中怎么加快下载三方包速度
Pycharm中怎么加快下载三方包速度 使用命令行下载，-i pip install transformers -i https://mirrors.aliyun.com/pypi/simple/ 在Windows系统的PyCharm中使用Python 3.12环境时，可通过以下几种方式配置不同镜像源来加快下载包的速度。 方式一：在PyCharm界面中直接配置镜…...
 （pytorch实现）){kind=spacer}
Transformer 代码剖析7 - 词元嵌入(TokenEmbedding) （pytorch实现）
一、类定义与继承关系剖析 1.1 代码结构图示 #mermaid-svg-9COHbtmHJhpiroHM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9COHbtmHJhpiroHM .error-icon{fill:#552222;}#mermaid-svg-9COHbtmHJhpiroHM .error-t…...
Unity中动态切换光照贴图的方法
关键代码：LightmapSettings.lightmaps lightmapDatas; LightmapData中操作三张图：lightmapColor,lightmapDir,以及一张ShadowMap 这里只操作前两张： using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI;public cl…...
 》笔记-Chapter27-工作者线程)
【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter27-工作者线程
二十七、工作者线程 工作者线程 前端开发者常说：“JavaScript 是单线程的。”这种说法虽然有些简单，但描述了 JavaScript 在浏览器中的一般行为。因此，作为帮助 Web 开发人员理解 JavaScript 的教学工具，它非常有用。单线程就意味…...