CSS XTHML书写规范以及常见问题总结(页面最优化)

项目文档目录
div+CSS命名规范 - 4 -
Div+css命名规范 - 4 -
1.1. div+css命名规范 - 4 -
1.2. CSS的Id命名规范 - 4 -
1.3. css样式文件命名 - 5 -
XHTML编码基本规范 - 6 -
XHTML编码基本规范 - 6 -
推荐网页制作规范 - 10 -
推荐网页制作规范 - 10 -
Css常用优化技巧 - 11 -
Css浏览器兼容性问题总结 - 20 -
JavaScript浏览器兼容性总结 - 30 -
XHTML标准的DIV+CSS布局对于网站SEO的影响 - 35 -


div+CSS命名规范
Div+css命名规范
Css的命名是区分大小写的，建议全部使用小写。下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：
1.1. div+css命名规范
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight产品管理

1.2. CSS的Id命名规范

外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车，收银台)
当前的：current

1.3. css样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
通用：basic.css

上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。上面的命名几乎涵盖了所有的经常使用到的样式。

XHTML编码基本规范

XHTML编码基本规范
2.1 所有的标记都必须要有一个相应的结束标记
　XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一 个"/"来关闭它。例如：
　<img height="80"
//onpropertychange函数需要定义evt参数, 参考统一事件处理框架代码
if (this.onpropertychange) this.onpropertychange(evt);
});

5.IE -> firefox css类
△ cursor:hand -> cursor:pointer
△ expression firefox不支持
在IE下expression也非常消耗CPU,所以不应该使用!!
为了达到较好的效果,应该建立自己的expression to javascript的处理函数
这样在IE和FF里就都能用了.
△ FILTER firefox不支持
filter: Alpha(Opacity=50);
替换为
-moz-opacity: 0.5;
△ text-overflow
不支持
△ transparent
firefox下 obj.setAttribute("bgColor","#ffffff") 只支持颜色
必须用 obj.style.backgroundColor = "transparent" 才行
△ FF下text控件高度与IE不同, 统一一下
input[type=text] {
height:20px;
}
注意input与[之间不能有空格!
△ font在IE里不能对body和td等起作用, FF可以
统一用 font-family
6. css和javascript在IE和Firefox中二十三个不同点
http://hi.baidu-com/xg21/blog/item/fbc87c3d624881e93c6d977e.html

7. Javascript与CSS在IE和Firefox中的误区及区别
http://hi.baidu-com/leiting084/blog/item/60dcac6e1decf4dd81cb4a5d.html

8.写入文本
function CompatibleInnerText(id,text)
{
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById(id).innerText = text;
}
else
{
document.getElementById(id).textContent = text;
}
}
XHTML标准的DIV+CSS布局对于网站SEO的影响
xml标准的div+css布局对于网站seo的影响
7.1代码精简
　　使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。
　7.2表格的嵌套问题
　　很多SEOer在其文章中称，搜索引擎一般不抓取三层以上的表格嵌套， spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。
　　使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
　　而DIV+CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。
　　
7.3速度问题
　　DIV+CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在spider爬行时是非常有利的。过多的页面代码可能造成爬行超时，spider就会认为这个页面无法访问，影响收录及权重。
　　另一方面，真正的SEOer不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。
7.4　对排名的影响
　　基于XTHML标准的DIV+CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但樂思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。
　　我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。
　　毕竟廖胜于无，建议建站或改版的朋友们，技术许可的情况下，还是选择DIV+CSS布局为好。
工作很长时间了，这是去年为公司培训的时候写的整理的一个白皮书，希望大家多多提出意见。谢谢！

《CSS XTHML书写规范以及常见问题总结(页面最优化)》阅读地址：http://www.haoshilao.net/663/