在CSS 3D变换的代码部分，将3D变换作用于“video”、“div”和“canvas”三种元素，其含义是将它们分别绕X轴和Y轴旋转30度和-45度。在元素“body”的子女中，首先是“video”元素，它用来播放HTML5视频。之后是一个“div”元素，它包括两个“canvas”元素，前者将会用来绘制2D图形，后者将会用来绘制3D图形，当然目前渲染引擎区分不出2D还是3D，因为它们是由后面的JavaScript代码决定的。在“canvas 2D”绘图的JavaScript代码中，ID为“a2d”的“canvas”元素创建2D上下文，这决定了它将采用2D绘图，之后填充该元素的颜色。在“canvas 3d(webGL绘图)”的JavaScript代码中，ID为“a3d”的“canvas”元素创建3D上下文，这决定了它将采用3D绘图，之后更新它的颜色缓冲区。

二、网页结构

1、框结构

框结构很早就被引入网页中，用来对网页的布局进行分割，将网页分成几个框，网页开发者可以

让网页嵌入其它网页。在HTML语法中，“frameset”、“frame”和“iframe”可以用来在当前网页中嵌入新的框结构。

每一个框结构包含一个HTML文档，最简单的框结构网页就是单一的框，其文档没有包含任何其它的框。

当然，网页也可以有很复杂的框结构，也就是框里面再嵌入框，依次类推。下面以一个拥有复杂框结构的网页介绍之：

上图中，左边部分是两个HTML网页的示例代码，其中“main.html”是主网页，它使用“iframe”元素来嵌入左下方的“frameset.html”网页。而“frameset.html”网页则包含两个子框，分别嵌入两个结构简单的网页。图中右侧是左边“main.html”网页所生产的框结构，图中的箭头表示源代码和框结构的对应关系。

2、层次结构

网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层次，因为某些原因，WebKit需要为该元素和它的子女建立一个新层。

这里以前面HTML5新特性时举的例子来分析网页层次结构。示例中有四个重要元素，即一个“video”元素、一个“div”元素和两个“canvas”元素。同时还要主要CSS部分代码，它也会对网页的分层策略产生重要影响。示例对应的网页层次结构如下图所示：

图中最大的层为“根层”，当一个网页构建层次结构的时候，首先是根节点，此时自然地为它创建一个层即“根层”，其对应着整个网页文档对象。“层1”是为元素“video”所创建的层，之所以要为其创建一个层是因为“video”元素用来播放视频，为它创建一个新的层可以更有效地处理视频解码器和浏览器之间的交互和渲染问题。“层2”是为元素“div”创建的层，因为其需要进行3D变换，而普通的“div”元素可以不创建新层。“层3”和“层4”分别对应两个元素“canvas”，这两个元素对应着HTML5标准中复杂的2D和3D绘图操作。

从上面分析不难看出，对于需要复杂变换和处理的元素，需要新层，这是为了渲染引擎在处理上的方便和高效。至于哪些元素或者哪些情况下，会产生新层，对于不同渲染引擎，其策略可能会不一样。

3、理解网页结构

（1）框结构：为了理解框结构，可以将网页“main.html”和“frameset.html”保存下来，将之前的两段代码分别保存为“example1.html”和“example2.html”网页，在Chrome浏览器中打开“main.html”网页，就可以看到如下图所示的渲染效果：

上图中，“框2”对应“example1.html”，“框3”对应“example2.html”，“框1”是它们的父亲“frameset.html”，而主框则是整个网页的结果。

（2）层次结构：还是用浏览器打开前面HTML5新特性时举的例子，然后打开Chrome浏览器开发工具，单击“设置”按钮，在“General”标签页选择“Show composited layer borders”，页面中就会如下图一样显示网页的层次结构：

“层1”和“层2”被设置3D变换，所以边框成平行四边形，而不是“根层”的矩形形状。同理，“层3”和“层4”也被设置3D变换，但发现角度比“层2”更大，原因在于3D变换的叠加效应。两个“canvas”元素本身需要进行3D变换，同时它们的父亲“div”元素也需要，两者叠加，出现了图中所示的效果。

从上图不难发现，“根层”中包含有很多大小一样的方块，同时，“层2”也是一样，这是WebKit 故意将它们划分成小块的瓦片所致。

三、网页渲染过程

1、加载和渲染

浏览器的主要作用是将用户输入的URL转变成可视化的图像，其包含两个过程：其一是网页加载过程，即从URL到构建DOM树；其二是网页渲染过程，即从DOM树到生成可视化图像。实际中，这两个过程会交叉在一起，很难明确区分。

网页渲染还有一个特性就是网页通常比我们的屏幕可视面积要大（在移动设备上尤其明显），而当前可见区域，我们称为视图（viewport）。因为网页比可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页，就用户体验而言，垂直方向滚动效果好于水平方向。

2、渲染过程

根据数据流向，将渲染过程分为三个阶段：

（1）从网页的URL到构建完DOM树，具体如下图所示：

（A）当用户输入网页URL的时候，WebKit调用其资源加载器加载该URL对应的网页。

（B）加载器依赖网络模块建立连接，发送请求并接收答复。

（C）WebKit接收到各种网页或者资源的数据，其中某些资源可能是同步或者异步获取的。

（D）网页被交给HTML解释器转变成一系列的词语（Token）。

（E）解释器根据词语构建节点（Node），形成DOM树。

（F）如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。

（G）JavaScript代码可能会修改DOM树的结构。

（H）如果节点需要依赖其它资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

（2）从DOM树到构建完WebKit的绘图上下文，具体如下图所示：

（A）CSS文件被CSS解释器解释成内部表示结构。

（B）CSS解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树。

（C）RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。

（3）从绘图上下文到生成最终的图像，具体如下图所示：

（A）绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。

（B）绘图实现类也可能有简单的实现，也可能有复杂的实现，在Chromium中需要合成器来完成复杂的多进程和GPU加速机制。

（C）绘图实现类将2D或者3D图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示。

上面介绍的是一个完成的渲染过程，现代网页很多是动态网页，这意味着在渲染完成之后，由于网页的动画或者用户的交互，浏览器其实一直在不停地重复执行渲染过程。

网页html代码大全

常用HTML代码解释 一、文字 1.标题文字.......... #=1~6；h1为最大字，h6为最小字 2.字体变化.......... 【1】字体大小.......... #=1~7；数字愈大字也愈大 【2】指定字型.......... 【3】文字颜色.......... rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码 rrggbb也可用6位颜色代码数字 3.显示小字体.......... 4.显示大字体.......... 5.粗体字.......... 6.斜体字.......... 7.打字机字体.......... 8.底线.......... 9.删除线.......... 10.下标字_.......... 11.上标字^.......... 12.文字闪烁效果.......... 13.换行（也称回车）
14.分段 15.文字的对齐方向

#号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐P.S.

之后的文字都会以所设的对齐方式显示，直到出现另一个

改变其对齐方向，遇到