从浏览器渲染的角度谈谈html标签的语义化

大家都看过报纸或者杂志的排版，里面最主要的一些概念，就是版面的分割，标题的分级等等，web页面作为一种信息展示的形式，其基本的排版形式是从报纸杂志等传统媒介借鉴过来的，看一看html一些常用的tag就可以知道，比如h1-h6，p，img等等。

 

html的语义化从字面的意思来看，就是你选用的tag要尽可能的符合它适用的场景。为什么要语义化呢？可以从浏览器开始说起，报纸和杂志作为信息的载体是通过印刷机将其呈现在大众面前的，同理html是通过浏览器的界面将其展现在用户面前的。html页面展现在我们面前主要经过一下几个步骤：

1、在地址栏输入url发起请求获取

2、服务器分返回html页面

3、浏览器解析html页面

4、浏览器渲染html页面

 

只有到了第4步，一个html页面才真真整整的呈现在用户的面前。

 

大家在用表单的时候，可能会注意到，type为text的input，即使不设置样式，它在浏览器中呈现的出的也是一个有边框，背景为白色的矩形框，感兴趣的可以看看textarea，select等等。为什会这样？

 

以chrome为例，大家都知道webkit，同时一定也听过V8引擎，在这里要澄清一下，webkit是开源的浏览器渲染引擎，而V8是javascript的解析引擎。这里主要说一下，浏览器在收到服务器返回的html页面之后，首先将html解析成DOM树，然后再利用css的信息结合DOM树，生成一个渲染树，然后浏览器再通过自己的UI后端组件调用操作系统的绘图接口在浏览器窗口依据渲染树的信息绘制相应的图形，因此在window窗口就能看到input，textarea的默认样式了。

 

了解浏览器对于html页面的解析绘制的过程之后，我们知道了浏览器的渲染引擎对于特定的标签都有默认的绘图样式，使用非语义的tag会无端增加浏览器在页面渲染阶段的压力。