HTML规范
语法
- 缩进统一使用soft tab（4个空格）；
- 嵌套的节点应该缩进；
- 在属性上，使用双引号，不要使用单引号；
- 属性名全小写，用中划线做分隔符；
- 不要在自动闭合标签结尾处使用斜线，例：<img>；
- 不要忽略可选的关闭标签，例：</li>和</body>。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
HTML5 doctype
在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；
虽然doctype不区分大小写，但是按照惯例，doctype大写。
<!DOCTYPE html>
<html>
...
</html>
lang属性
根据HTML5规范：
应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
我们统一使用zh-cn
<!DOCTYPE html>
<html lang="zh-cn">
...
</html>
字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
...
</html>
IE兼容模式
用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；
如果你想要了解更多，请点击 这里 ；
不同doctype在不同浏览器下会触发不同的渲染模式（ 这篇文章 总结的很到位）。
<!DOCTYPE html>
<html>
<head>
<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="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>
属性顺序
属性应该按照特定的顺序出现以保证易读性；
- class
- id
- name
- data-*
- src, for, type, href, value, max-length, max, min, pattern
- placeholder, title, alt
- arial-*, role
- required, readonly, disabled
class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
boolean属性
boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
boolean属性的存在表示取值为true，不存在则表示取值为false。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
JS生成标签
在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
减少标签数量
在编写HTML代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使HTML变得更少。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
实用高于完美
尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
完整的HTML模板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Tittle</title>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<!--ios web clip-->
<link rel="apple-touch-icon" href="//static.yoro.com/assets/images/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="//static.yoro.com/assets/images/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="//static.yoro.com/assets/images/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="//static.yoro.com/assets/images/touch-icon-ipad-retina.png">
<link rel="icon" href="/assets/static/favicon.ico">
<link rel="shortcut icon" href="/assets/static/favicon.ico">
<link rel="dns-prefetch" href="//cdn.yoro.com">
<link rel="stylesheet" href="">
</head>
<body>
......
</body>
</html>
HTML5新增标签及简介
HTML5废弃的标签及属性
第一类：表现性元素
basefont big center font s strike tt u 建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果
第二类：框架类元素
因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。 frame frameset noframes 但html5支持iframe。
第三类:属性类
很多表现性的属性也被新规范移除，如下： align body标签上的link、vlink、alink、text属性 bgcolor height和width iframe元素上的scrolling属性 valign hspace和vspace table标签上的cellpadding、cellspacing和border属性 header标签上的profile属性 链接标签a上的target属性 img和iframe元素的longdesc属性
第四类：其他
abbr取代acronym（用于表示缩写） object取代了applet ul取代了dir
HTML5元素周期表
