1.3 HTML5 · 前端面试知识点总结

# HTML5 HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 > 中文网页需要使用 `<mate charset="utf-8">` 进行声明。 ## HTML5 新特性 1. 绘画 canvas。 2. 用于媒介回放的 video 和 audio 元素。 3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失。 4. sessionStorage 的数据在浏览器关闭后自动删除。 5. 语意化更好的内容元素，比如 article、footer、header、nav、section。 6. 表单控件，calendar、date、time、email、url、search。 7.新的技术webworker, websocket, Geolocation。 ## HTML5 移除的元素 1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u。 2. 对可用性产生负面影响的元素：frame，frameset，noframes。 ## HTML5 新元素 header, section, footer, aside, nav, main, article, figure等。 > 这些新元素都是块级元素。 > 更多新元素参考：[http://www.runoob.com/html/html5-new-element.html](http://www.runoob.com/html/html5-new-element.html) ## 添加自定义元素 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script> document.createElement("myHero") </script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>我的第一个新元素</myHero> </body> </html> ``` ## canvas > [canvas参考手册](http://www.runoob.com/tags/ref-canvas.html) HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是 JavaScript )来完成. canvas 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。例如： ```javascript var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); ``` ### 渐变 createLinearGradient(x,y,x1,y1) -> 创建线条渐变 createRadialGradient(x,y,r,x1,y1,r1) -> 创建一个径向/圆渐变 ### 文字 font -> 定义字体和大小 fillText(text,x,y) -> 在 canvas 上绘制实心的文本 strokeText(text,x,y) -> 在 canvas 上绘制空心的文本font - 定义字体 fillText(text,x,y) -> 在 canvas 上绘制实心的文本 strokeText(text,x,y) -> 在 canvas 上绘制空心的文本 ### 路径（直线） moveTo(x,y) 定义线条开始坐标。 lineTo(x,y) 定义线条结束坐标。 ### 图像 drawImage(image,x,y) ## SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 用于定义用于网络的基于矢量的图形。 SVG 使用 XML 格式定义图形。 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。 SVG 是万维网联盟的标准。 ### SVG优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： - SVG 图像可通过文本编辑器来创建和修改 - SVG 图像可被搜索、索引、脚本化或压缩 - SVG 是可伸缩的 - SVG 图像可在任何的分辨率下被高质量地打印 - SVG 可在图像质量不下降的情况下被放大 ### svg 标签 ```html <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> ``` ### SVG 与 Canvas两者间的区别 SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 ## MathML > [参考文章](http://www.runoob.com/html/html5-mathml.html) ## 拖放（drag & drop） > [参考文章](http://www.runoob.com/html/html5-draganddrop.html) ## 更多类型的 input > [参考文章](http://www.runoob.com/html/html5-form-input-types.html) ## Page Visibility API ### document.hidden 返回表示页面是否隐藏的布尔值。 ### document.visibilityState 有下面 4 个可能状态的值： 1. hidden：页面在后台标签页中或者浏览器最小化 2. visible：页面在前台标签页中 3. prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true 4. unloaded：页面正在从内存中卸载 ### Visibilitychange事件当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理。 ## 离线存储在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。 ## HTML5 兼容 1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。 2. 直接使用成熟的框架、比如 [html5shim](https://www.bootcdn.cn/html5shiv/)。例如： ```html  ``` > 以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。另外，以上代码必须放在 head 中。 ## 如何区分HTML5 - DOCTYPE声明 - 新增的结构元素 - 功能元素