您的位置：首页 > Web前端 > HTML5

HTML5----HTML在Browser中的运行机制（笔记篇）

2015-12-05 17:47 716 查看

0 前言

HTML5+CSS+JS做手机APP越来越来流行了，所以我也在涉及这一领域。上篇blog就算是对当前市场的一个简单介绍，这一篇主要是涉及HTML原理的，后期还会系统的讨论HTML的性能和能力的问题。欢迎大家留言交流！

1 HTML简介

HTML是一种标签语言，含有带不同语意的标签，经解析后成为网页上显示的内容。一般HTML（网页，HTML Page）是在Browser中运行，并且与用户交互。

<!DOCTYPE html>
<html>
<head> 
	<title></title>
	<meta charset = “UTF-8”>
	<style>
		button
			{												color:#FF0000;
                         }	
	<style>
        <script>
             function show(){
		alert(“hello world”);
             }
        </script>
</head>
<body> 

<button onclick = “show();”>     Click Me     </button>
</body>
</html>

HTML在Browser中运行的原理，如下图：

HTML Document包含各种资源，HTML Context是其运行环境。

2 解析HTML

首先，Browser会将HTML Document加载到内存中，解析Document的标签语义。Document的标签类型有两种：系统资源类型和用户界面类型。系统资源类型，用于描述浏览器、运行环境中的运行参数、样式设置等资源。用户界面类型的HTML标签，用于描述显示在网页上的各种用户界面控件，控件具有输出数据给用户或是接受用户输入等功能。

3 DOM对象模型

然后，Browser将HTML Document转换为对象模型DOM（Document Object Model），将DOM创建在运行环境里，让程序代码来处理。DOM是树状结构的对象模型，一个HTML Document对应一个DOM对象树。这个对象树的节点是Document中的HTML标签。DOM是Browser在HTML Context中提供给开发人员使用的，用来控制HTMLDocument的API。通过DOM API在DOM对象树上对DOM节点做各种操作，都将体现在HTMLDocument上。

其原理如图（结合上面的代码）：

4 前端显示的过程

最后，Browser在完成分析HTMLDocument的标签后，会显示在Browser上。显示的过程，有如下2步：

（1）将HTML Document中的用户界面类型标签显示在网页上，并按照资源类型标签所定义的CSS样式来决定显示外观。

（2）用户在进行单击等交互事件发生时，会运行Document中资源类型标签所定义的Javascript程序代码。代码中，封装了网页运行的程序逻辑。同时，代码可以通过Browser所提供的DOM API去控制HTML Document。

5 结语

经过这一长串读取、分析、显示Document的流程，最终用户会在Browser中显示HTML Page。网页提供了各种信息和服务，以此满足用户需求。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航