[html5]学习笔记一 新增的非主体结构元素

html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素。

1、header元素

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个区块的标题,但是也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。

过去常用div元素承载头部、内容和底部,如下:

 <body>
     <div class="header"></div>
     <div class="content"></div>
     <div class="footer"></div>
 </body>

现在则改变写法,如下:

 <body>
     <head></head>
     <article></article>
     <footer></footer>
 </body>

用来做导航,如下:

 <body>
     <header>
         <h1>IT new technology</h1>
         <a href="http://www.jikexueyuan.com">jikexueyuan</a>
         <nav>
             <ul>
                 <li><a href="#">learn</li>
                 <li><a href="#">technology</li>
                 <li><a href="#">hacker</li>
             </ul>
         </nav>
     </header>
 </body>

2、footer元素

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。

过去用div元素来承载内容,如下:

 <body>
     <div class="footer">
         <ul>
             <li><a href="#">版权信息</li>
             <li><a href="#">站点地图</li>
             <li><a href="#">联系方式</li>
         </ul>
     </div>
 </body>

现在则这样写,如下:

 <body>
     <footer>
         <ul>
             <li><a href="#">版权信息</li>
             <li><a href="#">站点地图</li>
             <li><a href="#">联系方式</li>
         </ul>
     </footer>
 </body>

3、hgroup元素

hgroup是将标题及子标题进行分组的元素,hgroup通常会将h1~h6的元素进行分组,譬如一个内容区块的标题及其子元素算是一组。

 <body>
     <header>
         <hgroup>
             <h1>标题1</h1>
             <h2>标题1.1</h2>
         </hgroup>
         <hgroup>
             <h1>标题2</h1>
             <h2>标题2.2</h2>
         </hgroup>
     </header>
 </body>

4、address元素

address元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address不止用来呈现这些内容,还用来展示跟文档相关的联系人的所有联系信息。

 <body>
     <address>
         <a href="#">iwen</a>
         <a href="#">ime</a>
     </address>
 </body>

5、html5的大纲编排的规则

1)显示编排内容区域块

使用section等元素来创建结构

2)隐示编排内容区域块

不使用section等元素,而是根据网页要求,书写h1~h6级标题来创建

3)标题分级

h1~h6,标题的级别是不同的;如果使用级别更低的h标签,则生成下级的区域块;如果使用同级或者更高级别的h标签,则生成新的区域块

4)不同区域块使用相同标题

上一篇:【原创】用JAVA实现大文件上传及显示进度信息


下一篇:Android布局详解之一:FrameLayout