蓝桥杯Web应用开发-HTML5新特性
蓝桥杯Web应用开发-HTML5新特性
专栏持续更新中
HTML5 新增的特性如下：
• 新的语义标签，比如 header、nav、section、article、footer。
• 新的表单元素，比如 calendar、date、time、email、url、search。
• 用于绘画的 canvas 元素。
• 用于媒介回放的 video 和 audio 元素。
• 对本地离线存储的更好支持。
• 地理位置、拖曳、摄像头等 API。
知识点
基本语义化标签
多媒体标签
HTML5 新属性
多媒体标签
多媒体标签就是用于在页面中嵌入音频和视频的标签，主要有以下两个标签：
audio 标签
video 标签
audio 标签
播放声音文件或者音频流，该标签支持 Ogg、MP3、WAV 等音频格式。
使用格式：
<audio src="URL" controls>audio>
参数说明：
src 属性用于指定要播放的声音文件。
controls 是 controls=“controls” 简写形式，用于提供播放、暂停和音量控件。（不写则隐藏标签）
除了上面两种属性，audio 标签还有以下属性可用：
autoplay 属性：音频自动播放。
loop 属性：音频自动重复播放。
preload 属性：用来缓冲 audio 标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata （缓冲文件的元数据）。
source 标签
一个 audio 标签可以包含多个 source 标签，当播放器无法识别当前格式的播放源时会调用下一个 source 播放源进行播放。source 标签是用来指定多个文件，给不同的浏览器提供可支持的编码格式。
例如：
<audio>
<source src="filename.opus" />
<source src="filename.ogg" />
<source src="filename.mp3" />
audio>
新建一个 index.html 文件，在其中写入以下代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<audio controls>
<source src="snow.mp3" />
audio>
body>
html>
video 标签
向文档中嵌入媒体播放器。
属性与source相似
其他属性
muted 属性：静音播放。
poster 属性：在 video 标签中加入 poster 属性即可给视频添加封面。
语法格式如下所示：
<video controls>
<source src="URL" />
video>
案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<video poster="elena.png" controls>
<source src="video.mp4" />
video>
body>
html>
新属性
在 HTML5 中增加了很多新属性，帮助我们更加灵活地写代码，下面会给大家介绍常用的新属性。
新表单类型-email
email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入，如果输入的邮箱格式不正确，当点击提交按钮时，会提醒格式错误。
使用格式如下（注意写在form标签中）：
<input type="email" />
新建一个 index3.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
email: <input type="email" />
<input type="submit" value="提交" />
form>
body>
html>
从上面的效果我们可以看出，如果你输入的邮箱格式不正确，当你点击提交按钮时，会提醒你格式错误。
新表单类型-url
url 类型是专门用来输入网址的，如果输入的字符不是一个网址，点击提交后，会提示这个输入框需要输入一个网址。
使用格式如下：
<input type="url" />
新建一个 index4.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
url: <input type="url" />
<input type="submit" value="提交" />
form>
body>
html>
从上图可以看出，如果你输入的字符不是一个网址，点击提交后，会提示你这个输入框需要输入一个网址。
新表单类型-number
number 类型表单有以下属性：
max：输入框允许的最大值。
min：输入框允许的最小值。
step ：合法的数字间隔，例如 step=2，则合法为：2、4、6、8。
value：默认值。
例如：
<input type="number" value="5" step="2" />
解释：设置默认值为 5，步长为 2，每点 ⬆️ 一次，数字 + 2。
新建一个 index5.html 文件，页面上有个 number 类型的输入框和一个提交按钮，输入框中输入的最大值为 10。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
number: <input type="number" max="10" />
<input type="submit" value="提交" />
form>
body>
html>
新表单类型-range
range 类型用于包含一定范围内数值的滑动输入（0-100）。
其使用格式为：
<input type="range" />
新建一个 index6.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
number: <input type="range" />
<input type="submit" value="提交" />
form>
body>
html>
新表单类型-date
date 是用来选取年、月、日的类型。
其使用格式为：
<input type="date" />
datetime-local 是用来选取年、月、日和本地时间。
其使用格式为：
<input type="datetime-local" />
这里我们用 date 和 datetime-local 两个日期选择控件来做一下练习。
新建一个 index7.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
date： <input type="date" /> <br />
datetime-local：<input type="datetime-local" /> <br />
<input type="submit" value="提交" />
form>
body>
html>
新表单类型-search
search 类型的 input 标签提供用于输入搜索关键字的文本框，从外观看 search 和 text 是一样的，功能也是相近的可以输入任意的字符串。
使用格式如下：
<input type="search" />
从例子中，同学们似乎也不能从外观和功能上能发现 search 类型和 text 类型的区别。那么我们为何还要学 search 类型呢？
如果使用不同的浏览器去看，就会发现有细微的差异，比如 Chrome 浏览器给 search 类型的输入框提供了清空按钮。如果在移动端的话，虚拟键盘会根据不同类型的输入框给出不同的反应。还有就是起到语义化的作用，我们一眼能够明白这里的 input 是起到搜索的效果。
新建 index8.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
search: <input type="search" />
<input type="submit" value="提交" />
form>
body>
html>
新表单类型-color
color 类型是 input 标签提供的专门用于设置颜色的文本框。通过单击文本框可以打开一个调色板，用户可以在面板中选择需要的颜色。不同的操作系统打开的拾色面板也不相同。
使用格式如下：
<input type=" color" />
index9.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
color: <input type="color" />
<input type="submit" value="提交" />
form>
body>
html>
新属性-form
HTML5 中 input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。
使用格式：
<form id="myForm1" action="#" method="GET">form>
提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
<input type="submit" value="提交" form="myForm1" />
新建 index10.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
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>
新属性-autofocus
打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。
例如，百度搜索页面，用户的鼠标点击搜索栏会获得光标焦点，用户直接输入需要搜索的内容即可，这种设置可以很好地提高用户体检。
新建 index11.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
<input type="text" autofocus /> <input type="submit" value="搜索" />
form>
body>
html>
新属性- autocomplete
autocomplete 属性是用来规定表单是否应该启用自动完成功能。
自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。
autocomplete 属性包括两个属性值：on、off。
其语法格式为：
<form autocomplete="on">form>
on 为默认值，意思是启用自动完成功能。
<form autocomplete="off">form>
off 为禁用自动完成功能。
新建 index12.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form autocomplete="on">
您最喜欢前端技术: <input type="text" list="selectList" />
<datalist id="selectList">
<option>htmloption>
<option>cssoption>
<option>jsoption>
<option>vueoption>
datalist>
<input type="submit" />
form>
body>
html>
新属性-placeholder
placeholder 属性规定可描述输入字段预期值的提示信息，也就是说设置了该属性，它会提示用户设置的输入值。
其语法格式为：
<input placeholder="text" />
新建 index.html 文件，在其中写入以下内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<form>
<input type="text" placeholder="姓名" />
<input type="text" placeholder="性别" />
form>
body>
html>
总结
本节实验主要给大家介绍了 HTML5 中的两大块内容：语义化标签和新属性。
其中，我们讲解了用于布局的 6 个基本语义化标签，分别是：
header 标签是头部区域。
nav 标签是导航区域。
article 标签是内容区域。
section 标签是文档中部分内容区域。
aside 标签是侧边内容栏区域。
footer 标签是底部信息区域。
还讲解了与多媒体相关的语义化标签，分别是：
audio 标签：添加音频文件。
source 标签：设置多数据源播放。
最后给大家介绍了新增的表单类型和一些常见的新属性。