HTML新增特性

于 2022-08-30 15:19:29 发布
阅读量218 收藏
点赞数
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52704461/article/details/126603302
版权

1：HTML5新特性

标签:nav article footer header aside.....

表单新特性:input type取值date time week email number

表单属性required readonly disabled

表单控件标签:progress datalist ..

 <!-- 标签:nav article footer header aside..... -->
    <nav></nav>
    <article></article>
    <footer></footer>
    <header></header>
    <aside></aside>

html5有哪些新增特性？

1、语义化标签：header article footer section nav

2、表单控件：number date time email url search

3、音频和视频：audio video

4、本地离线存储：localStorage sessionStorage cookies

5、画布：canvas

 对html语义化标签或者语义化的理解

1、使页面内容结构化、便于浏览器、搜索引擎解析

2、即使没有css样式也以一种文档格式显示，并且容易阅读

3、有利于搜索引擎优化

4、便于阅读、维护和理解

 说一下src和href有什么区别？

 href是超文本引用，它是指向资源的位置，建立与目标文件的联系;

​ src目的是把资源下载到页面中; ​ script src='https://www.b'；

 2：H5API

 2.1自定义数据属性

 data-xxx 是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力和可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。

<div id="one" flag='two' data-id='1001' data-item='test'></div>
    <script>
        window.onload = function () {
            var div = document.querySelector('#one');
            console.log(div.dataset)
            console.log(div.dataset.id)
            console.log(div.dataset.item)
        }
    </script>

2.2媒体元素

1.属性
1.进度条controls
<video src="./音视频/1.mp4"  controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4"  controls autoplay> </video>
3.post封面
<video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>
4.是否循环播放loop
<video src="./音视频/1.mp4" controls loop> </video>
5.muted静音
<video src="./音视频/1.mp4" controls loop autoplay> </video>
2.方法 
1.播放 play
 var video=$('video')[0];
 if($(this).text() === '播放'){
              video.play()
 }
2.暂停 pause
 if($(this).text()==='暂停'){
              video.pause()
  }
3.切换 paused 音视频是否是暂停状态
if($(this).text()==='切换'){
                    if(video.paused){
                        video.play()
                    }else{
                        video.pause()
                    }
}
4. // 控制音量+
   if($(this).text()==='音量+'){
      
       video.volume=(video.volume>0.9?0.9:video.volume )+0.1
   }
5.if($(this).text()==='音量-'){
        video.volume=(video.volume<0.1?0.1:video.volume)-0.1
   }
6.// 快进
 if($(this).text()==='快进'){
        video.currentTime+=5
  }
7.// 回退
  if($(this).text()==='回退'){
      video.currentTime-=5
 }
8.// 倍数播放
 if($(this).text()==='倍速播放'){
   video.playbackRate=0.5
 }
 3.事件
video.onvolumechange=function(){
                // console.log('音量改变事件监听')
                if(this.volume>0.5){
                    alert('继续调高声音会损伤耳膜')
                }
   }

 案例

<!-- 音视频可以设置宽高 -->
	<!-- controls  autoplay loop muted poster src -->
	<!--  controls 代表进度条-->
	<!-- autoplay 自动播放 -->
	<!-- loop循环播放 -->
	<!-- poster 封面 -->
	<!-- src 连接到视频得地址 -->
	<!-- width height 宽高 一般不一起设置 -->
	<video controls loop muted poster="" src="3.mp4" width="400px"></video>
	<button>播放</button>
	<button>暂停</button>
	<button>切换</button>
	<button>音量+</button>
	<button>音量-</button>
	<button>快进</button>
	<button>快退</button>
	<button>倍速播放</button>
	<!-- 不加进度条相当于背景音乐 -->
	<!-- <audio src="./音视频/1.mp3" autoplay loop></audio> -->
<script>
		$(function () {
			// 获取到视频标签
			var video = $('video')[0];
			// 给这一类按钮绑定事件
			$('button').click(function () {
				// 播放视频
				if ($(this).text() === '播放') {
					video.play()
				}
				// 暂停视频
				if ($(this).text() === '暂停') {
					video.pause()
				}
				// 切换 视频是播放进行暂停 视频暂停进行播放
				if ($(this).text() === '切换') {
					// 当前视频是否是暂停状态 
					// video.paused为true代表暂停
					if (video.paused) {
						video.play()
					} else {
						video.pause()
					}
				}
				// 控制音量+ - 
				if ($(this).text() === '音量+') {
					// volume 0-1阈值
					// video.volume+=0.1;
					// console.log(video.volume);
					video.volume = (video.volume > 0.9 ? 0.9 : video.volume) + 0.1
				}
				// 控制音量-
				if ($(this).text() === '音量-') {
					video.volume = (video.volume < 0.1 ? 0.1 : video.volume) - 0.1;

				}

				// 控制视频快进
				if ($(this).text() === '快进') {
					// 以秒为单位
					video.currentTime += 10;
				}
				// 控制视频快退
				if ($(this).text() === '快退') {
					// 以秒为单位
					video.currentTime -= 10;
				}
				// 倍数播放
				if ($(this).text() === '倍速播放') {
					// 取值 0-n
					// >1快速播放
					// <1 慢速播放
					video.playbackRate = 0.5;
				}
				// 监听视频音量事件
				video.onvolumechange = function () {
					if (this.volume > 0.5) {
						alert('不要继续放大了')
					}
				}

			})

		})
	</script>

2.audio音频

audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致

<!-- 不加controls相当于背景音乐 -->
<audio src="./音视频/1.mp3" controls loop autoplay></audio>

 3：画布

1.掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单矩形

2.掌握使用路径的方法，能够利用路径绘制出圆形与多边形

3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法

<!-- 画布元素-->
	<canvas width="400px" height="400px"></canvas>
	window.onload=function(){
			// 80 前端工程师 网页 门户网站 app pc端
			// 20 webgl工程师 three.js canvas 加上 3d建模 unity 3d
			// 1.获取画布
			var canvas=document.querySelector('canvas');
			// 2.获取画笔 上下文对象
			var context=canvas.getContext('2d');
			// 3.给图形设置填充样式
			// context.fillStyle='red';//实心填充
			// 4.绘制图形 绘制填充矩形 
			// fillRect 参数 x轴起始位置 y轴起始位置  宽 高 
			// context.fillRect(0,0,200,200);
			// 绘制轮廓矩形
			// 3.给轮廓图形设置填充样式
			context.strokeStyle='blue';
			// 给轮廓矩形设置线宽
			context.lineWidth=8;
			// 4.绘制轮廓矩形 参数 x轴起始位置 y轴起始位置  宽 高
			context.strokeRect(100,100,100,100);
			// 清除画布一部分区域
			context.clearRect(100,100,50,50);
			// 清除画布全部区域
			context.clearRect(0,0,400,400);

		}

 

 1.基本用法
(1)获取canvas对象--获取画布
    通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)--获取画笔
    图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
(3)定义填充样式
    context.fillStyle='red';
(4)绘制填充图形
    context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

1.实例 --绘制填充矩形
//通过fillRect
window.onload=function(){
            //1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context=canvas.getContext('2d');
            // 3.绘制填充样式
            context.fillStyle='red'
            // 4.绘制填充矩形
            context.fillRect(10,10,100,100)
}
//绘制轮廓矩形 边框矩形
window.onload=function(){
     		//1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context=canvas.getContext('2d');
      		 // 设置轮廓样式
            context.strokeStyle='red'
			// 设置轮廓的线宽
            context.lineWidth=4;
            // 绘制边框矩形或者轮廓矩形
            context.strokeRect(10,10,100,100);
            // 清楚一部分区域
            context.clearRect(0,0,50,50);
            // 清楚全部区域
            context.clearRect(0,0,400,400)
}

 绘制圆

	<canvas width="600px" height="600px"></canvas>
	window.onload=function(){
			// 1.获取画布
			var canvas=document.querySelector('canvas');
			// 2.获取上下文对象
			var context=canvas.getContext('2d');
			// 3.需要给开始路径
			context.beginPath();
			// 4.绘制圆 
			// arc参数:x y轴开始位置 r半径 开始弧度Math.PI(180°) 结束弧度 布尔值
			//       改为true 代表逆时针绘制 默认是false
			context.arc(100,100,100,0,Math.PI*2,true);
			// 5.绘制圆得填充样式
			context.fillStyle='blue';
			// 6.绘制圆形
			context.fill();
			// 7.需要给结束路径
			context.closePath();
		}

 圆的移动

	window.onload=function(){
			// 1.获取画布
			var canvas=document.querySelector('canvas');
			// 2.获取上下文对象
			var context=canvas.getContext('2d');
			var obj={
				x:100,
				y:100,
				r:100,
				color:'yellow'
			};
			// 声明绘制圆得方法
			function draw(obj){
				context.beginPath();
				context.arc(obj.x,obj.y,obj.r,0,Math.PI*2);
				// 绘制填充圆样式
				// context.fillStyle=obj.color;
				// 绘制轮廓圆
				context.strokeStyle=obj.color;
				// 绘制填充圆
				// context.fill();
				// 绘制轮廓圆
				context.stroke();
				context.closePath();
			}
			// 声明圆移动得方法
			function move(obj){
				obj.x+=5;
				obj.y+=5;
				draw(obj);
			}
			setInterval(function(){
				// 清除原先圆
				context.clearRect(0,0,600,600);
				move(obj);
			},500);
			draw(obj);
		}

 渐变

	window.onload=function(){
			// 获取画布
			var canvas=document.querySelector('canvas');
			// 获取画笔
			var context=canvas.getContext('2d');
			// 3.绘制一个线性渐变图形 
			// 3.1创建一个线性渐变对象 
			// createLinearGradient参数 0 0 400 400 
			var l=context.createLinearGradient(0,0,400,400);
			// 3.2给渐变图形填充颜色 addColorStop 参数 阈值0-1填充百分比 颜色
			l.addColorStop(0,'red');
			l.addColorStop(0.25,'blue');
			l.addColorStop(0.5,'cyan');
			l.addColorStop(0.75,'pink');
			l.addColorStop(1,'yellow');
			// 4.将渐变对象给到图形填充样式
			context.fillStyle=l;
			// 5.绘制填充图形
			context.fillRect(0,0,400,400);
		}

径向渐变

	window.onload=function(){
			// 获取画布
			var canvas=document.querySelector('canvas');
			// 获取画笔
			var context=canvas.getContext('2d');
			// 3.绘制一个径向渐变图形 
			// 3.1创建一个径向渐变对象 
			// createRadialGradient
			// 参数:小圆x y r 大圆 x y r
			var g=context.createRadialGradient(200,200,100,200,200,200);
			// 3.2给渐变对象填充颜色 addColorStop 参数 阈值0-1填充百分比 颜色
			g.addColorStop(0,'red');
			g.addColorStop(0.25,'green');
			g.addColorStop(0.5,'blue');
			g.addColorStop(0.75,'cyan');
			g.addColorStop(1,'pink');
			// 4.将径向渐变对象给到图形填充样式
			context.fillStyle=g;
			// 5.绘制填充图形
			context.fillRect(0,0,400,400);
		}

 绘制线段

	window.onload=function(){
			// 获取画布
			var canvas=document.querySelector('canvas');
			// 获取画笔
			var context=canvas.getContext('2d');
			context.lineWidth=8;
			// 需要开始路径
			context.beginPath();
			// 绘制线段 从哪里开始 到哪里结束
			context.moveTo(0,0);
			context.lineTo(100,100);
			context.lineTo(200,10);
			context.lineTo(300,100);
			// 需要结束路径
			context.closePath();
			// 给线段设置颜色
			context.stokeStyle='cyan';
			// 绘制线段
			context.stoke();

		}

 绘制图像

	window.onload=function(){
			// 获取画布
			var canvas=document.querySelector('canvas');
			// 获取画笔
			var context=canvas.getContext('2d');
			// 创建一个img标签 构造函数方式new Image();
			// var img=new Image();
			// console.log(img);
			// img.src='./音视频/2.jpg';
			// // 绘制图片 参数 要绘制得图片/视频 开始x y 轴位置 宽高
			// img.onload=function(){
			// 	context.drawImage(img,0,0,100,100);
			// }
			// 绘制视频
			// var video=document.querySelector('video');
			// function draw(){
			// 	context.drawImage(video,0,0,300,300);
			// 	// 请求动画帧
			// 	requestAnimationFrame(draw);
			// }
			// draw()
			// 绘制文本
			context.font='18px bold';
			// 参数 要绘制得文本 x y 起始位置
			// context.fillText('hello world',100,100);
			context.strokeText('hello',100,100);

		}
	<canvas width="400px" height="400px"></canvas>
	<video controls src="./音视频/1.mp4" width="300px"></video>
LL1018。
关注
H5 api
weixin_52163042的博客
04-20 411
陀螺仪 简介： 陀螺仪是测量物理量的偏转、倾斜时的转动角速度。赛车、跑酷游戏里最常见的转动手机控制方向。 兼容： iphone和ipad必须在https协议中才能使用，系统11.1.x以前是可以使用的。 使用： 需要搭建服务后，链接wifi更改ip地址为本地的ip地址后运行 1.deviceorientation事件 指南针、手机倾斜 aplha：装置水平放置时，绕 Z 轴旋转的角度，数值为 0 度到 360 度。 beta：行动装置水平放置时，绕 X 轴旋转的角度，数值为 -180 度到 180 度
HTML5新增，表单的高级特性，表单新增控件，功能行标签，音频和视频。
logical_thinking的博客
08-29 320
本文主要简述了HTML5新增的表单特性，表单新增控件，功能性标签，音频和视频提示：以下是本篇文章正文内容，下面案例仅供参考本文就到这里，简单的讲述了HTML5的新增特性。若想学得更多有关前端的知识可以联系本人，请多多关注博主！！...
H5新API
qq_57104988的博客
08-30 416
context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高。// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置。 3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法。...
Web存储
m0_51371862的博客
09-26 186
1.Cookie cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；通常通过js-cookie这个库来操作cookie。 Cookie //创建一个cookie,7天后过期 Cookies.set("name","this is a test cookie",{ expires: 7 }) //获取cookie console.log(Cookie.get('name'));
H5 API
weixin_49806196的博客
11-15 572
HTML5 API A:Appli cation 应用 P:process 进程（程序） I:Interfale 接口 多媒体 多媒体video标签中，poster属性，添加画面第一针的画面 注：需要关闭autoplay（自动播放属性） <!-- autoplay属性关闭 --> <video src="./video/loop.mp4" controls muted loop poster="./img/猫和老鼠.gif"></video>
H5api
xibozi的博客
10-08 125
Web存储 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，每一次发送请求都会携带上cookie，会造成带宽的浪费，给开发带来诸多不便，HTML5规范则提出解决方案。 1、设置、读取方便 2、容量较大，sessionStorage约5M、localStorage约20M 3、只能存储字符串，可以将对象JSON.string
前端面试必备之html5的新特性
09-28
HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。所以当我们在面试前端工作的时候，遇到html5相关的问题...下面这篇文章就来跟大家分享介绍了关于前端面试必备之html5新特性的相关资料，需要的朋友可以参考下。
HTML 5.1学习之新增的14项特性与应用示例
09-28
以下是对这14项新增特性的详细解读： 1. 防止网络钓鱼攻击：HTML 5.1通过`rel="noopener"`属性解决了新标签页可能被恶意篡改的问题。当链接开启新窗口时，添加此属性可确保新窗口与原窗口之间没有共享上下文，从而...
【css新增特性思维导图梳理】
最新发布
12-31
【CSS新增特性思维导图梳理】是对CSS3中新增特性的整理，主要关注浏览器兼容性和CSS Hack技巧。CSS3引入了许多新的功能，提高了网页设计的灵活性和表现力。以下是其中的一些关键点： 1. **私有前缀**： 为了解决...
HTML5新增的表单元素和属性实例解析
09-28
在表单处理方面，HTML5新增了多个属性和元素，极大地丰富了网页上用户输入数据的方式。以下将详细介绍这些新增的表单元素和属性，以及它们的实例解析。 首先来看placeholder属性，这个属性用在`<input>`元素上，...
H5API
l_y_h___的博客
09-18 122
语义标签 <nav>网站导航块 <section>表示页面中的一个内容块 <article>表示页面中的一块与上下文不相关的内容块 <aside>元素表示当前页面或文章的附属信息部分 <header>表示页面中一个标题区域 <footer>底部标签 <hgroup>用于页面中与标题区域组合 <figure>一段独立的流内容 &l
h5api
lulululinger的博客
10-14 510
H5 API 1.H5新增标签 语义化标签 header footer nav aside section <nav>hello</nav> <div class='nav'>hello</div> 语义化标签 1）代码的可读性提高 ...
HTML5新增的十大特性
qq_43103115的博客
10-10 630
1、语义化标签 header（头部）、 foot（底部）、nav（导航）、section（定义文档中的章节）、dialog（提示框）、aside（侧边栏） 2、增强型表单 input输入类型： color、date、email、month、number、range（一定范围内数字值的输入域）、search（搜索域）、tel(输入电话号码字段)、time（选择一个时间）、url(url地址的输入域...
H5API——Canvas
weixin_30877755的博客
03-10 85
http://item.jd.com/11241807.htmlHTML5移动Web开发实战http://item.jd.com/10982275.htmlHTML5程序设计（第2版）http://item.jd.com/1049266194.htmlHTML5游戏开发http://item.jd.com/11231175.htmlHTML5Canvas核心技术：图形、动画与游戏开发h...
HTML5新增API
c1400612901的博客
06-27 1536
HTML5新增API
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值