HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。

1.H5和HTML的区别

        ①文档声明不同;

       ② H5更具有语义化,新增了header,footer等语义化标签;

        ③新增强大的绘图功能标签,Canvas标签和SVG标签

            那么都两者都可以用于绘图，我们一起来看看他们之间有何区别：

                Canvas

                        1.依赖分辨率

                        2.不支持事件处理器

                        3.弱的文本渲染能力

                        4.能够以 .png 或 .jpg 格式保存结果图像

                        5.最适合图像密集型的游戏，其中的许多对象会被频繁重绘

                SVG

                    1.不依赖分辨率

                    2.支持事件处理器

                    3.最适合带有大型渲染区域的应用程序（比如谷歌地图）

                    4.复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

                    5.不适合游戏应用

        ④新增视频标签video

2.H5小功能

    (1).获取元素:var test = document.querySelector('#test');

    (2).获取元素classList: classList = test.classList;

           添加class: classList .add('className')

            删除class: classList .remove('className');

            切换class(如果有该class则删除,如果没有该class则添加): classList.toggle('className');

    (3).自定义属性: 使用data-连接name(data-name)

            获取自定义属性值: test.dataSet.name(自定义属性名称)

    (4). 可编辑属性:contenteditable="true"可以使div可编辑同input

3.浏览器渲染模式:

    标准模式、近乎标准模式、怪异模式

4.canvas元素: <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

            ①找到 <canvas> 元素

            ②创建 context 对象:var ctx = canvas.getContext("2d");

            ③设置fillStyle属性可以是CSS颜色，渐变，或图案:  ctx.fillStyle ="#ff0000";

            ④定义了矩形当前的填充方式:ctx.fillRect(0,0,150,170); // x,y,width,height

canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)

canvas画线:

        moveTo(x,y) //定义线条开始坐标

        lineTo(x,y) //定义线条结束坐标

        c.stroke()  //绘制