语义化标签

语义标签

为什么要语义化

• 代码结构：在没有css的情况下也能呈现出很好的内容
• 有利于SEO：可以和搜索引擎建立良好的沟通
• 便于团队开发和维护：语义化代码更具有可读性

h1~h6

定页面标题 h1元素具有最高等级

<h1>大标h1</h1>
<section>
     <h2>标题h2</h2>
     <h3>标题h3</h3>
     <h4>标题h4</h4>
     <h5>标题h5</h5>
     <h6>标题h6</h6>
</section>

header头部

通常包括 logo ，主导航 ，全站链接 ，搜索框

<header>
    <h1>标题</h1>
    <nav>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </nav>
</header>

nav

定义页面导航链接部分区域

<nav>
    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
</nav>

main

定义页面主要内容，一个页面只能用一次，web应用主要包括其重要功能

<main>
    <h2>如果当时</h2>
    <p>红雨瓢泼泛起了回忆怎么潜</p>
</main>

article

定义页面独立的内容，它可以有自己的header nav section

• 论坛文章
• 博客文章
• 新闻故事
• 评论

<article>
    <h2>如果当时</h2>
    <p>红雨瓢泼泛起了回忆怎么潜</p>
</article>

section

section通常由内容和标题组成 ,没有标题的内容区块不要使用section元素定义

<section>
    <h2>如果当时</h2>
    <p>红雨瓢泼泛起了回忆怎么潜</p>
</section>

aside

用于显示与内容相关的内容块 通常显示侧边栏

<aside>
    <h2>如果当时</h2>
    <p>红雨瓢泼泛起了回忆怎么潜</p>
</aside>

footer底部

定义页面的底部

<footer>
    copy
</footer>

small

不重要的小字体内容

<small>不重要文字</small>

strong

定义语气较强的内容

<strong>加粗字体</strong>

blockquote

从常规文本中脱离出来 在元素前后加了换行 并增加外边距

<blockquote>段落</blockquote>

abbr

解释缩写单词 title属性可提供全称

<abbr title="告诉你！赶紧登录游戏">上号</abbr>