XHTML代码规范 & CSS代码的精简写法
2009-03-06 10:25
162 查看
在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。
XHTML代码规范
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和< /li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个 "/"来关闭它。例如:
<br /><img height="80" width="200" alt="美女有空吗" src="../mm/mm1.gif" />
讲到<img>顺便讲下新标准是不给<img src="MM.gif" />写宽度跟高度的。这样子做就是如果有图片要替换直接替换图片，不用去改页面图片的宽和高。还有一个就是一定要给图片加上alt提示，这个就是为了在网站打开速度很慢某些图片打不开的时候让浏览者能够看到这个文字知道这张图片的大致内容。
2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
3.所有的HTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p>/b>
必须修改为：
<p><b></b>/p>
就是说，一层一层的嵌套必须是严格对称。
4.所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:
<height=80>
必须修改为：
<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，也可以用" " "来代替例如：
<alt="美女，'星期六'晚上有空一起吃饭吗">
5.把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。
6.给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap>
必须修改为：
<td nowrap="nowrap">
HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。
但使用时要注意的是，td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用的，如果设置了td宽度，则nowrap属性不起作用。
7.不要在注释内容中使“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:
<!--这里是注释-----------这里是注释-->
用等号或者空格替换内部的虚线。
<!--这里是注释============这里是注释-->
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
8.HTML的头部，关于表格高度的100%延伸
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="
http://www.w3.org/1999/xhtml";>
如果要表格高度100%延伸的话就把这个头部改为：
<html>
但是如果改了就不是XHTML的标准了，这个不属于规范里面的东西，只是顺带讲一下，因为可能在用的过程中经常要用到高度自动延伸的问题。
CSS代码的精简写法
1.CSS书写的精简
建议是用手写，不要觉得手写慢，其实可能更快一些。
body { background:#f00 url(../mm.gif) repeat-x;}
body,table,form,input,textarea,select { font-family:verdana; font-size:12px;margin:0px; padding:0px;}
img { border:0px;}
色彩值的简写：.cor01 { color:#f00;}
色彩值是#rrggbb; 简直是当rr/gg/bb 这三组的各组值都相同的话就可以简写取rr/gg/bb其中一个#rgb;这样子
如：#f00 (#ff0000 红色) #000 (#000000 黑色) #fff(#ffffff 白色) #f90 (#ff9900 橙色)
顺带讲一下，在FireFox浏览器下颜色值一定要有#号，IE可以不用，习惯上颜色值一定要有#号；
可能有时候大家在DW排版时弄个表格的背景经常会从PS跟FW里面复制过来，直接粘到DW，这种情况下在FF下是不能显示的。
链接的样式简写：
a { color:#000; text-decoration:none;}
a:hover { color:#f00; text-decoration:underline;}
某个class如.top链接的简写
.top a { color:#000; text-decoration:none;}
.top a: hover { color:#f00; text-decoration:underline;}
背景色及背景的简写：
简写后：
.bj01 { background:#888 url(../mm.gif) repeat-x 10px top; }
简写前：
.bj01 {
background-color: #888888;
background-image: url(../mm.gif);
background-repeat: repeat-x;
background-position: 10px top;
}
border边框的简写
简写后：
.bb { border:1px solid #999; border-top:#f00;}
简写前：
.bb {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
maring,padding的简写
简写后：
.aa { margin:10px 20px}
书写顺序是：上、右、下、左 (就是顺时针的顺序，上下一样写一起，左右一样写一起)
如果四个值都不一样，写法是：
.aa { margin:2px 5px 0px 10px;}
简写前：
.aa {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
2.CSS应用的精简实例
页面的应用举两个小例子：
DW里面实现的效果，未加任何CSS
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
主要通过CSS实现，DW里面只实现了那个边框线
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
以上内容仅供参考！完！
ID与Class的区别：
class 是类名，ID是对像名。同一种类的元素用ID来区分。
id是元素的名称，可以供js或其它脚本程序来访问该元素对象，而class是该元素的css类名。
id的值在整个当前网页中应该是唯一的，即某一个元素定义了id="aaa"，那么这个网页中其它的元素的id就不能定义成aaa，而class则可以。
XHTML代码规范
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和< /li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个 "/"来关闭它。例如:
<br /><img height="80" width="200" alt="美女有空吗" src="../mm/mm1.gif" />
讲到<img>顺便讲下新标准是不给<img src="MM.gif" />写宽度跟高度的。这样子做就是如果有图片要替换直接替换图片，不用去改页面图片的宽和高。还有一个就是一定要给图片加上alt提示，这个就是为了在网站打开速度很慢某些图片打不开的时候让浏览者能够看到这个文字知道这张图片的大致内容。
2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
3.所有的HTML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：
<p><b></p>/b>
必须修改为：
<p><b></b>/p>
就是说，一层一层的嵌套必须是严格对称。
4.所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:
<height=80>
必须修改为：
<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，也可以用" " "来代替例如：
<alt="美女，'星期六'晚上有空一起吃饭吗">
5.把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。
6.给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap>
必须修改为：
<td nowrap="nowrap">
HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。
但使用时要注意的是，td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用的，如果设置了td宽度，则nowrap属性不起作用。
7.不要在注释内容中使“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:
<!--这里是注释-----------这里是注释-->
用等号或者空格替换内部的虚线。
<!--这里是注释============这里是注释-->
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
8.HTML的头部，关于表格高度的100%延伸
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="
http://www.w3.org/1999/xhtml";>
如果要表格高度100%延伸的话就把这个头部改为：
<html>
但是如果改了就不是XHTML的标准了，这个不属于规范里面的东西，只是顺带讲一下，因为可能在用的过程中经常要用到高度自动延伸的问题。
CSS代码的精简写法
1.CSS书写的精简
建议是用手写，不要觉得手写慢，其实可能更快一些。
body { background:#f00 url(../mm.gif) repeat-x;}
body,table,form,input,textarea,select { font-family:verdana; font-size:12px;margin:0px; padding:0px;}
img { border:0px;}
色彩值的简写：.cor01 { color:#f00;}
色彩值是#rrggbb; 简直是当rr/gg/bb 这三组的各组值都相同的话就可以简写取rr/gg/bb其中一个#rgb;这样子
如：#f00 (#ff0000 红色) #000 (#000000 黑色) #fff(#ffffff 白色) #f90 (#ff9900 橙色)
顺带讲一下，在FireFox浏览器下颜色值一定要有#号，IE可以不用，习惯上颜色值一定要有#号；
可能有时候大家在DW排版时弄个表格的背景经常会从PS跟FW里面复制过来，直接粘到DW，这种情况下在FF下是不能显示的。
链接的样式简写：
a { color:#000; text-decoration:none;}
a:hover { color:#f00; text-decoration:underline;}
某个class如.top链接的简写
.top a { color:#000; text-decoration:none;}
.top a: hover { color:#f00; text-decoration:underline;}
背景色及背景的简写：
简写后：
.bj01 { background:#888 url(../mm.gif) repeat-x 10px top; }
简写前：
.bj01 {
background-color: #888888;
background-image: url(../mm.gif);
background-repeat: repeat-x;
background-position: 10px top;
}
border边框的简写
简写后：
.bb { border:1px solid #999; border-top:#f00;}
简写前：
.bb {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
maring,padding的简写
简写后：
.aa { margin:10px 20px}
书写顺序是：上、右、下、左 (就是顺时针的顺序，上下一样写一起，左右一样写一起)
如果四个值都不一样，写法是：
.aa { margin:2px 5px 0px 10px;}
简写前：
.aa {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
2.CSS应用的精简实例
页面的应用举两个小例子：
DW里面实现的效果，未加任何CSS
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
主要通过CSS实现，DW里面只实现了那个边框线
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
帅哥 美女 吃饭 睡觉 上网 QQ
以上内容仅供参考！完！
ID与Class的区别：
class 是类名，ID是对像名。同一种类的元素用ID来区分。
id是元素的名称，可以供js或其它脚本程序来访问该元素对象，而class是该元素的css类名。
id的值在整个当前网页中应该是唯一的，即某一个元素定义了id="aaa"，那么这个网页中其它的元素的id就不能定义成aaa，而class则可以。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- sublime text 3 插件 【编写高质量 JavaScript & CSS 代码】高亮提示用户编写的代码中存在的不规范和错误的写法
- HTML&CSS基础篇之七：XHTML 标准、规范
- 网站重构技术：XML，XHTML代码规范，样式表调用方式，CSS布局要点
- HTML & CSS 代码编写规范
- xhtml&CSS文档规范
- WEB标准略解（二）：XHTML代码规范、CSS等
- 代码规范写法，避免内存泄露
- 精简CSS文件 使您的CSS网页布局代码更专业
- CSS代码编码规范
- 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范
- CSS 符合习惯的代码规范
- CSS常用命名规范及写法详解
- 魔哥css圆角实现代码 （代码精简，完全自适应）
- html&css 编程规范
- PHP团队 编码规范 & 代码样式风格规范
- 是雏还是鹰——编程规范之代码注释
- XHTML & CSS 基础知识入门
- 编写出色CSS代码的13个建议<转>
- 编写灵活、稳定、高质量的HTML和css代码规范指南
- 标准的css代码顺序写法