Rumah >hujung hadapan web >html tutorial >浅谈Browser_html/css_WEB-ITnose
浅谈Browser_html/css_WEB-ITnose
- WBOYasal
- 2016-06-21 08:51:081136semak imbas
作者：赵策
发表时间：2016-4-16
昨天给校计协做讲座，随便谈了谈html代码转变到网页这一过程，回来做了个简单的整理。以下仅为个人理解，如有错误欢迎指正。
为什么挑HTML这么一个语言来讲，因为无论是学过C、C++、Java或C#的人都知道，大部分的语言从代码转变成应用都会经过编译呀、链接呀这么一个过程，但HTML转变成网页是没有这个过程的。
从HTML到网页，中间更像是经过了一个“翻译”的过程，将代码语言翻译成视图语言。
要了解浏览器是如何翻译的，就先得清楚HTML到底是个什么东西。
在我个人看来，与其说HTML是一种语言，更不如说是一种规则、一种规范，浏览器只不过是应用了这种规范的一个程序，一个翻译工具。
中所周知：HTML代码分成 <head> 和 <body> 两部分， <head> 标签内主要是一些网站信息、引用文件，库之类的。 <body> 标签内则主要是网站所呈现出来的具体内容，包括一些文字，图片，或是视频之内的。
当浏览器读到代码中的 <head> 标签之后，按照约定，将其中的代码转变成网页信息，储存下来但不显示出来，直到读到 标签，浏览器退出之前这一状态。 接下来会读到 <body> 标签了，浏览器便会开始一个翻译，绘制的过程。
在这里先介绍一款古老的打印机：针式打印机。其原理是通过控制纸与打印针之间的相对位置来实现打印的。
浏览器翻译 <body> 标签的过程其实有点类似于这种针式打印机： 浏览器开始读代码，每逢遇到规则中写好的一些标识符（即html标签），将其按照html规则转换成相应的信息。
举个栗子，浏览器翻译绘制下面这段HTML代码：
<body><h1>这里是h1标签</h1><a href="http://zhaoce.name">这里是a1标签</a><img src="img/01.png"><br><img src="img/02.png"></body>
浏览器读到 <body> 之后，先做一个初始化工作：将整个窗口当做一张打印纸，将光标置于第一行第一格。类似于针式打印机的初始状态。
翻译过程如下：
→ <body> 标签,浏览器通过提前约定好的规则将光标初始化至屏幕起始位置，并初始化大小。
→ <h1> 标签, 按照约定好的规则，将光标调至约定大小。
→继续读取代码“这里是h1标签“同样按照规则，将普通文字直接打印至屏幕。
→ 恢复光标至初始大小，并将光标置于下一行起始位置:
→ <a href="http://zhaoce.name"> 将 <a> 标签的参数href的值设置为一个url链接。
→读取到普通文字“这里是a1标签”，将其打印至光标当前位置，并将之前的url链接绑定到这段文字。
→ 闭合标签，结束上述设置状态:
→ <img src="img/01.png"> 在当前光标位置开一个image视图，并将参数src的值作为所展示的图片的地址。之后将光标移至图片结束的位置。（因为图片把这一行撑高了，而文字则正常大小，并且靠近行底显示，所以文字看起来会下移）:
→ <br> 将光标置于下一行起始位置:
→ <img src="img/02.png"> 同之前一样，打印第二张图片。之后将光标移至图片结束的位置:
→ <a href="http://blog.zhaoce.name"> 将 <a> 标签的参数href的值设置为一个url链接。
→ <h1> 标签, 按照约定好的规则，将光标调至约定大小并移至下一行起始位置:
→继续读取代码“这里是a2标签“同样按照规则，将普通文字直接打印至光标当前位置，并将之前的url链接绑定到这段文字:
→ 恢复光标至初始大小，并将光标置于下一行起始位置:
→ 闭合标签，结束上述设置状态。
→