[强制] 最少的标准体
如下为支持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使用规范
前端规范 - 前端注释规范
前端规范 - 前端广义安全规范
前端规范 - 前后端接口规范
前端规范 - 前端项目开发规范
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
