信息技术中心网站技术部
HTML/CSS开发规范
版本
更新时间
修改人
备注
V1.0
2013
？？
文档创建

目    录
文件命名    3
HTML规范    3
文件定义    3
HEAD规范    3
HTML规范    3
HTML书写建议    4
CSS开发规范    4
命名规范    4
兼容性    5
CSS规范    5
CSS书写建议    6

文件命名
命名指导思想是能够方便的理解每一个文件的意义，当按名称排列时，同一种类的文件能够排列在一起，方便查、修改等操作。
1. 文件统一使用UTF-8编码保存。
2. 文件与目录命名采用英文，长度一般不超过30个字符，名称统一用小写的英文字母、数字和下划线的组合。
3. 每一个目录中包含一个缺省的html文件，文件名统一用index.htm。
4. 样式表文件第一行声明如：@charset"utf-8"。
5. 样式表文件可以用一个公用样式表，除了公用样式表外，以模块建立单独的CSS。
6. 如果需要换肤，则命名按彩来命，比如：red.css/blue.css/green.css。
HTML规范
为改善可读性，规范使用XHTML标准（除DOCTYPE引用外）。
文件定义
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
http：///TR/xhtml1/DTD/xhtml1-strict.dtd/>
HTML5定义
<!DOCTYPEhtml/>
HEAD规范
至少包括以下内容：
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<metaname="author"content="www.abc">
<metaname="copyright"content="www.abc，版权所有"/>
<title></title>：使用-或空格作为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. 打开的标签必须关闭，如<p></p>或<br/>。
6. 根据交互图或设计图书写HTML，严格按照效果图排版。
7. 布局要建立清晰的层次关系，尽量不要超过三层。
8. 最高一级的父标记采用左对齐顶格方式书写，一般是html，body或div。
9. 下一级标记采用左对齐向右缩进一个Tab的方式书写。
10. 再下一级依此类推，相对于父标记向右缩进一个Tab的方式书写
11. 同一级标记的如有换行，首字符上下级必须对齐。
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. 给所有的属性赋值，如<input checked="checked"/>。
2. 标签应合理嵌套，禁止<div><span>www.abc</div></span>。
3. 特殊字符用实体标识，如<=<，>=>。
4. 用结构化的元素输出内容。tr、td必须定义在table之间，tbody不可以省略。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
html网页设计css</table>
5. 表现与结构分离，代码中不涉及表现元素，如style、font、bgColor、border等；<h1>到<h6>的定义，遵循从大到小的原则，体现文档结构，利于搜索引擎的查询。
6. 给每一个表格和表单加上一个唯一的、结构标记id。
7. 图片优化：图片加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本，内容应与关键词相关。图标使用CSS Sprites实现定位。
8. HTML注释：每一独立部分都要表明注释。注释要用描述性语言。能够清楚的表达每一部分的内容含义。
<!—左边begin--><!—左边end-->
<!—头部begin--><!—头部end-->
<!—XX列表begin-->
<!—XX列表end-->
CSS开发规范
命名规范
1. 符合文件命名原则，后缀.css。
2. 常用命名以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。尽量不缩写，除非一看就明白的单词。
3. 对于二级命名，则采用组合书写的模式，如搜索图标样式命名.searchicon。
常见文件命名：
主要：master.css
模块：module.css
布局：layout.css
主题：themes.css
全局：global.css
基本：base.css
表单：forms.css
补丁：mend.css
框架：layout.css
字体：font.css
链接：link.css
打印：print.css
常见DIV命名：
容器：container
页头：header
内容：content
主体：main
页尾：footer
导航：nav
侧栏：sidebar
外套：wrap
菜单：menu
主导航：mainbav
标题：title
摘要：summary
子菜单：submenu
子导航：subnav
广告：banner
登陆：login
标志：logo
顶导航：topnav
注册：regsiter
搜索：search
状态：status
边导航：sidebar
图标：icon
注释：note
滚动：scroll
左导航：leftsidebar
指南：guild
服务：service
标签：tab
右导航：rightsidebar
热点：hot
下载：download
列表：list
当前的：current
新闻：news
合作：partner
提示：msg
小技巧：tips
投票：vote
版权：copyright
兼容性
CSS必须兼容IE、360、搜狗、FF、Chrome等主流浏览器。
使用标准CSS来书写样式，尽量少用CSS hack。
CSS规范
1. 在页面中尽量避免使用style属性，即style=”…”。
2. 样式表定义统一为横排书写。尽量不要使用id选择符，id选择符应留给js使用。
3. CSS里定义的元素名称采用小写。
4. 页面排版禁止使用插入标签进行排版。
5. CSS应该都用;结尾。
6. 书写格式及顺序：单行书写，过长的行在一个属性结束后的;之后换行。
7. 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等）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。