什么是H标签?
Heading标签也叫做H标签，HTML语言里一共有六种大小的heading 标签，是网页html 中对文本标题所进行的着重强调的一种标签，以标签<h1>、<h2>、<h3>到<h6>定义标题头的 六个不同文字大小的tags,本质是为了呈现内容结构。共有六对，文字从大到小，依此显示重要性的递减，也就是权重依次降低。
W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。h标签是成对出现的，以<h>开始， 以</h>结束。h1，h2，h3，h4，h5，h6，作为标题标签，并且依据重要性递减。遵循这样的原则是很有必要的，它能让页面的层级关系更清楚，让搜索引擎更好地抓取和分析出页面的主题内容等等。
H标签在SEO中的用法
- <h1>用来修饰网页的主标题，一般是网页的标题 ，文章标题，<h1>中部署主关键词。<h1>尽量靠近在html 中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。
- <h2>表示一个段落的标题，或者说副标题，部署长尾关键词。
- <h3>表示段落的小节标题，<h3>效果跟Strong差不多，一般是用在段落小节
- <h4>-<h6>基本很少用到，是告诉搜索引擎这些不是很重要的内容，单一篇文章内容较多的时候，可以用来说明一些内容是不很重要的。
通过上面得解释我们已经知道了什么是H标签,今天主要讲的是使用css美化h标签。
案例1
h标签美化效果案例1
代码
.entry-content h2{
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FF1493;
padding: 5px 12px;
border-left: 5px solid #FF1493;
border-radius: 0rem;
margin: 12px 0px;
}
.entry-content h3 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #4169E1;
padding: 5px 12px;
border-left: 5px solid #4169E1;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h4 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #3CB371;
padding: 5px 12px;
border-left: 5px solid #3CB371;
margin: 12px 0px;
border-radius: 0rem;
}
.entry-content h5 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FFC0CB;
padding: 5px 12px;
border-left: 5px solid #FFC0CB;
margin: 12px 0px;
border-radius: 0rem;
}案例2
代码
h1 {
padding: 0px 20px;
border-left: 10px solid #ed515191;
background-color: rgba(208, 208, 208, 0);
font-size: 19px;
line-height: 30px;
color: cornflowerblue;
font-weight: bold;
margin: 5px 0;
}
h2 {
padding: 0px 20px;
border-left: 10px solid #BF51ED91;
background-color: rgba(208, 208, 208, 0);
font-size: 18px;
line-height: 30px;
color: cornflowerblue;
font-weight: bold;
margin: 5px 0;
}
h3 {
padding: 0px 20px;
border-left: 10px solid #6495ed91;
background-color: rgba(208, 208, 208, 0);
font-size: 17px;
line-height: 27px;
color: cornflowerblue;
font-weight: bold;
margin: 5px 0;
}
h4 {
padding: 0px 20px;
border-left: 10px solid #e2aa2b91;
background-color: rgba(208, 208, 208, 0);
font-size: 16px;
line-height: 24px;
color: cornflowerblue;
font-weight: bold;
margin: 5px 0;
}
h5 {
padding: 0 20px;
border-left: 10px solid #64c1c191;
background-color: rgba(208, 208, 208, 0);
font-size: 15px;
line-height: 21px;
color: cornflowerblue;
font-weight: bold;
margin: 5px 0;
}拓展
美化h1标签可不仅仅局限于改变文本的字体、字号或者颜色喔!基于界面风格的原因，有人想到了另一种美化方式，就是把标题性的文字做成图片。
如:<h1><img src="http://5key.net/xxxx.jpg"></h1>
但这样做有一个弊端，就是在切割页面的时候就直接用上了图片，因此在代码上，h1也就对搜索引擎失去了作用。
解决思路
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(header.gif) no-repeat;}
.testbox{background:url(bg.gif); width:522px; height:323px;}
</style>
<div class="test">
<h1>邀请好友加入</h1>
</div>
<div class="testbox"></div>利用text-indent:-9999px;，我们将“邀请好友加入”的文字远远扔到左边去了。与此同时，搜索引擎仍然可以识别到h1的文字内容。
