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.html5.首页：index.html6.关于我们、公司介绍：about.html7.新闻列表：news.html8.新闻内容：news_content.html9.产品列表：product.html10.产品内容：product_content.html11.产品订购：order.html12.联系部门：contact.html13.留言本：message.html14.招聘职位：hr.html15.购物车：order.html16.搜索结果：search.html17.客户案例：case.html18.所有网站中需要用到的功能性页面都必须制作，不得缺漏。
如形象页、搜索结果页、网站地图页等。
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声明类型<!DOCTYPE html>; 编码统一为<meta charset=”utf-8″/>, 书写时利用IDE实现层次分明的缩进。
2.非特殊情况下样式文件、JavaScript文件必须外链至<head></head>之间，为了兼容低版本ie浏览器的JavaScript文件可以页面底部。
3.语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素。
4.尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX,您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p>< /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层。
头部和底部内容应和中间主体部分代码分开，方便做成包含。