目录

HTML - 短语标签( Phrase Tags)

短语标签已经针对特定目的进行了解密,尽管它们的显示方式与其他基本标签类似,如《b》, 《i》, 《pre》《tt》 ,您已在前一章中看到过。 本章将引导您完成所有重要的短语标签,让我们一个接一个地看到它们。

强调文本

《em》...《/em》元素中出现的任何内容都显示为强调文本。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Emphasized Text Example</title>
   </head>
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
</html>

这将产生以下结果 -

新页面打开

标记文字

《mark》...《/mark》元素一起出现的任何内容都显示为标有黄色墨水。

例子 (Example)

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

这将产生以下结果 -

新页面打开

Strong Text

《strong》...《/strong》元素中出现的任何内容都显示为重要文本。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Strong Text Example</title>
   </head>
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
</html>

这将产生以下结果 -

新页面打开

文字缩写

您可以通过将文本放在开始和结束 abbr>标记内来缩写文本。 如果存在,title属性必须包含此完整描述,而不包含任何其他内容。

例子 (Example)

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

这将产生以下结果 -

新页面打开

缩写元素

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

目前,主流浏览器不会改变元素内容的外观。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Acronym Example</title>
   </head>
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
</html>

这将产生以下结果 -

新页面打开

文字方向

《bdo》...《/bdo》元素代表Bi-Directional Override,它用于覆盖当前文本方向。

例子 (Example)

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

这将产生以下结果 -

新页面打开

特别条款

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

通常,在第一次引入关键术语时,您将使用元素。 最新的浏览器以斜体字体呈现元素的内容。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Special Terms Example</title>
   </head>
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
</html>

这将产生以下结果 -

新页面打开

引用文字

当你想引用另一个来源的段落时,你应该把它放在《blockquote》...《/blockquote》标签之间。

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

例子 (Example)

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

这将产生以下结果 -

新页面打开

短语

如果要在句子中添加双引号,则使用《q》...《/q》元素。

例子 (Example)

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

这将产生以下结果 -

新页面打开

文字引用

如果您引用文本,则可以指明源位于开头的《cite》标记和关闭《/cite》标记之间

正如您在打印出版物中所期望的那样,默认情况下,元素的内容以斜体文本呈现。

例子 (Example)

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

这将产生以下结果 -

新页面打开

电脑代码

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

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Computer Code Example</title>
   </head>
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
</html>

这将产生以下结果 -

新页面打开

键盘文字

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

例子 (Example)

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

这将产生以下结果 -

新页面打开

编程变量

此元素通常与《pre》《code》元素结合使用,以指示该元素的内容是变量。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Variable Text Example</title>
   </head>
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
</html>

这将产生以下结果 -

新页面打开

节目输出

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

例子 (Example)

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

这将产生以下结果 -

新页面打开

地址文字

《address》...《/address》元素用于包含任何地址。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Address Example</title>
   </head>
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
</html>

这将产生以下结果 -

新页面打开
↑回到顶部↑
WIKI教程 @2018