前端规范 - html规范

[强制] 最少的标准体

如下为支持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要比前两者加起来都占的多
不过为了可维护性,统一团队风格,还是需要注意一下

欢迎查阅本专栏其余前端相关规范

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值