Maison > Article > interface Web > Quels sont les nouveaux attributs et éléments ajoutés en HTML5

Quels sont les nouveaux attributs et éléments ajoutés en HTML5

青灯夜游original: 2022-01-17 13:50:553893parcourir

Les attributs nouvellement ajoutés dans HTML5 incluent l'espace réservé, le calendrier, la date, l'heure, l'e-mail, l'URL, la recherche, le masqué, etc. ; les éléments nouvellement ajoutés incluent l'en-tête, le pied de page, la navigation, l'article, le canevas, le svg, la vidéo, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

html5 - principalement utilisé sur les terminaux mobiles

New Attributs

PlaceHolder
calendar, date, heure, e-mail, URL, recherche
contetable (pour décrire le contenu de la balise Modifiable ou non)
Draggable
Caché
Context-menu
Data-val (attribut personnalisé)

Nouvelle balise

Balises sémantiques (Un groupe de des choses similaires aux divs)
canvas (planche à dessin)
svg (également une planche à dessin)
audio (lecture sonore)
video (lecture vidéo) - généralement utilisé avant le flash html5 – Flash est rarement utilisé maintenant et Adobe a cessé de le maintenir

API

a Positionnement (fonctions qui nécessitent une localisation géographique)
b.
c. request-animation-frame (optimisation de l'animation)
d. History (contrôler l'historique de navigation de la page actuelle)
e LocalStorage – existe toujours, SessionStorage (informations de stockage, telles que le. record le plus élevé de l'histoire, historique des discussions - stocké localement) –> Il disparaîtra lorsque la page sera fermée
f – utilisé pour la communication (peut être utilisé pour le chat en ligne, le salon de discussion)
g. . fillReader (lecture et aperçu des fichiers)
h. webWorker (traitement asynchrone des fichiers – utilisé pour améliorer les performances et l'expérience interactive)
i (quelque chose qui est censé remplacer AJAX, mais sa compatibilité ne l'est pas. Très bon, et peu d'entreprises l'utilisent)

Attributes

Aut-Type d'entrée

rreee

rreee

contendent fonctionnera, mais le draggable derrière ne fonctionnera pas. , ne peut être écrit que sous la forme draggable='true'

Dans le passé, quand un tel attribut n'existait pas, pour modifier le contenu à l'intérieur du div, vous devez pour ajouter un événement de clic au div. Lorsque vous cliquez dessus, changez l'étiquette en zone de saisie, puis remplissez le remplacement complet

<input type=&#39;text&#39; placeholder=&#39;请输入用户名&#39;>
<input type=&#39;password&#39; placeholder=&#39;密码&#39;>
Cet attribut peut être hérité Si vous ne le définissez pas vous-même, vous verrez si le parent a contenteditable

Détails : Bien que cet attribut ne soit pas écrit, il ne peut pas être modifié, et si d'autres éléments sont imbriqués à l'intérieur, alors les éléments à l'intérieur sont définis La valeur de l'attribut est fausse, ce qui signifie simplement que le le contenu de l'élément ne peut pas être modifié, puis il peut être supprimé avec son nom d'élément dans son ensemble

<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不支持-->

Draggable

Dragable - qu'il soit déplacé ou virtuel, cela n'a pas d'importance Changez la position de l'élément ( vous pouvez l'implémenter vous-même, utilisez les deux prochains événements drag)

Compatibilité : seuls chrome et safari peuvent être utilisés normalement, ce n'est pas facile à utiliser sous Firefox

une balise img tag est déplaçable par défaut

Depuis le glisser est possible, il y a un événement de glisser

Le cycle de vie du glisser

De l'appui au début du glisser s'appelle le début du glisser, puis le glisser progresse, et lorsque le moment est relâché, le glisser Fin

Début du glisser

Fin du glisser
La composition du glisser

L'objet déplacé

L'objet déplacé et son cycle de vie

Vous pouvez connaître la position de l'élément à à tout moment via les trois événements suivants

clientY : position de la souris sur l'axe y

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

Tous les éléments d'étiquette, à la fin du cycle de glissement, par défaut L'événement est renvoyé à son emplacement d'origine ;

Les événements sont déclenchés par des comportements, mais un comportement peut déclencher plus d'un événement

Par exemple, lorsque le clavier et la souris sont relevés, onclick et onmouseup sont déclenchés

Au moment où l'événement glisser est libéré, Ondragover ondrop est déclenché

Mais une fois l'ondragover par défaut exécuté, l'événement par défaut est de revenir à l'emplacement d'origine, donc l'événement ondrop ne sera pas déclenché

ondragover -> Retour à l'emplacement d'origine

-> Mode chaîne de responsabilité :

A -> B (prévenir) ->Événement par défaut

Prévenir l'événement par défaut, e.preventDefault();

La zone cible de l'objet glissé (élément de fin)

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

Petit exercice de démonstration

Transfert de données d'attribut supplémentaire
Lorsque vous faites glisser et entrez dans la zone cible, le pointeur changera

Cet attribut n'est pas couramment utilisé en raison d'une mauvaise compatibilité. Il n'est pris en charge que dans Chrome

Hérité. de l'objet Object MOuseEvent — > L'événement souris
est en fait un attribut supplémentaire
e.dataTransfer

Cet attribut doit être défini dans ondragevent, mais lorsqu'il est affiché, le pointeur change après être entré dans la zone cible
e.dataTransfer.effectAllowed = ' lien'

该属性只能在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(&#39;can&#39;);
var can = canvas.getContext(&#39;2d&#39;);
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(&#39;can&#39;);
        var can = canvas.getContext(&#39;2d&#39;);
        

        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 = &#39;30&#39;;
ctx.moveTo(100, 100);
ctx.lineTo(200, 200)
ctx.lineCap = &#39;butt&#39; //butt是默认的，square(方块帽子)， round(半圆帽子)

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

canvas的合成属性

ctx.beginPath();
ctx.fillStyle = &#39;red&#39;;
ctx.fillRect(100, 100, 100, 100);


ctx.globalCompisiteOperation = &#39;lighter&#39;;
ctx.beginPath();
ctx.fillStyle = &#39;green&#39;;
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的话，视频会重新开始播放

Articles Liés

Voir plus