千呼万唤 HTML 5 (4) - 文本语义元素

最新推荐文章于 2024-04-26 10:08:31 发布

scoliver

最新推荐文章于 2024-04-26 10:08:31 发布

阅读量547

点赞数 1

分类专栏： HTML 文章标签： html 浏览器 ruby 文档 keyboard stylesheet

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原文地址：http://www.cnblogs.com/webabcd/archive/2011/09/26/2190778.html

作者：webabcd

介绍
HTML 5: 文本语义元素

文本语义元素 - a, em, strong, small, s, cite, q, abbr, time, code, var, dfn, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr

示例
1、a - 用于定义超链接（a 是 anchor 的缩写）
element/text/a.html

<!doctype html>
<html>
<head>
    <title>a</title>
</head>
<body>

    <!--
        a - 用于定义超链接（a 是 anchor 的缩写）
          href - 链接的目标 url
          target - 链接的打开方式，_blank, _parent, _self, _top 等
          rel - 当前文档与目标文档之前的关系，其具体的属性值的说明详见文档
            alternate, author, bookmark, external, help, icon, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, sidebar, stylesheet, tag
          hreflang - 目标文档的语言
          media - 目标文档的媒介类型，默认值是 all，其他属性值的说明详见文档
          type - 目标文档的 MIME 类型
    -->

    <a href="http://www.cnblogs.com/index.html" target="_blank" rel="Index" hreflang="zh-cn" media="all" type="text/html">千呼万唤 HTML 5</a>

    <br />

    <!--演示锚点的实现-->
    <a href="#webabcd">锚点的演示</a>
    <p style="height: 2000px">&nbsp;</p>
    <span id="webabcd">i am webabcd</span>
</body>
</html>

复制代码

2、em - 定义被强调的文本（一般浏览器会渲染斜体）（em 是 emphasis 的缩写）
element/text/em.html

<!doctype html>
<html>
<head>
    <title>em</title>
</head>
<body>
    <!--
        em - 定义被强调的文本（一般浏览器会渲染斜体）（em 是 emphasis 的缩写）
    -->
    <em>被强调的文本（一般浏览器会渲染斜体）</em>
</body>
</html>

复制代码

3、strong - 定义重要的文本（一般浏览器会渲染为粗体）
element/text/strong.html

<!doctype html>
<html>
<head>
    <title>strong</title>
</head>
<body>
    <!--
        strong - 定义重要的文本（一般浏览器会渲染为粗体）
    -->
    <strong>重要的文本（一般浏览器会渲染为粗体）</strong>
</body>
</html>

复制代码

4、small - 定义小号文本
element/text/small.html

<!doctype html>
<html>
<head>
    <title>small</title>
</head>
<body>
    <!--
        small - 定义小号文本
    -->
    <small>小号文本</small>
</body>
</html>

复制代码

5、s - 定义不再精确或不再相关的文本（s 是 strike 的缩写）
element/text/s.html

<!doctype html>
<html>
<head>
    <title>s</title>
</head>
<body>
    <p>windows 8 平板电脑</p>
    <p>
        <!--
            s - 定义不再精确或不再相关的文本（s 是 strike 的缩写）
        -->
        <s>原价：5000元</s>
    </p>
    <p>
        <strong>促销价：5元</strong>
    </p>
</body>
</html>

复制代码

6、cite - 用于定义引用内容（书籍或杂志等）的标题
element/text/cite.html

<!doctype html>
<html>
<head>
    <title>cite</title>
</head>
<body>
    <p>
        <!--
            cite - 用于定义引用内容（书籍或杂志等）的标题
        -->
        我最喜欢看高尔基的<cite>海燕</cite>，不过忘了讲的是什么了
    </p>

    <!--
        区别：
        cite 标签用于定义引用内容的标题；blockquote 标签用来定义较长的引用；q 标签用来定义较短的内容
    -->
</body>
</html>

复制代码

7、q - 用于定义一段引用的内容（短内容）（q 是 quote 的缩写）
element/text/q.html

<!doctype html>
<html>
<head>
    <title>q</title>
</head>
<body>
    <!--
        q - 用于定义一段引用的内容（短内容）（q 是 quote 的缩写）
          cite - 引用的内容的来源 url
    -->
    <q cite="http://webabcd.cnblogs.com/">从 http://webabcd.cnblogs.com 里引用的一段短内容</q>

    <!--
        区别：
        cite 标签用于定义引用内容的标题；blockquote 标签用来定义较长的引用；q 标签用来定义较短的内容
    -->
</body>
</html>

复制代码

8、abbr - 定义一个缩写文本，建议在 abbr 的 title 属性中描述缩写的全称（abbr 是 abbreviation 的缩写）
element/text/abbr.html

<!doctype html>
<html>
<head>
    <title>abbr</title>
</head>
<body>
    <!--
        abbr - 定义一个缩写文本，建议在 abbr 的 title 属性中描述缩写的全称（abbr 是 abbreviation 的缩写）
    -->
    <abbr title="World Trade Organization">WTO</abbr>
</body>
</html>

复制代码

9、dfn - 用于定义一个术语（dfn 是 defining instance 的缩写）
element/text/dfn.html

<!doctype html>
<html>
<head>
    <title>dfn</title>
</head>
<body>
    <!--
        dfn - 用于定义一个术语（dfn 是 defining instance 的缩写）
    -->
    <dfn>
        <abbr title="World Trade Organization">WTO</abbr>
    </dfn>
</body>
</html>

复制代码

10、time - 定义日期、时间文本
element/text/time.html

<!doctype html>
<html>
<head>
    <title>time</title>
</head>
<body>
    
    <!--
        time - 定义日期、时间文本
          datetime - 定义元素的日期时间，如果不设置此属性则必须在 time 元素的内容中设置日期时间
          pubdate - bool 类型，标识 time 是否是发布日期。在 article 中则代表当前 article 的发布日期，否则代表整个 html 的发布日期
          valueAsDate - 只读属性，将 time 中的日期时间转换为 Date 对象，目前无浏览器支持
    -->

    <!--
        datetime 格式：YYYY-MM-DDThh:mm:ssTZD，示例：2008-02-16T13:50Z, 2008-02-16T13:50+08:00
          T - 代表时间，其前半部分为日期，后半部分为时间
          TZD - Z 或 +hh:mm 或 -hh:mm 用于标识时区，其中 Z 代表 0 时区
    -->

    <p>
        我的生日和 <time datetime="1980-02-14">情人节</time> 是同一天
    </p>
    <p>
        我每天 <time>9:00</time> 上班
    </p>
    
    <article>
        <p>我是 article 的内容</p>
        <footer>
            本 article 的发布日期是 <time datetime="2011-09-14" pubdate>昨天</time>
         </footer>
    </article>

    <p>
        <!--datetime 值中的“T”代表时间（“T”前面是日期，后面是时间）-->
        本 html 的发布日期是 <time datetime="2011-09-15T12:46:46" pubdate>今天</time>
    </p>

    <script type="text/javascript">
        // 目前无浏览器支持 valueAsDate
        alert(document.getElementsByTagName("time")[0].valueAsDate);
    </script>
</body>
</html>

复制代码

11、code - 定义计算机代码片段（如果需要保留空格、换行等可以在 code 外面包一层 pre）
element/text/code.html

<!doctype html>
<html>
<head>
    <title>code</title>
</head>
<body>
    <!--
        code - 定义计算机代码片段（如果需要保留空格、换行等可以在 code 外面包一层 pre）
    -->
    <code>
        var x = 1;
    </code>
</body>
</html>

复制代码

12、var - 定义计算机代码中的变量，pre code var 可以结合使用
element/text/var.html

<!doctype html>
<html>
<head>
    <title>var</title>
</head>
<body>
    <figure>
        <pre>
            <code>
if (b)
    write("true");
            </code>
        </pre>
        <p>
            <!--
                var - 定义计算机代码中的变量，pre code var 可以结合使用
            -->
            如果变量 <var>b</var> 是 true，则写入“true”
        </p>
    </figure>
</body>
</html>

复制代码

13、samp - 由程序输出的示例文本（samp 是 sample 的缩写）
element/text/samp.html

<!doctype html>
<html>
<head>
    <title>samp</title>
</head>
<body>
    <!--
        samp - 由程序输出的示例文本（samp 是 sample 的缩写）
    -->
    <p>
        执行代码后，程序会输出 <samp>我是由程序输出的信息</samp>
    </p>
</body>
</html>

复制代码

14、kbd - 定义由键盘输入的文本（kbd 是 keyboard 的缩写）
element/text/kbd.html

<!doctype html>
<html>
<head>
    <title>kbd</title>
</head>
<body>
    <!--
        kbd - 定义由键盘输入的文本（kbd 是 keyboard 的缩写）
    -->
    <p>
        关机请按 
        <kbd>
            <kbd>alt</kbd>
            +
            <kbd>F4</kbd>
        </kbd>
    </p>
</body>
</html>

复制代码

15、sub - 定义下标文本（sub 是 subscript 的缩写），sup - 定义上标文本（sup 是 superscript 的缩写）
element/text/sub_sup.html

<!doctype html>
<html>
<head>
    <title>sub sup</title>
</head>
<body>

    <!--
        sub - 定义下标文本（sub 是 subscript 的缩写）
        sup - 定义上标文本（sup 是 superscript 的缩写）
    -->

    <p>告诉你，我是 <sub>下标</sub></p>
    <p>告诉你，我是 <sup>上标</sup></p>
</body>
</html>

复制代码

16、i - 定义斜体文本（i 是 italic 的缩写）
element/text/i.html

<!doctype html>
<html>
<head>
    <title>i</title>
</head>
<body>
    <!--
        i - 定义斜体文本（i 是 italic 的缩写）
    -->
    <i>我是斜体文本</i>
</body>
</html>

复制代码

17、b - 定义粗体文本（b 是 bold 的缩写）
element/text/b.html

<!doctype html>
<html>
<head>
    <title>b</title>
</head>
<body>
    <!--
        b - 定义粗体文本（b 是 bold 的缩写）
    -->
    <b>我是粗体文本</b>
</body>
</html>

复制代码

18、u - 定义下划线文本（u 是 underline 的缩写）
element/text/u.html

<!doctype html>
<html>
<head>
    <title>u</title>
</head>
<body>
    <!--
        u - 定义下划线文本（u 是 underline 的缩写）
    -->
    <u>我是下划线文本</u>
</body>
</html>

复制代码

19、mark - 定义一个标记文本，用于醒目显示
element/text/mark.html

<!doctype html>
<html>
<head>
    <title>mark</title>
</head>
<body>
    <p>
        <!--
            mark - 定义一个标记文本，用于醒目显示
        -->
        我觉得咖啡的味道像 <mark>感冒冲剂</mark> 
    </p>
</body>
</html>

复制代码

20、ruby - 定义东亚文字，rt - 在 ruby 内用于为 ruby 所定义的文字注音或解释，rp - 在 ruby 内用于当浏览器不支持 ruby 时显示指定的内容
element/text/ruby_rt_rp.html

<!doctype html>
<html>
<head>
    <title>ruby rt rp</title>
</head>
<body>
    
    <!--
        ruby - 定义东亚文字
        rt - 在 ruby 内用于为 ruby 所定义的文字注音或解释
        rp - 在 ruby 内用于当浏览器不支持 ruby 时显示指定的内容（不支持的话就顺序显示文本，FireFox 不支持，可以看效果）
    -->

    <ruby>
        王睿轩
        <rp>(</rp>
        <rt>wangruixuan</rt>
        <rp>)</rp>
   </ruby>
</body>
</html>

复制代码

21、bdi - 从周围独立出一段文本，用于双向文本格式（bdi 是 bi-directional isolate 的缩写）
element/text/bdi .html

<!doctype html>
<html>
<head>
    <title>bdi</title>
</head>
<body>
    <!--
        bdi - 从周围独立出一段文本，用于双向文本格式（bdi 是 bi-directional isolate 的缩写）
    -->
    
    <!--bdi 的解释是纯翻译，不知道具体干嘛用，目前也没浏览器支持-->
    <bdi />
</body>
</html>

复制代码

22、bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
element/text/bdo.html

<!doctype html>
<html>
<head>
    <title>bdo</title>
</head>
<body>
    <!--
        bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
          dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
    -->
    <bdo dir="rtl">123</bdo>
</body>
</html>

复制代码

23、span - 没有任何语义
element/text/span.html

<!doctype html>
<html>
<head>
    <title>span</title>
</head>
<body>
    <!--
        span - 没有任何语义
          div 与 span 的区别：div 是块级（block-level）元素，span 是内联（inline）元素
    -->
    <span>
        我没有任何语义
    </span>
</body>
</html>

复制代码

24、br - 定义一个换行符（br 是 blank row 的缩写）
element/text/br.html

<!doctype html>
<html>
<head>
    <title>br</title>
</head>
<body>
    <!--
        br - 定义一个换行符（br 是 blank row 的缩写）
    -->
    a
    <br />
    b
    <br />
    c
</body>
</html>

复制代码

25、wbr - 定义换行的时机（wbr 是 word break 的缩写）
element/text/wbr.html

<!doctype html>
<html>
<head>
    <title>wbr</title>
</head>
<body>
    <!--
        wbr - 定义换行的时机（wbr 是 word break 的缩写）。IE 10 预览版不支持
          处理字符型语言时，显示一段没有空格的字符串时，无论其多长都不会换行，此时如果有 wbr 标签，则字符串会在浏览器宽度不够时主动换行
    -->
    <p>
        webabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcd
    </p>
    <p>
        <wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr>
    </p>
</body>
</html>

复制代码

OK
[源码下载]

scoliver

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
千呼万唤 HTML 5 (4) - 文本语义元素

原文地址：http://www.cnblogs.com/webabcd/archive/2011/09/26/2190778.html作者：webabcd介绍HTML 5: 文本语义元素文本语义元素 - a, em, strong, small, s, cite, q, abbr, time, code, var, dfn, samp, kbd, s
复制链接

扫一扫