十一、HTML5新增的元素、HTML5新增的其他标签、HTML5兼容、HTML5新增的多媒体标签、HTML5新增的表单元素、HTML5新增的表单属性
一、HTML5新增的元素
1、HTML5新增的结构标签
（1）header标签
网页的头部标签、页眉标签，可以放logo、搜索框等
<header>header>
（2）footer标签
网页的底部标签、页脚标签，可以放版权信息、相关阅读链接等
<footer>footer>
（3）nav标签
导航标签，可以放导航条、侧边导航、页内导航等
<nav>nav>
（4）article标签
文档中独立的内容，例如：一篇文章、一个论文、一段用户评价或者一个独立的插件等
<article>article>
（5）section标签
表示页面中内容的分区、文章中的章节，里面一般由标题和内容构成
<section>section>
（6）aside标签
侧边栏，一般是跟页面主体或者文章相关的附属信息，例如：主要内容相关的引用、侧边栏、广告、链接组等
<aside>aside>
（7）hgroup标签
标签组，给多个标题进行分组，一般会和h1-h6来配合一起使用
<hgroup>hgroup>
2、HTML5新增的其他标签
（1）figure标签
定义独立的流内容（图像、图表、照片或者代码等等）
figure标签自带间距的
一组figure中只能出现一对figcaption
<figure>
<img src="./images/pikachen.jpg" alt="皮卡晨的照片">
<figcaption>这是一张美女图figcaption>
figure>
<figure class="img2">
<img src="./images/xian.jpg" alt="">
<img src="./images/xian2.jpg" alt="">
<img src="./images/xian3.jpg" alt="">
<figcaption>这是一组西安的美景图figcaption>
figure>
（2）mark标签
记号标签，默认放置在mark标签中的文字会自带一个黄色的背景
<mark>mark>
（3）time标签
时间标签，默认在页面中没有特殊的效果
<p>今天是<time>星期一time>p>
<p>现在快<time>10:30time>了,还有一小时就快吃饭了p>
<p>今天是<time datetime="2020-11-30">星期一time>p>
<p>现在快<time datetime="2020-11-30 10:30">10:30time>了,还有一小时就快吃饭了p>
二、HTML5兼容
兼容性： ie9+及标准浏览器最新版是支持的
如果在ie6，7，8下要去使用h5新增标签需要进行兼容处理
HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：
- 使用javascript新增元素的方法解决
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
header {
display: block;
width: 500px;
height: 100px;
background-color: cadetblue;
}
footer {
display: block;
height: 100px;
background-color: chartreuse;
}
style>
head>
<body>
<div id="wrap1" class="wrap">
div>
<script>
// js创建元素
var header = document.createElement('header');
// 将创建好的元素追加到wrap盒子中去
// 获取wrap这个元素 通过id获取元素 document.getElemntById('id名称')
var wrap1 = document.getElementById('wrap1');
// 给header标签中添加点文字内容
header.innerHTML = '头部标签';
// 将header添加到wrap1中
wrap1.appendChild(header);
// 创建一个footer标签添加到wrap中去
var footer = document.createElement('footer');
wrap1.appendChild(footer);
script>
body>
html>
- 使用谷歌提供的html5shiv.js解决兼容性问题
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="js/html5shiv.js">script>
<style>
header {
width: 500px;
height: 100px;
background-color: cadetblue;
}
footer {
height: 100px;
background-color: chartreuse;
}
style>
head>
<body>
<div id="wrap1" class="wrap">
<header>头部标签header>
<nav>导航nav>
<footer>底部footer>
div>
body>
html>
只在ie8及以下的ie版本中引入html5shiv.js插件
三、HTML5已经移除的标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UG2kFDGd-1606755627270)(c:/Users/Administrator/AppData/Local/cts/image/201130112138505.png)]
HTML5中以上标签已经被移除了，但是如果在现在的代码中见到以上标签不需要做特殊处理或者修改，因为H5是向前兼容的，以上标签不会报错或者显示异常，但是自己在写的时候不建议使用以上标签了，不符合W3C规范
四、HTML5新增的多媒体标签
1、音频标签
（1）语法
<audio src="" controls>audio>
（2）常见标签属性
| 属性 | 描述 |
|---|---|
| src属性 | 规定要播放的音频/视频的 URL |
| controls属性 | 规定浏览器应该为音频/视频提供播放控件 |
| loop属性 | 规定当音频/视频结束后将重新开始播放 |
| muted属性 | 规定要播放的音频/视频为静音 |
<audio src="./media/hanmai.mp3" controls="controls" loop muted>audio>
（3）HTML5支持的音频格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWfogJc0-1606755627273)(c:/Users/Administrator/AppData/Local/cts/image/201130113515189.png)]
ie9+及标准浏览器最新版是支持音频标签的
（4）搭配source标签
<audio controls>
<source src="./media/hanmai.mp3" type="audio/mpeg">
<source src="./media/biubiubiu.ogg" type="audio/ogg">
<source src="./media/nada.wav" type="audio/wav">
您的浏览器不支持audio标签，请升级一下~
audio>
2、视频标签
（1）语法
<video src="" controls>video>
（2）常见标签属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FIJZh2t0-1606755627275)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201130134252677.png)]
<video src="./media/movie.mp4" controls loop muted width="600" poster="./images/pikachen.jpg">video>
（3）HTML5支持的视频格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDEovvBU-1606755627278)(c:/Users/Administrator/AppData/Local/cts/image/201130134843835.png)]
兼容性： ie9+及标准浏览器最新版下是支持的
（4）搭配source标签
<video controls>
<source src="./media/PPAP.webm" type="video/webm">
<source src="./media/movie.mp4" type="video/mp4">
<source src="./media/butterfly.ogg" type="video/ogg">
您的浏览器不支持播放此视频，可以升级一下~
video>
3、source标签
定义媒介资源
<source src="" type="">
src属性 定义音频或者视频的地址
type属性 定义音频或者视频的MIME类型
五、HTML5新增的表单元素
回顾：html中的表单元素有：input标签（文本框text、密码框password、单选radio多选checkbox、提交按钮submit、重置按钮reset、普通按钮button、图片形式的提交按钮image、文件上传file、隐藏域hidden）、下拉列表、多行文本域（textarea）
1、input类型新增
（1）url
用于包含url地址的输入框，在表单提交的时候，会自动验证url地址
<input type="url">
（2）email
用于包含邮箱地址的输入框，在提交表单时，会自动验证email的值
<input type="email">
（3）search
用于搜索框
<input type="search">
（4）tel
用于包含电话号码的输入框
<input type="tel">
（5）number
用于包含数值的输入框
<input type="number">
（6）range
用于包含一定范围内数值的输入域，range显示为滑动条
<input type="range">
（7）color
用于选取颜色
<input type="color">
（8）datetime
用于手动输入一个日期时间
<input type="datetime">
（9）datetime-local
用于选择一个日期和时间
<input type="datetime-local">
（10）date
用于从一个日期选择器选择一个日期
<input type="date">
（11）week
用于选择周和年
<input type="week">
（12）month
用于选择月和年
<input type="month">
（13）time
用于选择一个时间
<input type="time">
2、选项列表
<datalist>
<option>选项1option>
<option>选项2option>
<option>选项3option>
datalist>
选项列表需要跟input一起配合使用
<div>
<input type="text" list="city">
<datalist id="city">
<option value="上海">上海option>
<option value="杭州">杭州option>
<option value="北京">北京option>
datalist>
div>
六、HTML5新增的表单属性
1、max、min、step
max 属性规定输入域所允许的最大值
min 属性规定输入域所允许的最小值
step 属性为输入域规定合法的数字间隔
<input type="number" max="20" min="5" step="3">
<input type="range" max="20" min="5" step="5" value="5">
2、placeholder属性
描述输入域所期待的值
<div>
用户名:<input type="text" name="username" value="请输入用户名">
div>
<div>
密码： <input type="password" name="userpass" placeholder="请输入密码">
div>
3、autofocus属性
自动获取焦点
<div>
用户名:<input type="text" name="username" value="请输入用户名" autofocus>
div>
input[type="text"] {
color: aqua;
/* 去掉描边 */
/* outline: none; */
/* outline: 0; */
/* 修改描边颜色 */
outline: 1px dotted red;
}
4、autocomplete属性
自动完成
- on 打开
- off 关闭
<div>
用户名:<input type="text" name="username" value="请输入用户名" autocomplete="off">
div>
5、form属性
规定输入域所属的表单
6、required 属性
规定必须在提交之前填写输入域
用户名:<input type="text" name="username" autofocus autocomplete="off" required>
7、pattern属性
规定用于验证 input 域的模式
<input type="text" pattern="[0-9]">
8、multiple属性
规定输入域中可选择多个值
<input type="file" multiple>
9、list属性
实现数据列表的下拉效果