本文详细介绍了HTML5在DOCTYPE、文档模式、HTML5新特性、浏览器内核、渲染原理、性能优化等方面的知识，包括DOCTYPE的作用、HTML5与HTML4的区别、浏览器内核的区别、页面渲染流程、SEO优化策略、离线储存、Web存储技术、WebSocket的兼容性处理、Canvas与SVG的区别以及HTML5的新表单元素等内容，旨在帮助开发者深入理解HTML5及其在网页开发中的应用。
DOCTYPE文档类型声明，位于文档中的第一行，告诉浏览器的解析器 什么文档标准解析这个文档。DOCTYPE不存在或格式不正确，会导致文档以兼容模式呈现。
标准模式的排版中和JS运作模式都是以该浏览器支持的最高标准运行
在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器 的行为以防止站点无法工作
3. HTML5 为什么只需要写DOCTYPE ，而不需要引入 DTD？
HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而 HTML4.01 基于 SGML ，所以需要对DTD 进行引用，才能告知浏览器文档所使用的文档类型。
4. SGML 、 HTML 、XML 和 XHTML 的区别？
SGML：(Standard Generalized Markup Language，标准通用标记语言)，SGML具有非常复杂的文档结构，主要用于大量高度结构化数据的访问和其他各种工业领域，在分类和索引数据中非常有用。但是它不适用于Web数据描述。
HTML：(Hyper Text Markup Language)，超文本标记语言，他继承了SGML的很多优点，但是html是一种界面技术，只使用了SGML中很少的一部分标记，为了便于在计算机上实现，HTML规定的标记是固定的，即HTML语法是不可扩展的。html是一种标记语言，不是一种编程语言。
XML：xml是在html和sgml的基础上诞生的。XML使用一个简单而又灵活的标准格式，为基于Web的应用提供了一个描述数据和交换数据的有效手段。但是，XML并非是用来取代HTML的。
XHTML：（eXtensible HyperText Markup Language），是一种标记语言，表现方式与超文本标记语言（html）类似，不过语法上更加严格。
DTD（文档类型定义） 的作用是定义 XML文档 的合法性。是 XML文档 的一种约束。
DTD 可以在 XML文档 内部，也可在外部引用。
通过 DTD，每一个 XML 文件均可携带一个有关其自身格式的描述。
独立的团体可一致地使用某个标准的 DTD 来交换数据。
DOCTYPE 在 XML文档 中只能有一个。
不会在内容前后产生“换行符”。
水平方向上可以设置内、外边距，但是垂直方向上即使设置了外边距也不会起作用。
- span、small、strong、em、i、code、
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、section、arcitcle、pre、table、tbody、thead、th、tr、
块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素
HTML4中，元素被分成两大类：inline （内联元素）与 block （块级元素）。
（1） 格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
（2） 内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
（3） 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响。
内联(行级)标签：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行
块状标签：标签独占一行，可指定宽、高
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。
在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。
在 HTML 中有以下这些空元素：<area> <base> <br> <col> <colgroup> when the span is present <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source> <track> <wbr>
<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。
注意： link 元素是空元素，它仅包含属性。
注意： link 元素只能存在于 head 部分，不过它可出现任何次数。
12. 页面导入样式时，使用 link 和 @import 有什么区别？
link作为HTML/XHTML标签 可以导入css、文档链接啥的，@import 用于加载类
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别
link引入的样式权重大于@import引入的样式。
浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。
HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织。
但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。
简单来说浏览器可以分为两部分，shell 和 内核。
其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。
主要分成两部分：渲染引擎和 JS 引擎。
渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
JS 引擎：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
IE：Trident
safari和chrome：webkit
Firefox：Gecko
文档 ->> DOM树 + CSS树 ->> 渲染树 ->> 布局 ->> 绘制
(1)首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
(2)然后对 CSS 进行解析，生成 CSSOM 规则树。
(3)根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象， 渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。
(4)当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。<
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
