H5新增标签

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()

6.拖拽

拖拽事件

拖动事件：dragstart、drag、dragend

放置事件：dragenter、dragover、drop

拖拽事件流：

当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

DataTransfer

在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例

属性：dropEffect、effectAllowed

方法：setData、getData、clearData

7.新的属性

contenteditable="true" 使得文件可以编辑，并且这个属性是可以继承的。

 autocomplete  设置表单成功提交过的数据，下一次有提示   一般会关闭这个功能

placeholder 提示信息

 required  是否必须填写

pattern  正则验证表单内容

multiple 输入框可以输入多个值，一般和email控件一起使用

maxlength 最大长度

minlength 最小长度 

step  规定数字间隔

hidden 隐藏 填写了hidden属性的标签会被隐藏

draggable  元素是否能被拖动

autofocus 设置是否自动获取焦点

8.重新定义的标签