今天小编跟大家讲解下有关HTML5中新标签和常用标签详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5中新标签和常用标签详解 的相关资料，希望小伙伴们看了有所帮助。
今天先介绍下 html5 新增的结构元素 有的经常使用到 有的用不上 虽然说它们的出现是更促进页面更有语义 更好的 seo 但其实当页面禁用样式后 它们的展现跟 div 是没撒差别 有同学可能会说 既然一样 又不影响页面的最终展现 不管是 article 还是 section 能用就好了。如果考虑实际项目的针对用户 我也是这么认为的 但作为一个重构仔 我们还是得专业点 再考虑到无障碍这块 那么 html5 标签的作用就更明显了。于是复习下内容并记录在博客上 顺便分享给大家 也方便自己以后查找。
HTML5 新增结构元素分为主体结构元素和非主体结构元素
1.主体结构元素包括 article、section、nav、aside、time2.非主体结构元素包括 header、hgroup、footer、address一、主体结构元素articlearticle 标签 从语义化上看为文档、页面 其用法如下：
通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题 并放在 header 标签中article 元素可以互相嵌套使用频率极高 强调独立性 多注意下与 header 标签的使用。
复制代码代码如下:<article> <header> <h1>是我标签</h1> </header> <p>我是段落</p> <article> <div>我的内容</div> </article></article>sectionsection 标签 从语义化上看为部分 其用法如下：
用于页面内容的独立分块 往往是文章的一段通常由内容和标题组成 没有标题的内容不推荐使用 section使用频率低 强调分段分块。
注：《HTML5与CSS3权威指南》这本书中说明：一个容器需要被定义样式或者脚本定义行为时 推荐用div而非section 不要将section用作设置样式的容器。
复制代码代码如下:<section> <h1>水果</h1> <article> <h2>苹果</h2> <div>苹果是撒 </div> </article> <article> <h2>桔子</h2> <div>桔子是撒 </div> </article> </section><!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --><article> <h1>中国人物</h1> <p>三国、两晋、南北朝</p> <section> <h2>三国</h3> <p>猛将猛将猛将猛将</p> </section> <section> <h2>两晋</h3> <p>猛将猛将猛将猛将</p> </section></article>navnav 标签 从语义化上看为导航 其用法如下：
通常作为页面导航的链接组侧边栏导航使用频率高。
复制代码代码如下:<nav> <ul> <li><a href="https://www.aidi.net.cn//html5/">菜单1</a></li> <li><a href="https://www.aidi.net.cn//html5/">菜单2</a></li> <li><a href="https://www.aidi.net.cn//html5/">菜单3</a></li> </ul></nav>asideaside 标签 从语义化上看为在旁边、侧边 其用法如下：
在 article 标签中使用时 作为主要内容的附属信息部分 如有关的参考资料、名词解释等。在 article 标签外使用时 作为页面或者站点全局的附属信息部分 如侧边栏、博客的友情链接部分、广告区域等。使用频率低。
复制代码代码如下:<!-- 在article标签外使用时 --><article> <h1>马云是谁</h1> <p>马云 男 1964年10月15日出生于浙江省杭州市 中国著名企业家 阿里巴巴集团、淘宝网、支付宝创始人..........</p> <aside> <h1>参考资料</h1> <p>百度网、维基百科...</p> </aside></article></p><p><!-- 在article标签内使用时 --><aside> <nav> <ul> <li><a href="https://www.aidi.net.cn//html5/">老赵的博客</a></li> <li><a href="https://www.aidi.net.cn//html5/">鬼哥的博客</a></li> <li><a href="https://www.aidi.net.cn//html5/">彪叔的博客</a></li> </ul> </nav></aside>timetime 标签 从语义化上看为时间 其用法如下：
代表 24 小时中的某个时刻或某个日期表示时刻时允许带时间差可定义很多格式的日期和时间使用频率低。复制代码代码如下:<time datetime="2013-3-6">2014年3月6日</time><!-- datetime属性中日期与时间之间要用“T” 文字分隔 “T”表示时间 --><time datetime="2013-3-6T20:00">2014年3月6日20:00</time><!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 --><time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>二、非主体结构元素headerheader 标签 从语义化上看为文档的页眉 其用法如下：
一种具有引导和导航作用的结构元素通常放置在整个页面或者页面内的一个内容区块的标题一个网页内并没有限制 header 标签的个数使用频率极高 比较容易理解。
复制代码代码如下:<header> <h1>我是大头</h1></header><article> <header> <h1>我是脖子</h1> </header> <p>我是身体</p></article>hgrouphgroup 标签 从语义化上看为标题组 其用法如下：
作为 header 标签的子元素一个内容模块中包括了主标题和至少一个子标题才使用 hgroup通常会将 h1~h6 元素进行分组使用频率高。
复制代码代码如下:<article> <header> <hgrounp> <h1>我是刘备</h1> <h2>我是关羽</h2> <h3>我是张飞</h3> </hgrounp> </header> <p>吕布惊呆了</p></article>footerfooter 标签 从语义化上看为文档的脚注 其用法如下：
一个内容块区的脚注通常内容为联系信息、相关阅读、版权信息等使用频率高 比较容易理解。
复制代码代码如下:<article> <p>吕布惊呆了</p> <footer> <ul> <li>关于三国</li> <li>地图信息</li> <li>游戏攻略</li> </ul> </footer></article>addressaddress 标签 从语义化上看为地址 其用法如下：
用于文档中呈现的联系信息通常内容为作者、网站链接、电子邮箱、地址、电话号码等使用频率低。复制代码代码如下:<address> <a href="https://www.aidi.net.cn//html5/">作者：张三丰</a> <a href="https://www.aidi.net.cn//html5/">地址：武当山</a> <a href="https://www.aidi.net.cn//html5/">联系方式：1247</a></address>
希望本文对大家在 html5 结构标签上的运用有一定的指导 如果发现内容有错误的地方 欢迎大家指正~
来源：爱蒂网
