下载掌阅APP，畅读海量书库
立即打开
网页的主要功能是文本展示，HTML提供了相应的标签，用于标记某些文本，使其具有加粗、倾斜、下划线等效果。
在口语表达中，有时会强调某些字，用来改变这句话的意思。同样，在书面用语中，可以使用斜体来达到同样的效果。
＜em＞是一个行内标签，表示强调，浏览器会以斜体显示它包含的内容。示例代码如下。
运行效果如图2-5所示。
图2-5 ＜em＞标签显示效果
虽然浏览器通常会以斜体显示＜em＞标签中的内容，但无法保证一定如此，所以最好还是用CSS 指定一下这个标签的样式。
＜i＞标签与＜em＞相似，也表示与其他地方有所区别，浏览器会以斜体显示。示例代码如下。
运行效果如图2-6所示。
图2-6 ＜i＞标签显示效果
＜i＞标签的语义不强，更像是一个纯样式的标签，建议优先使用＜em＞标签。
在口语中，我们通常使用重音来强调重要的词。而在文字中，我们通常使用粗体字来达到同样的强调效果。加粗显示标签＜strong＞是一个行内元素，表示它包含的内容很重要，需要引起注意。浏览器会以粗体显示其中内容。示例代码如下。
运行效果如图2-7所示。
＜b＞与＜strong＞很相似，也表示所包含的内容需要引起注意，浏览器会加粗显示。示例代码如下。
图2-7 ＜strong＞标签显示效果
运行效果如图2-8所示。
图2-8 ＜b＞标签显示效果
它与＜strong＞的区别在于，它没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此建议优先使用＜strong＞标签。
表示日期、化学方程式和数学方程式时会使用上标和下标。＜sub＞标签可以将内容变为下标，＜sup＞标签可以将内容变为上标，它们都是行内元素。示例代码如下。
运行效果如图2-9所示。
图2-9 ＜sub＞标签显示效果
HTML也有用于标记引用的标签，至于使用哪个标签标记，取决于你引用的内容是一块还是一行。
如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，应该把它用＜blockquote＞标签包裹起来，并且在cite属性里用URL来指向引用的资源，浏览器会在样式上将其与正常文本区别显示。示例代码如下。
显示效果如图2-10所示。
＜blockquote＞标签有一个cite属性，它的值是一个网址，表示引用来源，不会显示在网页上，浏览器默认使用斜体显示这部分内容。
图2-10 ＜blockquote＞标签显示效果
＜cite＞不一定跟＜blockquote＞一起使用，如果文章中提到资料来源，也可以单独使用。示例代码如下。
运行效果如图2-11所示。
图2-11 ＜cite＞标签显示效果
＜q＞是一个行内标签，也表示引用。它与＜blockquote＞的区别是它不会产生换行。示例代码如下。
运行效果如图2-12所示。
图2-12 ＜q＞标签显示效果
在上面的例子中，引言部分跟前面的说明部分是在同一行中。
另外，跟＜blockquote＞一样，＜q＞也有cite属性，表示引用的来源。
浏览器默认会自动添加半角的双引号，所以，引用中文内容时要小心处理引号，以确保内容的可读性。
HTML中有大量标记计算机代码的标签。
● ＜code＞： 用于标记计算机通用代码。
● ＜pre＞： 用于保留空白字符（通常用于代码块）。如果在文本中使用缩进或多余的空白字符，浏览器会将其忽略，你将不会在呈现的页面上看到它。但是，如果你将文本包含在＜pre＞…＜/pre＞标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
● ＜var＞：用于标记具体变量名。
● ＜kbd＞： 用于标记输入计算机的键盘（或其他类型）输入。
● ＜samp＞： 用于标记计算机程序的输出。
示例代码如下。
运行效果如图2-13所示。
图2-13 计算机代码显示效果
HTML 支持将时间和日期标记为可供机器识别的 ＜time＞ 标签。＜time＞是一个行内标签，其示例代码如下。
在上述代码中，＜time＞表示下周三的具体日期，这方便搜索引擎抓取，或者进行下一步的其他处理。＜time＞的datetime属性，用来指定机器可读的日期，可以有以下多种格式。
● 有效年份：2022
● 有效月份：2022-11
● 有效日期：2022-11-18
● 无年份的日期：11-18
● 年度的第几周：2022-W47
● 有效时间：14:54、14:54:39、14:54:39.929
● 日期和时间：2022-11-18T14:54:39.929
相关格式示例代码如下。
