HTML5에 새로 추가된 속성에는 자리 표시자, 달력, 날짜, 시간, 이메일, URL, 검색, 숨김 등이 포함됩니다. 새로 추가된 요소에는 머리글, 바닥글, 탐색, 기사, 캔버스, svg, 비디오 등이 포함됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
새로운 속성
placeholder
calendar, 날짜, 시간, 이메일, URL, 검색
contentEditable(태그의 내용을 설명하기 위해) 편집 가능 여부)
Draggable
Hidden
Context-menu
Data-val(맞춤 속성)
새 태그
의미 태그(그룹 div와 같은 것)
canvas(드로잉 보드)
svg(또한 드로잉 보드)
audio(사운드 재생)
video(비디오 재생) - 일반적으로 html5 플래시 이전에 사용됨 – Flash는 현재 거의 사용되지 않으며 이제 Adobe에서는 유지 관리를 중단했습니다
<input type='text' placeholder='请输入用户名'> <input type='password' placeholder='密码'>
<input type='date'><!--兼容性不好，chrome支持，safari，IE不支持--> <input type='time'> <input type='week'> <input type='datatime-local'><!--把年月日事件结合在一起填写的框--> <!-- 上述关于时间的标签不怎么常用，兼容性不好 --> <!-- 上面为calendar类 --> <br> <input type='number'><!--限制输入，如果非数字则无法输入，但是只有chrome支持--> <input type='email'><!--格式不正确的话会提示错误，只有chrome和Firefox支持--> <input type='color'><!--颜色选择器 只有chrome支持--> <input type='range' min='' max='' name=""> <!--chrome和safari支持，火狐和IE 不支持--> <input type='search' name='search'> <!-- 自动提示 , 只有chrome支持，safari支持一点(只有内容打全了才提示)--> <input type='url'> <!--如果填写的不是网址的话会提示，chrome、Firefox支持，safari和IE不支持-->
이 속성을 직접 설정하지 않으면 상속될 수 있습니다. 상위 요소에 contenteditable이 있는지 확인할 수 있습니다<div contenteditable='true'>ddd</div> <!-- 没有兼容性问题 一般用于展示页面中可修改的表格 -->로그인 후 복사
세부 정보: 이 속성은 작성되지 않았지만 편집할 수 없으며 다른 요소가 내부에 중첩된 경우 내부 요소가 설정됩니다. 속성 값은 false입니다. 요소의 내용은 수정할 수 없으며 요소 이름을 사용하여 실제로 전체적으로 삭제할 수 있습니다.
<div contenteditable>
<span contenteditable='false'>姓名：</span>monkey<br>
<span contenteditable='false'>性别：</span>
</div>Draggable
태그 img 태그는 기본적으로 드래그 가능합니다
드래그하기 때문에 가능합니다 드래그 이벤트가 있습니다
드래그의 수명주기드래그 시작
clientY: 마우스의 y축 위치
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);
}이벤트는 동작에 의해 트리거되지만 동작은 둘 이상의 이벤트를 트리거할 수 있습니다.
예를 들어 키보드와 마우스를 올리면 onclick과 onmouseup이 모두 트리거됩니다.하지만 기본 ondragover가 실행된 후에는 기본 이벤트가 원래 위치로 돌아가므로 ondrop 이벤트는 발생하지 않습니다ondragover -> 원래 위치로 돌아가기
드래그 이벤트가 해제되는 순간 Ondragover ondrop이 트리거됩니다
-> 책임의 사슬 실행 모드:
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新增了很多语义化标签
以下这些标签只是有语义，本质上和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也默认填充，如果去掉填充，会首尾相连
<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='500px' height='500px' style='border: 1px solid'>
<!-- 线段 -->
<line class = 'line1' x1='100' y1='100' x2='200' y2='100'></line>
<line class='line2' x1='200' y1='100' x2='200' y2='200'></line>
<!-- 矩形 -->
<rect heigth='50' width='100' x='0' y='0' rx='10' ry='10'></rect>
<!-- rx和ry就是x和y方向的圆角 -->
<circle r='50' cx='50' cy='220'></circle>
<!-- 圆心在 50,220 处的半径位50的圆 -->
<ellipse rx='100' ry='30' cx='400' cy='200'></ellipse>
<!-- 默认会连接并填充，需要结合css控制 -->
<!-- 回到哪就会停到哪 -->
<polyline points='0 0, 50 50, 50 100, 100 100, 100 50'></polyline>
<!-- 多边形:也是画折现，然后首尾会闭合 -->
<ploygon points='0 0, 50 50, 50 100, 100 100, 100 50'></ploygon>
<!-- 文本 -->
<text x='300' y='50'>TEXT</text>
<!-- path标签:可以做基本的画线,moveTo到哪个点，lineTo到哪个点...第一个M后面的点表示起点，H表示水平方向的位置，V表示竖直方向的位置 Z表示是否闭合，z对大小写不敏感 -->
<path d='M 100 100 L 200 100' style='stroke:red;fill:transparent'></path>
<!-- 大写表示绝对位置，小写字母为相对位置(基于现在的位置) -->
</svg>属性：
stroke-opacity:边框透明度
fill-opacity:填充透明度
stroke-linecap:线条端点的帽，square，round —>额外加的长度
stroke-linejoin:两个线条在相交的时候的样式，与canvas相同
两个点，半径已知，可以确定两个圆或椭圆
<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='bg1' 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='Guss'>
<feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>>
</filter>
</defs>
<rect x=100 y=100 width=200 height=100 style='fill:url(#bg1);'></rect>
</svg>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视频教程》
위 내용은 html5에 추가된 새로운 속성과 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
