【html】页面制作规范文档

每天都在写html/css/js代码，总结的一些页面制作的规范

文件命名规范

1) 文件目录、文件名称统一用小写的英文字母、数字、下划线组合，文件名要与表现的内容相近，不到万不得已不要以拼音作为名称，如登录页面：login.html（不要用 denglu.html）。

2) 目录结构规范：清晰的站点目录结构方便文件的维护和整理，同时对增加搜索引擎的友好度和移植也有着重要的影响。

图片制作规范

1) 如果图片作为内容放在html代码里，则必须定义它的宽度和高度。

2) 如果图片不包含任何信息，仅是作为装饰使用，请将该图片从html中分离出来。

3) 检查是否有可能在不损失画质的基础上压缩图片，或者采用不同的文件格式来获得最大程度的压缩。

4) 利用css sprite 将一些小图片合成一张大图片，用 background-position 来定位图片。

5) 如果有用到透明，则用 gif/png 格式图片，确保各个主流浏览器的兼容。

6) 为网站制作favicon.ico，不管有没有favicon.ico，浏览器总是会去请求它。因此，我们需要为网站制作一个小图标，并将其缓存到用户的电脑中去。

Html代码规范

1) 要建立一个符合标准的页面，doctype声明是必不可少的。

2) 每个页面最好有标题、描述、关键字。

3) 大部分javascript的调用应写在最下面，即</html>的后面。

4) html代码要求所有的标签必须小写。

5) 禁止使用frame框架。

6) 属性值必须使用双引号，以免引发不必要的页面问题。

7) 所有标签必须有闭合标签，如<p></p>，<div></div>

如果使用 img 或者 br、hr、input 这样的单体标签，那么必须使用空格加斜线为闭合标签，如<img />，<br />，<input />。

8) 必须设置 img 的 alt 属性，如没替换文本则留空。

9) 必须给 a 标签加上 title 属性，如没有则留空。

10) 如果无特殊说明，所有链接必须新开窗口。

11) 所有的特殊符号编码化。

12) 可以在主要的区域加上注释，但要尽量减少注释的内容。

13) html 标签必须合理嵌套，如<ul><li></li></ul>。

14) 保持页面的整洁，尽量减少 html 的层次，用最少的代码写出符合标准的页面。

15) 正确使用 html 标签定义页面内容，每一个标签都有自己的语义。

如，文字用 span 段落用 p 标题用 h1-h6 布局用 div 等。

16) 每个页面都要有一个<h1></h1>里面的内容为PSD的slogan。

17) 相同域名下的链接用相对路径。

18) 注册类页面，注册按钮必须先锁住，等html加载完成后解锁。

19) 禁止在页面中使用表现级标签，如font、bgcolor等。

禁止不符合web标准的标签，如<font></font>，<b></b>，<u></u>，<i></i>。

Css编写规范

1、Css代码规范

1) 尽量少用或避免使用id来定义css。

2) css命名可以用横线来连接，如 xx-info。

3) 属性值书写顺序应当按照“上右下左”书写。

4) 当用css定义链接的多个状态时，应当遵循正确的书写顺序，即“LVHA”。

5) css代码书写应当写在一行里。

6) 在定义css时，一定要注意默认值这个问题，通常我们会重置css。

7) 删除废弃的CSS，要做到所有声明的类或ID都能用到。

8) 避免使用滤镜，它的兼容性和效率同样不是很好。

2、Css 缩写规则

1) 属性值为0时，省略单位。

2) 颜色缩写：#000000 缩写为 #000 或者 black（推荐）。

3) 字体缩写：font-size:12px;font-family:"宋体";line-height:20px;font-weight:bold; 缩写为 font:bold 12px/20px "宋体";

注意：字体缩写时，至少要定义font-size和font-family两个值。

4) 边距缩写：如

margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;

缩写成 margin:10px;

margin-top:10px; margin-right:12px; margin-bottom:10px; margin-left:12px;

缩写成 margin:10px 12px;

margin-top:10px; margin-right:12px; margin-bottom:15px; margin-left:12px;

缩写成 margin:10px 12px 15px;

margin-top:10px; margin-right:11px; margin-bottom:12px; margin-left:13px;

缩写成 margin:10px 11px 12px 13px;

5) 边框缩写：

border：border-width | border-style | color，如 border:1px solid red;

6) 背景缩写：

background：background-color | background-image | background-repeat | background-attachment | background-position，如 background:#000 url(images/bg.jpg) no-repeat 30% 20px;

7) 列表缩写：

list-style：list-style-type | list-style-position | list-style-image，如 list-style:disc outside none;