切版网（2013~2023）
http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82
2017年06月4日
css科学命名体系以及html与seo的秘密
本文就“css科学命名体系以及html与seo的秘密”展开讨论，作者切版网，发布于2017年06月4日 全文共4877个字，预计阅读时长16分15秒。
CSS科学命名体系
来自切版网（qieban.cn）的命名规则，这个规则同样适用所有的网站，好的css命名是检验一个css工作者是否合格的一项基本指标。
l id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:qieBan（最新产品/qie+ban)
l CSS样式表各区块用注释说明
l 尽量使用英文命名原则
l 尽量不加中杠和下划线
l 尽量不缩写，除非一看就明白的单词
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：col
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginBar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subNav
菜单：menu
子菜单：subMenu
搜索：search
友情链接：friendLink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：register
状态：status
投票：vote
合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：col
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainNav
子导航：subNav
顶导航：topNav
边导航：sidebar
左导航：leftSidebar
右导航：rightSidebar
菜单：menu
子菜单：subMenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginBar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guide
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)标题栏样式,使用”类别+功能”的方式命名,如
.barNews { }
.barProduct { }
(2)模块结构css定议
模块标题 .module
模块标题 .moduleHead
模块包装 .moduleWrap
模块内容 .moduleContent
注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题&nbs
HTML与SEO的秘密
1、<!–页面注解–>
2、<html>
3、<head>
4、<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
5、<meta http-equiv=Content-Language content=zh-cn>
6、<title>页面标题</title>
7、<meta name=”keywords” content=”关键词“>
8、<meta name=”description” content=”网站描述“>
9、<link href=”inc/css.css” type=”text/css” rel=”stylesheet”>
10、</head>
11、<body>
12、<div>
13、<h1>页面内容标题</h1>
14、<h2>页面相关性标题</h2>
15、<h3>标题系列</h3>
16、<h4>标题系列</h4>
17、<h5>标题系列</h5>
18、<h6>标题系列</h6>
19、<img src=”xxx.jpg” alt=”图片说明“>
20、<a href=”/” title=”链接说明“>链接词</a>
21、<strong>重点关键词强调</strong>
22、<b>关键词强调</b><u>关键词强调</u><i>关键词强调</i>
23、</div>
25、<div>
26、版权部分关键词强调
27、</div>
28、</body>
29、</html>
注：在<body>..</body>标签区中的罗列，都是一些基础的HTML标签，这些标签出现的次序是可以变化的。
我们一步一步来说。
第1行的<!–页面注解–>
这个标签是用来做HTML代码注解的，很多站在这里会写上关键词，这种形式的注解在浏览器中是不会显示的，而搜索引擎可以读到。所以这个标签有的时候会成为作弊的一种形式，不要过多的用这种标签到来注明你的关键词，否则如果搜索引擎认为你是作弊的话，就惨了。
第6行<title>页面标题</title>。这是相当重要的！
这里字字值千金！对于做百度SEO的朋友，一定要记得这个标签可能是你是否真正能够做到排名靠前的重点，而且这个重点绝对不容忽视。标题主要注意你的用 词，如果你做垃圾站，堆关键词也无所谓，如果你要做正规站点，请你正确对待，写得标准一点，不要堆关键字，保持你的主要词在这里出现三次就行，太多对你没 有好处，对排名也不会有好处。GG并不喜欢太长的标题，百度也偶尔提到只希望在标题的前20个字里出现你的关键词。明确这些以后，还要注意的是，你的主要 关键词应该在标题里越靠前越好！
第7行<meta name=”keywords” content=”关键词“>
这个的用途现在权重越来越低，但是再低都是有权重的，只要认真对待，这里的词是有效果的。这里注意两点：
第一、大部分人都会选择在这里写关键词不会超过三个，有的人直接只写一个，这是有好处的，每一处标签都有权重，你强调的内容越少，那么它的权重会相对更高的，所以不要写太多，否则不如不写，而让搜索引擎自己去判断你的页面关键词。
第二、几乎所有的SEO专业人员都会跟你说尽量在每一个页面写不同的关键词，避免被认为是重复页面的危险。
第8行<meta name=”description” content=”网站描述“>
这个是主要为了在搜索结果里出现的索引结果的，索引结果就是在百度搜索你的站的时候标题下面的摘要内容。这是一个页面的导读，用来说明网页的主要内容，当 然现在的权重不高，跟keywords标签一样，不太受重视。而且现在由于搜索引擎机器人的越来越智能化，基本上已经实现整个页面的摘要内容随意出现它的 索引结果里了，搜索引擎会根据你搜索的内容不同显示不同的索引。你如果要写description，就认真去写，很多人是用这里来控制搜索引擎的索引显示 的，因为网站描述写得越具体，就越有可能在索引的时候出现这个标签中的内容。
第13行<h1>页面内容标题</h1>
这个标签是一个页面最重要的标签，也是搜索引擎定位这个页面的主要依据，如果你的<h1>标签里没有出现你的页面关键字，那真是的一种很大的损失，这里的权重相对于其它的在<body>区的标签来说更加重要。在HTML 代码中，它的重要性仅次于<title>。很多人放弃写这个标签，对于搜索引擎是很不友好的，你可以不出现其它的强调关键词的标签，但是这个 标签一定要出现，这是告诉搜索引擎你的页面用一句话应该如何表达，如果这一行字都没有，再智能化的机器人可能都会以你的<title>来决定 是否用来作为一个词的排名，很多时候一个网站的页面标题都是完全一样的，因为他们程序的原因，但是如果你没有办法修改title，已经损失很大了，而如果 你的页面这个<h1>标签也没有出现的话，我不知道搜索引擎会怎么样去理解一个页面，对于SEO来说，那真很糟糕的一件事情。所以，认真对待 你的页面<h1>，这是很重要的，要强调的是，这个标签一个页面不要出现太多，一次就行了，道理很简单，太多会让别人无法确定你页面中哪一个 才是最重要的，无法确定重点跟没有这个标签我觉得没有太大的分别。所以，最好只出现1次，以达到明确说明的目的。
第14行<h2>页面相关性标题</h2>
这个标签与<h1>是一样和道理，但是权重相对来说较低，如果你的页面没有<h1>，那么这个标签对于页面来说基本上就相当 于<h1>的重要性了。这里面你包含的是长尾关键词相关的内容，比如你的页面做几个关键词，主词应该出现在<h1>里，那么其它 的词以及你想发展的词就可以出现在<h2>里，这样来说是一种合理的安排。
而<h3>~<h6>这些标签，重要性是依次递减的，在一个页面的权重越来越低。
第19行<img src=”xxx.jpg” alt=”图片说明“>
我想这个标签很多人都知道，它的作用很明确，就是指定一张图片的说明文字，让搜索引擎知道这张图片是关于什么的。比如你的图片是“刘亦菲“，那么你的 alt=”图片说明“中的“图片说明“就应该是与“刘亦菲“相关的词或者句子。这样写当然也有利于你在图片搜索的结果里显示排名更前面一点，不过现在百度 基本上是以页面标题作为一张图片排名的要素，当然，你的alt标记做得好，将会增加你的图片匹配度。关于图片说明的研究，以后我也许会写一篇分析性的文 章，因为有<a>链接的图片里，还会有一个title标签，title与alt这两个谁重要，是有必要研究一下的。
第20行<a href=”/” title=”链接说明“>链接词</a>
这是链接说明，同时也是一个页面链接的SEO重点，这里的“链接词“相当的重要，如果你跟别人交换链接，你这个词的写法是起着外链好坏与否的决定性因素 的。“链接词“建议你最好写成自己的关键词，如果觉得实在不行或者怎么样，你一定要在“链接说明“里出现你的关键词。否则对于排名，你的链接做得没有太大 的好处。这在SEO专业术语里还有一种叫法，叫做“google炸弹“，就是用很多站点，同时做链接到一个网站，然后所有的“链接词“都写一个词-“刘亦 菲“，不久以后google就会将这个站当做“刘亦菲“这个词最权威的站点，即使被那些站点链接的这个页面没有任何与“刘亦菲“相关的内容，这个网站在” 刘亦菲“这个词的排名情况也会很好。不过google已经调整了算法，但是这样做链接肯定是有用的，一定要认真对待你的链接。还有一个重点，就是对方的链 接，如果是JS调用的，你就别想在他那里得到任何权重，因为搜索引擎不会去读取JS里的内容，所以，建议大家好好做链接，不要做了链接你的站却跟没做一 样。像百度空间的友情链接就是JS文件调用的，所以百度空间里的友情链接你是没有权重的。具体可以查看HTML代码，正常情况下一个页面你找不到你的网站地址在<a>..</a>标签内出现，基本上这就是属于无效链接。
第21行<strong>重点关键词强调</strong>
这个标签基实重要性仅次于<h1>，很多人都这样跟我讲，我也基本上认同。很确定的是它 比<b>、<u>、<i>等标签要权重高。所以如果你的页面有很重要的词，而你想强调它，首先选这 个<strong>标签吧，接下来相对不重要的词强调请你选<b>、<u>、<i>等标签。当然，不要 用得太多了，用得太多没有重点就等于没有用了。
第26行版权部分关键词强调
我为什么要写这个？因为这个权重越来越高了，在底部版权部分，及很接近版权部分出现关键词，是一种手法。在这里强调你的关键词，是让你的关键词布局更加合理，而不是头部出现关键词，中部强调很多次，而底部却没有什么相关联的内容，这个词在这个页面是否值得怀疑呢？
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
更多相关文章
网站切版的优化有哪些方法？
1. 利用CSS Sprites技术来减少HTTP请求的数量。 2. 对于能使用CSS实现的效果，尽量避免使用 […]
微信小程序切图echarts层级太高解决方案
发布时间:2022年08月27日 标签：echarts
摘要：项目中因为需求，底部的导航栏是自己写的，在开发者工具中一切正常但是在真机上页面滑动时，的层级比高，调过两 […]
解决移动端 click 事件延迟300ms插件fastclick.js
发布时间:2022年04月14日
这是一款绿色的提高用户体验的js插件，可以放心使用。为什么使用?解决触发元素的 click 事件延迟300ms […]
跨屏是一种趋势，企业顺势才能赢得未来
发布时间:2021年12月6日 标签：建站, 网站建设, 跨屏
根据艾瑞网的统计，早在2014年中国移动互联网市场规模为2134.8亿元，突破千亿元大关，同比增长115.5% […]
什么是跨屏版网站？它和电脑版网站有什么不同？
跨屏版网站有很多种说法，比如响应式网站、自适应网站等等，我们暂且叫“跨屏版”，是因为它和 电脑版，触屏版等有一 […]
为什么网站需要跨屏？
发布时间:2021年12月6日 标签：建站, 网站建设, 跨屏, 适配
跨屏网页设计是近几年来广为流行的方式，跨屏建站方案替代了传统的多屏建站方案，多屏建站即为不同的终端单独建立一个 […]
