HTML编码规范

HTML编码规范

1、文件命名

  • 文件名不得包含空格和特殊字符。

  • 文件名统一使用小写字母(为了醒目,某些说明文件的文件名,可以使用大写字母,比如 README、LICENSE )。

  • 文件名包含多个单词时,单词之间以中划线 ( - ) 分隔。

  • 入口文件使用 index 命名(比如 index.html、index.asp、index.jsp)。

  • 命名的原则是语义化,方便理解,见名知意。

  • 外部插件建议放在 modules 目录里,组件建议放在 components 目录里,不要全都放到 js 文件夹中。

  • 使用统一的自动化工具构建页面结构。

1
2
3
npm install -g tfbi

fbi init  项目名称

2、DOCTYPE 声明

  • 为了确保在每个浏览器中拥有一致的展现效果,HTML 文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明。
1
<!DOCTYPE html>

3、页面语言 LANG

  • 强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
1
<html lang="zh-cmn-Hans">

4、文档编码

  • 为了防止文档在不同浏览器下出现乱码的问题,统一只用 utf-8 编码。
1
<meta charset="UTF-8">

5、命名风格

  • HTML 标签名、ID 名、类名、标签属性和大部分属性值统一用小写,用中划线链接。

  • ID 名是唯一的,一般写在最外层元素上,禁止使用 ID 写 css 样式。

  • 对于引号的运用,必须使用双引号,禁止使用单引号。

  • 避免过度任意的简写,.btn 代表 button,但是 .b 不能表达任何意思。

  • 使用 .js-* 来标识行为,并且不要将这些 class 写到 CSS 文件中(加具体的事件名)。

  • 嵌套标签建议基于最近的父 class 或规定关键字作为新 class 的前缀。

1
2
3
<div class="demo">
<div class="demo-info"></div>
</div>

6、标签

  • 每个标签都有自己的定义,HTML 中必须使用语义化标签,禁止一直使用一类标签。

  • HTML 中使用双闭合标签时标签必须闭合,使用单闭合标签时尾部不加斜杠。

  • 行内元素不要嵌套块级元素。p 标签中是不能嵌套块级元素的,浏览器会解析为两个独立的标签。

  • 使用 img 标签时,建议定义好图片的尺寸,在加载时可以预留指定空间,减少闪烁。

7、关于 JS 和 CSS

  • 根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值。这一点在老旧浏览器上也是支持的。

  • 引入 JS 时 script 标签如无特殊情况统一放在 body 结束标签的前面,引入 CSS 时 link 标签统一放在 head 结束标签的前面,因为浏览器生成 Dom 树的时候是一行一行读 HTML 代码的,link 标签放在最后页面会出现短暂无样式的效果,script 标签放在最后面就不会影响前面的页面的渲染。

  • 原则上禁止在 HTML 中编写 JS 代码,禁止在 HTML 中编写内联样式。

8、注释

  • HTML 中必要时增加注释代码。

  • 注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行。

1
2
3
<!-- Comment Text -->

<div>...</div>

9、代码格式化

  • 统一使用两个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)(浏览器的配置文件)。

  • 嵌套元素必须缩进一次(两个空格)。

  • 元素嵌套时,每个块状元素独立一行,内联元素可选。

作者

刘燕

发布于

2020-08-28

更新于

2021-08-04

许可协议

CC BY-NC-SA 4.0

评论