What are the new attributes and elements added in html5

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.

html5 – mostly used on mobile terminals

New attributes

• placeholder

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

• ##contentEditable (to describe whether the content in the tag is editable)

• Draggable

• Hidden

##Context-menu
Data-val (Custom attributes)

New tags

##Semantic tags (a group of div-like things)

• canvas(drawing board)

• svg(also considered a drawing board)

• audio(sound playback )

• video (video playback)—Flash was generally used before HTML5—flash is rarely used now, and Adobe has stopped maintaining it
API

a. Positioning (a function that requires geographical location)

• b. Gravity sensor (the phone must have a gyroscope )

• c. request-animation-frame(animation optimization)

• d. History(control the browsing history of the current page)

• e. LocalStorage – always exists, SessionStorage (storage information, such as historical high records, chat records – stored locally) –> will disappear when the page is closed

• f. websocket – used for communication (can be used for online chat, chat room)

• g. fillReader (file reading and preview)

• h. webWorker (asynchronous processing of files – used to improve performance and interactive experience)

• i. fetch (something that is said to replace AJAX, but has poor compatibility Great, not many companies use it)

• Attributes

New type of input

placeholder

<input type=&#39;text&#39; placeholder=&#39;请输入用户名&#39;>
<input type=&#39;password&#39; placeholder=&#39;密码&#39;>

• calendar class

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

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

• contentEditable

Details: This property only works if you fill in one contenteditable, but the subsequent draggable does not work. You can only write draggable= In the form of 'true'

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

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

This attribute can be inherited. If you don’t set it yourself, it will look at whether the parent has contenteditable

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;

<div contenteditable>
    <span contenteditable=&#39;false&#39;>姓名：</span>monkey<br>
    <span contenteditable=&#39;false&#39;>性别：</span>
</div>

Draggable

Dragable - dragging is still virtual and will not change the position of the element (you can implement it yourself, using the next two drag events)

Compatibility : Only chrome and safari can be used normally, but it is not easy to use under Firefox

a tag img tag is draggable by default

Since it can be dragged, there is a drag event

The life cycle of drag

• From pressing to starting dragging is called dragging start, and then dragging progresses. When the moment is released, End of drag

Start of drag

Drag in progress
1. End of drag
3. Drag Composition of drag

• The dragged object

Target area
2. The dragged object and its life cycle

• You can know the position of the element at any time through the following three events
clientX: x-axis position of the mouse

clientY: y-axis position of the mouse

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);
}

All tags Element, when the drag cycle ends, the default event is to return to the original position;

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 triggered

The moment the drag event is released, ondragover is triggered ondrop

But 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

-> 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之前

2. small demo exercise

Supplementary attribute datatransfer

The pointer will change when dragging and entering the target area

This attribute is not commonly used , the reason is poor compatibility, only supported in chrome

Inherited from Object MOuseEvent object—> Mouse event

In fact, it has one more attribute

e.dataTransfer

This attribute must be set in ondragevent, but when displayed, the pointer changes after entering the target area

e.dataTransfer.effectAllowed = 'link'

该属性只能在ondrop中使用
e.dataTransfer.dropEffect = ‘link’
type为link copy move copyMove linkMove all

h5新增标签

语义化标签

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

h5新增了很多语义化标签
以下这些标签只是有语义，本质上和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也默认填充，如果去掉填充，会首尾相连

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


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

<ellipse rx=&#39;100&#39; ry=&#39;30&#39; cx=&#39;400&#39; cy=&#39;200&#39;></ellipse>

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

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



<!-- path标签:可以做基本的画线,moveTo到哪个点，lineTo到哪个点...第一个M后面的点表示起点，H表示水平方向的位置，V表示竖直方向的位置 Z表示是否闭合，z对大小写不敏感 -->
<path d=&#39;M 100 100 L 200 100&#39; style=&#39;stroke:red;fill:transparent&#39;></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=&#39;bg1&#39; 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=&#39;Guss&#39;>
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>>
    </filter>
</defs>
<rect x=100 y=100 width=200 height=100 style=&#39;fill:url(#bg1);&#39;></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

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!