The newly added attributes in html5 include placeholder, calendar, date, time, email, url, search, Hidden, etc.; the newly added elements include header, footer, nav, article, canvas, svg, video, etc.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
New attributes
placeholder
calendar, date, time, email, url, search
##Semantic tags (a group of div-like things)
a. Positioning (a function that requires geographical location)
When there was no such attribute before, to modify the content inside the div, you need to add a click event to the div. When it is clicked, change the label into an input input box, and then fill in the Complete replacement
This attribute can be inherited. If you don’t set it yourself, it will look at whether the parent has contenteditabledddCopy after login
Details: Although this attribute is not written, it cannot be edited. , then if there are other elements nested inside, and the attribute value set by the element inside is false, it just means that the content of the element cannot be modified, and then it can actually be deleted together with its element name as a whole;
姓名:monkey
性别:
Compatibility : Only chrome and safari can be used normally, but it is not easy to use under Firefox
Since it can be dragged, there is a drag eventa tag img tag is draggable by default
The life cycle of drag
Start of drag
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); }
Events are triggered by behaviors, but a behavior can trigger more than one event
For example, when the keyboard and mouse are lifted Onclick is triggered and onmouseup is triggeredBut after the default ondragover is executed, the default event is to return to the original place. Therefore, the ondrop event will not be triggered ondragover -> Return to the original position
The moment the drag event is released, ondragover is triggered ondrop
-> Execute the drop event
Responsibility chain mode:A -> B (block) -> Default event
Prevent the default event, e.preventDefault();
The target area of the dragged object (end element)
// 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之前
The pointer will change when dragging and entering the target areaSupplementary attribute datatransfer
This attribute is not commonly used , the reason is poor compatibility, only supported in chrome
e.dataTransferInherited from Object MOuseEvent object—> Mouse event
In fact, it has one more attribute
This attribute must be set in ondragevent, but when displayed, the pointer changes after entering the target area
该属性只能在ondrop中使用
e.dataTransfer.dropEffect = ‘link’
type为link copy move copyMove linkMove all
使用标签时尽量的更加语义化
h5新增了很多语义化标签
以下这些标签只是有语义,本质上和p没有区别
header
页面顶部
footer
页面底部
nav
导航条
article
文章—可以直接被引用拿走的,比如一个博客文章内容
section
段落结构–不是一个完整
实际开发中section 和 article区分的没有特别仔细
aside
侧边栏–正文旁边的地方
特点:要想给定画板的大小,必须在行间加样式而不是用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已经表明了起点
空矩形
ctx.rect(startX, startY, length, height);
ctx.stroke()
空心矩形
ctx.strokeRect(startX, startY, length, height);
实心矩形
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:矢量图(放大不会失真,适合大面积的贴图,通常动画较少或者较简单)–用元素和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方向的比例,和原来的长宽进行比较
高德地图就是使用了svg
document.documentElement.requestFullScreen()–>进入全屏模式,相当于F11
只有http协议中视频带有Content-Range这个属性,我们才能设置时间进行跳转,只有content-type和content-length的话,视频会重新开始播放
相关推荐:《html视频教程》
The above is the detailed content of What are the new attributes and elements added in html5. For more information, please follow other related articles on the PHP Chinese website!