HTML5重点知识总结

1.HTML5有哪些新特性？

HTML5主要是关于图像、位置、存储、多任务等功能的增加。

• 绘画canvas
• 用于媒体播放的video、audio元素
• 存储localStorage、sessionStorage
• 语义化更好的内容标签：article、footer、header、nav、section等
• 表单控件：date、time、email、url、search
• 定位：Geolocation
• 新技术：webworker、websocket

2.HTML5引入什么新的表单属性

from标签新属性：

• autocomplete(是否自动填充数据)
• novalidate(表单提交时，不进行内容验证)

input标签新属性：

• autocomplete
• autofocus（是否自动聚焦）
• form （form属性值必须是所属表单的id，即当input在form标签外定义时，使用form属性，仍然可以把该input纳入form作用范围）
• formaction（formaction 属性规定当表单提交时处理输入控件的文件的 URL。formaction 属性覆盖 < form > 元素的 action 属性。）
• formenctype（属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”）
• formmethod（formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法。formmethod 属性覆盖 < form > 元素的 method 属性）
• max和min
• multiple
• step
• 等等

3.为什么HTML5只需写

核心：HTML5不基于SGML，所以不需要引用DTD。

我们需要向HTML文档添加< !DOCTYPE>声明，这样浏览器才知道文档的类型以及解析成什么语言。另外charset也是需要指定的，否则中文会出现乱码情况。

扩展：

1.SGML 是标准通用标记语言
2.HTML 是超文本标记语言，主要是用于规定怎么显示网页
3.XML 是可扩展标记语言是未来网页语言的发展方向，可能会替代 HTML，他和 HTML 都是由 SGML 延伸转变而来的，你可以理解 SGML 是最早的版本，但现在已经淘汰不用了
4.XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
5.还有一个是 XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。

4.Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

1.<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 标签之前。告知浏览器的解析器， ⽤什么⽂档类型, 规范来解析这个⽂档.

区分：DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现

意义：

• 严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏
• 混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。

5.Canvas 绘制的图形保存时候加上二维码

分析需求：

1. 生成 Canvas 图，页面显示的图片上有提示长按保存图片的按钮。
2. 保存至手机相册时，需要拼上二维码，并去掉相关提示信息。

主要就是两点：

• 将 Canvas 图和二维码这两张图片合并成一张图片。
• 页面中显示的图片，与长按图片保存的是不一样的。

解决方案：

生成图片 A，同时用 canvas 绘制有二维码的图片 B，通过定位方式将 A、B 图重叠，并将 B 置顶，透明度为 0.01（不设置为 0, 在有些机器下有 bug)。
这样可以做到页面显示的是 A 图，长按保存的是 B 图。

代码实现：

1.js 文件中动态创建 canvas