文本标识

Exisi 2020-06-03 10:10:15
Categories: Tags:

标签

说明

<address>

定义文档作者或拥有者的联系信息。

<time>

定义日期/时间。

<mark>

定义有记号的文本。

<ruby>

定义 ruby 注释。

<rt>

定义 ruby 注释的解释。

<rtc>

定义文字的语义注解

<rp>

用于为要在浏览器中显示的内容提供后退括号

<ins>

定义已经被插入文档中的文本

<abbr>

用于代表缩写

<code>

呈现一段计算机代码

<samp>

用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console

<var>

表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示

<wbr>

定义可能的换行符。

<dfn>

表示术语的一个定义

<kbd>

用于表示用户输入,它将产生一个行内元素,以浏览器的默认 monospace 字体显示

 

 

 

联系信息 <address>

 

实例

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

 

属性

描述

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>

 

实例

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

 

 

 

实例

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

实例

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

 

浏览器运行结果如下:

 

 

 

 

 

 

代码标记 <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>

实例

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

 

实例

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

实例

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

 

 

 

实例

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

实例

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

 

浏览器运行结果如下: