什么是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的文字内容。