HTML5

介绍：html5是第五代的html标签语言，相比于html其他版本的语言有新增了很多新的标签，同时html结构也变得更加的清晰和简单。

一、七大块元素，进行大局的布局

header	头部块
nav	导航栏块
section	中心内容块
arcticle	段落块
aside	侧边块
footer	脚注块
main	主要块

注意：这些块元素和div性质是一样的，没有样式，只是布局起来更清晰

其中，main块不能做子元素，可以做父元素

二、html5里面新增的表单元素

1.下拉列表

注意：input里面的list的值一定要跟datalist里面id的值一样，否者实现不了

		<form action="">
			<!-- 1.list设置下拉列表 -->
			<!-- list的值和下面id的值要一致 -->
			汽车种类：
			<input type="text" list="car">
			<datalist id="car">
				<!-- value可以不写，但写了value不能为空 -->
				<option value="起亚">qiya</option>
				<option value="宝骏">宝骏</option>
				<option value="宝安">宝安</option>
				<option value="大众">大众</option>
			</datalist>

        运行截图：

2.输入域的五大新增标签

        <input type="值"；>

email	邮箱
url	网络链接
number	数字域
tel	电话
search	搜索框

 运行截图：

 

其中关于数字框有很多小细节的标签

step	一次增加5个数
pattern="\d{11}"	只能输入11位数字，从0到9中选出的数字
pattern=" pattern="\d{17}(\d|x|X)"	输入17位数字，然后最后一位在数字和x中选择

实例：

<form action="">
			
			
			<p>数字<input type="number" step="5" min="10" max="40" ></p>
			<p>电话<input type="tel" pattern=" pattern="\d{11}"></p>
			<p>身份证号<input type="text" pattern=" pattern="\d{17}(\d|x|X)" ></p>
			<p><input type="submit"></p>
			
		</form>

运行截图

 

3.日期控件

<input type="值">

其中datetime为国际协调时间，浏览器好多不兼容，所以没显示出来

week	年周表
date	年月日
month	年月
datetime	utc时间
datetime-local	当地时间

运行截图：

 4.其他标签

type="range"	滑动条
type="color"	颜色

运行截图：

 四.新增进度条标签

       1.<progress></progress>

	<progress value="1" max="100" min="1">
			 不能显示
		</progress>

 运行截图：

 

     2.   <meter></meter>

meter中可以设定边界，超过60进度时颜色就会变，超过90进度又会变颜色

<meter value="91" max="100" min="1" low="60" high="90">
			不能显示
		</meter>

运行截图：

3.概要，

<details style="text-align: center;">
			
			<summary>标题</summary>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			 Ut magni ipsa iusto voluptatum tempora dolores qui eos autem
			  cum assumenda delectus magnam repellendus reiciendis iste
			   voluptate dolorem consequatur possimus fuga.
		</details>
		

 运行截图：下面的小三角可以将文字收起。

 

五，引入音频和视频

1.引入音频，其中controls="controls"的作用是将音频的控件显示出来

<audio src="" controls="controls" autoplay muted loop>音频</audio>

2. 引入视频，其中controls="controls"的作用是将音频的控件显示出来

	<video src="./video/qq.ogg" controls="controls" >

 3.作用于音频和视频的标签

autoplay	自动播放
muted	静音播放
loop	循环播放
poster	引入视频封面