By anjia

更新日期:

文章目录
  1. 1. 标准模式声明
  2. 2. 字符编码
  3. 3. 引入CSS 和 JavaScript 文件时
  4. 4. HTML属性的书写顺序
  5. 5. 布尔型属性
    1. 5.1. 其他细节
  6. 6. 其他：待进一步考证
  7. 7. 参考及扩展

在很多开发人员眼里，编码 HTML 简直容易极了。但随着写&读的前端代码渐渐增多，慢慢体会到，“能写”和“会写”之间还是有一定距离的。很多时候，你可以“这样做”，但并不意味着“你应该”这么做。

合理地编写 HTML，可以让代码看起来更专业。即便是很简单的几行代码，也要写的有性格。嗯~用饱含工匠精神的态度去写码，你一定会在苦逼中作乐的。

以下整理些从别人那读到学到的，同时自己认可的琐碎的点，供实战中践行。

标准模式声明

HTML 页面第一行，添加标准模式的声明。
原因：可确保在每个浏览器中拥有一致的表现。

1
<!DOCTYPE html>

字符编码

要明确声明。
原因：明确声明字符编码，可确保浏览器快速&容易判断用哪种方式去渲染页面内容。

1
<meta charset="UTF-8">

引入CSS 和 JavaScript 文件时

不需要指定type属性。
原因：跟据HTML5规范，”text/css”和”text/javascript”分别都是默认值

1
2
<link rel="stylesheet" href="xxx.css">
<script src="xxx.js"></script>

HTML属性的书写顺序

建议按照以下顺序排列，可读性好。

  1. class：class用于标识高度可复用组件，所以排首位
  2. id, name：id用于标识具体组件，所以排第二
  3. data-
  4. src, for, type, href
  5. title, alt
  6. aria-*, role
1
2
3
<a class="xxx" id="xxx" data-index="x" href="#">link</a>
<img src="xxx" alt="xxx">
<input class="xxx" type="text">

布尔型属性

布尔型属性在声明时，可以不赋值
原因：XHTML 规范要求要赋，但是 HTML5 规范不需要。点击查看更多

1
2
3
<input type="text" disabled>
<option value="1" selected>1</option>
<input type="checkbox" value="1" checked>

其他细节

  1. 自闭元素在尾部不要添加斜线。input、br、img 等，参见 HTML5规范
  2. 成对的标签，结束标签一定要有。
  3. 定义属性时，建议用双引号，不要用单引号。
  4. 尽量减少标签数量：任何时候都要尽量使用最少的标签 & 保持最小的复杂度。
    尽量减少标签数量、尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。所以，当写完“实现功能”的代码后，不妨自己再通读下自己的代码（往往这个时候，可发现挺多可优化的点。嗯~因为关注点不同：前者重在功能，后者重在重构。）
  5. 尽量不要用js生成标签
    原因：这样会让内容变得不易查找不易编辑，且降低性能。

其他：待进一步考证

只因自己平时没碰到类似的场景，所以不好做判断。。。

  1. 强烈建议为html根元素指定lang属性。lang属性，可参考规范
    原因：为文档设置正确的语言，有助于语音合成工具确定该怎么发音，有助于翻译工具确定该用啥规则等等。
    关于lang属性的知识，点击查看规范。
  2. IE兼容模式
    IE支持通过特定的来确定绘制当前页面所应该采用的IE版本。
    建议设置edge mode，从而通知IE采用其所支持的最新模式。stack overflow上有篇文章谈了这个。

参考及扩展

编码规范 by @mdo

HTML5规范
HTML5规范：html、head、title、base、link、meta、style
HTML5规范：boolean型属性

IE兼容模式

文章目录
  1. 1. 标准模式声明
  2. 2. 字符编码
  3. 3. 引入CSS 和 JavaScript 文件时
  4. 4. HTML属性的书写顺序
  5. 5. 布尔型属性
    1. 5.1. 其他细节
  6. 6. 其他：待进一步考证
  7. 7. 参考及扩展