一、在html5中新增了很多语义化标签
比如:header、nav、main、footer、
二、HTML新增input标签的 type类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="userName"> <br>
密码:<input type="password" name="userPwd"> <br>
<!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->
邮箱:<input type="email"> <br>
<!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。 如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
电话:<input type="tel"> <br>
<!--验证只能输入合法的网址:必须包含http://,否则不通过-->
网址:<input type="url"> <br>
<!--number:只能输入数字(包含小数点),输入不了其他的字符
max:最大值
min:最小值
value:默认值-->
数量:<input type="number" value="60" max="100" min="0"> <br>
<!--search:可以提供更人性化的输入体验-->
请输入商品名称:<input type="search"> <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,所以一般用下面datetime-local那个.用于屏幕阅读器-->
日期时间:<input type="datetime"><br>
<!--datetime-local:日期和时间-->
日期时间:<input type="datetime-local"> <br>
月份:<input type="month"> <br>
星期:<input type="week">
<!--提交-->
<input type="submit">
</form>
</body>
</html>
三、HTML5的进度条
<progress标签的作用就是进度条 ,不过感觉meter度量器好像和progress进度条没什么区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--max:最大值
value:当前进度值-->
<progress max="100" value="50"></progress>
<!--度量器:衡量当前进度值-->
<!--high:规定的较高的值
low:规定的较低的值
max:最大值
min:最小值
value:当前度量值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
</body>
</html>
四、html5中的多媒体标签
1、音频audio标签
HTML5通过标签来解决音频播放的问题。
语法格式:
<audio src="路径" autoplay="autoplay" controls="true" loop=2></audio>
autoplay属性控制是否网页加载自动播放
controls 是否显示播放控件,默认不显示
loop 属性用于控制循环次数,如果值为正整数,则播放指定的次数,如果是 loop 或者是 loop = -1,则无线循环播放。
2、视频 video 标签
语法格式:
<video src="路径" controls autoplay width="300px"></video>
autoplay属性控制是否网页加载自动播放
controls 是否显示播放控件,默认不显示
loop 属性用于控制循环次数,如果值为正整数,则播放指定的次数,如果是 loop 或者是 loop = -1,则无线循环播放。
width 属性设置播放窗口宽度
height 属性设置播放窗口高度