文章目录
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 绘制的图形保存时候加上二维码
分析需求:
- 生成 Canvas 图,页面显示的图片上有提示长按保存图片的按钮。
- 保存至手机相册时,需要拼上二维码,并去掉相关提示信息。
主要就是两点:
- 将 Canvas 图和二维码这两张图片合并成一张图片。
- 页面中显示的图片,与长按图片保存的是不一样的。
解决方案:
生成图片 A,同时用 canvas 绘制有二维码的图片 B,通过定位方式将 A、B 图重叠,并将 B 置顶,透明度为 0.01(不设置为 0, 在有些机器下有 bug)。
这样可以做到页面显示的是 A 图,长按保存的是 B 图。
代码实现:
1.js 文件中动态创建 canvas