HTML5

什么是HTML5

 拥有新的语义

提供的新元素

提供更多能有效增强网络应用的API

语义化标签

新增块元素

<header>头部</header>

 定义文档头部

<nav>导航</nav>

IE 8 以及更早的版本不支持 <nav> 标签。 

<main>主要内容</main>

 标签规定文档的主要内容

元素中的内容对于文档来说应当是唯一的

<aside>侧边栏</aside>

 IE 8 以及更早的版本不支持 <aside> 标签

可用作文章的侧栏

<section>节</section>

标签定义文档中的节（section、区段)

所有浏览器都支持 <section> 标签 

<article>文章段落</article>

<footer>底部脚注</footer>

可以在一个文档中使用多个 <footer> 元素

含有其他元素的信息 

<figure>
    <figcaption>独立流内容标签</figcaption>
独立流内容（图表、代码、图片、表格）
</figure>

 所有主流浏览器都支持 <figure> 标签

<figcaption>标题

<details>
	<summary>概要</summary>
</details>

 内联元素

进度条

<progress value="50" min="1" max="100">
    你的浏览器不支持此标签
</progress>

度量衡 

<meter value="70" min="1" max="100" low="60" high="80">
    你的浏览器不支持此标签
</meter>

 时间

<time datetime="2022-2-14 00:00:00">情人节</time>

 突出显示文本

<mark>标记</mark>

表单 

<!-- 兼容IE10及以上版本 -->
<input type="text" list="car" />
	<datalist id="car">
		<!-- value值为空内容不显示 -->
		<option value ="BMW">宝马</option>
		<option value ="LBJN">兰博基尼</option>
		<option value ="WLHG">五菱宏光</option>
		<option value ="BJ">宝骏</option>
</datalist>

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择

邮箱：<input type="email" name="email">

 email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值

url:<input type="url" name="url">

 url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

年龄：<input type="number" name="age" step="4" value="12" min="1" max="100">

step步长

min最小值

max最大值  

搜索域：<input type="search" name="search">

search 域显示为常规的文本域 

电话：<input type="tel" name="tel" pattern="\d{11}">

定义用于输入电话号码的字段 

身份证：<input type="text" name="id" pattern="\d{17}(\d|X|x)">

滑动条：<input type="range" name="range" min="1" max="10" value="2" step="2">

颜色：<input type="color" name="color" value="#ff0000">

<p>
	年月日：<input type="date" name="date">
</p>
<p>
	年月：<input type="month" name="month">
</p>
<p>
	年周：<input type="week" name="week">
</p>
<p>
	时分：<input type="time" name="time">
</p>
<p>
	utc时间：<input type="datetime" name="datetime">
</p>
<p>
	本地时间：<input type="datetime-local" name="datetime-local">
</p>

日期IE浏览器不支持 

 视频和音频

<audio src="" controls autoplay mediagroup loop> 
	当前浏览器不支持audio
</audio>
<video width="800" height="" controls poster="../img/pic2.jpg">
    当前浏览器不支持video
</video>

controls 视频/音频的控件

mediagroup 静音

autoplay 自动播放

loop 循环播放