DOCTYPE
DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。HTML 编辑器通常也会在语法高亮的同时提供合法性验证。
通常有以下几种：
HTML5(推荐使用，其他的有触发怪异模式和近标准模式的风险)
1
HTML 4.01 Strict
1
HTML 4.01 Transitional
1
上面的类型浏览器都会以标准模式渲染，除了下面这些情况（这些情况浏览器会进入兼容模式，也称怪异模式）：
DOCTYPE声明了Transitional DTD但未给出URIDOCTYPE声明不合法- 未给出
DOCTYPE声明
确定把
DOCTYPE正确地放在HTML文件的顶端。任何放在DOCTYPE前面的东西，比如批注或XML声明，会令Internet Explorer 9或更早期的浏览器触发怪异模式。
标准模式和怪异模式的区别
盒模型的处理差异
标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；行内元素的垂直对齐
很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。最直接的例子就是图片的显示。在标准模式下，图片并不是与父元素的下边框对齐的，如果仔细观察，你会发现图片与父元素下边框之间存在一点小空隙。那是因为标准模式下，图片是基线对齐的。而怪异模式下，则不存在这个问题。具体请看这篇文章 CSS 深入理解 vertical-align 和 line-height 的基友关系。
多语言
当客户端向服务器发送 HTTP 请求时，通常会发送有关语言首选项的信息，比如使用 Accept-Language 请求头。如果替换语言存在，服务器可以利用该信息返回与之相匹配的 HTML 文档。返回的 HTML 文档还应在 <html> 标签中声明 lang 属性，比如 <html lang="en">...</html>。
HTML5 的基本构件
- 语义 - 提供更准确地描述内容。
- 连接 - 提供新的方式与服务器通信。
- 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
- 多媒体 - 在
Open Web中，视频和音频被视为一等公民（first-class citizens）。 - 2D/3D 图形和特效 - 提供更多种演示选项。
- 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
- 设备访问 - 允许使用各种输入、输出设备。
- 外观 - 可以开发丰富的主题。
cookie、sessionStorage 和 localStorage 的区别
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 由谁初始化 | 客户端或服务器，服务器可以使用 Set-Cookie 响应头。 | 客户端 | 客户端 |
| 过期时间 | 手动设置 | 永不过期 | 当前页面关闭时 |
在当前浏览器会话（browser sessions）中是否保持不变 |
取决于是否设置了过期时间 | 是 | 否 |
是否随着每个 HTTP 请求发送给服务器 |
是，Cookies 会通过 Cookie 请求头，自动发送给服务器 |
否 | 否 |
| 容量（每个域名，每个域名都有单独的存储） | 4kb | 5MB | 5MB |
| 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |
渐进式渲染
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，
JavaScript将加载并显示图像。 - 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的
CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。 - 异步加载
HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。
响应式图片
设计响应式图片时我们可以使用两个新的属性 —— srcset 和 sizes —— 来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
所以，有了这些属性，浏览器会：
- 查看设备宽度
- 检查
sizes列表中哪个媒体条件是第一个为真 - 查看给予该媒体查询的槽大小
- 加载
srcset列表中引用的最接近所选的槽大小的图像
更加具体的使用方式可以查看 响应式图片
HTML 与 XHTML 的区别
HTML:
- 元素不一定有起始的标签
- 元素不一定有结束的标签
- 空元素才可以自关闭，如
br、img - 标签和属性大小写不敏感
- 属性可以不用双引号
- 某些属性可以为空，如
disabled、checked - 特殊符号不需要转义
- 文档必须包含
HTML5的DOCTYPE
XHTML:
- 所有元素都必须有起始标签
- 非空元素如果有起始标签则必须同时有结束标签
- 自关闭的元素一定要使用
/> - 属性大小写敏感，一般来说都是小写
- 属性必须使用双引号引起来
- 禁止空属性，必须有值，如
checked="checked" - 特殊符号需要转义