标签 |
说明 |
<address> |
定义文档作者或拥有者的联系信息。 |
<time> |
定义日期/时间。 |
<mark> |
定义有记号的文本。 |
<ruby> |
定义 ruby 注释。 |
<rt> |
定义 ruby 注释的解释。 |
<rtc> |
定义文字的语义注解 |
<rp> |
用于为要在浏览器中显示的内容提供后退括号 |
<ins> |
定义已经被插入文档中的文本 |
<abbr> |
用于代表缩写 |
<code> |
呈现一段计算机代码 |
<samp> |
用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console) |
<var> |
表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示 |
<wbr> |
定义可能的换行符。 |
<dfn> |
表示术语的一个定义 |
<kbd> |
用于表示用户输入,它将产生一个行内元素,以浏览器的默认 monospace 字体显示 |
联系信息 <address>
- <address> 标签表示其中的 HTML 提供了某个人或某个组织(等等)的联系信息。
- 由<address>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息,可以是必要的任何一种联系方式,比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <address> You may also want to visit us:<br> Mozilla Foundation<br> </address> </body>
</html>
|
浏览器运行结果如下:
时间标签 <time>
- <time> 标签用来表示 24 小时制时间或者公历日期,若表示日期则也可包含时间和时区。
属性 |
描述 |
datetime |
定义文档作者或拥有者的联系信息。 |
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>The concert starts at <time>20:00</time>.</p> </body>
</html> |
浏览器运行结果如下:
标记文本标签 <mark>
- <mark> 表示为引用或符号目的而标记或突出显示的文本,这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
- 这个标签代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>这是一个<mark>高亮</mark>文本</p> </body>
</html> |
浏览器运行结果如下:
Ruby 注释 <ruby> <rt> <rp> <rtc>
- <ruby> 标签定义 ruby 注释(中文注音或字符)。
- ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
- <rt> 标签包含字符的发音,它用于描述东亚字符的发音
- <rp> 标签用于为那些不能使用 <ruby> 元素展示 ruby 注解的浏览器,提供随后的圆括号。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <ruby> 漢 <rt> <rp>(</rp>ㄏㄢˋ<rp>)</rp> </rt> <rtc>San Francisco</rtc> </ruby> </body>
</html> |
浏览器运行结果如下:
文档插入文本 <ins>
<ins> 标签定义已经被插入文档中的文本。
属性 |
描述 |
cite |
cite 属性的值指向一个文档的 URL,该文档解释了文本被插入或修改的原因。(目前该属性还没有被主流浏览器支持) |
datetime |
该特性指示的此修改发生的时间和日期,并且该特性的值必须是一个有效的日期或者时间字符串。如果该值不能被解析为日期或者时间,则该元素不具有相关联的时间标记。 |
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <ins>这一段文本是新插入至文档的。</ins> </body>
</html> |
浏览器运行结果如下:
定义缩写的文本 <abbr>
- <abbr> 用于代表缩写,并且可以通过可选的 title 属性提供完整的描述。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>Using <abbr>HTML</abbr> is fun and easy!</p> </body>
</html>
浏览器运行结果如下: |
注
- 同 <abbr> 元素一起使用的时候,title 属性有特殊的语法含义; 它必须包含对一个缩写完全天然可读的扩写或者描述。这些文本通常会作为提示,在鼠标指针覆盖到该元素时显示作为一个提示。
- 你使用的每一个 <abbr> 元素与其它同类元素都是相互独立的,为其中一个提供 title 不会自动把相同的附加文字依附到其它内容文字相同的元素上。
- 若使用 title 属性,则它必须且仅可包含完整的描述内容
代码标记 <code>
- <code> 标记呈现一段计算机代码。默认情况下,它以浏览器的默认等宽字体显示。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>Regular text. <code>This is code.</code> Regular text.</p> </body>
</html> |
浏览器运行结果如下:
计算机程序输出标识 <samp>
- <samp> 元素用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>Regular text. <samp>This is sample text.</samp> Regular text.</p> </body>
</html>
|
浏览器运行结果如下:
变量名称 <var>
- <var> 标签表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示
- 表示变量的名称,或者由用户提供的值。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p> A simple equation: <var>x</var> = <var>y</var> + 2 </p> </body>
</html>
浏览器运行结果如下: |
可能的换行符 <wbr>
- <wbr> 元素 — 一个文本中的位置,其中浏览器可以选择来换行,虽然它的换行规则可能不会在这里换行。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages </p> </body>
</html>
浏览器运行结果如下: |
定义术语 <dfn>
- <dfn> 表示术语的一个定义
注
- <dfn> 元素标记了被定义的术语;术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对) 中给出
- 如果 <dfn> 元素有一个 title 属性,那么该术语的值就是该属性的值。
- 否则,如果它仅包含一个 <abbr> 元素,该元素拥有 title 属性,那么该术语的值就是该属性的值。
- 否则,<dfn> 元素的文本内容就是该术语的值
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p> <dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. </p> </body>
</html> |
浏览器运行结果如下:
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <dl> <dt> <dfn> <abbr title="World-Wide Web">WWW</abbr> </dfn> </dt> <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>. </dd> </dl> </body>
</html>
|
浏览器运行结果如下:
键盘输入元素 <kbd>
- <kbd> 标签用于表示用户输入,它将产生一个行内元素,以浏览器的默认 monospace 字体显示。
实例
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p> </body>
</html> |
浏览器运行结果如下: