双十一|HTML5第八讲:HTML5中的结构元素header、nav、article等
文章图片
图1
图2
几年前网页布局一般都用div元素 , 语义化并不好 。 HTML5引入大量块级元素帮助提升网页语义 , 使页面具有逻辑性、易维护性 , 有利于搜索引擎收录内容 。
header元素用于放置整个页面或页面中某个区块的标题 , 可以包含搜索 , Logo图片等内容 。 注意header元素与head元素不同 , HTML中可以使用多个header元素 , 如图1中12—28行 。
nav元素用于导航 , 可将具有导航性质链接归纳在一个区域 , 是HTML5新增元素 。 HTML中可以包括多个nav元素 , 常常与无序列表嵌套使用 , 如:传统导航条、侧边栏导航、页内导航或翻页操作 。
article元素代表文档、页面或应用程序与上下文不相关独立部分 , 如:一篇日志、一条新闻或用户评论 。 article中通常使用section进行划分 , HTML中也可以出面多个article元素 。
aside元素用于定义页面或文章的附属信息 , 如引用、侧边栏、广告、友情链接、导航条等 , 如图1中第24行用于链接其它文章 。
section元素对页面或文章进行分块 , 一个section通常由标题和内容组成 。 注意section元素不是一个目标普通容器元素 , 当需要普通容器时 , 可以使用div;如果article元素、aside元素或nav元素更符合要求时 , 不要使用section元素;没有标题内容的区块不使用section元素 。 artice元素强调独立性 , 如果一块内容相对完整、独立时使用;section元素强调分段或分块 , 如果想将一块内容分成多段时使用 。
footer元素用于定义页面或区域底部 , 通常用于放页面底部内容 , 一个页面也可以包含多个footer元素 , 也可以出现在section元素或article元素中 , HTML5出现之前一般用div来定义 。
【双十一|HTML5第八讲:HTML5中的结构元素header、nav、article等】还有main元素 , 用于呈现页面或文章的主体部分 , 在一个文档中不能出现一个以上 。 因为IE浏览器不支持的原因 , 所以main元素不常用 。
- CPU|红米k50系列基本确认,整体安排跟k40差不多,双4nm芯片确实香
- 新快报讯 记者张磊报道 2021年三季度|线上线下双“IQ”赋能,凯迪拉克LYRIQ打造更高维度的用户互联
- 85英寸双120Hz高刷屏,价格低至7777元,优质电视果然不会被冷落
- 《三生有幸遇上你》大结局:侯爵遇险,十一舍命相救
- 华为|国产科技巨头开始全面反击! 华为/小米双双上榜: 华为霸气拿下第一
- iPhone|苹果iPhone 14最新的双挖孔渲染图很丑!还不如继续用刘海屏设计
- 显卡|华为双喜临门!海思麒麟已在路上,mate50也传新消息
- TCL|TCL 98寸液晶电视,高端安桥音响加持,音画双绝
- 小米科技|现货不抢购!3200万双柔光自拍+ 8GB运存+128GB,小米另类路线
- oppo find x|3秒卖了2亿元,还斩获了双冠军,又一款“神机”要诞生了?