html 与浏览器 知识集锦一

部分内容摘自HTML（超文本标记语言）

参考文章面试官：前端跨页面通信，你知道哪些方法

参考文章「面试」-路由之hash和history

---

一、行内元素和块级元素

行内元素（inline）

常见的元素:
- a (锚点)
- b (加粗)
- i (斜体)
- span (常用内联容器，定义文本内区块)
- lable (标记)

特性：

• 不可设置宽高及上下内外边距（左右内外边距设置有效）
• 行内元素高度由内容自动填充
• 可以与其他行内元素及行内块元素在同一行

块级元素（block)

常见的元素: div、p、h1 至 h6、li、ul、ol、form、table

特性：

• 可以设置宽高及内外边距
• 独占一行（前后均换行）
• 不设置宽度时，宽度默认为父元素的宽度；不设置高度，高度为内容撑开的高度

可替换元素 （inline-block）

可替换元素的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的；
内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容

实际效果等同于 行内块级元素 即display: inline-block

常见的元素: image类型的input、img、iframe、video、embed

特性：

• 可以设置宽高及内外边距
• 可以与其他行内元素及行内块级元素在同一行
• 不设置宽高时，由加载的替换内容宽高决定当前宽高

互相转换方式

display: inline; /* 转为行内元素 */
display: inline-block;/* 转为行内块级元素 */
display: block; /* 转为块级元素 */

---

二、DOM树

DOM 和 DOM树

DOM (Document Object Model) 的全称是文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构

以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树

DOM 树如何生成

HTML 解释器的工作就是将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构：

字节流，经过解码之后是字符流，然后通过词法分析器会被解释成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组建成一颗 DOM 树

• 词法分析： HTMLTokenizer 类
• 词语验证：XSSAuditor 类
• 从词语到节点： HTMLDocumentParser 类、 HTMLTreeBuilder 类
• 从节点到 DOM 树： HTMLConstructionSite 类

在 DOM 树构建完成后，WebKit 会触发 “DOMContentLoaded