[强制] 最少的标准体
如下为支持w3c标准的最小html构成,缺一不可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
[强制] 2格缩进
html、js、css保持统一,均为2格缩进
最大宽度也是与js保持统一,一般默认120个字符
[强制] w3c标签不做自闭合
<!-- bad -->
<div class="line" />
<!-- good -->
<div class="line"></div>
[强制] 属性需要双引号
html使用双引号,不能不写,不能写单引号(虽然都可以使用)
<!-- bad -->
<div class=box></div>
<!-- bad -->
<div class='box'></div>
<!-- good -->
<div class="box"></div>
[强制] 嵌套规则
块级元素可以互相嵌套,行内元素也可以互相嵌套,行内元素不能嵌套块级元素
<!-- bad -->
<span>
<div>...</div>
</span>
<!-- good -->
<div>
<span>...</span>
</div>
[强制] 自定义标签使用 - 命名
为了与自带的标签做区分,自定义元素要使用中横线间隔
<!-- bad -->
<myElement></myElement>
<!-- bad -->
<myelement></myelement>
<!-- good -->
<my-element></my-element>
[推荐] 段落注释
复杂的业务逻辑模块之间,需要用过注释包裹起来,方便确认代码的起止范围
<!-- bad -->
<div class=box></div>
<!-- bad -->
<div class='box'></div>
<!-- good -->
<div class="box"></div>
[推荐] 布尔值属性,可以不添加属性值
<!-- bad -->
<my-com
disabled="true"
>
</my-com>
<!-- good -->
<my-com
disabled
>
</my-com>
[推荐] 语义化
不用通篇div搞定,多尝试一下目前所有浏览器都支持的header、footer标签
img标签的alt属性
toC系统alt属性必需
toB系统alt属性无要求
img标签的alt属性,有两个作用,一是用于SEO,二是用作图片挂了的时候,展示的文字描述
目前所有系统的图片展示,都有挂掉之后的缺省图片展示,不可能像N年前那样展示系统默认的错误图
中后台系统不需要SEO,这个大家都知道
html可以写行内样式
不能写太长;绝对不能写换行的行内样式
// 可以接受
<div style="border: 1px solid red"></div>
// 绝对不能接受
<div style="
border: 1px solid red;
width: 200px;"></div>
总结
html作为搭建界面的结构型语言,其本身逻辑性比较少,占据的开发工作量比较少,所以规范不是那么多
其本身也的兼容性也比较好,很多时候我们瞎写一顿,系统照样正常运行
这点与css差不多,虽然号称前端三大组成是html、css、js,但实际工作中,js要比前两者加起来都占的多
不过为了可维护性,统一团队风格,还是需要注意一下
欢迎查阅本专栏其余前端相关规范
-
html css js 三驾马车 3篇
前端规范 - html规范
前端规范 - css规范
前端规范 - js开发规范 -
开发框架类 1篇
前端规范 - vue开发规范 -
开发实践类 5篇
前端规范 - git使用规范
前端规范 - 前端注释规范
前端规范 - 前端广义安全规范
前端规范 - 前后端接口规范
前端规范 - 前端项目开发规范