HTML技术汇总

吴华锦2024-10-262026-03-10

音视频

音视频元素的事件可分为三大核心类别：

浏览器渲染是固定的串行流程，每一步都依赖前一步的输出结果。

第一步：解析 HTML 并构建 DOM 树
浏览器接收HTML文档后，首先会逐行解析HTML标签，将其转换为浏览器可识别的节点对象，最终生成完整的DOM树（文档对象模型），这是整个渲染流程的基础；同时浏览器会并行解析CSS，生成CSSON树（CSS对象模型）。
第二步：构建 render 树（渲染树）
浏览器将DOM树和CSSON树结合，过滤掉不可见节点（如设置 display: none; 的元素、<head> 标签等），只保留需要渲染到页面的可见节点，生成渲染树，为后续的布局、绘制提供核心依据。
第三步：布局 render 树（reflow 回流/重排）
基于渲染树，浏览器计算每一个节点在视口中的精确位置、尺寸、边距等几何信息，确定所有元素的页面布局规则，这一步的核心是确定元素“在页面的哪个位置、占多大空间”。
第四步：绘制 render 树（repaint 重绘）
浏览器根据布局阶段计算好的节点信息，调用渲染引擎的绘制接口，将每个节点的视觉样式（颜色、阴影、边框、背景等）填充到对应的像素区域，最终将内容完整渲染到屏幕上。

HTML	Symbol	Numeric	描述	Hex	CSS(ISO)	JS(Octal)
`"`	`"`	`"`	引号	`u+0022`	`\0022`	`\42`
`&num;`	`#`	`#`	数字符号	`u+0023`	`\0023`	`\43`
`&dollar;`	`$`	`$`	美元符号	`u+0024`	`\0024`	`\44`
`&percnt;`	`%`	`%`	百分号	`u+0025`	`\0025`	`\45`
`&`	`&`	`&`	和号	`u+0026`	`\0026`	`\46`
`'`	`'`	`'`	撇号	`u+0027`	`\0027`	`\47`
`(`	`(`	`(`	左括号	`u+0028`	`\0028`	`\50`
`)`	`)`	`)`	右括号	`u+0029`	`\0029`	`\51`
`&ast;`	`*`	`*`	星号	`u+002A`	`\002a`	`\52`
`+`	`+`	`+`	加号	`u+002B`	`\002b`	`\53`
`,`	`,`	`,`	逗号	`u+002C`	`\002c`	`\54`
`−`	`-`	`-`	连字符减号	`u+002D`	`\002d`	`\55`
`&period;`	`.`	`.`	句号	`u+002E`	`\002e`	`\56`
`/`	`/`	`/`	固相线	`u+002F`	`\002f`	`\57`
`&colon;`	`:`	`:`	固相线	`u+003A`	`\003a`	`\72`
`&semi;`	`;`	`;`	分号	`u+003B`	`\003b`	`\73`
`<`	`<`	`<`	少于	`u+003C`	`\003c`	`\74`
`=`	`=`	`=`	等于	`u+003D`	`\003d`	`\75`
`>`	`>`	`>`	大于	`u+003E`	`\003e`	`\76`
`&quest;`	`?`	`?`	问号	`u+003F`	`\003f`	`\77`
`&commat;`	`@`	`@`	在标志处	`u+0040`	`\0040`	`\100`
`[`	`[`	`[`	左方括号	`u+005B`	`\005b`	`\133`
`\`	`\`	`\`	反斜杠	`u+005C`	`\005c`	`\134`
`]`	`]`	`]`	右方括号	`u+005D`	`\005d`	`\135`
`&Hat;`	`^`	`^`	抑扬顿挫	`u+005E`	`\005e`	`\136`
`&lowbar;`	`_`	`_`	低线	`u+005F`	`\005f`	`\137`
`{`	`{`	`{`	左大括号	`u+007b`	`\007b`	`\173`
`\|`	`\|`	`\|`	竖线	`u+007c`	`\007c`	`\174`
`}`	`}`	`}`	右大括号	`u+007d`	`\007d`	`\175`