九、HTML5新增内容
1、结构相关标签
用来进行页面结构布局，本身无任何特殊样式，需要使用CSS进行样式设置
- article定义一个独立的内容，完整的文章
- section定义文档的章节、段落
- header文章的头部、页眉、标题
- footer文章的底部、页脚、标注
- aside定义侧边栏
- figure图片区域
- figcaption为图片区域定义标题
- nav定义导航菜单
结构标签只是表明各部分的角色，并无实际外观样式，与普通的div相同
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>标题</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>脚注</footer>
</article>
<aside>广告</aside>
<br>
<figure>
<figcaption>log标题</figcaption>
<img src="../../img/google.png" alt="">
<img src="../../img/facebook.png" alt="">
</figure>
<nav>
<ul>
<li>网页</li>
<li>咨讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
案例：
2、语义相关的标签
2.1 mark标签
标注，用来突出显示文本，默认添加黄色背景
2.2 time标签
定义日期和时间，便于搜索引擎智能查找
2.3 details和 summary标签
默认显示summary中的内容，点击后显示details中的内容
注：并不是所有的浏览器都兼容，chrome、opera支持、Firefox、IE浏览器不支持
2.4 meter标签
计数仪，表示度量
常用属性：
- max定义大值，默认为1
- min定义小值，默认为0
- value定义当前值
- high定义限定为高的值
- low定义限定为低的值
- optimum定义佳值
规则：
-
如果optimum大于high，则表示值越大越好
当value大于high时为绿色
当value在low与high之间时为黄色
当value小于low时为红色
-
如果optimum小于low，则表示值越小越好
当value小于low时为绿色
当value在low与high之间时为黄色
当value大于high时为红色
-
当optimum介于low和high之间，则表示值在low和high之间好
当value在low与high之间时显示绿色，否则显示黄色
2.5 progress标签
进度条，表示运行中的进度
常用属性：
- value定义当前值
- max定义完成的值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcom <mark>to</mark> html!
<hr>
我在<time datetime="2020年3月14日">情人节</time>有个会!
<hr>
<details>
<summary>HTML简介</summary>
<p>HTML是一门用来制作网页的标签语言</p>
<p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p>
</details>
<meter max="100" min="1" value="30"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="15"></meter>
<hr>
<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
<hr>
<!-- 上面 的为什么只有两个颜色？ 应该是 optimum 的值在high与low之间，所以颜色只有两个-->
<progress value="20" max="50"></progress>
</body>
</html>
案例：
3.表单相关
3.1 新增表单元素
新增以下type类型：
- email接收邮箱
- url接收URL
- tel接收电话号码，目前仅在移动设备上有效
- search搜索文框
- number/range接收数字/数字滑块,包含min,max,step属性
- date/month/week/time/datetime日期时间选择器，兼容性不好
- color颜色拾取
作用：
- 具有格式校验的功能
- 可以与移动设备的键盘相关联
3.2新增表单属性
form标签的属性：
- autocomplete是否启动表单的自动完成功能， 取值:on(默认)、off
- novalidate提交表单时不进行校验，默认会进行表单校验
3.3 新增表单元素的属性
新增表单元素属性：input/select/textarea等
- placeholder提示文字
- required是否必填
- autocomplete是否启用该表单元素的自动完成功能
- autofocus设置初始焦点元素
- pattern使用正则表达式（RegExp后面会讲解），进行数据校验
- list使文本元素具有下拉列表的功能，需要配合datalist和option标签一起使用
- form可以将表单元素写在form标签外面，然后通过该属性关联指定的表单
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <form action="" autocomplete="off" novalidate></form> -->
<form action="" autocomplete="on" id="myform">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
<br>
<label for="home">个人主页</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keyword">关键字</label>
<input type="serch" name="keyword" id="keyword">
<br>
<label for="num">数字</label>
<input type="number" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期</label>
<input type="month" name="birthday" id="brirthday">
<br>
<label for="color">颜色：</label>
<input type="color" name="color" id="color">
<br>
<label for="username">用户名</label>
<input type="text" name="name" id="username" placeholder="请输入用户名" required onautocomplete="off" autofocus>
<br>
<label for="age">年龄：</label>
<input type="text" name="age" id="age" pattern="\d{1,2}">
<!-- 年龄只能输入1-2位的数字 -->
<br>
<label for="city">城市</label>
<input type="text" name="city" id="city" list="cityList">
<datalist id="cityList">
<option value="1">北京</option>
<option value="2">南京</option>
<option value="3">上海</option>
<option value="4">天津</option>
</datalist>
</form>
<hr>
<input type="submit" form="myform">
</body>
</html>
案例：
4、多媒体标签
4.1audio标签
在页面中插入音频，不同的浏览器对音频格式的支持不一样
audio常用属性：
- src音频文件的来源
- controls是否显示控制面板，默认不显示
- autoplay是否自动播放，默认不自动播放
- loop是否循环播放
- muted是否静音
- preload是否预加载，取值：none不预加载、auto预加载（默认）、metadata只加载元数据 如果设置了autoplay属性，则该属性无效
可以结合source标签使用，指定多个音频文，浏览器会检测并使用第一个可用的音频文件
4.2 video标签
在页面中插入视频，不同的浏览器对视频格式的支持不一样
用法与audio标签基本相同，增加属性：
- widht/height视频播放器的宽度/高度
- poster在视频加载前显示的图片
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls loop muted preload="metadata"></audio> -->
<audio controls>
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的浏览器不支持audio标签，请更换浏览器
</audio>
<video src="../../video/volcan.mp4" controls="600px" poster="../../img/p1.jpg"></video>
</body>
</html>
案例：
61
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
