Html5+css3Web前端开发规范标准[详]

Web前端开发规

文件规

为输出高质量的Web页面，提高团队协作效率，便于后台人员添加功能及前端后期优化与维护，如有错误及时提出更改。

1、html，css，js，images,fonts等文件目录组织如下如示：

├── xxx.html

├── css/

│ ├── index.css

│ ├── header.css

│ ├── footer.css

│ └── 2016/

│ │ ├── content.css

│ │ └── nav.css

├── js/

│ ├── xxx.js

│ ├── xxx_min-tab.js

│ └── 2016/

└── images/

│ ├── index_head.jpg

│ ├── index_logo.gif

│ └── 2016

│ │ ├── xxx.jpg

│ │ └── xxx.png

└── fonts/

└── xxx.ttf

文件命名原则调整为所有字母小写，单词之间使用破折号（-）相连，压缩后的文件在原文件名（除扩展名）后添加.min。参考bootstrap文件命名：bootstrap-theme.css, bootstrap-theme.min.css。

常用目录名：

data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式);

引入 CSS 和 JavaScript 文件

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面的书签），因此排在第二位。

Example link

编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。

参考如下：

其他要求

●css文件外链至之间，js文件置于之前。

●语义化HTML，如标题根据重要性用h*(同一页面只能有一个h1)，段落标记用p，列表

用ul，联元素中避免嵌套块级元素。

●书写地址时，建议在URL地址后面加上"/"，例如：href="/"。

●在页面中不能使用style属性，即style="…"；所有样式必须写在css文件中。

●必须为含有描述性表单元素(input，textarea)添加label，如：

:

须写成：

：

●能以背景形式呈现的图片，尽量写入css样式中。

●给重要的元素和截断的元素加上title。

●建议给区块代码及重要功能（比如循环）加上注释，方便后台添加功能。

●不是标签一部分的特殊符号都用编码表示，出现在容中的特殊符号都需要用编码形式表

现出来，如：<：<，>：>，&）：&，"："，尽量使用 代替空格。●图片标签必须要有alt属性，如只起修饰作用而没有任何意义的图片可设置alt属性值

为空。如：。

CSS规

1. css文件命名: 英文命名, 后缀.css. 共用首页单独定义.css部分，其他页面依实际模块需求命名.;

2. Js文件命名: 英文命名, 后缀.js. 共用.js, 其他依实际模块需求命名.

3. 文档类型声明及编码: 统一为html5声明类型; 编码统一为, 书写时实现层次分明的缩进;

4. 非特殊情况下样式文件必须外链至...之间;非特殊情况下JavaScript 文件必须外链至页面底部;

5. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

6. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 联元素中不可嵌套块级元素;

7 尽可能减少div嵌套, 如完全可以用以下代码替代: 8. 书写地址时, 必须避免重定向，例如：.qianxiuwang. 即须在URL地址后面加上“/”；9. 能以背景形式呈现的图片, 尽量写入css样式中;

10. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

11. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

12.. 书写页面过程中, 请考虑向后扩展性;13. 必须为大区块样式添加注释, 小区块适量注释;

14. 代码缩进与格式: 建议单行书写;

书写规

参考搜狐CSS板式

.sohu./upload/style/style150302.css

.sohu./upload/style/layout130716.css

.sohu./upload/style/global130716.css

例如css规

news (性质)

news_title (性质_描素)

news_title_top (性质_描素_位置)

news_title_top_01 (性质_描素_位置_数量)

news_title_top_a_01 (性质_描素_位置_分类_数量)

news_title_top_b_01 (性质_描素_位置_分类_数量)