前端工程代码规范（二）——HTML
总原则
- 缩进使用soft tab（4个空格）；
- 属性名全小写，用中划线做分隔符；
- 在属性上，使用双引号，而非单引号；
- 不要在自动闭合标签结尾处使用斜线。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="xxx/xxx.png" alt="Company">
<input type="text" value="xxx">
</body>
</html>HTML5 doctype
在页面顶部，用doctype来启用标准模式，使得每个浏览器的展现都尽可能地保持一致。虽然doctype不区分大小写，但是按照惯例，doctype大写，写法见上例。
lang属性
根据html5规范
应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。常用的值有zh，en等，更细分的则有zh-cn(中国大陆)、zh-tw(中国台湾)、zh-hk(中国香港)
<!DOCTYPE html>
<html lang="en-us">
...
</html>字符编码与IE兼容模式
- 通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
- 用
<meta>标签可以指定页面应该用什么版本的IE来渲染，不同doctype在不同浏览器下会触发不同的渲染模式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>引入CSS，JS
根据html5规范
通常在引入CSS和JS时不需要指明type，因为 text/css 和 text/javascript 分别是他们的默认值。<!-- External CSS -->
<link rel="stylesheet" href="xxx.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="xxx.js"></script>
<!-- In-document JS -->
<script>
...
</script>boolean属性
boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要。
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>属性顺序（推荐）
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少用，所以将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">xxx</a> <input class="form-control" type="text"> <img src="..." alt="...">
一些建议
- 尽量避免用js生成标签，这会使得内容变得更难维护，性能也更差；
- 在编写HTML代码时，需要尽量避免多余的父节点；
- 尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
- 任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
目录索引
前端工程代码规范（一）——命名规则与工程约定
前端工程代码规范（三）——CSS, SCSS
前端工程代码规范（四）——JS
相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16