个性化阅读
专注于IT技术分析

html短语标签 – HTML教程

上一章HTML教程请查看:html格式化

短语标签已经为特定的目的进行了干燥,尽管它们的显示方式与其他基本标签类似,如<b>、<i>、<pre>和<tt>,你在前一章已经看到。这一章将带你浏览所有重要的短语标签,所以让我们开始一个一个地看它们。

强调文本

任何出现在<em>…</em>元素显示为强调的文本。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>强调文本的例子</title>
   </head>
    
   <body>
      <p>以下单词使用<em>强调</em>字体。</p>
   </body>
    
</html>

标记文本

任何出现在<mark>…</mark>元素,用黄色标记显示。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>标记文本的例子</title>
   </head>
    
   <body>
      <p>以下单词已被标记为<mark>标记为黄色</mark></p>
   </body>
    
</html>

加强文本

任何出现在<strong>…</strong>元素显示为加强文本。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>加强文本示例</title>
   </head>
    
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
    
</html>

文字缩写

你可以将文本缩写为打开<abbr>和关闭</abbr>标记,如果存在,title属性必须包含完整的描述,而不能包含其他内容。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>文字缩写</title>
   </head>
    
   <body>
      <p>这是<abbr title = "Abhishek">Abcd</abbr>.</p>
   </body>
    
</html>

缩略词元素

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

目前,主要的浏览器没有改变<acronym>元素内容的外观。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>缩略词的例子</title>
   </head>
    
   <body>
      <p>本章讨论如何标记文本<acronym>XHTML</acronym>.</p>
   </body>
    
</html>

文本方向

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

例子

<!DOCTYPE html>
<html>

   <head>
      <title>文字方向的例子</title>
   </head>

   <body>
      <p>这篇文章将从左到右。</p>
      <p><bdo dir = "rtl">这篇文章将从右向左。</bdo></p>
   </body>

</html>

特别术语

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

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

例子

<!DOCTYPE html>
<html>

   <head>
      <title>特殊术语例子</title>
   </head>
    
   <body>
      <p>这是一个 <dfn>特殊术语</dfn> 的例子.</p>
   </body>
    
</html>

引用文本

当你想引用另一个来源的文章时,你应该把它放在<blockquote>…< / blockquote >标签。

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

例子

<!DOCTYPE html>
<html>

   <head>
      <title>引用例子</title>
   </head>
    
   <body>
      <p>以下关于XHTML的描述摘自W3C网站:</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>元素用于在一个句子中添加双引号。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>双引号例子</title>
   </head>
    
   <body>
      <p>I like Decartes, <q>I think Therefore I am</q>.</p>
   </body>
    
</html>

文本引用

如果要引用文本,可以将其置于开始的<cite>标记和结束的</cite>标记之间

正如你在打印出版物中所期望的那样,<cite>元素的内容在缺省情况下以斜体文本呈现。

例子

<!DOCTYPE html>
<html>
   
   <head>
      <title>引用的例子</title>
   </head>
   
   <body>
      <p>本HTML教程源自<cite>W3 HTML标准</cite>.</p>
   </body>
   
</html>

编程代码

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

例子

<!DOCTYPE html>
<html>
   
   <head>
      <title>编程代码例子</title>
   </head>
   
   <body>
      <p>普通文本。<code>这是代码.</code> 普通文本.</p>
   </body>
   
</html>

键盘文本

当你在谈论计算机时,如果你想让读者输入一些文本,你可以使用<kbd>…</kbd>元素表示应该输入什么,如本例所示。

例子

<!DOCTYPE html>
<html>
   
   <head>
      <title>键盘文本例子</title>
   </head>
   
   <body>
      <p>普通文本<kbd>这是kbd元素</kbd> 普通文本</p>
   </body>
   
</html>

编程变量

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

例子

<!DOCTYPE html>
<html>
   
   <head>
      <title>变量文本例子</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

程序输出

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

例子

<!DOCTYPE html>
<html>
   
   <head>
      <title>程序输出例子</title>
   </head>
   
   <body>
      <p>程序生成的结果为<samp>Hello World!</samp></p>
   </body>
   
</html>

地址文本

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

例子

<!DOCTYPE html>
<html>
   
   <head>
      <title>地址示例</title>
   </head>
   
   <body>
      <address>18A, Road No 69, A - B</address>
   </body>
   
</html>
赞(0)
未经允许不得转载:srcmini » html短语标签 – HTML教程

评论 抢沙发

评论前必须登录!