HTML5块级元素_html/css_WEB-ITnose

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

前面的话

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

 

定义

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

 

区块级元素

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

立即学习“前端免费学习笔记(深入)”;

  [

与的区别]

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

标签

 

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

  [注意]对于和

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

 

  不直接相关内容的侧边栏,里面的内容与它所关联的内容相互独立,谁缺了谁都不影响各自文本含义的理解。如一篇文章的广告、相关背景和引述内容等

  [注意]关于的误用是将sidebar的内容全部改成

 

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

 

其他块级元素

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

 

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

 

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

 

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

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

 

案例说明

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

  苹果首页
展示1
展示2
展示3
展示4
其他杂项

登录后复制

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3109130.html

(0)

关于作者

上一篇 2025年3月29日 10:14:36
下一篇 2025年3月29日 10:14:44

AD推荐 黄金广告位招租... 更多推荐

发表回复

登录后才能评论