• 从浏览器渲染的角度谈谈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会无端增加浏览器在页面渲染阶段的压力。
  • 相关阅读:
    【BZOJ 4581】【Usaco2016 Open】Field Reduction
    【BZOJ 4582】【Usaco2016 Open】Diamond Collector
    【BZOJ 4580】【Usaco2016 Open】248
    【BZOJ 3754】Tree之最小方差树
    【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
    【51Nod 1622】【算法马拉松 19C】集合对
    【51Nod 1616】【算法马拉松 19B】最小集合
    【51Nod 1674】【算法马拉松 19A】区间的价值 V2
    【BZOJ 2541】【Vijos 1366】【CTSC 2000】冰原探险
    【BZOJ 1065】【Vijos 1826】【NOI 2008】奥运物流
  • 原文地址:https://www.cnblogs.com/chile/p/4290184.html
Copyright © 2020-2023  润新知