HTML静态页制作规范
HTML静态页制作规范
一、总则 (2)
1.1 目的及效力 (2)
1.2页面制作工作的原则 (2)
二、文件及文件夹 (2)
2.1 文件夹 (2)
2.2 图片文件 (3)
2.3 页面文件 (3)
2.4样式表文件 (4)
2.5 JavaScript文件 (4)
三、代码规范 (4)
3.1 样式表 (4)
3.2 HTML代码 (5)
四、页面内容 (5)
4.1 页面布局 (5)
4.2形象页、页头页尾 (6)
4.3内容显示 (6)
4.4表单 (7)
4.4链接 (7)
4.5 英文字体 (7)
4.6 积极沟通 (7)
五、标准代码 (8)
附录一 (8)
按住CTRL并单击目录可直接定位
一、总则
1.1 目的及效力
1.制订本规范的目的是使静态页面制作工作标准化，便于阅读、理解和程序合成，实现流水
化作业，以期提高代码质量、提升开发效率、减少错误。
2.页面制作人员必须严格遵守此规范。
3.本规范应用于2015年9月1日以后制作的项目中，不溯及以往。
4.本规范随时根据需要修订，请注意版本号的变化。当前为2.0版。
1.2页面制作工作的原则
1.页面制作人员应有手写代码的能力。
2.页面制作必须在规定的时间内完成。
3.页面制作必须按照合同规定完成，如使用table/div布局等。
4.页面制作要遵循设计人员制作的效果标准，对设计效果有疑问的要和设计师协商明确，不
得随意更改设计效果。页面制作完成后需检查是否与设计效果一致，然后提交设计师确认，确认完毕后安排程序制作。
5.设计人员设计的所有页面效果都必须制作成静态页面，不得缺漏。
6.所有网站中需要用到的功能性页面都必须制作，不得缺漏。
7.多语言版网站，所有语言版的页面都必须制作，不得缺漏。
8.使用统一的样式表文件、统一的文件和文件夹命名，标准模块使用公司统一的静态代码。
9.页面制作时使用的文字和图片资料尽量使用客户的真实信息。无法获得客户相关资料的，
可以使用安徽安搜信息技术有限公司的相关资料代替。页面中严禁出现其他客户的名称、标志及联系方式等信息。
10.页面制作必须要保证在多分辨率下的显示效果。
11.页面制作必须要保证在多浏览器下的现实效果。至少保证在IE6.0，IE7.0，IE8.0，
FireFox，360等常用浏览器下的显示效果。
12.页面制作时必须考虑到以后维护内容时可能出现的各种特殊情况，如：新闻或栏目名
称标题较长、暂无内容或内容较少、页数较多、日期长短不一等。
13.在不增加代码复杂度、不降低显示效果的情况下，应尽量缩减图片和页面尺寸。
14.必须遵守互联网相关法律法规，如备案信息的处理、网页内容的健康等。
二、文件及文件夹
2.1 文件夹
1.静态页面制作完成后，所有的工作结果需放置在一个项目文件夹内。
2.项目文件夹命名：中文拼音首字母_中文名，其中字母一律小写。
3.图片文件、flash文件统一放置在images文件夹内，css样式表文件放在css文件夹内，
js放在js文件夹内。普通企业网站原则上不再分设子文件夹；对于复杂的门户型网站，根据需要将图片放在images文件夹的不同子文件夹内。所有测试图片均放于uploads 文件夹。
2.2 图片文件
1.图片文件的命名应清晰、明了，有明确含义。
2.严禁使用中文字符、纯数字序列、汉语拼音、单个字母、含义不明确的缩写等命名图片。
3.在保证图片质量的前提下，尽量减小图片的文件大小, 以减少加载时间。依据实际情况灵
活使用jpg，gif，png格式，透明图片可以使用png。
4.尽量避免使用半透明的png图片。
5.图片命名要有规律，避免后来增补的图片直接更新会覆盖原有图片的情况。
6.图片命名的一般原则，【位置单词_功能单词_文件单词_数字.扩展名】
常用单词有head、top、left、right、bottom、footer、banner、nav、title、menu、logo、pic、bg、btn、ico等等；
对网页中后台可维护的图片，可以简单取用p1、p2、p3等名称。
对不同文件中相同位置、相同功能的图片，名称应保持一致性，如：
left_menu_about.jpg、left_menu_news.jpg、left_menu_contact.jpg；
banner_about.jpg、banner_news.jpg；
导航图片的替换图：默认状态为banner01.jpg当前状态为banner1.jpg。
7.运用css sprite技术集中小的背景图或图标，减小页面http请求。
2.3 页面文件
1.页面文件统一使用UTF-8编码保存，请在软件工具中做好设置。
2.页面文件依据其内容和功能，尽量使用标准文件名。没有标准文件名的，可取用含义贴切
的英文单词，或取用页面效果的文件名。严禁使用中文或拼音命名文件。注意除news外，其他英文单词结尾一般不加s，如使用product.html，不使用products.html。
3.页面文件使用html为后缀名。
4.形象页：default.html
5.首页：index.html
6.关于我们、公司介绍：about.html
7.新闻列表：news.html
8.新闻内容：news_content.html
9.产品列表：product.html
10.产品内容：product_content.html
11.产品订购：order.html
12.联系部门：contact.html
13.留言本：message.html
14.招聘职位：hr.html
15.购物车：order.html
16.搜索结果：search.html
17.客户案例：case.html
18.所有网站中需要用到的功能性页面都必须制作，不得缺漏。如形象页、搜索结果页、
网站地图页等。
19.如用about页兼任content页，必须要设计好新闻标题和发布日期的样式。
2.4样式表文件
1.样式表文件统一使用UTF-8编码保存。
2.样式表文件第一行声明如下：
@charset "utf-8";
3.样式表文件统一命名为style.css ，并存放于css文件夹内。对大型网站和有换肤功能
的网站，要根据实际情况灵活处理。
4.一般设计站推荐使用三个css。全站公用部分css，可以命名为base.css。首页命名成
home.css。内页部分命名为inside.css。
5.网站使用比较复杂的特效时所用的css，可以独立成一个css文件。
2.5 JavaScript文件
1.JavaScript文件统一使用UTF-8编码保存。
2.Jquery库文件放在所有js文件最前面，比如jquery-1.4.1.min.js。
3.常用JavaScript全部统一放在同一个文件中。并命名为common.js，并放在所有
JavaScript文件最后。
4.引入JavaScript库文件, 文件名须包含库名称及版本号及是否为压缩版。
比如jquery-1.4.1.min.js。
引入插件, 文件名格式为库名称+插件名称。
比如jQuery.cookie.js。
三、代码规范
3.1 样式表
1.样式表中中文字体名, 请务必使用英文表示法，或者转码成unicode码, 以避免编码错误
时乱码，如宋体可以使用SimSun。
2.如果出现页面调整，需将新增的样式放在样式表末位，并做注释（标明修改的日期），防
止程序员改过样式。注意和程序员积极沟通，保持双方样式表文件内容的一致性。
3.样式表中禁止统一设置table {margin-left:auto; margin-right:auto;}，这将导致后
台设置的图片居左、居右没有效果。可在需要的样式中单独设置。
4.导航、页码等链接的当前状态统一使用class="current"，不得命名为position等其他
名字。
5.样式禁止使用id选择符，可能会和js程序冲突，也不方便复制使用。
6.style.css 文件中应包含统一公共样式，具体样式内容见demo项目中的style.css。
7.样式表注释；样式表应适当加注释，不同模块之间要适当换行，方便日后修改。
8.对于样式的书写，横排竖排均可，但建议使用横排。
9.书写代码前, 考虑并提高样式重复使用率。
3.2 HTML代码
1.文档类型声明及编码: 统一为html5声明类型; 编码统一为
, 书写时利用IDE实现层次分明的缩进。
2.非特殊情况下样式文件、JavaScript文件必须外链至
之间，为了兼容低版本ie浏览器的JavaScript文件可以页面底部。
3.语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用
ul, 内联元素中不可嵌套块级元素。
4.尽可能减少div嵌套, 如
您的用户名是
欢迎访问XXX, 您的用户名是用户名
< /div>。5.重要图片必须加上alt属性，给重要的元素和截断的元素加上title。
6.特殊符号使用: 尽可能使用代码替代: 比如<(<) >(>) 空格( )等等;
7.能做成文字的尽量做成文字，不要做成图片。
8.避免在Dreamware中自动生成垃圾代码。
9.应使用尽可能少的代码达成页面效果，不得有无用的和无效的代码。避免在代码中产生多
余的空行和空格。
10.除标准代码外，其他html标签及其属性值一律使用小写字母。
11.html标签应拼写正确，属性值应使用双引号括起来，不得出现错误。
12.html标签应完整成对，正确闭合。独立标签使用/ 闭合时，/ 前要留一个空格。
13.复制其他网站的代码时需仔细检查，不得出现多余代码、多余样式、标签未闭合、标
签错误、多余的JS函数调用等情况。
14.代码缩进，缩进大小为1个制表位，制表位大小为4个空格。提前在Dreamweaver
中的：“首选参数”→“代码格式”中做好设置，制作完页面后，在代码视图下格式化代码。
四、页面内容
4.1 页面布局
1.页面各个模块之间可以根据需要进行class命名，具体命名法则见附录一。
2.尽量减少T able的嵌套层数，一般不要超过3层。头部和底部内容应和中间主体部分代
码分开，方便做成包含。尤其要尽量避免将整个页面放在一个T able中的情况，特别是首页，应尽量按其效果切成多行，而不是多列。
3.避免对同一级别的对象分别使用百分比和象素值控制宽度。
4.严禁使用rowspan合并表格。（仅限用table做页面布局）
5.排版应使用 留空，严禁使用中文全角空格。较多的空格，或内容与边界之间无意
义的空格，应使用样式定义。
6.间距尽量使用margin 和padding 控制，不要使用table占位。亦不得使用如 style=”height:10px;”>
的方式实现。
7.避免为包含后期维护内容的容器设置高度。因为当内容超出容器时，IE浏览器会将容器
自动撑开；而FF浏览器会保持容器大小，内容显示到容器之外。
4.2形象页、页头页尾
1.形象页一定要有备案号链接。
2.形象页页尾尽可能和内页保持一致。“进入网站”、“备案号”等内容应做到FLASH之外。
3.主导航栏的链接样式变化不得使用JS，应使用样式表a的几个状态变化来实现。
4.主导航栏各栏目宽度一般应保持一致。
5.CopyRight中应使用© 符号表示。
6.页尾要有备案号链接、要有技术支持:安徽安搜的链接，必须要链接到正确的网址并在新
窗口中打开。
7.页面声明及
部分使用统一标准代码。8.页尾的联系信息应制作在一个相对独立的模块中。
4.3内容显示
1.首页动画文件使用标准插入FLASH代码实现，必须要有替换显示图片。
2.页面栏目文字应和设计效果保持一致。
3.文字标题所在的容器尽量不要控制宽度，防止出现栏目名过长，导致变形。背景尽量做成
可重复、自适应的，不要做成固定长度的特殊背景。类似首页->关于我们->公司概况这样的导航要考虑到二级栏目名称较长时不会换行，如果定义了宽度，建议加上overflow:hidden样式。
4.需要显示日期的，要注意留有足够的空间，一定要测试类似2009-12-28 这样的日期是
否可以正常显示。
5.内容、新闻列表、图片列表等显示模式必须使用标准div代码来处理，禁止再使用table
布局。
6.新闻列表页，在文字标题超长换行时，也要保证显示效果。尤其在交替行换色时，注意保
持交替行的行高一致性。
7.图片列表中要至少有一个图片显示为“暂无图片”，可以根据实际情况选择使用文字或图
片达成效果。无图时建议加个细线边框，效果更美观。
8.所有带边框修饰的图片，其边框或修饰背景不得与图片切为一张整图，且样式最好不要定
义到img标签上，建议定义到外层容器上。
9.要避免在图片数量不固定，特别是不能占满一行时，图片列表变形。
10.缩略图在网站各个显示的地方要大小一致，最低限度也要保持比例一致。如效果相差
太大，应同设计师协商处理。
11.可维护的图片长宽尽量取整数，并尽量将长宽比保持在4比3。
12.一般在内页不截取标题，所以在内页一定要处理好新闻标题或图片标题过长时导致换
行的情况，尤其是背景要处理好。
13.纯色直角边框、纯色背景、纯色的实线、虚线等用样式就可以处理的地方，不要用高
度1的表格或div来做线，更不要使用图片处理。
14.可用1像素背景图平铺的，不得切成一张大图。
15.后台编辑器维护的文字块内容，不要把默认文字样式加在p标签上，而是定义在td p，
或div p 上，因为编辑器会在维护的文字内容外自动生成p标签。
4.4表单
1.页面上出现的
2.表单必须使用