主体结构元素:它是为了语义可以结构化,说白了就是为了更好地SEO,也就是为了浏览器更好地抓数据,包含的元素:article,section,nav,aside,time.
(1)article文章、文档、页面。
<article> <header> <h2>HTML5课程</h2> </header> <p>轻松学习HTML5,欢迎来到<a href="http://www.huadianedu.com">华点</a></p> </article>
用法:一片文章、一个页面、一个独立完整的内容,这个标签强调的是内容的独立性,同时,一般article元素里面会嵌套一个header标签。
(2)section
section的意思是段落,章节,通常由标题和内容组成。该标签的特点是:强调分段分块
<article> <h1>苹果</h1> <p>苹果是一种可以吃的水果,大家都喜欢吃</p> <section> <h3>红富士</h3> <p>是一个红色的苹果</p> </section> <section> <h3>国光</h3> <p>是一种带有酸性的苹果</p> </section> </article>
(3)nav
导航,navigation的缩写,通常用在:导航条,页面导航,翻页操作等。
<header> <div class="logo"></div> <nav> <ul> <li>H5发展史</li> <li>CSS发展史</li> <li>EMScript发展史</li> </ul> </nav> </header>
(4)aside
意为旁边、侧旁。
通常的用法:放在article里面,作为附属信息部分比如参考信息,名称解释。放在article外面,作为整个页面的附属信息,比如侧边栏,友情链接,广告区域。
<article> <h1>马云是谁</h1> <p>马云,男,1964年9月10日生于浙江省杭州市,祖籍浙江省嵊州市(原嵊县)谷来镇, 阿里巴巴集团主要创始人,现担任阿里巴巴集团董事局主席、日本软银董事、 大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事。</p> <aside> <h1>参考资料</h1> <p>百度百科</p> </aside> </article> <aside> <nav> <ul> <li><a href="">张三博客</a></li> <li><a href="">李四博客</a></li> <li><a href="">王五博客</a></li> <li><a href="">赵六博客</a></li> </ul> </nav> </aside>
(5)time
时间标签,用法:表示24小时的某个时刻或者某个日期。
注:该标签所有浏览器都不支持。
非主体结构元素
(1)header标签
一般用来放置整个页面的标题,比如说一个新闻页面,header一般放新闻的标题,如果是一个官方网址,一般header用来放logo和网站导航。
(2)footer标签
一般用来放置脚注,主要包含:作者信息、copyright。
(3)address标签
一般用来呈现联系信息,主要包括:网站的联系方式,电子邮箱,地址