html5中新增加的属性与元素是什么

本篇内容介绍了“html5中新增加的属性与元素是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ html5中新增加的属性有placeholder、calendar、date、time、email、url、search、Hidden等；新增加的元素有header、footer、nav、article、canvas、svg、video等。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。新增的属性placeholdercalendar, date, time, email, url, searchcontentEditable(来描述标签中的内容是否可编辑)DraggableHiddenContext-menuData-val(自定义属性)新增的标签语义化标签(一群类似div的东西)canvas(画板)svg(也算是一个画板)audio(声音播放)video(视频播放)—html5之前一般都用flash–现在flash使用比较少，现在adobe停止维护APIa. 定位(需要地理位置的功能)b. 重力感应(手机中要有陀螺仪)c. request-animation-frame(动画优化)d. History(控制当前页面的浏览记录)e. LocalStorage–一直存在，SessionStorage(存储信息，比如历史最高记录，聊天记录-存在本地)–>页面关了就没了f. websocket–用来做通信的(可用于在线聊天，聊天室)g. fillReader(文件读取和预览)h. webWorker(文件的异步处理–用来提升性能，提升交互体验)i. fetch(传说中要替代AJAX的东西，兼容性不太好，使用的公司不多)placeholdercalendar类细节：该属性只填写一个contenteditable也可以起作用，但是后面的draggable就不行，只可以写成draggable=’true’这样的形式以前没有这个属性的时候要修改div里面的内容需要给div添加点击事件，当被点击之后，将该标签变为input输入框，然后填完替换该属性可以继承，如果自己没有设置，会看父级有无contenteditable细节：虽说没有写该属性无法编辑，然后如果里面嵌套了其他元素，然后里面元素设置的属性值为false，只是代表该元素内容无法修改，然后它其实可以和他的元素名作为一个整体被删除；可拖拽的—拖拽的还是虚拟的，并不会改变元素的位置(可以自己实现，用后面两个拖拽事件)兼容性：只有chrome和safari可以正常使用，Firefox下不好使a标签 img标签 默认是可拖拽的既然可以拖拽，那就有拖拽事件拖拽的生命周期从按下到开始拖拽叫做拖拽开始，然后拖拽进行，当松开的那一刻，拖拽结束拖拽开始拖拽进行中拖拽结束拖拽的组成被拖拽的物体目标区域被拖拽的物体以及其生命周期通过下面三个事件可以随时的知道元素的位置
clientX:鼠标的x轴位置
clientY：鼠标的y轴位置所有的标签元素，当拖拽周期结束时，默认事件是回到原处;事件是由行为触发的，但是一个行为可以不止触发一个事件
比如键盘鼠标抬起既触发了onclick 又触发了onmouseup拖拽事件松开的瞬间,触发了ondragover ondrop但是默认的ondragover执行完后,默认事件是回到原处,故不会触发ondrop事件ondragover -> 回到原处
-> 执行drop事件
责任链模式：
A -> B(阻止) ->默认事件阻止默认事件，e.preventDefault();被拖拽物体的目标区域(结束元素)小demo练习拖拽的时候和进入目标区域的时候，指针是会变化这个属性不常用，原因是兼容性不好，只有在chrome中支持继承自Object MOuseEvent对象 —> 鼠标事件
其实就是多了个属性
e.dataTransfer该属性必须在ondragevent中设置，但是显示的时候是在进入目标区域后指针改变
e.dataTransfer.effectAllowed = ‘link’该属性只能在ondrop中使用
e.dataTransfer.dropEffect = ‘link’
type为link copy move copyMove linkMove all使用标签时尽量的更加语义化h6新增了很多语义化标签
以下这些标签只是有语义，本质上和p没有区别header
页面顶部footer
页面底部nav
导航条article
文章—可以直接被引用拿走的，比如一个博客文章内容section
段落结构–不是一个完整实际开发中section 和 article区分的没有特别仔细aside
侧边栏–正文旁边的地方特点：要想给定画板的大小，必须在行间加样式而不是用css渲染样式canvas是用js操纵画东西的 canvas元素本身就是一块画布，需要结合js来画画规范，建议在每开始画一笔之前都加上ctx.beginPath(),也就是在每一次ctx.moveTo(x, y)之前加上ctx.beginPath()1、画笔a. 规划路径起点：ctx.moveTo(x, y);从哪画到哪：ctx.lineTo(x, y);b. 描线c. 方法ctx.closePath(); 闭合路径，回到起点–只针对一笔画出来的图形ctx.fill(); 填充区域，不需要stroke，fill自免费云主机、域名动会stroke，默认是起始点到终止点的连线(画个圆弧很容易观察出来)改变画笔线条的粗细，改为numpx
同一笔画下来的图形粗细是相同的
重新开启一个路径ctx.beginPath()然后开始新的moveTo和lineTo2、画矩形注意：以下画法不需要使用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)3、画圆(圆弧)
圆心(x, y), 半径, 弧度(起始弧度, 结束弧度), 方向(顺逆时针)顺时针填0，逆时针填1;
canvas的0度角在和数学中的一样起止弧度的大小默认以顺时针的计算为准90 = pi / 24、圆角圆角矩形当然可以用四条线 + 四个90的弧来画，但是下面有更简单的方法，只需要画四笔5、贝塞尔曲线需要规定起点moveTo(x, y)
二次：quadraticCureTo(x1, y1, x2, y2)

三次：bezierCurveTo(x1, y1, x2, y2, x3, y3)6、canvas坐标平移旋转和缩放
默认根据画布的圆点进行旋转
可以根据can.translate()进行坐标系的平移
然后旋转的话会根据新的圆心(x, y)进行旋转因为坐标系的平移和形状的旋转是全局起作用的，所以设置了一次之后，新画的图形都会按照改变了坐标系以及旋转形状之后的条件 stroke，如果后面画的图形在stroke的时候还想按照原来的那样，就需要在改变坐标系以及旋转之前保存以下，后面再恢复，就像中断一样，保护现场–恢复现场can.save()可以保存坐标系的平移数据，缩放数据，旋转数据can.restore()7、背景填充
图片默认是以canvas框的坐标系原点开始填充的，想要改变背景图片的位置的话需要使用can.translate(newX, newY);8、颜色渐变函数linearGradient(direction, color1 position, color2)
radialGradient(shape radius at position, color1, position, color2, position…)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, 空心字用fillText11、线端样式canvas的合成属性svg：矢量图(放大不会失真，适合大面积的贴图，通常动画较少或者较简单)–用元素和css画canvas：适合用于小面积的绘图，适合动画-用js画所有闭合的图形在svg中默认都是天生充满并且有效果的
ployline默认填充，如果去掉填充，不会首尾相连；
ploygon也默认填充，如果去掉填充，会首尾相连属性：stroke-opacity:边框透明度fill-opacity:填充透明度stroke-linecap:线条端点的帽，square，round —>额外加的长度stroke-linejoin:两个线条在相交的时候的样式，与canvas相同两个点，半径已知，可以确定两个圆或椭圆svg线性渐变示例，需要提前将渐变定义好，使用的时候用url引入纹理stroke-dasharray：arr1 px, arr2 px…;stroke-dashoffset:指定填充向左移动一定的距离viewBox:比例尺，表示svg区域的比例尺，有四个参数，前面两个参数表示起点，后面两个参数分别表示x方向和y方向的比例，和原来的长宽进行比较
高德地图就是使用了svgcontrolspaused属性：判断视频是否是暂停的play()方法：视频播放的方法pause()方法：视频暂停的方法duration属性：视频总共的s数currentTime属性：视频当前已经播放的s数playbackRate属性：调节速率volume属性：控制音量 0 ~ 1,默认为1document.documentElement.requestFullScreen()–>进入全屏模式，相当于F11只有http协议中视频带有Content-Range这个属性，我们才能设置时间进行跳转，只有content-type和content-length的话，视频会重新开始播放“html5中新增加的属性与元素是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: 怎么用div将页面划分

这篇文章主要讲解了“怎么用div将页面划分”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用div将页面划分”吧！ 用div将页面划分这是对网站页面排版第一步，网页整体框架确定后才能进行下一步。主要是用div…