2024年1月7日发(作者：)

信息技术中心网站技术部

HTML/CSS开发规范

版本

V1.0

更新时间

2013

修改人

？？

备注

文档创建

1 / 6

目 录

文件命名............................................................ 3

HTML规范 ........................................................... 3

文件定义 ........................................................ 3

HEAD规范........................................................ 3

HTML规范........................................................ 3

HTML书写建议.................................................... 4

CSS开发规范 ........................................................ 4

命名规范 ........................................................ 4

兼容性 .......................................................... 5

CSS规范......................................................... 5

CSS书写建议..................................................... 6

2 / 6

文件命名

命名指导思想是能够方便的理解每一个文件的意义，当按名称排列时，同一种类的文件能够排列在一起，方便查找、修改等操作。

1. 文件统一使用UTF-8编码保存。

2. 文件与目录命名采用英文，长度一般不超过30个字符，名称统一用小写的英文字母、数字和下划线的组合。

3. 每一个目录中包含一个缺省的html文件，文件名统一用。

4. 样式表文件第一行声明如：@charset"utf-8"。

5. 样式表文件可以用一个公用样式表，除了公用样式表外，以模块建立单独的CSS。

6. 如果需要换肤，则命名按色彩来命，比如：//。

HTML规范

为改善可读性，规范使用XHTML标准（除DOCTYPE引用外）。

文件定义

http：///TR/xhtml1/DTD//>

HTML5定义

HEAD规范

至少包括以下内容：

：使用-或空格作为title的分隔符。最大长度80字符。

HTML规范

1. 所有的XHTML元素及其属性名称用小写，XHTML是大小写敏感的。

2. 弃用W3C标准不再提倡的标签。

3. 常用HTML元素包括：div，p，ul，table，span，input，select。其中div，table，ul，p都属于结构性较强的元素，而span，input则是较弱的元素，因此禁止span嵌套div，p，table等的情况出现，span可以嵌套input，可以嵌套span。

4. 一个Tab缩进对应使用四个空格。

5. 打开的标签必须关闭，如

或
。

6. 根据交互图或设计图书写HTML，严格按照效果图排版。

7. 布局要建立清晰的层次关系，尽量不要超过三层。

8. 最高一级的父标记采用左对齐顶格方式书写，一般是html，body或div。

9. 下一级标记采用左对齐向右缩进一个Tab的方式书写。

10. 再下一级依此类推，相对于父标记向右缩进一个Tab的方式书写

11. 同一级标记的如有换行，首字符上下级必须对齐。

3 / 6

12. 标签必须正确嵌套，每个标签必须结尾，属性值带上双引号。

13. HTML书写时即定义class属性，方便之后可直接更新CSS。

14. HTML标签书写要考虑SEO需求。

15. 不能用使用 空格用于排版。

16. 页面尽量减少图片img标签的使用，尽量写到CSS上，用背景模式表现。

17. 对于用图片表示的内容，应该带上alt属性。

18. 对于图片和文字的链接，用两个a标签，不要把图片和文字都放在同一个a标签中。

19. 对于显示不全的a标签，应该有title属性。

20. javascript尽量放到页面底部。

21. 站点使用一个jquery，一个页面上同一个脚本不能导入多次。

HTML书写建议

1.

2.

3.

4.

给所有的属性赋值，如。

标签应合理嵌套，禁止

。

特殊字符用实体标识，如<=<，>=>。

用结构化的元素输出内容。tr、td必须定义在table之间，tbody不可以省略。

5. 表现与结构分离，代码中不涉及表现元素，如style、font、bgColor、border等；

到

的定义，遵循从大到小的原则，体现文档结构，利于搜索引擎的查询。

6. 给每一个表格和表单加上一个唯一的、结构标记id。

7. 图片优化：图片加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本，内容应与关键词相关。图标使用CSS Sprites实现定位。

8. HTML注释：每一独立部分都要表明注释。注释要用描述性语言。能够清楚的表达每一部分的内容含义。

CSS开发规范

命名规范

1. 符合文件命名原则，后缀.css。

2. 常用命名以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。尽量不缩写，除非一看就明白的单词。

3. 对于二级命名，则采用组合书写的模式，如搜索图标样式命名.searchicon。

常见文件命名：

4 / 6

主要：

全局：

框架：

常见DIV命名：

容器：container

页尾：footer

菜单：menu

子菜单：submenu

标志：logo

状态：status

滚动：scroll

标签：tab

列表：list

提示：msg

模块：

基本：

字体：

页头：header

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

右导航rightsidebar

当前的：current

小技巧：tips

：布局：

表单：

链接：

内容：content

侧栏：sidebar

标题：title

广告：banner

注册：regsiter

图标：icon

热点：hot

新闻：news

投票：vote

主题：

补丁：

打印：

主体：main

外套：wrap

摘要：summary

登陆：login

搜索：search

注释：note

服务：service

下载：download

合作：partner

版权：copyright

左导航：leftsidebar 指南：guild

兼容性

CSS必须兼容IE、360、搜狗、FF、Chrome等主流浏览器。

使用标准CSS来书写样式，尽量少用CSS hack。

CSS规范

1.

2.

3.

4.

5.

6.

7.

在页面中尽量避免使用style属性，即style=”…”。

样式表定义统一为横排书写。尽量不要使用id选择符，id选择符应留给js使用。

CSS里定义的元素名称采用小写。

页面排版禁止使用插入标签进行排版。

CSS应该都用;结尾。

书写格式及顺序：单行书写，过长的行在一个属性结束后的;之后换行。

CSS属性书写顺序，建议遵循定位属性->自身属性->文本属性->其他属性，此条可根据自身习惯书写，但尽量保证同类属性写在一起。

定位属性（比如：display，position，float，clear，visibility等）

自身属性（比如：width，height，margin，padding，border等）

文本属性（比如：font，line-height，text-align，text-indent，vertical-align等）

其他属性（比如：color，background，opacity，cursor，list-style等）

8. 条件允许时颜色或属性使用CSS缩写。

9. 当写给一个元素定义class或者id，不添加元素限定。

10. 在不同的浏览器中初始化样式表的基准值。

11. CSS中，子元素自动继承父元素的属性值，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。

12. 一个标签可以同时定义多个class。

13. 如果在使用时，有个别元素需要定义独立样式，可以重新定义。

14. 用正确的顺序指定a链接的样式，正确的顺序是:link :visited :hover :active。

15. 下面的层被浮动的层覆盖或者嵌套的子层超出了外层的范围时使用清除浮动。

16. 利用CSS Sprites减少网页的https请求，减少图片的字节数，从而提高页面的性能和 5 / 6

制作效率。

17. 图片文件

命名：图片名称遵循文件命名规则。

格式：常用格式png8/24、gif、jpg。

png24时，图片透明支持的非常好，缺点是ie6需要解决方案（ie6）：_background：none;_filter：progid：mageLoader(sizingMethod=crop，src="");

大小：用PS切图时，要选择比较小的图片格式保存，比较gif/png/jpg。jpg可以将品质压倒刚清楚的。比如压缩到70等。

18. CSS注释格式：

/*样式css start*/

….

/*样式css end*/

CSS书写建议

1.

2.

3.

4.

5.

6.

7.

8.

9.

DOCTYPE影响CSS处理。

CSS样式表各区块用注释说明。

检查CSS是否正确，有无拼写错误、是否忘记结尾的;或}等。

利用border属性可以帮助确定出错元素的布局特性。

指定元素时尽量使用em而不是px做单位。

float元素务必指定width属性。

float元素不能指定margin和padding等属性。

float元素的宽度之和要小于100%。

动态添加内容不定义高度，浏览器可以自动伸缩，静态内容可以将高度事先定义。

6 / 6