html5中新增加的属性与元素有哪些

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

html5–多用于移动端

新增的属性

• placeholder

• calendar, date, time, email, url, search

• contentEditable(来描述标签中的内容是否可编辑)

• Draggable

• Hidden

• Context-menu

• Data-val(自定义属性)

新增的标签

• 语义化标签(一群类似div的东西)

• canvas(画板)

• svg(也算是一个画板)

• audio(声音播放)

• video(视频播放)—html5之前一般都用flash–现在flash使用比较少，现在adobe停止维护

API

• a. 定位(需要地理位置的功能)

• b. 重力感应(手机中要有陀螺仪)

• c. request-animation-frame(动画优化)

• d. History(控制当前页面的浏览记录)

• e. LocalStorage–一直存在，SessionStorage(存储信息，比如历史最高记录，聊天记录-存在本地)–>页面关了就没了

• f. websocket–用来做通信的(可用于在线聊天，聊天室)

• g. fillReader(文件读取和预览)

• h. webWorker(文件的异步处理–用来提升性能，提升交互体验)

• i. fetch(传说中要替代AJAX的东西，兼容性不太好，使用的公司不多)

属性篇

input的新type

• placeholder

<input type='text' placeholder='请输入用户名'>
<input type='password' placeholder='密码'>

登录后复制

• calendar类

<input type='date'><!--兼容性不好，chrome支持，safari，IE不支持-->
<input type='time'>
<input type='week'>
<input type='datatime-local'><!--把年月日事件结合在一起填写的框-->
<!-- 上述关于时间的标签不怎么常用，兼容性不好 -->
<!-- 上面为calendar类 -->
<br>
<input type='number'><!--限制输入，如果非数字则无法输入，但是只有chrome支持-->

<input type='email'><!--格式不正确的话会提示错误，只有chrome和Firefox支持-->
<input type='color'><!--颜色选择器 只有chrome支持-->
<input type='range' min='' max='' name="">
<!--chrome和safari支持，火狐和IE 不支持-->
<input type='search' name='search'>
<!-- 自动提示 , 只有chrome支持，safari支持一点(只有内容打全了才提示)-->
<input type='url'>
<!--如果填写的不是网址的话会提示，chrome、Firefox支持，safari和IE不支持-->

登录后复制

contentEditable

细节：该属性只填写一个contenteditable也可以起作用，但是后面的draggable就不行，只可以写成draggable='true’这样的形式

<div contenteditable='true'>ddd</div>
<!-- 没有兼容性问题 一般用于展示页面中可修改的表格 -->

登录后复制

该属性可以继承，如果自己没有设置，会看父级有无contenteditable

细节：虽说没有写该属性无法编辑，然后如果里面嵌套了其他元素，然后里面元素设置的属性值为false，只是代表该元素内容无法修改，然后它其实可以和他的元素名作为一个整体被删除；

<div contenteditable>
    <span contenteditable='false'>姓名：</span>monkey<br>
    <span contenteditable='false'>性别：</span>
</div>

登录后复制

Draggable

可拖拽的—拖拽的还是虚拟的，并不会改变元素的位置(可以自己实现，用后面两个拖拽事件)

a标签 img标签 默认是可拖拽的

既然可以拖拽，那就有拖拽事件

• 拖拽的生命周期

1. 拖拽开始
2. 拖拽进行中
3. 拖拽结束

• 拖拽的组成

1. 被拖拽的物体
2. 目标区域

• 被拖拽的物体以及其生命周期

通过下面三个事件可以随时的知道元素的位置
clientX:鼠标的x轴位置
clientY：鼠标的y轴位置

var oDragDiv = document.getElementsByClassName('a')[0];

// 在移动的一瞬间开始触发
oDragDiv.ondragstart = function (e) {
    console.log(e);
}

// 移动事件 移动的过程中会触发很多次
oDragDiv.ondrag = function (e) {
    console.log(e)
}

// 在结束时触发
oDragDiv.ondragend = function (e) {
    console.log(e);
}

登录后复制

所有的标签元素，当拖拽周期结束时，默认事件是回到原处;

拖拽事件松开的瞬间,触发了ondragover ondrop

但是默认的ondragover执行完后,默认事件是回到原处,故不会触发ondrop事件

ondragover -> 回到原处
-> 执行drop事件
责任链模式：
A -> B(阻止) ->默认事件

阻止默认事件，e.preventDefault();

1. 被拖拽物体的目标区域(结束元素)

// 1. 由图形刚进入到目标区域后触发的事件, 该事件一开始触发一次
oDragTarget.ondragenter = function (e) {
    // 不是元素的图形进入就触发的，而是拖拽的鼠标进入触发，如果说组件里有那种图形一进入就触发的，是经过计算算出来的，一开始我们可以知道鼠标相对图形边缘的距离，然后这样计算
    console.log(e);
}

// 不断的触发
// 2.当图形进入目标区域之后,只要坐标有变化会不断的触发, 和ondrag事件有点像
oDragTarget.ondragover = function (e) {
    console.log(e);
}

// 3.该事件表示图形进入目标区域后,一离开触发的事件
oDragTarget.ondragleave = function (e) {
    console.log(e);
}


//4. 拖拽 放下(一松手)的时候触发的事件()
// 由于所有的ondragover默认当拖拽周期结束时(松手的时候),会触发默认事件-回到原处 ,所有在使用ondrop 事件的时候需要在ondragover事件中阻止默认事件 e.preventDefault()
oDragTarget.ondrop = function (e) {
    console.log(e);
}
// 该拖拽事件发生在ondragend之前

登录后复制

补充属性 datatransfer

拖拽的时候和进入目标区域的时候，指针是会变化

继承自Object MOuseEvent对象 —> 鼠标事件
其实就是多了个属性
e.dataTransfer

h5新增标签

语义化标签

使用标签时尽量的更加语义化

h5新增了很多语义化标签
以下这些标签只是有语义，本质上和p没有区别

• header
  页面顶部

• footer
  页面底部

• nav
  导航条

• article
  文章—可以直接被引用拿走的，比如一个博客文章内容

• section
  段落结构–不是一个完整

• aside
  侧边栏–正文旁边的地方

canvas标签

特点：要想给定画板的大小，必须在行间加样式而不是用css渲染样式

canvas是用js操纵画东西的 canvas元素本身就是一块画布，需要结合js来画画

1、画笔

var ctx = canvas.getContext(‘2d’)

登录后复制

a. 规划路径

起点：ctx.moveTo(x, y);

从哪画到哪：ctx.lineTo(x, y);

b. 描线

ctx.stroke();

登录后复制

c. 方法

ctx.closePath(); 闭合路径，回到起点–只针对一笔画出来的图形

ctx.fill(); 填充区域，不需要stroke，fill自动会stroke，默认是起始点到终止点的连线(画个圆弧很容易观察出来)

改变画笔线条的粗细，改为numpx

ctx.lineWidth = num;

登录后复制

同一笔画下来的图形粗细是相同的

ctx.beginPath()

2、画矩形

注意：以下画法不需要使用moveTo()来表明起点，因为rect()方法的startX, startY已经表明了起点

• 画法1

• 画法2

• 画法3

ctx.clearRect(startX, startY, length, height);//清除指定区域的图形

登录后复制

3、画圆(圆弧)

圆心(x, y), 半径®, 弧度(起始弧度, 结束弧度), 方向(顺逆时针)

顺时针填0，逆时针填1;
canvas的0度角在和数学中的一样

起止弧度的大小默认以顺时针的计算为准

90° = pi / 2

ctx.arc(x, y, r, radStart, radEnd, direction);

var canvas = document.getElementById('can');
var can = canvas.getContext('2d');
can.arc(100, 100, 50, 0, Math.PI * 1.5, 1);
can.fill()

登录后复制

4、圆角

圆角矩形当然可以用四条线 + 四个90°的弧来画，但是下面有更简单的方法，只需要画四笔

var canvas = document.getElementById('can');
var can = canvas.getContext('2d');
can.moveTo(100, 120);
can.arcTo(100, 300, 300, 300, 20);
can.arcTo(300, 300, 300, 100, 20);
can.arcTo(300, 100, 100, 100, 20);
can.arcTo(100, 100, 100, 300, 20);
can.stroke();

登录后复制

5、贝塞尔曲线

// 4. 贝塞尔曲线
        var canvas = document.getElementById('can');
        var can = canvas.getContext('2d');
        

        can.beginPath();
        can.moveTo(100, 100);
        // quadraticCurveTo()
        can.bezierCurveTo(200, 200, 300, 200, 400, 100);
        can.stroke();

登录后复制

6、canvas坐标平移旋转和缩放

默认根据画布的圆点进行旋转
可以根据can.translate()进行坐标系的平移

can.translate(x, y)

登录后复制

然后旋转的话会根据新的圆心(x, y)进行旋转

can.translate(x, y);//全局起作用

can.rotate(旋转弧度);//全局起作用

can.scale(横向缩放, 纵向缩放)
// 计算方法：每一个坐标点的x, y都乘以了相应的缩放值

登录后复制

can.save()

can.restore()

7、背景填充

can.fillStyle = ‘color’
var img = new Image();
img.src = ‘’
将图片变成纹理，然后填充
var bg = can.createPattern(img, ‘no-repeat’);
img.onload = function () {
}

登录后复制

图片默认是以canvas框的坐标系原点开始填充的，想要改变背景图片的位置的话需要使用can.translate(newX, newY);

8、颜色渐变函数

linearGradient(direction, color1 position, color2)
radialGradient(shape radius at position, color1, position, color2, position…)

var canvas = document.getElementById('can');
can = canvas.getContext('2d');
can.beginPath();
var bg = can.createLinearGradient(0, 0, 200, 200);
bg.addColorStop(0, 'white');
bg.addColorStop(1, 'black');//第一个数字只能从0~1, 是百分比的概念
can.fillStyle = bg;

// 辐射渐变---在chrome收藏夹中找
var bg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
// 从起始圆的边向结束圆的边渐变辐射
// 起始圆和结束圆可以是不同的圆心   起始圆大于结束圆的时候，外界的颜色就都是起始圆的颜色，结束圆大于起始圆的时候，外界的颜色就是结束圆的颜色

登录后复制

9、阴影

注意这个阴影是一边一半的;
ctx.shadowColor = ‘blue’;
ctx.shadowBlur = num;
ctx.shadowOffset = num1;

10、canvas渲染文字

ctx.strokeText(‘content’, x, y); 文字描边

ctx.fillText(‘content’, x, y);

ctx.font = ‘20px Georgia’ 两种填充都可设置上font

11、线端样式

ctx.beginPath();
ctx.lineWidth = '30';
ctx.moveTo(100, 100);
ctx.lineTo(200, 200)
ctx.lineCap = 'butt' //butt是默认的，square(方块帽子)， round(半圆帽子)

// 线段与线段交会时的设置
//round(圆角)  bevel(直接给切了)  miter(保留尖角)-可以设置miterLimit，防止过分尖锐
ctx.lineJoin = 'bevel'//miter round
ctx.miterLimit = num;
ctx.stroke();

登录后复制

ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);


ctx.globalCompisiteOperation = 'lighter';
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(300, 300, 100, 0, Math.PI * 2);

ctx.fill();

登录后复制

SVG

• svg：矢量图(放大不会失真，适合大面积的贴图，通常动画较少或者较简单)–用元素和css画

• canvas：适合用于小面积的绘图，适合动画-用js画

<style>
    .line1{
        stoke:black;
    }
    .line2{
        stroke:red;
        stroke-width:2px;
    }
    ployline{
        fill:transparent;   /*不填充*/
        stroke:blueviolet;  /*闭合*/
        stroke-width:3px;/*线变粗了之后，只有线的中间是原来的位置，然后宽度向两边扩散，里面一半，外面一半*/
        stroke-opacity:0.5;/*边框透明度*/
        fill-opacity:0.5;/*填充透明度*/
        stroke-linecap:round;/*square butt 额外的加了一块长度*/
        stroke-linejoin:round/*bevel，miter  两个线在相交的时候的状态*/
    }

    ploygon{
        fill:transparent;
        stroke:black;
    }
    text{
        stroke:blue;
        stroke-width:3px;
    }
</style>

<svg width='500px' height='500px' style='border: 1px solid'>
<!-- 线段 -->
<line class = 'line1' x1='100' y1='100' x2='200' y2='100'></line>
<line class='line2' x1='200' y1='100' x2='200' y2='200'></line>
<!-- 矩形 -->
<rect heigth='50' width='100' x='0' y='0' rx='10' ry='10'></rect>
<!-- rx和ry就是x和y方向的圆角 -->


<circle r='50' cx='50' cy='220'></circle>
<!-- 圆心在 50,220 处的半径位50的圆 -->

<ellipse rx='100' ry='30' cx='400' cy='200'></ellipse>

<!-- 默认会连接并填充，需要结合css控制 -->
<!-- 回到哪就会停到哪 -->
<polyline points='0 0, 50 50, 50 100, 100 100, 100 50'></polyline>

<!-- 多边形:也是画折现，然后首尾会闭合 -->
<ploygon points='0 0, 50 50, 50 100, 100 100, 100 50'></ploygon>
<!-- 文本 -->
<text x='300' y='50'>TEXT</text>



<!-- path标签:可以做基本的画线,moveTo到哪个点，lineTo到哪个点...第一个M后面的点表示起点，H表示水平方向的位置，V表示竖直方向的位置 Z表示是否闭合，z对大小写不敏感 -->
<path d='M 100 100 L 200 100' style='stroke:red;fill:transparent'></path>
<!-- 大写表示绝对位置，小写字母为相对位置(基于现在的位置) -->
</svg>

登录后复制

属性：

• stroke-opacity:边框透明度

• fill-opacity:填充透明度

• stroke-linecap:线条端点的帽，square，round —>额外加的长度

• stroke-linejoin:两个线条在相交的时候的样式，与canvas相同

path画弧

两个点，半径已知，可以确定两个圆或椭圆

<path d="M 100 100 A 100 50 0 1 1 150 200"></path>
<!-- A表示弧，第三个参数表示旋转角度，第四个参数表示大弧还是小弧(1表示大弧，0表示小弧)，第五个参数表示顺时针还是逆时针(0表示逆时针 1表示顺时针) -->

登录后复制

svg线性渐变示例，需要提前将渐变定义好，使用的时候用url引入纹理

<svg>
<defs>
    <linearGradient id='bg1' x1=0 y1=0 x2=0 y2=100%> 
    <stop offset=0% style="stop-color:rgb(255, 255, 0)"></stop>
    <stop offset=100% style="stop-color:rgb(255, 0, 0)"></stop>
    </linearGradient>
    <!-- 高斯模糊stdDeviation属性值越大，看到的越模糊 -->
    <filter id='Guss'>
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>>
    </filter>
</defs>
<rect x=100 y=100 width=200 height=100 style='fill:url(#bg1);'></rect>
</svg>

登录后复制

• stroke-dasharray：arr1 px, arr2 px…;

• stroke-dashoffset:指定填充向左移动一定的距离

• viewBox:比例尺，表示svg区域的比例尺，有四个参数，前面两个参数表示起点，后面两个参数分别表示x方向和y方向的比例，和原来的长宽进行比较
  高德地图就是使用了svg

audio和video

• controls

video

• paused属性：判断视频是否是暂停的
• play()方法：视频播放的方法
• pause()方法：视频暂停的方法
• duration属性：视频总共的s数
• currentTime属性：视频当前已经播放的s数
• playbackRate属性：调节速率
• volume属性：控制音量 0 ~ 1,默认为1

相关推荐：《html视频教程》

以上就是html5中新增加的属性与元素有哪些的详细内容，更多请关注Work网其它相关文章！