H5与HTML5新特性：前端开发与表单增强-优快云博客

1.H5 新增标签

语义化标签：header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签

功能性标签：

2.h5新增表单属性

email：必须输入邮件；

url：必须输入url地址；

number：必须输入数值；

range：一个滑动栏，并且可以设置最大以及最小值

date：选取日、月、年

month：选取月、年

week：选取周和年

time：选取时间（小时和分钟）

datetime-local：选取时间、日、月、年（本地时间）

search：搜索框

color：颜色

3.自定义数据属性

属性

核心属性：id,class,title,style ...

特有属性:alt,src,href,width,height

自定义属性：data-gl='app'

            <div id="app" data-msg="hello">自定义属性</div>
            <script>
                console.log(document.querySelector('#app').dataset.msg)  //hello
            </script>

4.媒体元素

video 视频

audio 音频

src:定义要播放的音乐的url地址

contorls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）

【这些属性的设置既可以仅仅使用contorls,也可以使用controls="controls"】

autoplay:定义音乐自动播放

【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay="autoplay"】

loop:定义循环播放

【这些属性的设置既可以仅仅使用loop,也可以使用loop="loop"】

<audio src="一眼万年.mp3" controls autoplay ></audio>
<video src="Taylor Swift - Sparks Fly.mp4"  controls></video>

embed：

功能：embed标签用来定义插入的内容（媒体内容），比如可以插入swf
属性：

src:定义插入的内容的来源url
type:定义插入的内容的类型，值为各种MIME 类型

<embed src="动画演示.swf" ></embed>

5.画布 canvas

 //创建画布 
    //默认画布是没有边框的 可以使用style属性设置样式
    //id属性是用在js中的 
    //width、height给画布设置宽高 
    <canvas id="app" height="300" width="400" style="background-color: #f5f5f5;"> </canvas>
    <script>
    //1. 获取canvas元素
    var app = document.querySelector("#app")
    //2. 获取CanvasRenderingContext2D实例对象，利用该实例对象提供的方法进行图形绘制
    var context = app.getContext("2d");
    //3. 绘制
    context.fillStyle = "pink"  //填充色
    context.fillRect(0,0,100,100);  、//绘制矩形  1,2起点 3宽 4高
    </script>

只是图形的容器，画图用js

2.CanvasRenderingContext2D

通过app.getContext(“2d”)获取到的对象context就是CanvasRenderingContext2D的实例，因此这个对象就可以调用CanvasRenderingContext2D.prototype.*中的方法

样式设置及绘制：fillStyle、strokeStyle、fill()、stroke()

渐变样式：createLinearGradient()、 createRadialGradient()

绘制矩形：fillRect()、strokeRect()

绘制路径：beginPath()、arc()、moveTo()、lineto()、 bezierCurveTo()、closePath()

坐标变换：translate()、scale()、rotate()

绘制图像：drawImage()

绘制文本：fillText()