Web前端开发规范

一、为何要遵循开发规范?

1. 为了写出高质量,高效率的代码。

2. 提高代码的重复利用率。

3. 让你的代码阅读者更方便读懂。

4. 提高后期项目维护效率。


二、HTML命名规范

1. 文件资源的命名规则:

方面理解,方便查找。统一用小写的英文字母、数字和下划线的组合,不得包含汉字空格和特殊字符。

Web前端开发规范_第1张图片
常见命名及存放的资源

2. 索引文件命名规则:index.后缀  (如index.html、index.php等)

3. 子页面命名规则:统一中文翻译的英文。或者统一拼音命名,但不要又是拼音又是英文。


三、图片的命名规则

一般使用下划线分割,前面页面位置或类型,后面加性质。例如:

Web前端开发规范_第2张图片
图片的命名示例

几个常见的不成文规定:

在页面上位置不固定并且带有链接的小图片我们取名为 button

在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu

装饰用的照片我们取名: pic

不带链接表示标题的图片我们取名: title



四、脚本共用模块的命名:common.js 、basic.js



五、自定义样式命名规则:

普通样式: “.” + “相应样式效果描述的单词或缩写” 。例如:“.shadow”

文字样式:“.no” + “字号” + “行距” + “颜色缩写”。例如:“ .no12 ” 、“ .no12_24 ”


六、CSS常见名字单词


Web前端开发规范_第3张图片

七、网页中的字体

一般使用

做网站标题(可当容器存放logo)。

网页中的字体颜色一般不使用黑色,而是使用深灰,如#666。

在网页中中文应首选使用宋体。英文和数字首选使用verdana 和arial两种字体。

一般使用中文宋体的9pt和11pt或12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt 和14.7px 的字号比较合适。

不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外, 汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。

请不要在网页中连续出现多于一个的“ ”(空格)也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

关于文字缩进的问题:排版中我们经常会遇到需要进行首行缩进的处理,不要使用  或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上

标记。


八、链接与表格

使用空链接时,我们用代码“javascript:void(null)”代替原来的“#”标记,来避免它自动将当前页面跳到页面开头,影响用户阅读体验。

表格:互相嵌套时,严格按照的规范,对于单独的一个

来说,
对齐,
缩进两个半角空格,中如果还有嵌套的表格,也缩进两个半角空格,如果处于同一行,不要换行。


你可能感兴趣的:(Web前端开发规范)

中没有任何嵌套的表格,结束标记应该和