前端需要理解的HTML知识

HTML（超文本标记语言，HyperText Markup Language）不是编程语言，而是定义了网页内容的含义和结构的标记语言。。“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML由一系列元素组成，标签用于创建元素，标签里的元素名不区分大小写，但推荐将标签名全部小写。不包含任何内容的元素称为空元素，空元素不能存在结束标签，比如。

1 Doctype

声明即文档类型定义（DTD），告知浏览器采用的文档解析标准，分为严格模式（标准模式——W3C标准）和混杂模式（兼容模式—向老版本兼容），声明位置—HTML文档首行（标签之前），在HTML4 规定了三种不同的 声明，分别是：Strict（严格模式）、Transitional和 Frameset，后两种声明下，若DTD不存在/格式不正确或没有最后的URI以混杂模式呈现，否则以严格模式呈现：

HTML5与HTML4不同，不基于SGML（Standard Generalized Markup Language 标准通用标记语言），也就不需要DTD，因此HTML5仅标准模式html>一种规范，没有严格和混杂之分。

通过document.compatMode可以输出当前文档的渲染模式是怪异/混杂/兼容模式（BackCompat）还是标准模式（CSS1Compat）。

2 HTML页面生命周期

HTML有四个重要的生命周期事件：

DOMContentLoaded：DOM 完全加载以及解析时触发，而无需等  /样式表/子框架里外部资源加载完成。此时可以查找DOM 节点，并初始化接口。在用户允许的前提下，Firefox，Chrome 和 Opera 都会在 DOMContentLoaded 触发时自动填充表单。

DOMContentLoaded和脚本的关系：

DOMContentLoaded和样式关系：

load：整个页面及所有依赖资源如样式表和图片都已完成加载时触发，此时才可以正确获取图片大小。可以通过onload或事件字符串load监听事件。该事件不可取消，同时所有以load 命名的事件都不会传递到 Window 上即load事件不会冒泡。

beforeunload：当用户离开页面的导航（navigation）或试图关闭窗口或刷新时存触发（弹出一个确认对话框），询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消，也就不会出发pagehide和unload事件。此事件中可以检查用户是否保存了更改，并询问是否真的要离开，beforeunload目前已经不支持自定义显示给用户的消息。

 

unload：当页面或一个子框架正在被卸载时，触发 unload事件，此时页面处于以下状态：所有资源仍存在 (图片，iframe等)，对于终端用户所有资源均不可见，界面交互无效 (window.open, alert, confirm 等)，错误不会停止卸载页面的过程。该事件不可取消，不可冒泡，且在 beforeunload和pagehide事件之后执行，且父框架在子框架卸载前卸载。在该事件中建议可以使用navigator.sendBeacon(url, data)将和用户相关的分析统计数据发送到服务器保存：

 

Document.readystate：描述了document 的加载状态，状态改变的时触发readystatechange 事件。存在三种状态：loading（加载中）--正在加载中；interactive（可交互）-- document加载状态结束，但图像，样式表和框架之类的子资源仍在加载，DOMContentLoaded事件即将触发；complete（已完成）--document 和所有子资源已完成加载，window.onload事件即将触发。

页面可见性 API（Page Visibility API），当其选项卡的内容变得可见或被隐藏时（包括当用户最小化窗口），会在文档（document）上触发 visibilitychange (能见度更改) 事件。该事件不包括document的更新的可见性状态，但是可以从document的visibilityState属性中获取该信息。当visibleStateState 属性的值转换为 hidden 时，Safari 不会按预期触发 visibilitychange；因此，还需要在window上侦听 pagehide 事件。出于兼容性原因，请确保使用 document.addEventListener 而不是 window.addEventListener 来注册回调，Safari <14.0 仅支持前者。