第一部分 文档需求、说明及参与人员
第二部分 静态页面规范
一 静态页面基本规范
二 XHTML标准
三 图片规范
第三部分 CSS样式书写规范
一 样式命名规范
二 id命名规范
三 字体样式的命名
四 样式文件结构（样式表构成管理）
五 样式书写技巧
七 过长的内容
第四部分 注释规范
一 HTML注释
二 CSS样式注释
第五部分 JavaScript脚本语言，Ajax等代码书写规范
一 命名规范.
二 关于变量
三 注意事项
第六部分 其他重要说明
一 前台页面开发本地测试
第七部分 静态页面源文件备份规范
一 项目开发源文件备份规范
二项目维护源文件备份规范
第八部分 附件
附件2：XHTML标准
第一部分 文档需求、说明及参与人员
文档目的：为规范前台页面开发，便于前台开发成员页面维护，产出高质量的页面。
文档说明：本规范文档一经确认，前台开发所有人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经前台开发人员讨论后决定可以更改此文档。
特别说明：如有不能或不合适按本文档开发的项目或页面，请向主管人员做出说明；
参与人员：
版本说明：2009年4月版
第二部分 静态页面规范
一 静态页面基本规范
1．静态页面命名应根据项目文档中程序页面文件命名；例如程序页面文件名为index.aspx则静态页面的文件名应为index.html或index.shtml；
2．静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰；
3．根据项目文档选择页面编码格式，一般为UTF-8；非项目页面着统一采用UTF-8，特殊项目或有特定需求的按需求确定编码格式；
4．非特殊情况下必须把CSS外部链接放到页面的顶部（<head>… </ head>标签之间）；
5．非特殊情况下必须把JS代码或外部链接放到页面的底部（</ body>标签之前）；
6．书写链接地址时，必须避免重定向，例如：href="http://www.5fad.com/" ,即须在URL地址后面加上“/”；
7．在页面中尽量避免使用XHTML标签的样式属性,即style="…"；
8．尽量减少页面的HTTP请求:
8．1．合并压缩的多个JS到一个文件中；
8．2．合并压缩的多个CSS到一个文件中, 能写成样式背景的图片，必须写在样式中；
9．尽量减少DIV的嵌套层数；
10．统一域名下的项目页面链接使用相对路径（例如：../top100/songtop.aspx），而不是绝对路径(例如：http://www.5fad.com/top100/songtop.aspx)；
11. 给区块代码和套程序的循环的第一条数据加上注释（详见“注释”章节）；
二 XHTML标准
1. 每个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：<!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">)，即DreamWeaver 8和cs3版本默认的DTD；
2．所有XHTML代码必须全部小写；
3. XHTML标签的属性值必须用双引号（””）括起来,并且一定要有值,不能简写缩写；
4. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：<br />等，并且有正确的层次；
5.非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等；
6.id属性，同一页面不要重复使用同一id；
7.给重要图片加上alt属性；给重要的元素和截断的元素加上title；
8.所有标签必须进行合理的嵌套，体现文档的结构，并有利于搜索引擎的查询；
9.使用正确的注释方法（详见“注释”章节）；
10. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当 网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片 的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。、
11.行距建议用百分比来定义，常用的两个行距的值是line-height: 150%.
12.表格：在排布表格之前，认真思考一个最佳的方案，表格的嵌套尽量控制在三层以内，禁止使用 <colspan> <rowspan>标记，也就是横纵合并单元格，这两个标记会带来许多麻烦。
※ 表格嵌套必须条理清晰一目了然，各区块独立性强，便于修改。主要框架使用绝对像素，以免产生变形。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套 在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲 入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请分段加入<tbody>标记，以便能够使这个大表格分 块显示。
13. flash的嵌入方法错误。<embed>最早是Netscape的私有标签，即使后来为IE所支持，但始终没有被W3C承认，在 XHTML1.0没有<embed>这个标签。W3C主张的是采用<object>标签。为了解决不同浏览器的兼容，有一个变通 的解决方法是2个标签都采用。完整的示例代码如下(flash背景为透明)： <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
关于flash是否符合标准，是一个存在争议的问题。更多说明：参考http://www.blueidea.com/tech/site/2004/1920.asp
14.在页面中碰到有单选框、复选框的时候要给单选框、复选框加上<lable></lable>标签；
15．XHTML标准标签和不赞成使用的标签，参见下表：
XHTML标准标签（如表）：
标签类型 标签
结构 html,head,body,div,span
Meta信息 DOCTYPE,title,link,meta,style
文本 p,h1,h2,h3,h4,h5,h6,strong,em,abbr,acronym,address,bdo,blockquote,
cite,q,code,ins,del,dfn,kbd,pre,samp,var,br
链接 a,base
图片和对象 img,area,map,object,param
列表 ul,ol,li,dl,dt,dd
表格 table,tr,td,th,tbody,thead,tfoot,col,colgroup,caption
表单 form,input,textarea,select,option,optgroup,button,label,fieldset,legend
脚本 script,noscript
表现 b,i,tt,sub,sup,big,small,hr
其他 一般属性
… … … …
◎ XHTML的语法规范可参考附件2：《XHTML标准》
三 图片规范
1.图片统一放在images文件夹下面；
2.图片格式：图片只允许采用gif(256 128 64 32...)jpg(小于80比)压缩格式，要平衡图片质量与文件大小,不过分损失质量情况下尽量减小页面下载数据量。
一般的规律颜色层次变化少的图用gif，反之jpg. 图片切割严格按照像素内容边缘动刀。
3. 图片命名规范
3.1.名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。
3.2.名称分为头尾两部分，用下划线隔开。
3.3.样例说明见下表：
图片分类 命名
广告、装饰图案等长方形的图片 ad_
标志性的图片 log_
在页面上位置不固定并且带有链接的小图片（按钮） btn_
导航图片 nav_
菜单图片 men_
装饰用的照片取名 pic_
不带链接表示标题的图片取名 tit_
小图标 ico_
背景图片 bg_
… … … …
依照此原则类推，名字要让旁人搞得懂。
尾部分用来表示图片的具体含义。
样例，大家应该能够一眼看明白图片的意义：
ad_sohu.gif、 ad_sina.gif、men_aboutus.gif、men_job.gif、tit_news.gif、log_police.gif、 log_national.gif、pic_people.jpg、pic_hill.jpg、ico_arrow.gif
注：
1.在开发页面的时候我们通常会遇到一些数据图片，比如：MV的缩略图，个性化头像等，这些图片统一使用001.gif，002.jpg，003.gif…依次命名，这些图片在项目正式上线后，应在服务器上删除，备份文件中仍需保留；
2.目前尽量不使用带透明度的PNG格式的图片；
第三部分 CSS样式书写规范
一 样式命名规范
1.class 命名采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；。例如：.tit(标题)，.com_u(评论人)，.l01(某一块的左边)等，
2.样式名称以数字开头无效
3.部分命名解释约定（后期不断更新，以“附件1. 命名解释约定”的形式）：
解释含义 命名
左边(右边) .l（.r）或.l... (.r...)
标题 .tit_...
按钮 .btn_...
文本框 .inp_...
下拉框 .sel_...
文本区域 .tex_...
数据图片 .pic_...
小图标 .ico_...
背景图片 .bg_...
… … … …
注：书写样式并不一定遵循本约定。
二 id命名规范
1.id命名采用英文单词、组合命名，字母应全部小写，多个单词应采用下划线分割。例如：#title(标题)，#comment_user(评论人)等，杜绝使用拼音命名样式；
要求命名：
1.1.直观命名：用位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:
#top-panel，#horizontal-nav，#left-side ，#center-column，#right-col
1.2.结构化命名（结构，功能，内容）：用页面区块名称的词汇来对其命名。这种方法使得类以及id的名称如下面所示:
#branding ，#main-nav ，#subnav ，#main-content ，#sidebar
1.3. 惯例:最常用类/id名称的示例列表:
header ,content ,nav ,sidebar ,footer
2.尽量不缩写，除非一看就明白的单词；
3.注意id名称以数字开头无效；
三 字体样式的命名
1.静态文字命名格式：f_颜色数值_字号（字体状态）
例如：.f_f30_12 (#ff3300颜色的12号静态文字)
.f_fd3360_12b (#fd3360颜色的12号粗体静态文字)
2.链接命名格式：l_颜色名称_字号（字体状态）_链接样式或者f_颜色数值_字号（字体状态）_链接样式
例如：.l_ff3300_12 (#ff3300颜色的12号无下划线链接文字)
.l_ff3300_12b(#ff3300颜色的12号粗体无下划线链接文字)
.l_ff3300_12b_u(#ff3300颜色的12号粗体有下划线链接文字)
四 样式文件结构（样式表构成管理）
1.首页一个样式（index.css）包括字体样式等；
2.头部底部样式（top.css）；
3.内页样式
内页样式根据具体的项目、页面布局设计可以考虑一个或多个内页样式，一般考虑如下：
3.1.如果所有内页布局相近可考虑一个内页样式并且加上相应的注释（详见“注释”章节）；
3.2.如果有几个内页布局相近可考虑这几个内页一个样式并且加上相应的注释（详见“注释”章节）；
4.详细页一个样式（detail.css）；
五 样式书写技巧
样式书写技巧主要优点是提高书写效率，节省样式代码，提高网页浏览速度。
1.CSS的缩写
Web 网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的 Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。
为 了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于 CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一 些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。
1.1.CSS属性值的缩写：是一些专用的性质名，用来代替多个相关性质的集合。
通常可以缩写的属性margin，padding，border，font，color，background等等…
CSS 的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间 隙（padding-left）的缩写。
使用速写性质让你能够把多个性质／属性对（property/attribute pair）压缩进CSS样式表的一行代码里。例如，想一想下面的代码：
.sample1 {margin-top: 15px;margin-right: 20px;margin-bottom: 12px;margin-left: 24px;padding-top: 5px;padding-right: 10px;padding-bottom: 4px;padding-left: 8px;border-top-width: thin;border-top-style: solid;border-top-color: #000000;}
将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.sample1 {margin: 15px 20px 12px 24px;padding: 5px 10px 4px 8px;border-top: thin solid #000000;}
要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。
当属性是类似的值的时候，例如用于边框空白性质（margin property）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（box）按顺时针次序继续。
如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的：
margin: 5px 5px 5px 5px;
margin: 5px;
类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部／底部和右侧／左侧属性对。
margin: 5px 10px 5px 10px;
margin: 5px 10px;
属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（outline property）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。
下面是CSS缩写性质的列表以及它们所表示的常规性质。
background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停
2.减少空格：减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质／属性分割到不同行的换行符和缩进符删掉。
例如，下面的代码示例在内容上相同，但是第二个要精炼得多：
h1 {font-size: x-large;
font-weight: bold;
color: #FF0000;}
h1 {font-size: x-large; font-weight: bold; color: #F00}
3.合并具有相同属性和属性值的样式：就是把具有相同属性和属性值的样式的样式名称（样式选择符）写在一起，用逗号隔开(英文状态)；再在后面写样式属性。
例如，下面的代码示例在内容上相同，但是第二个要精炼得多：
.nav1 {font-size:14px; font-weight: 700; color: #F00}
.nav2 {font-size:14px; font-weight: 700; color: #F00}
.nav3 {font-size:14px; font-weight: 700; color: #F00}
等同于：
.nav1, .nav2, .nav3 {font-size:14px; font-weight: 700; color: #F00}
4． 同名样式继承（本部分内容不做强行要求）：就是一个页面调用一个或多个样式表时，在这个或者这些样式表中出现两个（或两个以上）样式名一样的样式。这时这 个样式的属性等于两个（或两个以上）同名样式的属性加起来。如果两个（或两个以上）样式同名样式的属性有重叠，则页面将以就近原则解析样式属性。
例如：
.ls1 {font-size: 9pt;text-align: left;width: 300px;}
.ls1{border: 5px solid #ffcc00}
.ls1{line-height：20px}
等同于：
.ls1 {font-size: 9pt;text-align: left;width: 300px; border: 5px solid #ffcc00; line-height r: 20px }
5.样式重用（本部分内容不做强行要求）：就是再页面中，一个div容器同时调用两个（或两个以上）不同样式，那么这个div容器的样式属性等于两个（或两个以上）样式的属性加起来
例如：
Css：
.ls0{font-size: 9px;text-align: left;width: 300px;}
.ls1{border: 1px solid #ffcc00}
.ls2{border: 1px solid #ff3300}
Div:
<div class=”ls0 ls1”></div>
<div class=”ls0 ls2”></div>
6.样式的解析
6.1.例如以下样式：主要解决样式重名，区分同名样式在不同属性，使样式层次结构更加分明；
写法：
样式名+空格+样式名{…}
例如：
Css：
.top .left { font-size: 12px;text-align: left;width: 300px;}
Div:
<div class=”top”>
<div class=”left”>这里是left被解析为font-size: 9pt;text-align: left;width: 300px</div>
</div>
<div class=”bottom”>
<div class=”left”>这里是left不被解析</div>
</div>
这里left样式表示在且仅在top样式容器下被解析。
7.为了保证不同浏览器上字号保持一致，字号建议用像素px来定义，
8.字体要求：宋体（汉字）或Arial（字母，数字）
六 样式书写格式统一
每条样式写成一行；
七 过长的内容
经常会碰到一些歌曲名，歌手名内容过长，字打不下的情况，这时我们要写样式来限定字符长度；
第四部分 注释规范
发布版本应删除所有的注释：
一 HTML注释
正确的注释规范：<!--这里是注释-->感叹号后面2个横线，结束时2个横线；
不要在注释内容中使“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是错误的:
<!--这里是注释-----------这里是注释-->
<!-----------这里是注释-----------这里是注释----------->
用等号或者空格替换内部的虚线,这样是正确的：
<!--这里是注释============这里是注释-->
二 CSS样式注释
由于CSS+DIV制作页面，样式代码多，布局比较复杂，更便于页面后期的维护，更改，所以有必要在样式上加上注释。注释规法如下：
1.注释规范
/*这里是注释*/
例如：. news {…}/* 这里是高度自动撑 */
第五部分 JavaScript脚本语言，Ajax等代码书写规范
一 命名规范
1.变量命名必须为 小写英文字母；
另外常用临时变量不用这么复杂。如下表
变量类型 变量命名 备注
数字 Number i, j; l, m, n; p, q; x, y 主要用于循环变量和坐标，而且喜欢成对出现
字符串 String s
单个字符 Character c 虽然本质上还是字符串
对象 Object o
错误 Error e 常用于catch
2.类的命名使用骆驼命名规则，就是每个单词的第一个字母要大写，间隔字符为空，即没有间隔；
例如： Account, EventHandler；
3.简写单词不能使用大写名称作为变量名，例如：
getInnerHtml(),getXml(),XmlDocument；
4.方法的命令必须为动词或者是动词短语： obj.getSomeValue()；
二 关于变量
1.变量必须在声明、初始化以后才能使用，即便是 NULL 类型；
2.变量不能产生歧义；
3.相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中；
4.变量应该尽量保持最小的生存周期（即可以用局部变量的地方不要用全局变量）；
三 注意事项
1.每行代码结束必须叫分号（;）；
2.if…else…必须有完整的语法结构，即if(…){…}else{…}；
注：其他JS的规范可参加《JavaScript脚本语言规范》
第六部分 其他重要说明
一 前台页面开发本地测试
在 前台页面开发过程中及开发结束需经过多浏览器测试；目前必须测试的浏览器为：Internet Explorer 6、Internet Explorer 7、Mozilla Firefox 2、Opera 9、Safari；建议测试的浏览器Internet Explorer 5.5。
1. 固定内容测试
测试在多浏览器下显示的页面是否一致，是否在多浏览器下和设计稿保持一致；要求精确到一个像素；
2.脚本测试
测试在多浏览器下脚本代码功能的一致性；
3.不确定内容测试
比如网友留言，网友消息，主页日志等，就是版块内容由网友发布，没有固定的格式，宽高和元素等。这时我们就必须模拟各种网友发布的内容，并测试高度自动撑开，宽度扯开，等等。
4.宽屏或高分辨率显示器测试
最后一项测试是宽屏或高分辨率（目前认为横向1280px分辨率）显示器下测试，测试页面是否错位，位移，等等
第七部分 静态页面源文件备份规范
静态页面源文件中的JS和CSS分为开发版本和发布版本；
一 项目开发源文件备份规范
备份人员在项目上线，备份静态页面时，需对静态页面文件夹html重命名，格式为：html_备份时间（时间格式yy-mm-dd ），例如再2007年09月01日对静态页面文件夹html的备份应命名为：html_07-09-01；
其中HTML目录下JS和CSS文件夹中的文件分别为开发版本的JS和CSS文件；HTML目录下JS_Release和CSS_Release目录下分别为发布版本的JS和CSS压缩文件
二项目维护源文件备份规范
◎在项目修改维护期间，备份前台页面源文件的等存放文件夹命名为：html_项目修改日期；例如：前台页面源文件07年9月22日修改，则命名为:html_07_09_22；，以确保新设计稿源文件备份不会覆盖上一版本的设计稿源文件；
◎将vss上的上一版本的静态页面备份目录放入old文件夹；
◎ 前台页面源文件最新的备份文件应与线上的页面保持一致；
第八部分 附件
附件1：CSS命名规则
CSS文件命名
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
XHTML文件中class的命名
(1)颜色:使用颜色的名称或者16进制代码,如(不建议以表现来命名)
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
XHTML文件中id的命名
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
附件2：XHTML标准
--------------------------------------------------------------------------------------
你可以通过开始书写严格的HTML代码来为你的XHML之路做准备
How To Get Ready For XHTML
如何开始XHTML呢？
XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it.
XHTML是HTML的下一代语言，当然，在新的浏览器和其他的相关软件产品出现之前，它将延迟一段时间才能普及。
In the meantime there are some important things you can do to prepare yourself for it. As you will learn from this tutorial, XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start. Our complete HTML 4.01 reference can help you with that.
其间，有一些重要的事情你能够去做来为它的学习做准备。就像你可以从这篇指南学到的东西一样，XHTML不是与HTML4.01有很多不同的，所以把你的代码改写程4.01标准是一种非常好的开始，我们完整的HTML4.01参考可以帮助你解决这个问题。
In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>.
另外，现在你应该开始用小写字母来书写你的HTML代码了，并且永远不要再像以前那样有跳过像</p>这样的结尾标记的坏习惯了。
Happy coding!
陶醉于编码之中吧！
The Most Important Differences:
两者最主要的不同：
XHTML elements must be properly nested
XHTML documents must be well-formed
Tag names must be in lowercase
All XHTML elements must be closed
XHTML元素必须正确的嵌套
XHTML文档必须有良好的格式
标记的名字必须用小写字母
左右的XHTML元素都必须有关闭符
Elements Must Be Properly Nested
元素（标记）必须被正确的嵌套
In HTML some elements can be improperly nested within each other like this:
在HTML中，有些标记能够非正确的相互嵌套，就像这样:
<b><i>This text is bold and italic</b></i>
In XHTML all elements must be properly nested within each other like this:
在XHTML中所有的标记必须被正确的嵌套，像这样：
<b><i>This text is bold and italic</i></b>
Note: A common mistake in nested lists, is to forget that the inside list must be within an li element, like this:
注意：在列表嵌套的时候大家经常会犯一个错误，那就是忘记了插入的新的列表必须在一个<li>标记中,像这样
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
This is correct:
正确的写法
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.
在这段正确的代码示例中，注意到我们在</ul>之后加了一个</li>标记吗？
Documents Must Be Well-formed
文档必须格式良好
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
所有的XHTML标记必须被嵌套使用在<html>根标记之中。所有其他的标记能有自己的子标记。位于父标记之内的子标记也必须成对的而且正确的嵌套使用。一个网页的基本结构是这样：
<html>
<head> ... </head>
<body> ... </body>
</html>
Tag Names Must Be In Lower Case
标记的名字必须用小写字母
This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags.
这是因为XHTML文档是XML的应用程序，XML是大小写敏感的，像<br>和<BR>是会被认为为两种不共的标记的。
This is wrong:
错误的：
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
正确的
<body>
<p>This is a paragraph</p>
</body>
All XHTML Elements Must Be Closed
所有的XHTML标记都必须有关闭符
Non-empty elements must have an end tag.
非空的标记必须有一个关闭符。
This is wrong:
这是错误的：
<p>This is a paragraph
<p>This is another paragraph
This is correct:
这才是正确的
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be Closed
空标记也必须有关闭符
Empty elements must either have an end tag or the start tag must end with />.
空标记必须有关闭符或以开始符加上 />来结束
This is wrong:
错误的代码
This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">
This is correct:
正确的:
This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />
IMPORTANT Compatibility Note:
关于兼容性的重要的注释:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.
为了使你的XHTML能够兼容现在的浏览器，你必须在/符号之前加一个特殊的空格,就像这样:<br /><hr />
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
