总结HTML
HTML的诞生
HTML是Web统一语言，这些容纳在尖括号里的简单标签，构成了如今的Web，1991年，Tim Berners-Lee编写了一份叫做“HTML标签”的文档，里面包含了大约20个用来标记网页的HTML标签。他直接借用SGML的标记格式，也就是后来我们看到的HTML标记的格式。
有兴趣可以自己看下资料，了解一下就可以：
- html标准文档在这里：https://html.spec.whatwg.org/
HTML元素的约束
html元素按照渲染方式不同划分有行内元素和块级元素，各自的特点如下：
块级元素特点：
①总是在新行上开始，占据一整行（很霸道）；
②高度，行高以及外边距和内边距都可控制；
③宽度始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用， 只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
- applet - Java applet
- button - 按钮
- del - 删除文本
- iframe - inline frame
- ins - 插入的文本
- map - 图片区块(map)
- object - object对象
- script - 客户端脚本
只有html 4阶段把标签归类为inline标签和block标签。
在html 5阶段，标签是这样分类的：
如上图，元素的分类不再是块元素或内联元素这样来分类（其实从来就没有这样分），而是按照如下分类来分：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。
元素嵌套规则
严格嵌套约束、语义嵌套约束
通过上面的示例我们发现在元素里嵌套元素可能会导浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。
严格嵌套约束规则：
- a元素里不可以嵌套交互式元素(a、button、select等)
- p里面不可以嵌套div、h1~h6、p、ul、ol、li、dl、dt、dd、form等
语义嵌套约束：
- 每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的容错机制有关。
浏览器的容错机制
- 并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的容错机制。
这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。
案例
- 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误
- 在p元素内嵌入div等元素造成所有浏览器的解析错误
- 在h1~h6元素内嵌入div等元素所有浏览器可以解析正常
- 在a元素内嵌入a元素会导致所有浏览器的解析错误
- 在列表元素li、dt、dd等插入非列表兄弟元素会导致IE6\IE7的解析错误
浏览器解析模型
浏览器解析HTML代码，实现容错性的解析HTML实际上是基于栈的算法来实现的。
html字符串经过分词器，按照顺序解析分出HTML标签，解析到开始标签（StartTag div）时，将开始标签压入栈中，分词器解析出来第一个结束标签时（EndTag div），这时候 HTML 解析器会去判断当前栈顶的元素是否是 开始标签（StartTag div），如果是则从栈顶弹出开始标签（StartTag div），如此形成一段内容。如下图所示：
总结思考
- HTML的解析过程是怎样的？如何实现这个解析算法，同时保证HTML解析的兼容性？