HTML基础

  • 在HTML 中，需要关注的是标签的语义

块元素

  • 在页面中独占一行的元素，称为块元素（block element）
  • eg：<p> <div>

行内元素

  • 相反，在页面中不会独占一行的元素称为 行内元素（inline element）
  • eg：<em> <strong>

结构化标签

  • 结构化标签用于布局，所以也叫布局标签
    • header：表示网页头部
    • main：表示网页主体
    • footer：表示网页底部
    • nav：表示网页导航区
    • aside：表示网页侧边栏
  • 用的较多的还是
    • div：块元素，可以表示上述的所有块元素
    • span：行会元素。

浏览器的渲染过程

流程

image.png

  1. 解析HTML，生成 DOM树，解析CSS，生成 CSSOM树
  2. 将 DOM树 和 CSSOM 树结合，生成 Render Tree（渲染树）
  3. 根据 Render Tree，计算节点的位置、大小、样式等信息。
  4. 最后渲染到页面上。

回流和重绘

回流

  • 这一阶段主要计算节点的位置和几何信息
  • 当页面的布局或几何信息（位置、大小）发生改变时，会触发回流

  • 以下情况会触发回流：

    • 页面初次渲染
    • 浏览器的窗口变化（获取document.body.offsetHeight也会触发）
    • 元素的位置发生变化（开启绝对定位，其他元素会改变位置）
    • 元素的大小发生改变（包括字体、外边距、内边框、边框大小、高度和宽度等）
    • 增删可见的DOM元素（display:none不会）

      重绘

  • 当页面中元素样式的改变并不影响它在文档流中的位置时。

  • 以下情况会触发重绘：
    • color
    • background-color
    • visibility

回流一定会触发重绘，重绘不一定触发回流