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。网页提供了各种信息和服务,以此满足用户需求。