前端记念册Web前端之路让前端飞

Html5语义化标签

2017-04-18  本文已影响94人  古朋

什么是语义化?

简单说来就是让机器可以读懂内容。

语义化的优点:

PS:一般的爬虫框架流程为----从互联网海量页面中先抓取一些高质量页面,抽取其中所包含的url,将这些URL放入待抓取队列中,爬虫依次读取该队列中的url,通过DNS解析,将这些url转化成对应网站的IP地址,网页下载器则通过IP地址下载页面所有内容。

html5语义化标签

123123

header元素

header 元素代表“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。

整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素

<header>
    <hgroup>
        <h1>xxx</h1>
    </hgroup>
    <nav></nav>
</header>

footer元素

footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

<footer>
    Copyright © 2017 ...
</footer>

nav元素

nav元素代表页面的导航链接区域,用在整个页面主要导航部分上,不合适就不要用nav元素

<nav>
    <ul>
        <li>首页</li>
        <li>xxx</li>
        ...
    </ul>
</nav>

section元素

section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

<section>
    <h1>section是啥?</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>

article元素

article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。并不是说只有是文章内容才能使用,而是说只要是自成一体的内容就可以用这个标签(特殊的section)

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权:html5jscss网所属,作者:小北</small></p>
    </footer>
</article>

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小北,前端一枚</p>
    </aside>
</article>

使用注意:

参考地址:

搜索引擎和如何SEO

html5语义化标签兼容方案

其他语义化标签

上一篇下一篇

猜你喜欢

热点阅读