你是不是像我一样对老IE深恶痛疾，你是否对H5和CSS3新标签或者新属性望而却步？
但是我想告诉你的是在保证低版本功能无误，样式差的不是太远的情况下，大胆使用新标签、新属性吧，毕竟技术总会去淘汰不适应历史发展的东西！
首先说下，为什么要使用H5结构化标签：
1.页面结构更加清晰，更加语义化。
2.良好的SEO。
3.可读性好，后期维护更加容易。
4.提供特殊终端阅读，为社会特殊群体提供阅读体验（譬如盲人）。
下面做了一个简单的H5页面的布局图：
让我们先看下html代码：
废话少说，让我们开始依据上面的例子，看看这些新结构化标签：
①section
内容区块，应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分、分区，简介、文章条目和联系信息等。
<section>section1</section>
以下几种情况不建议使用：
■ section不是一般意义的容器元素，对于设置页面样式或者js操作容器，不推荐使用，建议使用div。
■ 强调独立区块时，最好使用article。
■ 在文章内页，最好用article。
■ 对于没有标题的内容，不推荐使用。
②article
article表示页面中的一块与上下文不相关的内容，独立的、完整的区块；article是大主体，section是构成这个大主体的一部分；可以互相嵌套。
<article>article1</article>
VS section
■ 强调独立区域块，最好的区分方法就是假设该区块拿掉，是否对页面其他区域有影响。
■ 在article配合aside使用时，不建议使用section。
③aside
可以包含与当前页面或主要内容相关的引用、侧边栏、广告等使用；在article之外，则可做侧边栏，没有article与之对应，最好不用。
<aside id="aside">i am aside</aside>
④header
通常放置在整个页面或者页面内的一个内容区块的标题。
<header id="header">i am header</header>
⑤footer
可以作为文档的尾部，也可以做某一部分的尾部。
<footer id="footer">footer</footer>
⑥nav
主要用于导航条、业内导航、翻页等，可以在头部尾部，页面中间。
⑦main
表示页面的主要显示内容，页面有且只有一个，不应该被任何其他结构标签包含，不能是以下元素的后代: section/nav/footer/header/aside/article等。
<main>main</main>
虽然这个标签很好，但是重点强调：IE不支持！IE不支持！IE不支持！
H5结构化布局的标签基本讲述完毕，其他H5常用标签，请继续关注我的下一篇文！
网友评论