HTML - 短语标签_HTML 菜鸟教程

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

HTML 短语标签列表

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

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

强调文本标签

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


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

输出：以下单词使用强调字体。

标记文本标签

任何包含在内的东西......元素，显示为用黄色墨水标记。


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

输出：下列单词已标记为黄色字体。

强文本标签

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


<!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号

<< HTML - iframe（内联框架） HTML - 类（class） >>

HTML - 短语标签