H标签美化让网址文章中h标签样式更好看

微信扫一扫,分享到朋友圈

H标签美化让网址文章中h标签样式更好看
收藏 00

什么是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

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

一个热爱互联网的咸鱼
上一篇

火车头采集点击加载列表站点方法ajax「火车头ajax无限加载采集」

下一篇

seo中页面代码优化技巧「站内seo优化」

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

热门

    抱歉,30天内未发布文章!
返回顶部