1. 行内元素
- HTML4 中，元素被分成两大类: inline （内联元素）与 block（块级元素）。一个行内元素只占据它对应标签的边框所包含的空间,没有换行效果。 常见的行内元素有
a b span img strong sub sup button input label select textarea
2. 块级元素
- 块级元素占据其父元素（容器）的整个宽度,有换行效果。常见的块级元素有
div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
3. 行内元素与块级元素的区别
- 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
- 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
- 行内元素与块级元素属性的不同，主要是W3C盒模型属性上：行内元素设置 width 无 效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响，左右会产生影响。
4. HTML5元素的分类
HTML5 中，元素主要分为4类：结构性元素，块级性元素，行内语义性元素，交互性元素
- 结构性元素：主要负责web上下文结构的定义
- section:在web页面应用中，该元素也可以用于区域的章节描述。
- header:页面主题上的头部，header元素往往在一对body元素中。
- footer:页面的底部(页脚)，通常会标出网站的相关信息。
- nav:专门用于菜单导航，链接导航的元素，是navigator的缩写。
- article:用于表现一片文章的主体内容，一般为文字集中显示的区域。
- 块级性元素：主要完成web页面区域的划分，确保内容的有效分割
- aside:用于表达注记、贴士、侧边栏、摘要、插入的引用等作为补充主体的内容。
- figure:对多个元素进行组合并展示的元素，通常与ficaption联合使用。
- code:表示一段代码。
- dialog:用于表达人与人之间的对话，该元素包含dt和dd这两个组合元素，dt用于表示说话者,而dd用来表示说话内容。
- 行内语义性元素：主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
- meter:表示特定范围内的数值，可用于工资、数量、百分比等。
- time:表示时间值。
- progress:用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监听。
- video:视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
- audio:音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
- 交互性元素：功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
- details:用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段(如单击)与legend交互才会显示出来。
- datagrid:用来控制客户端数据与显示，可以由动态脚本及时更新。
- menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
- command:用来处理命令按钮。
5. 空元素(单标签)
- 标签内没有内容的HTML标签被称为空元素。空元素是在开始标签中关闭的。
- 常见的空元素有:br hr img input link meta 6. link标签
- link标签定义文档与外部资源的关系。
- link元素时空元素，它仅包含属性。此元素只能存在于head部分，不过它可出现任何次数。
- link标签中的rel属性定义了当前文档与被链接文档之间的关系。常见的stylesheet指的是定义一个外部加载样式表(css)。 7. 页面导入样式时，使用link和@import的区别
① 从属关系：@import是CSS提供的语法规则，只有导入样式表的作用：link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性、引入网站图标等。
② 加载顺序：加载页面时，link标签引入的CSS被同时加载；而@import引入的CSS将在页面加载完毕后被加载。
③ 兼容性：@import是CSS2.1才有的语法，只有IE5+才能识别；link标签作为HTML元素，不存在兼容性问题。
④ DOM可控性：可以通过JS操作DOM，插入link标签来改变样式，由于DOM方法是基于文档的，无法使用@import的方式插入样式。
7. 浏览器的认识
- 主要功能：将用户选择的web资源呈现出来，需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML,也包括PDF、image以及其他格式，用户用URL(统一资源标识符)来指定所请求资源的位置。
- HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。
- 浏览器分为两部分，shell(浏览器的外壳，比如菜单，工具栏等，主要为用户提供界面操作，参数设置等)和内核(浏览器的核心，基于标记语言显示内容的程序或模块)。
- 内核的分类：分为渲染引擎和JS引擎。渲染引擎负责渲染浏览器窗口中请求的内容，默认情况下，渲染引擎可以显示html、xml文档以及图片，也可以借助插件(浏览器扩展)显示其他类型数据(PDF)。JS引擎用于解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎没有很明确的区分，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。 8. 常见浏览器内核的比较
- Trident:IE浏览器的内核，和W3C标准脱节，存在大量bug和安全问题未解决。
- Gecko: Firefox和Flock所采用的的内核，功能强大且丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是要消耗很多的资源(eg:内存)。
- Presto：Opera曾经采用的内核，被称为公认的浏览网页速度最快的内核，在处理js等脚本语言时，会比其他内核快3倍左右，但会丢失部分网页兼容性。
- Webkit: Safari采用的内核，优点是网页浏览速度较快(不及Presto但优胜于Gecko和Trident)，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使部分编写不标准的网页无法正确显示。webkit前身是KED小组的KHTML引擎。
- Blink：谷歌浏览器采用的内核，是Webkit的一个分支，由谷歌和Opera Software共同研发。
9. 常见浏览器所用的内核
| 浏览器 | 渲染引擎 | JS引擎 |
|---|---|---|
| IE | Trident | JScript -> Chakra |
| Firefox | Gecko | Monkey系列 |
| Chrome | Webkit -> Blink | V8 |
| Safari | Webkit | SquirrelFish系列 |
| Opera | Presto -> Blink | Carakan |
| V8引擎为解析js代码最快的js引擎 | ||
| 10. 浏览器的渲染原理 |
- 解析收到的文档，根据文档定义构建一颗DOM树，DOM树是由DOM元素以及属性节点组成的。
- 对CSS进行解析，生成CSSOM规则树。
- 根据DOM树和CSSOM规则树构建渲染树(render树)。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和DOM元素相对应，但这种对应关系不是一对一的，不可见的DOM元素不会被插入渲染树。还有一些DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
- 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树后，就会根据渲染树来进行布局(回流)。在这一阶段，浏览器要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也叫做“自动重排”。
- 布局阶段结束，开始绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制使用了UI组件，这个过程是逐步完成的，为了更好的用户体验，渲染引擎会尽可能早地将内容呈现到屏幕上，并不会等到所有的html都解析完成后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余的内容。
