1、页面的基本构成和开发标准
|
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>TOM在线_今日在线，明日再现</title> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <link rel="stylesheet" type="text/css" href="http://www.tom.com/style/default.css" /> <link rel="stylesheet" type="text/css" href="...(外部CSS文件地址)..."> <style> /*070817 M. 修改** start*/ ...(内部CSS内容)... /*070817 M. 修改** end*/ </style> <script type="text/javascript" src=" http://www.tom.com/script/common.js" ></script> <script type="text/javascript" src="...(外部Javascript文件地址)..." ></script> <script> <!-- ...(内部Javascript)... //--> </script> </head> <body> <!--start header--> <div id="header"> ...(header内容)... </div> <!--end header--> <!--start content --> <div id="content"> ...( content内容)... </div> <!--end content --> <!--start footer--> <div id="footer"> <!--070817 M. 修改** start--> ...( footer内容)... <!--070817 M. 修改** end--> </div> <!--end footer --> <!--Design by M. last update 070817--> </body> </html> |
1.1.
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
选择合适的DOCTYPE 现阶段统一使用XHTML1.0 Transitional标准
1.2.
|
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
定义名字空间 标准必须引用
1.3. 定义语言编码 默认使用gb2312和gbk编码，根据实际需求采用utf-8编码
下面的语句是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。
<meta http-equiv="Content-Language" content="zh-CN" />
1.4.
|
<title>TOM在线_今日在线，明日再现</title> |
设置页面标题 必须设置，不准留空
页面标题标准命名原则：
各级首页：TOM****_宣传语
子频首页：TOM****_子频道名_宣传语
内容页：内容标题_子频道标题_TOM***
专题页：专题标题_TOM***
1.5. 调用样式表 除去简单的独立页面之外全部采用外部调用的方式加载样式文件
页面内部嵌入法：就是将样式表直接写在页面代码的head区。类似这样：
|
<style type="text/css"> <!— body { background : #ffffff ; color : #000000 ; } --> </style> |
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用以下代码调用。
|
<link rel="stylesheet" type="text/css" href="http://www.tom.com/style/default.css" /> |
1.6. HEAD区域其它相关设置
收藏夹图表：
|
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> |
允许搜索机器人搜索站内所有链接
|
<meta name="Copyright" content="www.tom.com,版权所有,违者必究" /> |
|
<meta name="robots" content="all" /> |
设置站点版权信息
|
<meta name="Keywords" content="TOM,TOM online,TOM在线" /> |
站点关键词 必须添加
|
<meta name="Description" content=" TOM在线,今日在线,明日再现" /> |
站点的简要描述 必须添加
1.7.
|
开始：<!--start 模块名称--> 结束：<!--end模块名称--> 修改记录注释： <!--070817 M. 修改** start--> ...(内容)... <!--070817 M. 修改** end--> 作者及最后更新日期注释：<!--Design by M. last update 070817--> 其中**代表具体内容，070817代表日期，M.代表作者信息 |
CSS和Javascript统一放在<head>里，不允许放在<Body>里
1.8. <Body>内的模块都要加注释 标准注释格式如下：
1.9. 各个模块合理嵌套和缩进 缩进一律用Tab，禁止用空格
1.10. 页面中的正式内容图片，必须填写 alt属性，不允许为空。
对于页面装饰性质的图片，如虚线、分隔小图等，要定义在CSS中，制作过程中，如不知道title详细信息，可以按照下面的方式书写：title=“#”。
1.11. 每页有尽可能少的HTTP请求。
页面内的HTTP请求，包括引用的外部CSS和外部JS文件、图片、Flash文件等。
1.12. 同一个页面中尽量避免重复包含CSS文件或JS文件。
1.13. 绝对不允许引用其他网站的css和Javascript等文件。
2、 (X)HTML书写规范
2.1. 基本书写规范
1． 所有标签的元素和属性的名字都必须使用小写，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
2. 属性的值一定要用双引号("")括起来，且一定要有值 。所有的属性必须用引号""括起来，例如:
<height=80> 必须修改为：<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：
<alt="say'hello'">
3. 所有的标记都必须要有开始和相应的结束标记，所有标签必须关闭。对于不成对的标识，在标识最后加一个空格，然后跟一个"/"。例如<br>写成<br />、<img>写成<img />，加空格的原因是避免代码连在一起浏览器不识别。
4. 所有的XHTML标记都必须合理嵌套，以前这样写的代码：
<p><b></p></b> 必须修改为：<p><b></b></p> 就是说，一层一层的嵌套必须是严格对称。5. 把所有<和&等特殊符号用编码表示。任何不是标签部分的小于号（<），都必须被编码为<任何不是标签部分的大于号（>），都必须被编码为>任何不是实体部分的与号（&），都必须被编码为& ,在utf-8编码时尤其需要注意。
6. 在注释内容中不能使用“--”，如有需要，必须用==来替换。例如下面的代码:
<!--这里是注释-----------这里是注释--> 必须改成<!--这里是注释============这里是注释-->
7. 不要使用被排斥的元素: 一些元素和属性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允许的，而在XHTML 1.0 Strict下则不被支持。比如<font>、<center>、 alink、align、width、 height （对于某些元素）、bgcolor和background。
不建议使用的标签：b、big、hr、i、small、sub、sup、tt
禁止使用的标签：basefont、center、dir、font、isindex、menu、s、strike、u、bgcolor
8. 表现结构完全分离，代码中不涉及任何表现元素，如font、bgColor、border等
9. <h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
10. 给每一个表格和表单加上一个唯一的、结构标记id ；给重要的区块加上注释；给图片加上alt标签
11.嵌套结构控制在5层之内，对于特殊页面，可适当增加嵌套层数，但是也应该控制在8层之内。
12. 标签结构尽量采用语义化标签
2.2. 相关标签的语义
标题
为了给标题做标记, 要用 <h1> 、 <h2> 、 <h3> 、 <h4> 、 <h5> 或者 <h6> ，这完全取决于标题的等级。 <h1> 是最高的等级。
段落
用 <p> 来标记段落。而不是用 <br /> 来生成段落间的空行。用 CSS 来控制段落间的空隙（Margins），这个空隙可以确保段落标记的正确无误。
列表
一些事物的罗列应使用列表来显示。在XHTML中有三种列表的方法：无序、有序和自定义。
无序列表, 就是我们所熟知的圆圈列表, 以 <ul>开始，以</ul>结束。每一个列表项都包含在<li>之中。
有序列表，以<ol>开始，以</ol>结束。
自定义列表有一些不同，可以用来标记一些列表项和描述，以<dl>开始，以</dl>结束。每一个被描述的项目，要包含在<dt>中，而描述的内容要包含在<dd>中。
强调
<em> 是用作强调的，<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。
表格
XHTML 中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。为了使数据表格有更强的访问性，了解和使用各种构造表格的组件就很重要了。比如表格标题（<th>）、摘要（summary 属性）和首部说明（ <caption>标签）。
布局标签DIV
这个div没有什么特性的意义，可以使用在很多地方，也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用，也有用来作为存放文章形成段落，实际上，这个做法并不是很好，因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签，不过用DIV来再整体的包住所有的段落。这是非常实用的。
辅助布局标签SPAN
这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。可以把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补。
图片标签
img是图片标签，也是个特定属性的标签。正常写法是：<img src="" alt="" /> 这里的src是目标地址，ALT与TITLE是替换文字，ALT是IE特定的，TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。
2.3. 模块效果与标签写法
|
模块效果 |
正确标签写法 |
|
标题： 一级标题 二级标题 三级标题 |
<h1>页面标题</h1> 一个页面只有一个标题 <h2>模块标题</h2> <h3>栏目标题</h3> |
|
列表： |
<ul> 或者用 <ol> </dl> |
|
段落： |
<p> |
|
表单： 登录论坛 用户名： 密 码： |
提交按钮：<button type=”submit”>提交</button> |
3、CSS编码规范
3.1. 基本书写规范
1、尽量不缩写，除非一看就明白的单词.
2、尽量用英文；
3、注释写法，例：/*header*/ 注释中间不要加---；
4、CSS符合浏览器兼容标准；
5、全部小写，且每一项CSS定义写成一行；
6、不允许将样式的定义写在标签中（如：style=”font-color:red;”）；
7、所有装饰性的图片（如背景图），要定义在CSS中；
8、 ID必须是唯一的，且用在结构的定义中；
9、CSS命名不建议使用中杠连接符；
10、单位建议使用“em”。“em”和“%”；
11、CSS中谨慎使用expression，尽量不要使用；
12、CSS中尽量不要使用滤镜。
3.2. CSS命名参考
1、常用的CSS命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper或者wrap
左右中：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
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
2、直观命名
当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
自上而下小组：toppanel
横向：horizontalnav
左面：leftside
中心-栏目：centercolumn
右面：rightcol
这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。
3、结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非 常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
顶部抢眼部分：branding
导航部分：mainnav
主要内容部分：maincontent
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
4、惯例
Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：
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
class的命名:
(1)颜色:使用颜色16进制代码,如
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.right { float:right; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
5、自定义命名：
根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
4、页面质量评估标准
1、页面布局及里面的Javascript特效对IE 6.0, IE 7.0, Firefox 1.5、Firefox 2.0、傲游等浏览器100%兼容。产品测试必须测试的七种浏览器：IE6、IE7、firefoxo、opera（此四个为重点）、TT、maxthon、safari（此三个为次要）。
判断方法：浏览器兼容性测试
2、 (X)HTML代码结构是否清晰。
判断方法：查看源文件，是否符合页面标准。各个模块是否清晰可辨或是有注释说明。
判断方法：每个模块 (x)html代码的嵌套层次简单，代码简洁。
判断方法：是否存在大量在标签中使用Style定义的样式。
5、 (X)HTML代码是否和大量Javascript混杂在一起。
判断方法：Javascript没有集中的放在<head>中或是放在页面的底部，而是混杂在模板中。
判断方法：不被推荐使用的标签见第二部分的列表，如<font>、<b>等。
判断方法：依照结构化代码规范和具体的语义性检查。
判断方法：查看CSS代码部分CSS命名是否标准，单个定义是不是过长，是否出现过多重复的定义。
判断方法：格式是否整齐、干净。
判断方法：观察CPU的占用情况，和页面的打开速度。页面的下载速度明显感觉很慢的不行。