HTML5深入浅出教学篇之四

介绍

成都创新互联是一家专业提供嘉兴企业网站建设,专注与网站设计制作、网站建设、H5技术、小程序制作等业务。10年已为嘉兴众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     a 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.      
    9.   
  
  
  9.  
    10.   
  
  
  10.     千呼万唤 HTML 5 
    11.   
  
  
  11.  
    12.   
  
  
  12.      
    13.   
  
  
  13.  
    14.   
  
  
  14.      
    15.   
  
  
  15.     锚点的演示 
    16.   
  
  
  16.      
     
    17.   
  
  
  17.     i am webabcd 
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     em 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.     被强调的文本（一般浏览器会渲染斜体） 
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     strong 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.     重要的文本（一般浏览器会渲染为粗体） 
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     small 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.     小号文本 
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.

#p#

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     s 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.     
    windows 8 平板电脑
     
    8.   
  
  
  8.     
     
    9.   
  
  
  9.          
    10.   
  
  
  10.         原价：5000元 
    11.   
  
  
  11.     
     
    12.   
  
  
  12.     
     
    13.   
  
  
  13.         促销价：5元 
    14.   
  
  
  14.     
     
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     cite 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.     
     
    8.   
  
  
  8.          
    9.   
  
  
  9.         我最喜欢看高尔基的海燕，不过忘了讲的是什么了  
    10.   
  
  
  10.     
     
    11.   
  
  
  11.  
    12.   
  
  
  12.      
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     q 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.     从 http://webabcd.cnblogs.com 里引用的一段短内容 
    9.   
  
  
  9.  
    10.   
  
  
  10.      
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     abbr 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.     WTO 
    9.   
  
  
  9.  
    10.   
  
  
  10.  
    11.

#p#

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     dfn 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.         WTO 
    10.   
  
  
  10.      
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     time 
    5.   
  
  
  5.  
    6.   
  
  
  6.        
    7.   
  
  
  7.       
    8.   
  
  
  8.       
    9.   
  
  
  9.     
     
    10.   
  
  
  10.         我的生日和 情人节 是同一天  
    11.   
  
  
  11.     
     
    12.   
  
  
  12.     
     
    13.   
  
  
  13.         我每天  上班  
    14.   
  
  
  14.     
           
    15.   
  
  
  15.     
     
    16.   
  
  
  16.         
    我是 article 的内容
     
    17.   
  
  
  17.         
     
    18.   
  
  
  18.             本 article 的发布日期是 昨天 
    19.   
  
  
  19.           
    20.   
  
  
  20.      
    21.   
  
  
  21.     
     
    22.   
  
  
  22.          
    23.   
  
  
  23.         本 html 的发布日期是 今天 
    24.   
  
  
  24.     
      
    25.   
  
  
  25.      
    26.   
  
  
  26.         // 目前无浏览器支持 valueAsDate  
    27.   
  
  
  27.         alert(document.getElementsByTagName("time")[0].valueAsDate);  
    28.   
  
  
  28.      
    29.   
  
  
  29.  
    30.   
  
  
  30.  
    31.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     code 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.      
    8.   
  
  
  8.      
    9.   
  
  
  9.         var x = 1;  
    10.   
  
  
  10.      
    11.   
  
  
  11.  
    12.   
  
  
  12.  
    13.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.     var 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7.     
     
    8.   
  
  
  8.         
     
    9.   
  
  
  9.              
    10.   
  
  
  10. if (b)  
    11.   
  
  
  11.     write("true");  
    12.   
  
  
  12.              
    13.   
  
  
  13.         
 
  •         

     

  •              
  •             如果变量 b 是 true，则写入“true”  
  •         

     
  •      
  •  
  •  

    • #p#

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     samp 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     
       
      9.   
  
  
    9.         执行代码后，程序会输出 我是由程序输出的信息 
      10.   
  
  
    10.     
       
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     kbd 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     
       
      9.   
  
  
    9.         关机请按   
      10.   
  
  
    10.          
      11.   
  
  
    11.             alt 
      12.   
  
  
    12.             +  
      13.   
  
  
    13.             F4 
      14.   
  
  
    14.          
      15.   
  
  
    15.     
       
      16.   
  
  
    16.  
      17.   
  
  
    17.  
      18.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     sub sup 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     
      告诉你，我是 下标
       
      9.   
  
  
    9.     
      告诉你，我是 上标
       
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     i 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     我是斜体文本 
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.

    #p#

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     b 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     我是粗体文本 
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     u 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     我是下划线文本 
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     mark 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.     
       
      8.   
  
  
    8.          
      9.   
  
  
    9.         我觉得咖啡的味道像 感冒冲剂   
      10.   
  
  
    10.     
       
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     ruby rt rp 
      5.   
  
  
    5.  
      6.   
  
  
    6.       
      7.   
  
  
    7.      
      8.   
  
  
    8.      
      9.   
  
  
    9.         王睿轩  
      10.   
  
  
    10.         ( 
      11.   
  
  
    11.         wangruixuan 
      12.   
  
  
    12.         ) 
      13.   
  
  
    13.     
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.

    #p#

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     bdi 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.           
      8.   
  
  
    8.      
      9.   
  
  
    9.      
      10.   
  
  
    10.  
      11.   
  
  
    11.  
      12.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     bdo 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     123 
      9.   
  
  
    9.  
      10.   
  
  
    10.  
      11.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     span 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.      
      9.   
  
  
    9.         我没有任何语义  
      10.   
  
  
    10.      
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     br 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     a  
      9.   
  
  
    9.      
      10.   
  
  
    10.     b  
      11.   
  
  
    11.      
      12.   
  
  
    12.     c  
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.

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

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.     wbr 
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7.      
      8.   
  
  
    8.     
              webabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcd  
      9.   
  
  
    9.     
       
      10.   
  
  
    10.     
              webabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcd 
      11.   
  
  
    11.     
       
      12.   
  
  
    12.  
      13.   
  
  
    13.  
      14.

    [源码下载]

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

    本文名称：HTML5深入浅出教学篇之四
    转载注明：http://www.shufengxianlan.com/qtweb/news12/55912.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    企业建站知识

    同城分类信息

    鸿艺文化　　 　电商网店　　 　造型师设计　　 　成都做网站　　 　定制网站　　 　阿坝网站建设　　 　成都网站制作　　 　域名注册　　 　成都app软件开发　　 　达州电信机房　　 　成都网站运营维护　　 　app软件开发公司　　 　响应式网站设计方案　　 　娄底尾呼妄服装　　 　全网营销　　 　成都雨棚定制　　 　成都木托盘　　 　乐山托管服务器　　 　重庆花箱　　 　食品包装设计