집 >웹 프론트엔드 >프런트엔드 Q&A >html5에 추가된 새로운 속성과 요소는 무엇입니까?

html5에 추가된 새로운 속성과 요소는 무엇입니까?

青灯夜游원래의: 2022-01-17 13:50:554033검색

HTML5에 새로 추가된 속성에는 자리 표시자, 달력, 날짜, 시간, 이메일, URL, 검색, 숨김 등이 포함됩니다. 새로 추가된 요소에는 머리글, 바닥글, 탐색, 기사, 캔버스, svg, 비디오 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html5 – 주로 모바일 단말기에서 사용됨

새로운 속성

placeholder
calendar, 날짜, 시간, 이메일, URL, 검색
contentEditable(태그의 내용을 설명하기 위해) 편집 가능 여부)
Draggable
Hidden
Context-menu
Data-val(맞춤 속성)

새 태그

의미 태그(그룹 div와 같은 것)
canvas(드로잉 보드)
svg(또한 드로잉 보드)
audio(사운드 재생)
video(비디오 재생) - 일반적으로 html5 플래시 이전에 사용됨 – Flash는 현재 거의 사용되지 않으며 이제 Adobe에서는 유지 관리를 중단했습니다

API

새로운 유형의 입력

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

Details: 이 속성은 편집 가능하고 작동하지만 그 뒤에 있는 draggable은 작동하지 않습니다. draggable='true'

과거에 그러한 속성이 없었던 경우 div 내부의 콘텐츠를 수정하려면 다음이 필요합니다. div에 클릭 이벤트를 추가하려면 클릭 시 라벨을 입력 입력 상자로 변경한 다음 전체 교체

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

이 속성을 직접 설정하지 않으면 상속될 수 있습니다. 상위 요소에 contenteditable이 있는지 확인할 수 있습니다

세부 정보: 이 속성은 작성되지 않았지만 편집할 수 없으며 다른 요소가 내부에 중첩된 경우 내부 요소가 설정됩니다. 속성 값은 false입니다. 요소의 내용은 수정할 수 없으며 요소 이름을 사용하여 실제로 전체적으로 삭제할 수 있습니다.

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

Draggable

Dragable - 드래그든 가상이든 상관없습니다. 요소 위치 변경( 직접 구현할 수 있으니 다음 두 개의 드래그 이벤트를 사용하세요)

호환성: 크롬과 사파리만 정상적으로 사용할 수 있고, 파이어폭스에서는 사용하기 쉽지 않습니다

태그 img 태그는 기본적으로 드래그 가능합니다

드래그하기 때문에 가능합니다 드래그 이벤트가 있습니다

드래그의 수명주기

누르는 것부터 드래그가 시작되는 것을 드래그 시작이라고 하고 드래그가 진행되며 순간이 풀리면 드래그가 종료됩니다

드래그 시작

드래그 진행 중
드래그 종료

드래그의 구성

드래그된 개체

대상 영역

드래그된 개체 및 해당 수명주기

언제든지 요소의 위치를 알 수 있습니다. 다음 세 가지 이벤트를 통해 시간을 측정합니다.

clientX: 마우스의 x축 위치

clientY: 마우스의 y축 위치

var oDragDiv = document.getElementsByClassName(&#39;a&#39;)[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 -> 원래 위치로 돌아가기

-> 책임의 사슬 실행 모드:

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

간단한 데모 연습

보조 속성 데이터 전송
대상 영역을 드래그하여 입력하면 포인터가 변경됩니다

이 속성은 호환성이 좋지 않아 일반적으로 사용되지 않습니다. chrome

Object MOuseEvent에서 상속됩니다. object— > 마우스 이벤트
에는 실제로 속성이 하나 더 있습니다
e.dataTransfer

이 속성은 ondragevent에서 설정해야 하는데 표시되면 대상 영역에 진입한 후 포인터가 변경됩니다
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(&#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的话，视频会重新开始播放

html5에 추가된 새로운 속성과 요소는 무엇입니까?

html5 – 주로 모바일 단말기에서 사용됨

새로운 유형의 입력

Details: 이 속성은 편집 가능하고 작동하지만 그 뒤에 있는 draggable은 작동하지 않습니다. draggable='true'

Dragable - 드래그든 가상이든 상관없습니다. 요소 위치 변경( 직접 구현할 수 있으니 다음 두 개의 드래그 이벤트를 사용하세요)

h5新增标签

语义化标签

canvas标签

SVG

path画弧

audio和video

video

관련 기사