HTML5的简介
HTML5是 HTML的第五个版本，于2008年正式发布。相比于之前的版本，HTML5 引入了许多新特性和改进，尤其是在多媒体、图形、应用程序支持和移动设备优化方面。本接下来将带您全面了解 HTML5 的新特性。
HTML5的新特性
一、语义化标签
HTML5 提供了一系列新的语义化标签，使网页结构更加清晰，同时增强了搜索引擎对内容的理解能力。语义化标签通俗的来说，就是这些标签我们一看到就能知道大概是什么用途。这些标签包括：
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
以上语义化标签组合使用时的网页结构：
使用这些语义化标签不仅有助于提升网页的可读性，还能改进搜索引擎优化（SEO），使网页更易被检索。
二、增强型表单
HTML5 有以下新的表单元素:
- <datalist>
- <keygen>
- <output>
1.datalist
<input list="browsers"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">
</datalist>option里规定了输入域的选项列表。
2.output
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form><output> 元素用于不同类型的输出，比如计算或脚本输出
HTML5 有以下新的表单属性:
<form>新属性：
- autocomplete
- novalidate
<input>新属性：
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 与 width
- list
- min 与 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
1.<form> / <input> autocomplete 属性
<form action="demo-form.php" autocomplete="on">First name:<input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br>E-mail: <input type="email" name="email" autocomplete="off"><br><input type="submit">
</form>填写并提交表单，然后重新刷新页面查看如何自动填充内容。
2.<input> autofocus 属性
First name:<input type="text" name="fname" autofocus>autofocus 属性规定在页面加载时，input将自动地获得焦点
3.<input> form 属性
<form action="demo-form.php" id="form1">First name: <input type="text" name="fname"><br><input type="submit" value="提交">
</form>Last name: <input type="text" name="lname" form="form1">位于form表单外的 input 字段通过form属性指定了所属的表单 (该 input 表单仍然属于form表单的一部分)
4.<input> height 和 width 属性
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
5.<input> min 和 max 属性
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
6.<input> multiple 属性
Select images: <input type="file" name="img" multiple>multiple 属性规定<input> 元素中可选择多个值。
7.<input> placeholder 属性
<input type="text" name="fname" placeholder="First name">placeholder 属性提供一种提示（hint），描述输入域所期待的值。
8.<input> required 属性
Username: <input type="text" name="usrname" required>required 属性规定必须在提交之前填写输入域（不能为空）。
9.<input> step 属性
<input type="number" name="points" step="3">step 属性为输入域规定合法的数字间隔。如 step="3"，则合法的数是 -3,0,3,6 等
三、多媒体支持
Video(视频)
使用：
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>视频格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
video支持的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 如果出现该属性，视频的音频输出为静音。 |
| poster | URL | 规定视频正在下载时显示的图像，直到用户点击播放按钮。 |
| preload | auto metadata none | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
Audio(音频)
使用：
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>音频格式的MIME类型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
audio支持的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |