HTML - 短语标签



HTML 短语标签是为特定目的而设计的,尽管它们的显示方式与其他基本标签(如 <b>、<i>、<pre> 和 <tt>,)类似。在这里,我们将带您了解所有重要的短语标签,因此让我们开始一一查看它们。以下是短语标签的列表,其中一些在 HTML 格式缩写中进行了讨论。

HTML 短语标签列表

  • 强调文本 - HTML <em> 标签
  • 标记文本 - HTML <mark>标签
  • 强文本 - HTML <strong> 标签
  • 缩写文本 - HTML < abbr> 标签
  • 首字母缩略词文本 - HTML <acronym> 标签
  • 定向文本 - HTML <bdo> 标签
  • 特殊条款 - HTML <dfn> 标签
  • 短引用文本 - HTML <q> 标签
  • 长引用文本 - HTML <blockquote> 标签
  • 引用文本 - HTML <cite> 标签
  • 编程代码文本 - HTML <code> 标签
  • 键盘文本 - HTML <kbd> 标签
  • 编程变量 - HTML <pre> 标签
  • 程序输出 - HTML <samp> 标签
  • 地址文本 - HTMl <address> 标签

下面我们使用了短语标签的每个标签,每个标签都有其默认样式,其中少数也接受某些属性。

强调文本<em>标签

包含在 <em>... 中的内容</em> 元素显示为强调的文本。<em> 元素通常以斜体呈现文本,表示强调。


<!DOCTYPE html>
<body>
	 <p>以下单词使用<em>强调字体</em>。</p>
</body>
</html>
输出:以下单词使用强调字体

标记文本<mark>标签

任何包含在<mark>内的东西......</mark>元素,显示为用黄色墨水标记。


<!DOCTYPE html>
<html>
<body>
	 <p>下列单词已标记为<mark>黄色字体</mark>。</p>
</body>
</html>
输出:下列单词已标记为黄色字体

强文本<strong>标签

包含在 <strong>... 中的内容</strong> 元素显示为重要文本。<strong> 元素以粗体显示文本,表示高度重要性。


<!DOCTYPE html>
<html>
<body>
	 <p>以下单词使用<strong>粗体</strong>字体。</p>
</body>
</html>
输出:以下单词使用粗体字体。

缩写文本<abbr>标签

您可以通过将文本放在开始<abbr>和结束 </abbr> 标签中来缩写文本。如果存在,title 属性必须包含此完整说明,并且不包含任何其他内容。


<!DOCTYPE html>
<html>
<body>
	 <p>我好朋友的名字叫<abbr title="Abhishek">Abhy</abbr>. </p>
</body>
</html>
输出:我好朋友的名字叫Abhy.

首字母缩略词文本<acronym>标签

<acronym> 元素允许您指示<acronym>和 </acronym> 标签之间的文本是首字母缩略词。

目前,各大浏览器不改变<首字母缩略词>元素内容的外观。

<acronym>元素在 HTML5 中已弃用。相反,您应该使用 <abbr> 元素来定义缩写,并且可以使用“title”属性指定完整描述。


<!DOCTYPE html>
<html>
<body>
	 <p>本章介绍了在<acronym>XHTML</acronym>中标记文本。 </p>
</body>
</html>
输出 :本章介绍了在XHTML中标记文本。

XHTML. 定向文本<bdo>标签

<bdo>...</bdo> 元素代表双向覆盖,用于覆盖当前文本方向。


<!DOCTYPE html>
<html>
<body>
	 <p>此文本将从左到右。</p>
	 <p>
			<bdo dir="rtl">此文本将从右向左移动。</bdo>
	 </p>
</body>
</html>
输出:
此文本将从左到右。
此文本将从右向左移动。

特别条款<dfn>标签

<dfn>...</dfn> 元素(或 HTML 定义元素)允许您指定要引入特殊术语。它的用法类似于段落中间的斜体字。

通常,在首次引入关键术语时,将使用 <dfn> 元素。大多数最新的浏览器都以斜体字体呈现 <dfn> 元素的内容。


<!DOCTYPE html>
<html>
<body>
	 <p>以下单词是一个<dfn>特殊的</dfn>术语。</p>
</body>
</html>
输出 :以下单词是一个特殊的术语。

引用文本<blockquote>标签

当你想引用来自其他来源的段落时,你应该把它放在<blockquote>...</blockquote> 标签。

<blockquote> 元素内的文本通常从周围文本的左边缘和右边缘缩进,有时使用斜体字体。


<!DOCTYPE html>
<html>
<body>
	 <p>XHTML的以下描述取自W3C网站:</p>
	 <blockquote>XHTML 1.0是W3C对XHTML的第一个建议,它继承了早期对HTML 4.01、HTML 4.0、HTML 3.2和HTML 2.0的研究成果。</blockquote>
</body>
</html>
输出:XHTML的以下描述取自W3C网站:
XHTML 1.0是W3C对XHTML的第一个建议,它继承了早期对HTML 4.01、HTML 4.0、HTML 3.2和HTML 2.0的研究成果。

双引号<q>标签

<q>...当您要在句子中添加双引号时,使用 <q> 元素。通过使用 <q>...</q>,请确保随附的文本以直接引用的形式呈现,从而增强可读性并保持 HTML 文档中的正确标点符号。


<!DOCTYPE html>
<html>
<body>
	 <p>简单易用的<q>七科普</q>教程。 </p>
</body>
</html>
输出:简单易用的七科普教程。

文本引用<cite>标签

如果您要引用文本,则可以将其指定在开头<cite>标签和结尾 </cite> 标签之间的来源

正如您在印刷出版物中所期望的那样,<cite> 元素的内容默认以斜体文本呈现。


<!DOCTYPE html>
<html>
<body>
	 <p>七科普教程源自<cite>W3标准HTML</cite>。</p>
</body>
</html>
输出:七科普教程源自W3标准HTML

编程代码<code>标签

任何出现在网页上的编程代码都应放在 <code>...</code> 标签。通常,<code> 元素的内容以等宽字体呈现,就像大多数编程书籍中的代码一样。


<!DOCTYPE html>
<html>
<body>
	 <p>这是七科普教程的<code>完整代码</code>。 </p>
</body>
</html>
输出 :这是七科普教程的完整代码

键盘文本<kbd>标签

当你谈论计算机时,如果你想告诉读者输入一些文本,你可以使用<kbd>...</kbd> 元素来指示应键入的内容,如本例所示。


<!DOCTYPE html>
<html>
<body>
	 <p>常规文本<kbd>这在kbd元素内部</kbd>的常规文本。 </p>
</body>
</html>
输出:常规文本这在kbd元素内部的常规文本。

编程变量<var>标签

<var> 元素通常与 <pre> 和 <code> 元素结合使用,以指示该元素的内容是一个变量。


<!DOCTYPE html>
<html>
<body>
	 <p>
			<code>document.write(" <var>用户名</var>") </code>
	 </p>
</body>
</html>
输出:document.write("用户名")

程序输出<samp>标签

<samp>...</samp> 元素表示程序和脚本等的示例输出。同样,它主要用于记录编程或编码概念。


<!DOCTYPE html>
<html>
<body>
	 <p>该程序产生的结果是<samp>Hello World!</samp>
	 </p>
</body>
</html>
输出:该程序产生的结果是Hello World!

地址文本<address>标签

<address>...</address> 元素用于包含任何地址。


<!DOCTYPE html>
<html>
<body>
	 <address>北京路50号</address>
</body>
</html>
输出:
北京路50号