HTML编写规范摘要

柔情只为你懂 2022-09-25 11:14 225阅读 0赞

在编写代码中我们要有意识的注意代码的规范对团队协作的重要性

## 一、编写HTML的相关规范： ##

1、创建HTML文档时要使用能够代表内容语义的标记命名；  
例如：（1）相关活动页面的主体页（首页），一般情况是以”index.html”命名或者”home.html”命名；  
（2）相关活动页面的分享页面及其预热页面是以“share.html”与“notice.html”;如果该活动不止一个分 享页面或者分享页面有多种展示情况下，在share之前加前缀（例如：error\_share.html~分享报错页面；）；  
（3）以简洁，一目了然为目标，根据活动内容所需进行命名；（商品详情页面（goods\_ detial.html），商品列表页面（goods\_list.html），商品分享页面（goods\_share.html）等等。依据实际模块需要命名~）

## 2、HTML页面内相关命名规范： ##

例如：（01）页面外围控制整体局部宽度 ==》 类名或者id名为wrapper/wrap/相关页面特殊-wrap；  
（02）页面头部标题返回及其分享刷新图标 ==》类名或者id名为 t-nav/top-header；  
（03）页面头图 ==》类名或者id名为banner；  
（04）页面主题内容 ==》类名或者id名为main/content/containe；  
（05）页面尾部 ==》类名或者id名为foot/footer;  
（06）页面尾部下载浮层 ==》类名或者id名为foot-down/down-load/footer-down；  
（07）页面导航 ==》类名或者id名为nav/特殊区域-nav；  
（08）页面返回顶部 ==》类名或者id名为back-top；  
（09）页面相关标题 ==》类名或者id名为title/特殊标题-title；  
（10）页面其他相关区域无关键词时 ==》类名或者id名为 相关内容的汉语拼音命名，以实际情况而定；  
（11）本页面是什么页面在各个类名或者id名加前缀，防止出现页面当中类名相同；

## 3、HTML页面内相关注意事项和规范： ##

1)文档类型声明及编码:统一为html5声明类型;编码统一为,书写时利用IDE(集成开发环境)实现层次分明的缩进~  
2)非特殊情况下样式文件必须外链至…之间;  
非特殊情况下JavaScript文件必须外链至页面底部  
3)引入样式文件或JavaScript文件时,须略去默认类型声明,写法如下:  
  
  
  
注：根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。  
4)尽可能减少div嵌套；  
例如：

改为：

5)在页面中尽量避免使用style属性,即style=”…”; 写在相应的样式文件中~  
6)用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法；  
7)嵌套元素应当缩进一次（即两个空格）；  
8)对于属性的定义，确保全部使用双引号，绝不要使用单引号；  
9)不要省略可选的结束标签（closing tag）（例如， 或 ）；  
10)不要在自闭和（self-closing）元素的尾部添加斜线。例如 ![Image 1][]，不需要斜线；  
11) 必须为含有描述性表单元素(input,textarea)添加label；  
例如：

密码：

改为：

密码：

12）背景图片请尽可能使用sprite技术, 减小http请求~  
13）给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能~  
14）语义化html,如标题根据重要性用h\*(同一页面只能有一个h1),段落标记用p,列表用ul，内联元素中不可嵌套块级元素~  
15）不要使用 @import，与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导 致不可预料的问题。替代办法有以下几种：  
a 使用多个 元素  
b 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件  
c 通过 Rails（是一个更符合实际需要而且更高效的Web开发框架）、Jekyll（是一个生成静态网页的工具，不需要数据库支持，可以绑定自己的域名） 或其他系统中提供过 CSS 文件合并功能

## 二、编写CSS的相关原则： ##

1、CSS书写顺序；  
　1). 显示属性：display/list-style/position/float/clear …；  
　2). 自身属性（盒模型）：width/height/margin/padding/border；  
　3). 背景：background；  
　4). 行高：line-height；  
5）文本属性  
color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…  
6). 其他：cursor/z-index/zoom/overflow；  
7). CSS3属性：transform/transition/animation/box-shadow/border-radius；  
8). 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进 行添加，标准属性写在最后；  
9). 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active；

2、排版规范：  
1). 使用4个空格，而不使用tab或者混用空格+tab作为缩进；  
2). 规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；  
单行形式书写风格的排版约束：  
a 如果是在html中写内联的css，则必须写成单行；  
b 每一条规则的大括号 \{ 前后加空格 ；  
c 属性名冒号之前不加空格，冒号之后加空格；  
d 每一个属性值后必须添加分号; 并且分号后空格；  
e 多个selector共用一个样式集，则多个selector必须写成多行形式 ；  
多行形式书写风格的排版约束：  
a 每一条规则的大括号 \{ 前添加空格；  
b 多个selector共用一个样式集，则多个selector必须写成多行形式；  
c 每一条规则结束的大括号 \} 必须与规则选择器的第一个字符对齐；  
d 属性值之后添加分号；

3、规则书写规范，如下：  
1). 使用单引号，不允许使用双引号；  
2). 每个声明结束都应该带一个分号，不管是不是最后一个声明；  
3). 除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写；  
4). 除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置；  
5). 每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性；

4、命名时需要注意的几点；  
1). 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 \_； \* \* \*  
2). 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合；  
3). 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则；  
4). 不允许通过1、2、3等序号进行命名；避免class与id重名； \* \* \*  
5). id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id；  
6). class用于标识某一个类型的对象，命名必须言简意赅；  
7). 尽可能提高代码模块的复用，样式尽量用组合的方式；  
8). 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名；

5、代码性能优化；  
1). 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称；  
2). 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置；  
3). 注意选择器的性能，不要使用低性能的选择器；  
4). 禁止在css中使用*选择符；*  \* \*  
5). 除非必须，否则，一般有class或id的，不需要再写上元素对应的tag；  
6). 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px；  
7). 如果是16进制表示颜色，则颜色取值应该大写；  
8). 如果可以，颜色尽量用三位字符表示，例如\#AABBCC写成\#ABC；  
9). 如果没有边框时，不要写成border:0，应该写成border:none； \* \* \*  
10). 尽量避免使用AlphaImageLoader（滤镜：对图片进行透明处理）；  
11). 在保持代码解耦的前提下，尽量合并重复的样式；  
12). background、font等可以缩写的属性，尽量使用缩写形式；

6、其他规范：  
1). 不要轻易改动全站级CSS和通用CSS库。改动后，要经过全面测试；  
2). 避免过小的背景图片平铺；  
3). 避免使用filter（滤镜）；  
4). 尽量不要在CSS中使用!important；  
5). 避免在CSS中使用expression（css表达式，用来把css属性和JavaScript表达式关联起来；）；  
6). 层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999），不同弹窗气泡之间可在三位数之间 调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比。  
7). 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按照模块、业务、页面来划分均可；

7、字体规范：  
1). 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋 体(SimSun) 微软雅黑 (Microsoft Yahei），几个单词中间有空格组成的必须加引号)； \* \* \*  
2). 字体粗细采用具体数值，粗体bold写为700，正常normal写为400；  
3). font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置），不允许使用 xx-small/x-small/small/medium/large/x-large/xx-large等值；  
4). 为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置；

8、常用命名（多记多查英文单词）  
Page（页）、wrap、layout（布局）、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain（次内容）、sidebar/side（侧导航）、logo、banner、title(tit)、icon（图标）、note（注释）、btn（按钮）、txt（文本文件）、tips（温馨提示）等；

[Image 1]: