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

	let canvas = document.createElement('canvas')
	canvas.width = "700"
	canvas.height = "980"  //创建画布，并设置宽高
	//注意canvas元素本身并没有绘制能力（它仅仅是图形的容器
	//getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
	let ctx = canvas.getContext("2d")
	ctx.rect(0,0, 700, 980) //矩形坐标，大小 (距离左上角x坐标,距离左上角y坐标,宽度,高度)
	ctx.fillStyle = "#fff" //矩形的颜色
	ctx.fill() //填充

2.画布上绘制图像

	context.drawImage(image,x,y,w,h)	

• x，y 为画布中画图的起始坐标，w,h 指绘制出来的图像的宽度与高度，比例与原图宽高最好一致，图像不会变形。

• 这里需要注意一下，图片加载完成再调用 drawImage 绘图,所以定义了一个 promise 函数，当图片数据信息都加载完成后再调用 drawImage 绘图

function loadImg(src) {
    let paths = Array.isArray(src) ? src : [src]
    let promise = paths.map((path) => {
        return new Promise((resolve, reject) => {
            let img = new Image()
            img.setAttribute("crossOrigin", 'anonymous')
            img.src = path
            //只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源
            img.onload = () => {
                resolve(img)
            }
            img.onerror = (err) => {
                alert('图片加载失败')
            }
        })
      })
      return Promise.all(promise)
}

3.图片加载完成，调用 drawImage 绘图

loadImg([
    'https://image.ibb.co/f4Lged/2017072615215296mg_ULNAVisju_Wh_D.jpg',
    'https://image.ibb.co/dkSoQJ/qrcode_for_gh_2039c29e81ca_430.jpg',
]).then(([img1, img2])=> {
    ctx.drawImage(img1, 0, 0, 400, 200) //画布上先绘制人物图`
    ctx.drawImage(img2, 250, 130, 60, 60) //再绘制二维码图，根据设计图设置好坐标。`
    imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API`
    let img3 = new Image()
    document.getElementsByClassName("box")[0].append(img3)
    img3.src = imageURL
    canvas.style.display = "none"
});

这样就将两张图片合成为一张图片了，然后可以利用 HTML5 a 标签 download 属性，也可以将其通过 img 标签展示到页面，然后长按 / 右键保存到本地。

7.HTML5支持哪些新媒体元素？

HTML 5 对媒体支持很强，除了 audio 和 video 外，还提供：

• embed:作为外部应用的容器，可嵌入视频、音频、图片。
• track:规定外部文本轨道,比如弹幕。这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。
• source:定义媒体资源，标签允许您规定两个视频/音频文件，浏览器需要选择它所支持的源文件（如果都支持则任选一个）