前端代码规范 —— HTML

type

status

date

slug

summary

代码规范

尽量根据语义使用 HTML 标签

元素及标签闭合

HTML元素共有以下5种：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

原始文本元素：script、style

RCDATA元素：textarea、title

外来元素：来自MathML命名空间和SVG命名空间的元素。

常规元素：其他HTML允许的元素都称为常规元素

约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上

不要省略自闭合标签结尾处的斜线，且斜线前需留有一个空格

空元素标签都不加 “/” 字符

书写风格

HTML代码大小写

HTML标签名、类名、标签属性和大部分属性值统一用小写

HTML文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

元素属性

强制】属性值使用双引号，不要使用单引号

元素属性值使用双引号语法

~~元素属性值可以写上的都写上~~

不要为 Boolean 属性添加取值

自定义属性的命名：以 data- 为前缀

特殊字符引用

在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

代码缩进

统一使用 2 个空格缩进

纯数字输入框

使用 type="tel"而不是 type="number"

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

资源加载

引入 CSS 和 JavaScript 时无需指定 type

在 head 标签内引入 CSS，在 body 结束标签前引入 JS

外部资源的引用地址跟随页面协议，省略协议部分。

使用 preload 预加载关键资源

使用 dns-prefetch 和 preconnect 处理 DNS 解析延迟问题，提高网页加载性能

注释规范

标准写法：

单行注释

一般用于简单的描述，如某些状态描述、属性描述等

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

模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符，表示模块开始，表示模块结束，模块与模块之间相隔一行

嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块使用

文件模版

HTML5标准模版

PC端

移动端

参考链接：

概述 | Aotu.io - 前端代码规范

f2e-spec/1.html-style-guide.md at main · alibaba/f2e-spec (github.com)