本文主要包含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" alt="网页设计师" src="/uploadfile/200806/17/8C162625950.gif" width="200" />
2.2 所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的。
2.3 所有的XHTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p>/b>必须修改为：<p><b></b>/p>
就是说，一层一层的嵌套必须是严格对称。
2.4 所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：
<height=80>必须修改为：<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：
<alt="say'hello'">
2.5 把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为< ;
任何大于号（>），不是标签的一部分，都必须被编码为>
任何与号（&），不是实体的一部分的，都必须被编码为&
2.6 给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必须修改为：
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
2.7 不要在注释内容中使“–”
“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：
<!–这里是注释———–这里是注释–>
用等号或者空格替换内部的虚线。
<!–这里是注释============这里是注释–>
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
2.8 引用样式和脚本语言时type属性不能省略
<script language="javascript" type="text/javascript">
注意：type="text/javascript"不能省略。
2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错
事例：
<script>和<style>标记的内容必须被包围在CDATA段中。
例如：
<script type="text/javascript">
<![CDATA[
function func(a, b)
{
if (a < b)
return true;
}
]]> </script>
注意到上面的Script中有小于号（<）出现，如果不将其包围在CDATA段中，那么小于号（<）以及后面的内容会
被误认为是另一个XHTML标记的开始，引起一些不必要的错误。
需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用
JavaScript注释来避免：
<script type="text/javascript">
/* <![CDATA[ */
function func(a, b)
{
if (a < b)
return true;
}
/* ]]> */
</script>
或者
<script type="text/javascript">
// <![CDATA[
function func(a, b)
{
if (a < b)
return true;
}
// ]]>
</script>
当然，最好的方法是把脚本和CSS放置于单独的文件中并在XHTML页面中加上引用。
2.10 将所有的样式放在style中
例：<td width="4"> </td> 这样写不符合标准。
我们要这样写：<td style=”width:4px;”> </td>
2.11 样式属性最后一个后面一定要加上分号
2.12 使用id属性，而不是name属性。
在HTML中，name属性可以用来标识identify <a>, <applet>, <form>, <frame>, <iframe>, <img>和 <map>标记。XHTML 1.0 Strict 和XHTML 1.1 standards已经删除了对name属性的支持。我们应该使用id唯一标识一个页面上的元素。ID不能重复。
2.13 属性值中空格的处理。
属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如
如下两个属性的值相同：
<input value="HTML is out" />
<input value=" HTML is
out " />
2.14 使用恰当的文档类型声明和命名空间。
2.15 使用meta元素声明你的内容类型。
2.16 使用img时要添加alt属性，可设为空
2.17 使用img时align=absmiddle属性在W3C验证下通不过
大家都知道，要想让图片和文字垂直居中对齐的话，可以在IMG标签下添加align=absmiddle属性即可实现，但align=absmiddle属性在W3C验证下通不过[验证地址请查看W3C网页标准验证服务地址]，那么是否可以用CSS来代替IMG的align=absmiddle属性来实现垂直居中呢，答案是肯定的。
可以在CSS中加入vertical-align:middle;就能实现了
事例：
<div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />用CSS实现图片和文字垂直居中对齐</div><br /><br />
<div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是没加样式的效果</div><br /><br />
<div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/cl
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" alt="网页设计师" src="/uploadfile/200806/17/8C162625950.gif" width="200" />
2.2 所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的。
2.3 所有的XHTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p>/b>必须修改为：<p><b></b>/p>
就是说，一层一层的嵌套必须是严格对称。
2.4 所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：
<height=80>必须修改为：<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：
<alt="say'hello'">
2.5 把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为< ;
任何大于号（>），不是标签的一部分，都必须被编码为>
任何与号（&），不是实体的一部分的，都必须被编码为&
2.6 给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必须修改为：
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
2.7 不要在注释内容中使“–”
“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：
<!–这里是注释———–这里是注释–>
用等号或者空格替换内部的虚线。
<!–这里是注释============这里是注释–>
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
2.8 引用样式和脚本语言时type属性不能省略
<script language="javascript" type="text/javascript">
注意：type="text/javascript"不能省略。
2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错
事例：
<script>和<style>标记的内容必须被包围在CDATA段中。
例如：
<script type="text/javascript">
<![CDATA[
function func(a, b)
{
if (a < b)
return true;
}
]]> </script>
注意到上面的Script中有小于号（<）出现，如果不将其包围在CDATA段中，那么小于号（<）以及后面的内容会
被误认为是另一个XHTML标记的开始，引起一些不必要的错误。
需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用
JavaScript注释来避免：
<script type="text/javascript">
/* <![CDATA[ */
function func(a, b)
{
if (a < b)
return true;
}
/* ]]> */
</script>
或者
<script type="text/javascript">
// <![CDATA[
function func(a, b)
{
if (a < b)
return true;
}
// ]]>
</script>
当然，最好的方法是把脚本和CSS放置于单独的文件中并在XHTML页面中加上引用。
2.10 将所有的样式放在style中
例：<td width="4"> </td> 这样写不符合标准。
我们要这样写：<td style=”width:4px;”> </td>
2.11 样式属性最后一个后面一定要加上分号
2.12 使用id属性，而不是name属性。
在HTML中，name属性可以用来标识identify <a>, <applet>, <form>, <frame>, <iframe>, <img>和 <map>标记。XHTML 1.0 Strict 和XHTML 1.1 standards已经删除了对name属性的支持。我们应该使用id唯一标识一个页面上的元素。ID不能重复。
2.13 属性值中空格的处理。
属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如
如下两个属性的值相同：
<input value="HTML is out" />
<input value=" HTML is
out " />
2.14 使用恰当的文档类型声明和命名空间。
2.15 使用meta元素声明你的内容类型。
2.16 使用img时要添加alt属性，可设为空
2.17 使用img时align=absmiddle属性在W3C验证下通不过
大家都知道，要想让图片和文字垂直居中对齐的话，可以在IMG标签下添加align=absmiddle属性即可实现，但align=absmiddle属性在W3C验证下通不过[验证地址请查看W3C网页标准验证服务地址]，那么是否可以用CSS来代替IMG的align=absmiddle属性来实现垂直居中呢，答案是肯定的。
可以在CSS中加入vertical-align:middle;就能实现了
事例：
<div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />用CSS实现图片和文字垂直居中对齐</div><br /><br />
<div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是没加样式的效果</div><br /><br />
<div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/cl