HTML - 短语元素

HTML - 短语元素 首页 / HTML入门教程 / HTML - 短语元素

尽管短语标签的显示方式与上一章中所见的其他其他基本标签(如<b>,<i>,<pre>和<tt>)的显示方式相似,但它们已针对特定目的进行了识别。 本章将带您浏览所有重要的短语标签,因此让无涯教程开始一个一个地查看它们。

Em 标签

<em> ... </em>元素中出现的所有内容均显示为强调文本。

<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Example</title>
   </head>

   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Mark 标签

带有<mark> ... </mark>元素的所有内容均显示为带有黄色墨水的标签。

<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>

   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Strong 标签

<strong> ... </strong>元素中出现的所有内容均显示为重要文本。

<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>

   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Abbr 标签

您可以通过将文本放在<abbr>并关闭</abbr>标签内来缩写文本。 如果存在,则title属性必须包含此完整描述,而不能包含其他任何内容。

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>

   <body>
      <p>My best friend's name is  <abbr title="Abhishek">Abhy</abbr>.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Acronym 标签

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

当前,主要的浏览器不会更改<acronym>元素的内容的外观。

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>

   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Bdo 标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir="rtl">This text will go right to left.</bdo></p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Dfn 标签

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

通常,第一次引入关键术语时应使用<dfn>元素。 最新的浏览器以斜体字体显示<dfn>元素的内容。

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>

   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Blockquote 标签

当您想引用其他来源的文章时,应将其放在<blockquote> ... </blockquote>标签之间。

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

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>

   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Q 标签

<q> ... </q>元素用于在句子中添加双引号的情况。

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>

   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

City 标签

如果您引用的是文字,则可以指明将其放置在<cite>标签和</cite>标签之间的来源

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

<!DOCTYPE html>
<html>

   <head>
      <title>Citations Example</title>
   </head>

   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Code 标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>Computer COde Example</title>
   </head>

   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Kbd 标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>Keyboard Text Example</title>
   </head>

   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Pre 标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>Variable Text Example</title>
   </head>

   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Samp 标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>Program Output Example</title>
   </head>

   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

Address 标签

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

<!DOCTYPE html>
<html>

   <head>
      <title>Address Example</title>
   </head>

   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>

</html>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-phrase-elements.html

来源:LearnFk无涯教程网

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

摄影入门课 -〔小麥〕

.NET Core开发实战 -〔肖伟宇〕

检索技术核心20讲 -〔陈东〕

Vim 实用技巧必知必会 -〔吴咏炜〕

人人都用得上的写作课 -〔涵柏〕

容器实战高手课 -〔李程远〕

云原生架构与GitOps实战 -〔王炜〕

运维监控系统实战笔记 -〔秦晓辉〕

AI大模型企业应用实战 -〔蔡超〕

好记忆不如烂笔头。留下您的足迹吧 :)