HTML5 新增文档结构相关元素示例-阿里云开发者社区

HTML5 新增文档结构相关元素示例

2017-11-14 1064

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

HTML5中多了许多与文档结构相关的元素，以下是示例 (注释都在代码中了）：

HTML5页面：


  
  

   
   <!-- 以下这一行定义了这个html页面是html 5 --> 

   
   <!DOCTYPE html> 

   
    

   
   <link rel="stylesheet" href="css/common.css" type="text/css"> 

   
   <body> 

   
   <h1>HTML5 文档结构DEMO</h1> 

   
    

   
   <!-- 这里用nav定义了全局页面导航 --> 

   
   <nav> 

   
    <ul> 

   
      <li><a href="/">主页</a></li> 

   
      <li><a href="/myaccount">我的账号</a></li> 

   
    </ul> 

   
   </nav> 

   
    

   
   <!-- article元素代表了文档，页面或者应用程序中独立的完整的并且可以被外部引用的内容 --> 

   
   <article> 

   
    

   
      <!-- 这个header元素具有引导和导航作用，网页中可以拥有任意数目的header--> 

   
       <header> 

   
        

   
       <!-- 如果一个区块有多个标题，那么hgroup则可以为这些标题/子标题分组 --> 

   
       <hgroup> 

   
       <!-- 一般标题都应该放在header元素中 --> 

   
       <h3>苹果</h3> 

   
       <h4>好吃的苹果</h4> 

   
       </hgroup> 

   
       <p>发表日期： 

   
       <time pubdate datetime="2012/5/5">2012/5/5</time> 

   
       </p> 

   
        

   
       <!-- 这里的nav定义了页内导航，它的超链接指向了页面内某块，用id选择器语法标识 --> 

   
       <nav> 

   
       <ul> 

   
      <li><a href="#apple">苹果介绍</a></li> 

   
    </ul> 

   
       </nav> 

   
       </header> 

   
        

   
       <!-- 这块是这个article的正文部分 --> 

   
       <p> 

   
       <b>苹果</b>，苹果1，苹果2，苹果3，苹果4 

   
       </p> 

   
    

   
        

   
       <!-- 这里的section元素表明对页面的内容进行分块，它不是article(强调独立)，它只是article的内容块（强调分块），它也有标题和内容 --> 

   
       <!-- section元素可以加id,这样可以被引用，比如超链接的指向 --> 

   
       <section id="apple"> 

   
       <!-- section也有标题而且推荐使用标题 --> 

   
        <h3>评论</h3>      

   
        <!-- 这里演示了article的嵌套 ，所以下面部分的article表示局部内容，而不是整体内容，它作为section的内容部分--> 

   
        <article> 

   
           <header> 

   
            <h4>发布者：charles.wang</h4> 

   
            <p> 

   
            <!-- time元素是HTML5中新增的元素，表示24小时中的某个时刻或者时期，允许带时差 --> 

   
            <!-- datetime属性不会显示在网页中，但是会被浏览器读到，日期和时间用T分隔，时间可以带时差(+ -号） --> 

   
            <!-- pubdate属性代表了这article的发布时间，这个属性是可选的 --> 

   
             <time pubdate datetime="2012-5-5T8:00-09:00"> 

   
                  1小时前 

   
             </time> 

   
            </p> 

   
           </header> 

   
           <p> 

   
           我喜欢苹果，因为很好吃 

   
           </p> 

   
            

   
        </article> 

   
         

   
        <article> 

   
         <header> 

   
         <h4>发布者：charles.wang</h4> 

   
          <p> 

   
             <time pubdate datetime="2012-5-5T8:00-09:00"> 

   
                  1小时前 

   
             </time> 

   
            </p> 

   
         </header> 

   
         <p> 

   
         我喜欢苹果那种红彤彤的感觉 

   
         </p> 

   
         

   
        </article> 

   
             

   
       </section> 

   
   </article> 

   
    

   
   <!-- footer表示为上层内容区块或者根区块做一个页脚，footer个数不受限制，article,section,全局都可以设置footer --> 

   
   <footer> 

   
   <ul> 

   
   <li>版权信息:Charles</li> 

   
   <li>站点地图</li> 

   
   <li>联系方式</li> 

   
    

   
   <!-- address用于在文档中呈现联系信息 --> 

   
   <address> 

   
    <a title="文章作者：Charles"  href="http://supercharles888.blog.51cto.com">Charles</a> 

   
    发表于<time datetime="2012/5/5">2012年5 月5日</time> 

   
   </address> 

   
   </ul> 

   
   </footer> 

   
    

   
   </body>

CSS页面：


  
  

   
   /********************************************************************************** 

   
   * @CopyRight: Charles Wang (Tech Lead) 

   
   * mailto: charles_wang888@126.com 

   
   * This file is only for studying purpose instead of commercial purpose 

   
   * 

   
   **********************************************************************************/ 

   
   @CHARSET "UTF-8"; 

   
    

   
   /* 

   
   * 追加block声明，让浏览器页面当使用这些HTML5新增元素时候都使用块方式显示 

   
   */ 

   
   article,aside,dialog,figure,footer,header,legend,nav,section {display:block;} 

   
    

   
   /* 

   
   * 其他样式，也就是为每个元素单独定义样式 

   
   */ 

   
   nav{float:left; width:20%;} 

   
   article{float:right; width:79%;} 

   
   header{display:block; color:yellow; text-align:left;} 

   
   article header{color:blue; text-align:left;}

最后效果图：

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/852852，如需转载请自行联系原作者

HTML5 新增文档结构相关元素示例

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

HTML5 新增文档结构相关元素示例

热门文章

最新文章

相关课程

相关电子书

相关实验场景