html5中新增加的属性与元素是什么
本篇内容介绍了“html5中新增加的属性与元素是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联网站设计,为客户量身定制各类网站建设业务,包括企业型、电子商务型、成都响应式网站建设公司、行业门户型等各类网站,实战经验丰富,成功案例众多。以客户利益为出发点,创新互联网站制作为客户规划、定制网站符合企业需求、带有营销价值的网络建站方案认真对待每一个客户,我们不用口头的语言来吹擂我们的优秀,近1000家的成功案例见证着我们的成长。
html5中新增加的属性有placeholder、calendar、date、time、email、url、search、Hidden等;新增加的元素有header、footer、nav、article、canvas、svg、video等。
本教程操作环境: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
calendar类
contentEditable
细节:该属性只填写一个contenteditable也可以起作用,但是后面的draggable就不行,只可以写成draggable='true’这样的形式
以前没有这个属性的时候要修改div里面的内容需要给div添加点击事件,当被点击之后,将该标签变为input输入框,然后填完替换
ddd
该属性可以继承,如果自己没有设置,会看父级有无contenteditable
细节:虽说没有写该属性无法编辑,然后如果里面嵌套了其他元素,然后里面元素设置的属性值为false,只是代表该元素内容无法修改,然后它其实可以和他的元素名作为一个整体被删除;
姓名:monkey
性别:
Draggable
可拖拽的—拖拽的还是虚拟的,并不会改变元素的位置(可以自己实现,用后面两个拖拽事件)
兼容性:只有chrome和safari可以正常使用,Firefox下不好使
a标签 img标签 默认是可拖拽的
既然可以拖拽,那就有拖拽事件
拖拽的生命周期
从按下到开始拖拽叫做拖拽开始,然后拖拽进行,当松开的那一刻,拖拽结束
拖拽开始
拖拽进行中
拖拽结束
拖拽的组成
被拖拽的物体
目标区域
被拖拽的物体以及其生命周期
通过下面三个事件可以随时的知道元素的位置
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); }
所有的标签元素,当拖拽周期结束时,默认事件是回到原处;
事件是由行为触发的,但是一个行为可以不止触发一个事件
比如键盘鼠标抬起既触发了onclick 又触发了onmouseup
拖拽事件松开的瞬间,触发了ondragover ondrop
但是默认的ondragover执行完后,默认事件是回到原处,故不会触发ondrop事件
ondragover -> 回到原处
-> 执行drop事件
责任链模式:
A -> B(阻止) ->默认事件
阻止默认事件,e.preventDefault();
被拖拽物体的目标区域(结束元素)
// 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之前
小demo练习
补充属性 datatransfer
拖拽的时候和进入目标区域的时候,指针是会变化
这个属性不常用,原因是兼容性不好,只有在chrome中支持
继承自Object MOuseEvent对象 —> 鼠标事件
其实就是多了个属性
e.dataTransfer
该属性必须在ondragevent中设置,但是显示的时候是在进入目标区域后指针改变
e.dataTransfer.effectAllowed = ‘link’
该属性只能在ondrop中使用
e.dataTransfer.dropEffect = ‘link’
type为link copy move copyMove linkMove all
h6新增标签
语义化标签
使用标签时尽量的更加语义化
h6新增了很多语义化标签
以下这些标签只是有语义,本质上和p没有区别
header
页面顶部footer
页面底部nav
导航条article
文章—可以直接被引用拿走的,比如一个博客文章内容section
段落结构–不是一个完整
实际开发中section 和 article区分的没有特别仔细
aside
侧边栏–正文旁边的地方
canvas标签
特点:要想给定画板的大小,必须在行间加样式而不是用css渲染样式
canvas是用js操纵画东西的 canvas元素本身就是一块画布,需要结合js来画画
规范,建议在每开始画一笔之前都加上ctx.beginPath(),也就是在每一次ctx.moveTo(x, y)之前加上ctx.beginPath()
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()
然后开始新的moveTo和lineTo
2、画矩形
注意:以下画法不需要使用moveTo()来表明起点,因为rect()方法的startX, startY已经表明了起点
画法1
空矩形
ctx.rect(startX, startY, length, height);
ctx.stroke()
画法2
空心矩形
ctx.strokeRect(startX, startY, length, height);
画法3
实心矩形
ctx.fillRect(startX, startY, length, height)
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、贝塞尔曲线
需要规定起点moveTo(x, y)
二次:quadraticCureTo(x1, y1, x2, y2)
三次:bezierCurveTo(x1, y1, x2, y2, x3, y3)
// 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都乘以了相应的缩放值
因为坐标系的平移和形状的旋转是全局起作用的,所以设置了一次之后,新画的图形都会按照改变了坐标系以及旋转形状之后的条件 stroke,如果后面画的图形在stroke的时候还想按照原来的那样,就需要在改变坐标系以及旋转之前保存以下,后面再恢复,就像中断一样,保护现场–恢复现场
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;
阴影在x和y方向的偏移量
ctx.shadowOffsetX = num2;
ctx.shadowOffsetY = num3;
10、canvas渲染文字
ctx.strokeText(‘content’, x, y); 文字描边
ctx.fillText(‘content’, x, y);
可以通过设置fillStyle设置格式文字填充
ctx.font = ‘20px Georgia’ 两种填充都可设置上font
实心字用strokeText, 空心字用fillText
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();
canvas的合成属性
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画
所有闭合的图形在svg中默认都是天生充满并且有效果的
ployline默认填充,如果去掉填充,不会首尾相连;
ploygon也默认填充,如果去掉填充,会首尾相连
属性:
stroke-opacity:边框透明度
fill-opacity:填充透明度
stroke-linecap:线条端点的帽,square,round —>额外加的长度
stroke-linejoin:两个线条在相交的时候的样式,与canvas相同
path画弧
两个点,半径已知,可以确定两个圆或椭圆
svg线性渐变示例,需要提前将渐变定义好,使用的时候用url引入纹理
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
document.documentElement.requestFullScreen()–>进入全屏模式,相当于F11
只有http协议中视频带有Content-Range这个属性,我们才能设置时间进行跳转,只有content-type和content-length的话,视频会重新开始播放
“html5中新增加的属性与元素是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
分享文章:html5中新增加的属性与元素是什么
网站地址:http://scyanting.com/article/iidcep.html