# 中国电信软件研发规范编码规范（前端分册）
> 脱敏整理版：已移除编制人员、联系人和联系方式，并合并无意义硬换行。技术条款、章节和示例以原始 DOCX 为争议核验依据。
中国电信软件研发规范编码规范 （前端分册） （修订版）
中国电信集团有限公司
## 2023 年 12 月
i
> 编制人员信息已移除。
版本变更历史
1. 文档说明
### 1.1 编制说明
软件行业的高速发展， 对软件开发者的综合素质要求越来越高， 不仅仅是编程知识点，其他维度知识点也会影响最后的交付质量，本文档以开发前端项目角度，详细描写了前端的代码规范，分别从 HTML、CSS、JavaScript、TypeScript、四个方面入手，并且每个章节进行了详细划分，方便读者能快速定位，规范自己的代码， 提高项目代码质量。
### 1.2 适用范围
本规范适用于指导中国电信软件研发工作。
### 1.3 起草单位
本规范的起草单位是中国电信集团公司。
### 1.4 解释权
本规范解释权属于中国电信集团公司。
### 1.5 版权
本规范的版权属于中国电信集团公司。
### 1.6 名词解释
2. 前端研发规范
2.1. HTML 编码规范
2.1.1. 文档类型
1) 【强制】使用 HTML5 DOCTYPE。
2.1.2. 语言
1) 【推荐】指定 html 标签上的 lang 属性。
2.1.3. 元数据
1) 【推荐】使用 UTF-8 字符编码。
声明一个明确的字符编码， 可以让浏览器更快速高效地确定适合网页内容的渲染方式。由于历史原因， 不同浏览器采用了不同的字符编码 。但对于新业务，如无特殊要求， 统一使用 UTF-8 字符编码， 以便统一。在 HTML 中使用 声明文档的编码方式：
2) 【推荐】页面提供给移动设备使用时， 需要设置 viewport。
2.1.4. 资源加载
1) 【推荐】引入 CSS 和 JavaScript 时无需指定 type 。 根据 HTML5 规范，引入 CSS 和 JavaScript 时通常不需要指明 type， 因为 text/css 和
text/javascript 分别是他们的默认值。
2) 【推荐】在 head 标签内引入 CSS， 在 body 结束标签前引入 JS。
在 中指定外部样式表和嵌入式样式块可能会导致页面的重排和重绘， 对页面的渲染造成影响 。 因此， 一般情况下， CSS 应在 标签里引入。
2.1.5. 页面标题
1) 【强制】页面需要指定 title 标签， 有且仅有 1 个。
2.1.6. 编码风格
1) 【推荐】统一使用 2 个空格缩进， 不要使用 4 个空格或 tab 缩进。
2) 【强制】在 HTML 注释代码中， 不允许出现任何敏感信息。
3) 【推荐】单行注释， 需在注释内容和注释符之间需留有一个空格， 以增强可读性。
4) 【推荐】多行注释， 注释符单独占一行， 注释内容 2 个空格缩进。
2.1.7. 标签
1) 【强制】标签名统一使用小写。
2) 【推荐】不要省略自闭合标签结尾处的斜线，且斜线前需留有一个空格。
2.1.8. 属性
1) 【强制】属性值使用双引号， 不要使用单引号。
2) 【推荐】不要为 Boolean 属性添加取值。
XHTML 需要每个属性声明取值，但是 HTML5 并不需要。一个元素中Boolean 属性存在即表示取值 true， 不存在则表示取值 false
3) 【推荐】 自定义属性的命名： 以 data- 为前缀。
2.1.9. 语义化
1) 【参考】尽量根据语义使用 HTML 标签。
2.2. CSS 编码规范
2.2.1. 文件引用
1) 【强制】一律使用link 的方式调用外部样式。
2) 【推荐】 不要在