关于前端:HTML标签语义化

标签语义化：

为了使咱们的网站更好的被搜索引擎抓取收录，更天然的取得更高的流量，网站标签的语义化就显得尤为重要。所谓标签语义化，就是指标签的含意。

语义化的长处：

• 使页面没有 css 的状况下，也可能呈现出很好的内容构造；
• 有利于 SEO，爬虫依赖标签来确定关键字的权重，因而能够和搜索引擎建设良好的沟通，帮忙爬虫抓取更多的无效信息；
• 晋升用户体验；
• 便于团队开发和保护，语义化使得代码更具备可读性；
• 不便其余设施解析，以有意义的形式来渲染网页；

罕用的语义标签：

<h1>~<h6> 标签 ：

定义页面的题目；

<h1> 题目 </h1>

<header> 标签 :

用于定义页面的介绍展现区域，通常包含网站 logo、主导航、全站链接以及搜寻框。也适宜对页面外部一组介绍性或导航性内容进行标记。

<header> 
   <h1> 题目 </h1>    
<nav>       
   <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>    
</nav>
</header>

<nav> 元素

定义页面的导航链接局部区域，用于定义页面的次要导航局部;

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

<main> 元素

定义页面的次要内容，一个页面只能应用一次。如果是 web 利用，则突围其次要性能。

<main>
    <h1> 题目 </h1>
    <p> 内容 </p>
    <p> 内容 </p>
</main>

<article> 元素

定义页面独立的内容，它能够有本人的 header、footer、sections 等，专一于单个主题的博客文章，报纸文章或网页文章。article 能够嵌套 article，只有外面的 article 与里面的是局部与整体的关系。

<article>
    <header>
        <h3>
            <a href=""></a>
        </h3>
    </header>
    <section>
        <p></p>
    </section>
    <footer>
        <small>
            <time datetime=""></time> 
            <a href=""></a>
        </small>
    </footer>
</article>

<section> 元素

元素用于标记文档的各个局部，例如长表单文章的章节或次要局部。

<section>
    <h2></h3>
    <p></p>
</section>

<aside> 元素

定义与次要内容相干的内容块。通常显示为侧边栏。

<aside>
     <h1></h1>
     <p></p>
</aside>

<footer> 元素

定义文档的底部区域，通常蕴含文档的作者，著作权信息，链接的应用条款，分割信息等

<footer>
      底部内容
</footer>

<small> 元素

为较不重要的内容定义小字体。如果被突围的字体曾经是字体模型所反对的最小字号，那么 标签将不起任何作用。

<p></p>
<small> 
   <time datetime=""></time>
   <a href=""></a>
</small>

<strong> 元素

把文本定义为语气更强的强调的内容，以示意内容的重要性。

<strong> 内容 </strong>

<em> 元素

标记内容着重点（大量用于晋升段落文本语义），通常出现为斜体文字。

<em> 内容 </em>

<blockquote> 元素

定义块援用，浏览器会在 blockquote 元素前后增加换行，并减少外边距。cite 属性可用来规定援用的起源

<blockquote cite=""> 内容 </blockquote>

<abbr> 元素

解释缩写词。应用 title 属性可提供全称，只在第一次呈现时应用就 ok。

<abbr title=""> 内容 </abbr>