首頁  >  文章  >  web前端  >  html5中新增加的屬性與元素有哪些

html5中新增加的屬性與元素有哪些

青灯夜游
青灯夜游原創
2022-01-17 13:50:553998瀏覽

html5中新增的屬性有placeholder、calendar、date、time、email、url、search、Hidden等;新增的元素有header、footer、nav、article、canvas、svg、video等。

html5中新增加的屬性與元素有哪些

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

html5–多用於行動端

新增的屬性

  • ##placeholder

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

  • contentEditable(來描述標籤中的內容是否可編輯)

  • #Draggable

  • Hidden

  • #Context-menu

  • ##Data-val (自訂屬性)
新增的標籤

    #語意化標籤(一群類似div的東西)
  • canvas(畫板)
  • svg(也算是畫板)
  • audio(聲音播放)
  • video(影片播放)—html5之前一般都用flash–現在flash使用比較少,現在adobe停止維護
API

    a. 定位(需要地理位置的功能)
  • b.重力感應(手機中要有陀螺儀)
  • c. request-animation-frame(動畫最佳化)
  • d. History(控制目前頁面的瀏覽記錄)
  • e. LocalStorage–一直存在,SessionStorage(存儲信息,例如歷史最高記錄,聊天記錄-存在本地)–>頁面關了就沒了
  • #f. websocket–用來做通訊的(可用於線上聊天,聊天室)
  • #g. fillReader(檔案讀取與預覽)
  • #h. webWorker(檔案的非同步處理–用來提升效能,提升互動體驗)
  • i. fetch(傳說中要替代AJAX的東西,相容性不太好,使用的公司不多)
  • 屬性篇

input的新type

##placeholder

    <input type=&#39;text&#39; placeholder=&#39;请输入用户名&#39;>
    <input type=&#39;password&#39; placeholder=&#39;密码&#39;>
  • calendar類別
    <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
#細節:這個屬性只填入一個contenteditable也可以起作用,但是後面的draggable就不行,只可以寫成draggable= 'true'這樣的形式

以前沒有這個屬性的時候要修改div裡面的內容需要給div添加點擊事件,當被點擊之後,將該標籤變成input輸入框,然後填完替換

<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

可拖曳的—拖曳的還是虛擬的,並不會改變元素的位置(可以自己實現,用後面兩個拖曳事件)

##相容性:只有chrome和safari可以正常使用,Firefox下不好使

a標籤img標籤默認是可拖曳的

既然可以拖曳,那就有拖曳事件

拖曳的生命週期

  • 從按下到開始拖曳叫做拖曳開始,然後拖曳進行,當鬆開的那一刻,拖曳結束

拖曳開始

#拖曳進行中
  1. 拖曳結束
  2. 拖拽的組成
  • 被拖曳的物體
目標區域
  1. 被拖曳的物體以及其生命週期
    透過下面三個事件可以隨時的知道元素的位置
  • 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 -> 回到原處

-> 執行drop事件

責任鏈模式:

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之前
  1. #小demo練習
補充屬性datatransfer

拖曳的時候和進入目標區域的時候,指標是會改變

這個屬性不常用,原因是相容性不好,只有在chrome中支援

繼承自Object MOuseEvent物件—> 滑鼠事件

其實就是多了個屬性

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的话,视频会重新开始播放

相关推荐:《html视频教程

以上是html5中新增加的屬性與元素有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn