上一回从.NET框架出发，对Angular的基本概念有了初步的认识。因为Angular是一个前端框架，将来面向的程序也是Web开发，所以我想有必要去了解一下前端的知识，通过前端如何运作再次认识Angular。
要谈到的内容包括：
- HTML
- CSS
- 网页渲染
由于当前了解这些还是服务于认识ng，所以以上内容浅尝辄止即可。
HTML
首先要了解网页的构成，网页=HTML+CSS+JS
当然这三件套不是一起出现的，时间上由早到晚分别是HTML，CSS，JS。从三者的功能角度更容易理解：HTML像是骨骼，显示的网页样式单一且是静态的；CSS像是皮肤或者血肉，网页开始显示出格局、样式，简而言之就是看上去美观了，但仍然是静态的；JavaScript则是动作，网页成为动态，人机可以交互。
HTML诞生于1993年，经过六年时间，从HTML1.0发展到了HTML4.0这个版本。之后，HTML经过了一个较为争议的过程，出现了一个分支，XHTML和HTML5。
由于XHTML的不兼容性，造成众多浏览器厂家和开发者的反对：W3C关闭了XHTML项目，合并了HTML5。
HTML语言的表达，内容标签（以及其中的属性）由一个尖括号<>包裹，表达内容由一对尖括号包括、表达结束后第二个尖括号中有一个反斜杠/，如<a>context</a>
标签一共12大类：
- 基础类。标题title，正文内容标题h1-h6，主体body，段落p，换行<br>
- 格式类。加粗b，加大big，倾斜i，
- 表单类（我认为就是基本控件）。输入框input，下拉列表select，按钮button
- 图像类。img
- 音频视频类。音频audio，视频video
- 链接类。链接a
- 样式类（我认为就是.NET中的区域容器）。区域div，头部内容header，尾部内容footer
- 列表类。有序ol，无序ul，每项il
- 表格类
CSS
上文已经对CSS进行比喻说明了。这里再强调：给被HTML标记的内容加上装饰.
与HTML不同，CSS是用花括号来包裹属性。
CSS属性可以分成5类：样式、框属性、定位、选择器以，还有高级属性。
CSS的语言规则分成两部分：
- 选择器。告诉浏览器这个属性是用在哪个或者哪几个标签上。
- 声明。具体要为标签附加何种属性、或者变化。
HTML标签类型众多，选择器我理解就是一种对标签的分类器，CSS就是在对标签分类后，进行属性的统一修改。特别像word中的样式，圈定文档中内容为固定类型的样式后，就可以通过修改样式批量修改文字格式。
选择器的类型包括：
- ID选择器，唯一性
- 标签选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 结构选择器
网页渲染
有了HTML与CSS（实际上HTML就可以了），一个漂亮的网站（静态）就可以搭建了。至于JS，其实可以理解成与TS类似的语言、也是angular编写的重点，讲得太多了。所以这里就不说JS了。话回当初，如果网页编写完成，再看看如何显示出来，及浏览器渲染页面的过程——
- 首先是输入的网址（PC端）被DNS解析得到服务器地址
- 然后浏览器（PC端）向服务器发起HTTP请求（服务器端）
- 经过TCP/IP三次握手确认链接后（PC端与服务器端）
- 服务器将需要的代码发回给浏览器（PC端）
- 最后，浏览器接收到代码（HTML+CSS编写的网页），经过三大步骤：1）DOM构造；2）布局；3）绘制页面。最终显示出网页。
在这一小节里，就说明一下最后这步，浏览器接收代码并解析、显示的过程：
1.DOM构造
DOM（Document Object Model，文档对象模型）。显示网页，操作HTML代码是关键步骤。为了将HTML代码包含的意思显示在页面上，用DOM结构表达HTML代码，然后JS通过操作DOM来改变页面，浏览器也是通过转化DOM、渲染并显示网页。
加载页面时， 浏览器会根据HTML的代码内容生成一个树型结构，用来表示页面内部结构，因此用DOM树来表示DOM结构，换句话说，每个HTML文档都会被解析（parse）成一棵DOM树。DOM树上有不同的节点，用于表示HTML的内容：
| 节点类型 | HTML内容 | 举例 |
| 文档节点 | 文档本身 | 整个文档<html>......</html> |
| 标签节点 | 所有HTML标签 | <a href="xxx">context</a>中的<a></a> |
| 属性节点 | HTML标签内的属性 | <a href="xxx">context</a>中的href |
| 文本节点 | HTML标签包裹的文本 | <a href="xxx">context</a>中的context |
| 注释节点 | HTML中的注释 | <!-- --> |
然后浏览器还会解析CSS代码，构成一个CSSOM树，也有说法是样式表。
接着CSSOM树和DOM会合并成为一棵Render树（渲染树，webkit渲染引擎的术语）：CSSOM树上的样式匹配DOM树上的每个节点生成的树。
2.布局
Render树建立后，就可以针对树上的节点进行布局。Render树的节点是包含样式的矩形（盒子）。根据树的结构，盒子是可以嵌套（父节点与子节点）、且没有限制。
然后根据每个盒子上样式显示的坐标、大小，在页面内布局（layout）。注意此时只是布局，页面并没有对外显示页面。
3.绘制
最后就是浏览器的渲染引擎遍历整个Render树，根据样式将内容绘制（painting）在页面上，显示出来。
需要说明的是，以上的步骤并非是顺序的，渲染引擎为了尽可能早地将内容呈现出来，并不会等到所有的html都解析完成之后再去构建和布局render树。换句话说，整个渲染流程是边解析边显示，这也就是解释了，为什么当网速不好的时候，打开网页是一点一点显示出来。
以上就是简化的网页显示过程，更详细的说明，详见文末参考资料（前端必读：浏览器内部工作原理）；渲染的例子，可见参考资料（果冻公开课第四课：浏览器渲染页面的过程）；关于DOM的资料，可参见资料（javascript-DOM知识简易梳理）
参考资料：