主体结构元素与非主体结构元素

xiaoxiao2021-02-28  91

 主体结构元素                         

主体结构元素:它是为了语义可以结构化,说白了就是为了更好地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标签

一般用来呈现联系信息,主要包括:网站的联系方式,电子邮箱,地址

转载请注明原文地址: https://www.6miu.com/read-51056.html

最新回复(0)