HTML5新增的标签、表单中新增的属性、元素、事件及音视频标签的使用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML5新增的标签、表单中新增的属性、元素、事件及音视频标签的使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8819字，纯文字阅读大概需要13分钟。
内容图文
文章目录
一、html5
html5是一个统称，包含了对html扩展 对css扩展 对js扩展 。
1 html5新标签
2html5对css2的扩展 css3
3 html5对js的扩展 页面存储 移动端事件 图片上传相关的API 等等。
1.html5标签更加语义化
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header{
width: 100%;
height: 100px;
background-color: palevioletred
}
nav{
width: 100%;
height: 36px;
background-color: rgb(118, 216, 79)
}
main{
width: 100%;
height: 500px;
}
main>article{
width: 80%;
height: 100%;
background-color: skyblue;
float: left;
}
main>aside{
width: 20%;
height: 100%;
background-color: yellow;
float: left;
}
footer{
width: 100%;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 传统的html4布局方式 -->
<!--
<div class="header">header</div>
<div class="nav">nav</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
-->
<!-- html5布局 -->
<header>header</header>
<nav>nav</nav>
<main>
<article>article</article>
<aside>aside</aside>
</main>
<footer>footer</footer>
</body>
</html>
结果如下：
二、html5兼容解决方案
IE9 行级元素在设置宽度的时候是失效的
IE8 完全不支持语义标签(html5)
IE8不认识语义标签 无法解析 只能用js去替代
1.手动创建标签
在js代码中，通过document.createElement 创建自定义语义化标签。
例：
document.createElement(“nav”)
document.createElement(“article”)
document.createElement(“aside”)
document.createElement(“footer”)
2.引入js包
引入一个html5shiv.js 包，它的本质还是document.createElement。
作用: html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素
参考网址: https://www.bootcdn.cn/html5shiv/
只需在html文件中引入js文件：
代码示例如下：
<!-- 引入htmlshiv 为了IE8下的浏览器兼容性质的问题 -->
<!-- 判断浏览器如果是小于IE9的时候 引入 -->
<!-- 下面不是注释 -->
<!-- [if lt IE 9] > //lt就是<符号
<script src="./js/html5shiv.js"></script>
<![end if] -->
三、html5表单
1.对type属性的补充
代码示例如下：
<form action="">
<!-- 传统的 -->
用户名：<input type="text"></br>
密码：<input type="password"></br>
<!-- html5新增的 -->
<!-- email进行验证的时候 必须包含@符号 -->
邮箱：<input type="email" name="" id=""></br>
<!-- 它的作用不在验证 它本质的目的为了在移动端中打开键盘 -->
电话:<input type="tel" /><br/>
<!-- 验证只能输入合法的网址 http:// -->
网址:<input type="url" /> <br/>
<!--
number 只能输入数字
max 最大值
min 最小值
value 默认值
-->
数量:<input type="number" value="60" max="100" min="0"><br/>
<!-- range范围 -->
范围:
<input type="range" max="100" min="0" value="50"><br/>
颜色:
<input type="color"><br/>
<!-- 日期时间相关的 -->
<!-- time 时间 时分秒 -->
时间:<input type="time" /><br/>
<!-- date:日期 年月日 -->
日期:<input type="date" /><br/>
<!-- datetime 大多数浏览器是不支持的datetime 用于屏幕阅读器 -->
日期时间:<input type="datetime" /><br/>
<!-- datetime-local 时间日期 -->
日期时间:<input type="datetime-local" /><br/>
<input type="submit" />
</form>
结果如下：
2.新增的datalist标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<!-- 原本的写法 -->
<select name="" id="">
<option value="kf">开封</option>
<option value="ly">洛阳</option>
<option value="zmd">驻马店</option>
<option value="xy">信阳</option>
</select>
<!-- 新增的写法 -->
<!-- 建立输入框与datalist的关联 list="datalist的id" -->
<input type="text" list="address">
<datalist id="address">
<option value="kf">开封</option>
<option value="ly">洛阳</option>
<option value="zmd">驻马店</option>
<option value="xy">信阳</option>
</datalist>
</form>
</body>
</html>
普通写法结果如下：
新增的写法结果如下：
3.新增的表单元素
（1）keygen：在表单提交的时候 ，私钥存储到本地 ，公钥发送到服务器 ，IE和safari浏览器不支持。
（2）output：显示输出信息 ，语义更强了一些 ，类似于span标签，没有真正含义
代码示例如下：
<form action="">
<!-- 传统的 -->
用户名：<input type="text"></br>
密码：<input type="password"></br>
加密：<keygen></keygen>
<!-- keygen 作用：在表单提交的时候
私钥存储到本地 公钥发送到服务器
除了IE和safari 了解
-->
<input type="submit" value="提交"></br>
<!-- 显示输出信息 语义更强了一些 类似于span 没有真正含义 -->
<output>总金额：￥1000元</output>
4.新增的表单事件
（1）oninput 监听指定元素内容的改变 只要内容变了(添加内容,删除内容) 就会触发该事件。
（2）oninvalid 当验证不通过的时候触发。
代码示例如下：
<form action="">
<!-- 传统的 -->
用户名：<input type="text" id="user"><br>
<!-- pattern匹配 在里面可以写一些正则表达式 -->
电话：<input type="tel" id="phone" pattern="^1\d{10}$"><br>
<input type="submit" value="提交"/>
</form>
<script>
// oninput 监听指定元素内容的改变 只要内容变了(添加内容,删除内容) 就会触发该事件
document.getElementById("user").oninput=function(){
console.log("oninput:",this.value);
}
// oninvalid 当验证不通过的时候触发
document.getElementById("phone").oninvalid=function(){
// 设置默认的提示信息
this.setCustomValidity("请输入合法的11位手机号")
}
</script>
结果如下：
5.进度条
代码示例如下：
<!-- progress 进度条 max表示最大值 value表示当前进度 -->
<progress max="100" value="20"></progress><br>
<!--
meter 度量器
max 表示最大值
min 表示最小值
high 表示当前较高的值
low 表示当前较低的值
value 当前值
当value值在high和low之间时 度量器进度为绿色
-->
<meter max="100" min="0" high="80" low="40" value="30"></meter><br>
<meter max="100" min="0" high="80" low="40" value="60"></meter><br>
<meter max="100" min="0" high="80" low="40" value="90"></meter><br>
结果如下：
四、html5音视频
（1）audio
src:音频播放的引入路径
controls：音频播放的控制面板
autoplay：自动播放
loop：循环播放
（2）video
src ：视频的引入路径
controls ：视频播放的控制面板
autoplay ：自动播放
loop ： 循环播放
poster ：指定视频没有完全下载完毕 或者没有点击播放前显示的封装图
width
height
视频始终会保持原来的宽高比 意味着如果你同时设置宽和高
并不能真正的将视频的画面大小设置为指定的大小
<audio src="mp3/aa.mp3" controls loop></audio>
<video src="./mp3/mp4.mp4" poster="./fm.png" controls loop></video>
加载完毕还未播放时结果如下：
此时视频显示的图片是设置的poster属性图片
点击播放音视频结果如下：
html5各浏览器支持的视频格式：
代码示例如下：
<!--
html5各个浏览器支持的格式不同
所有有了source
-->
<video controls>
<source src="./mp3/flv.flv"></source>
<source src="./mp3/mp4.mp4"></source>
</video>
以我使用的谷歌浏览器为例，结果如下，仅有一个视频文件显示：
五、video小案例
代码示例如下：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>用html5做一个简易的视频播放器</title>
</head>
<body>
<div>
<button>播放</button>
<button>大</button>
<button>小</button>
<button>快进</button>
<button>快退</button>
<button>加速</button>
<button>减速</button>
<button>正常速度</button>
<button>静音</button>
<button>放大声音</button>
<button>减小声音</button>
</div>
<video controls>
<source src="movies/ZachKing.webm" type="video/webm" />
<source src="movies/movie.mp4" type="video/mp4">
</video>
<script>
window.onload=function(){
var button=document.getElementsByTagName("button")
var videos=document.getElementsByTagName("video")[0]
// 1.视频播放
button[0].onclick=function(){
// videos.play //play就是视频播放的意思
// videos.paused //paused就是视频暂停的意思
if(videos.paused){
videos.play()
this.innerText="暂停"
}else{
videos.pause()
this.innerText="播放"
}
}
// 2.改变窗口大小
button[1].onclick=function(){
videos.width="1000"
}
button[2].onclick=function(){
videos.width="600"
}
// 3.快进
button[3].onclick=function(){
console.log(videos.duration);//得到视频的总时长
console.log(videos.currentTime);//得到当前视频播放到哪一帧
// 如果快进 超过了视频的总时长，停留到视频的总时长
if(videos.currentTime+5>videos.duration){
videos.currentTime=videos.duration
}else{
videos.currentTime+=5
}
}
// 4.快退
button[4].onclick=function(){
if(videos.currentTime<5){
videos.currentTime=0;//快退到了尽头
videos.pause()
if(videos.paused){
button[0].innerText="播放"
}else{
button[0].innerText="暂停"
}
}else{
videos.currentTime-=5
}
}
// 5.加速
button[5].onclick=function(){
console.log(videos.playbackRate);//播放的速率
if(videos.playbackRate<=2){
videos.playbackRate+=0.1;
}
}
// 6.减速
button[6].onclick=function(){
if(videos.playbackRate>0.1){
videos.playbackRate-=0.1
}
}
// 7.恢复正常速度
button[7].onclick=function(){
videos.playbackRate=1;
}
// 8.静音
button[8].onclick=function(){
videos.muted=true;//muted 控制静音
}
// 9.放大声音
button[9].onclick=function(){
console.log(videos.volume);
videos.muted=false;
if( videos.volume<0.9){
videos.volume +=0.1
}else{
videos.volume = 1
}
}
// 10.减小声音
button[10].onclick=function(){
if(videos.volume<0.1){
videos.volume =0
}else{
videos.volume -=0.1
}
}
}
</script>
</body>
</html>
结果如下：
内容总结
以上是互联网集市为您收集整理的HTML5新增的标签、表单中新增的属性、元素、事件及音视频标签的使用全部内容，希望文章能够帮你解决HTML5新增的标签、表单中新增的属性、元素、事件及音视频标签的使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。