开发学习网HTML - 短语标签
原创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 var标签
- 程序输出 - HTML samp标签
- 地址文本 - HTML address标签
下面我们使用了每个短语标签，每个标签都有其默认样式，其中一些也接受一些属性。
强调文本
包含在<em>...</em>元素中的内容显示为强调文本。<em>元素通常以斜体呈现文本，表示强调。
示例
<!DOCTYPE html> <body> <p>以下单词使用了<em>强调</em>字体。</p> </body> </html>
输出
以下单词使用了强调字体。
标记文本
包含在<mark>...</mark>元素中的任何内容都会以黄色墨水标记显示。
示例
<!DOCTYPE html> <html> <body> <p>以下单词已被<mark>标记</mark>为黄色。</p> </body> </html>
输出
以下单词已被标记为黄色。
加粗文本
包含在<strong>...</strong>元素中的内容显示为重要文本。<strong>元素以粗体显示文本，表示强烈重要性。
示例
<!DOCTYPE html> <html> <body> <p>以下单词使用了<strong>加粗</strong>字体。</p> </body> </html>
输出
以下单词使用了加粗字体。
缩写文本
您可以通过将文本放在开始<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中标记文本。
方向文本
<bdo>...</bdo>元素代表双向覆盖（Bi-Directional Override），用于覆盖当前文本方向。
示例
<!DOCTYPE html>
<html>
<body>
<p>这段文本将从左到右显示。</p>
<p>
<bdo dir="rtl">这段文本将从右到左显示。</bdo>
</p>
</body>
</html>
输出
这段文本将从右到左显示。
特殊术语
<dfn>...</dfn>元素（或HTML定义元素）允许您指定您正在引入一个特殊术语。其用法类似于段落中的斜体单词。
通常，您会在首次引入关键术语时使用<dfn>元素。大多数最新浏览器以斜体字体呈现<dfn>元素的内容。
示例
<!DOCTYPE html> <html> <body> <p>以下单词是一个<dfn>特殊</dfn>术语。</p> </body> </html>
输出
以下单词是一个特殊术语。
引用文本
当您想引用来自其他来源的段落时，应将其放在<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>，您可以确保 enclosed 文本作为直接引用呈现，提高可读性并保持HTML文档中的正确标点。
示例
<!DOCTYPE html> <html> <body> <p>Amit在西班牙，<q>我想我错了</q>。</p> </body> </html>
输出
Amit在西班牙，我想我错了。
文本引用
如果您引用文本，可以通过将其放在开始<cite>和结束</cite>标签之间来指示来源。
正如您在印刷出版物中所期望的那样，<cite>元素的内容默认以斜体文本呈现。
示例
<!DOCTYPE html> <html> <body> <p>本HTML教程摘自<cite>HTML的W3标准</cite>。</p> </body> </html>
输出
本HTML教程摘自HTML的W3标准。
计算机代码
任何出现在网页上的编程代码都应放在<code>...</code>标签内。<code>元素的内容通常以等宽字体呈现，就像大多数编程书籍中的代码一样。
示例
<!DOCTYPE html> <html> <body> <p>普通文本。<code>这是代码。</code>普通文本。</p> </body> </html>
输出
普通文本。这是代码。普通文本。
键盘文本
当您谈论计算机时，如果想告诉读者输入一些文本，可以使用<kbd>...<kbd>元素指示应输入的内容，如下例所示。
示例
<!DOCTYPE html> <html> <body> <p>普通文本。<kbd>这是kbd元素内的内容</kbd>普通文本。</p> </body> </html>
输出
普通文本。这是kbd元素内的内容普通文本。
编程变量
<var>元素通常与<pre>和<code>元素一起使用，表示该元素的内容是一个变量。
示例
<!DOCTYPE html>
<html>
<body>
<p>
<code>document.write(" <var>用户名</var>") </code>
</p>
</body>
</html>
输出
document.write(" 用户名")
程序输出
<samp>...</samp>元素表示来自程序、脚本等的示例输出。同样，它主要用于记录编程或编码概念。
示例
<!DOCTYPE html> <html> <body> <p>程序产生的结果是<samp>Hello World!</samp> </p> </body> </html>
输出
程序产生的结果是Hello World!
地址文本
<address>...</address>元素用于包含任何地址信息。
示例
<!DOCTYPE html> <html> <body> <address>388A，22号路，朱比利山 - 海得拉巴</address> </body> </html>
输出
388A，22号路，朱比利山 - 海得拉巴
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)