HTML5块级元素_html/css_WEB-ITnose-HTML-Tutorial-php.cn

HTML5块级元素_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:31:13

Original

1540 Leute haben es durchsucht

目录 [1]section [2]article [3]aside [4]nav [5]header [6]footer [7]hgroup [8]address [9]案例

前面的话

　　几年前，用于网页布局的一般都用div元素，但语义化并不好。HTML5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性的结构、容易维护，并且对数据挖掘服务更加友好

定义

　　区块型元素是用来定义区块内容范围的元素，重要特征是区块级内容会在文档大纲中产生级别，实际上仅包括

、

区块级元素

　　文档中的章节或区块，区块级通用元素

　　[

与

的区别]

　　　　如果标签只用来作为CSS和Javascript的钩子，则使用

标签

　　用来定义独立的文档、页面、应用甚至站点。标准是判断其内容是否可以单独发布或重用

　　[注意]对于

和

来说，是必须要加上标题的

　　不直接相关内容的侧边栏，

　　[注意]关于

　　含有导航链接的区块。页面的主导航里有时含有相关链接或重复链接，但如果是不相关或冗余的，并对主导航不是至关重要的链接，那么一般不需要放在nav元素里

其他块级元素

　　头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等)

　　尾部，包含跟区块或页面整体相关的内容，比如作者、版权信息、联系地址以及其他少量信息

　　hgroup元素可以将一组标题元素放在一起，HTML5大纲算法只会处理其中排名最高的，h1元素封装标题，h2元素封装副标题

　　用于提供相近文章或这个页面作者的直接联系信息(e-mail地址、电话号码等)，而不是用于邮寄地址或类似的不是最直接能够联系到作者的方式的信息

　　[注意]在除了article和body之外的区块元素中使用address元素是不合适的，一个section元素不能含有一个address元素

案例说明

　　想找一个规范使用html5新标签的网站不是很容易，国内大多数网站由于各种各样的原因，依然还是div布局，最终，案例选择使用苹果官网

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>苹果首页</title></head><body><nav>  <ul>    <li><a href="#">Apple</a></li>    <li><a href="#">Mac</a></li>    <li><a href="#">iPad</a></li>    <li><a href="#">iPhone</a></li>     <li><a href="#">Watch</a></li>     <li><a href="#">Music</a></li>     <li><a href="#">技术支持</a></li>     <li><a href="#">搜索</a></li>     <li><a href="#">购物袋</a></li>             </ul></nav><article>  <section>展示1</section>  <section>展示2</section>  <section>展示3</section>  <section>展示4</section>  <nav>    <ul>      <li>按钮1</li>      <li>按钮2</li>      <li>按钮3</li>      <li>按钮4</li>    </ul>  </nav></article><aside>  <ul>    <li><a href="#">Watch</a></li>    <li><a href="#">Pencil</a></li>    <li><a href="#">iPad</a></li>    <li><a href="#">MacBook</a></li>  </ul></aside><footer>  <nav>    <div>选购及了解</div>    <div>商店</div>    <div>应用</div>    <div>账户</div>    <div>关于</div>  </nav>  <section>    <div>其他杂项</div>  </section></footer></body></html>

Nach dem Login kopieren