HTML5新特性

HTML5 新增的特性如下：

新的语义标签，比如 header、nav、section、article、footer。
新的表单元素，比如 calendar、date、time、email、url、search。
用于绘画的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
对本地离线存储的更好支持。
地理位置、拖曳、摄像头等 API。

知识点

基本语义化标签
多媒体标签
HTML5 新属性

一、基本语义化标签

语义化标签就是把 HTML 文档中的元素划分到不同区域，每个区域有自己的含义。

在 HTML5 中，提供了如下图所示的语义化标签，让我们可以更直观地看到页面的结构。

图片描述

标签说明：

header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。

二、多媒体标签

多媒体标签就是用于在页面中嵌入音频和视频的标签，主要有以下两个标签：

audio 标签
video 标签

1.audio 标签

在 HTML5 中，使用 audio 标签来播放声音文件或者音频流，该标签支持 Ogg、MP3、WAV 等音频格式。

其使用格式如下：

<audio src="URL" controls></audio>

参数说明：

src 属性用于指定要播放的声音文件。
controls 是 controls="controls" 简写形式，用于提供播放、暂停和音量控件。

除了上面两种属性，audio 标签还有以下属性可用：

autoplay 属性：音频自动播放。
loop 属性：音频自动重复播放。
preload 属性：用来缓冲 audio 标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata （缓冲文件的元数据）。

2.video 标签

在 HTML 中，提供了 video 标签向文档中嵌入媒体播放器。

语法格式如下所示：

<video controls>
  <source src="URL" />
</video>

三、HTML5 新属性

1.新表单类型-email

email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。

使用格式如下：

<input type="email" />

2.新表单类型-url

url 类型是专门用来输入网址的。

使用格式如下：

<input type="url" />

3.新表单类型-number

number 类型用于数字的输入。

number 类型表单有以下属性。

属性	意义
max	输入框允许的最大值。
min	输入框允许的最小值。
step	合法的数字间隔，例如 step=2，则合法为：2、4、6、8。
value	默认值。

4.新表单类型-range

range 类型用于包含一定范围内数值的输入。

其使用格式为：

<input type="range" />

5.新表单类型-date

date 是用来选取年、月、日的类型。

其使用格式为：

<input type="date" />

datetime-local 是用来选取年、月、日和本地时间。

其使用格式为：

<input type="datetime-local" />

6.新表单类型-search

search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。

使用格式如下：

<input type="search" />

7.新表单类型-color

color 类型是 input 标签提供的专门用于设置颜色的文本框。通过单击文本框可以打开一个调色板，用户可以在面板中选择需要的颜色。不同的操作系统打开的拾色面板也不相同。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      color: <input type="color" />
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

8.新属性-form

HTML5 中 input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="myForm1" action="#" method="GET"></form>
    <form id="myForm2" action="#" method="POST"></form>
    提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
    <input type="submit" value="提交" form="myForm1" />
    提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
    <input type="submit" value="提交" form="myForm2" />
  </body>
</html>

9.新属性-autofocus

打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input type="text" autofocus /> <input type="submit" value="搜索" />
    </form>
  </body>
</html>

10.新属性-autocomplete

autocomplete 属性是用来规定表单是否应该启用自动完成功能。

自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。

autocomplete 属性包括两个属性值：on、off。

其语法格式为：

<form autocomplete="on"></form>

on 为默认值，意思是启用自动完成功能。

<form autocomplete="off"></form>

off 为禁用自动完成功能。

11.新属性-placeholder

placeholder 属性规定可描述输入字段预期值的提示信息，也就是说设置了该属性，它会提示用户设置的输入值。

其语法格式为：

<input placeholder="text" />