HTML5（一）

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。