Web前端学习—基础篇(31)_HTML5新特性、HTML5新增标签、新增结构标签、新增多媒体标签
五、HTML5
5.1、HTML5历史
经历web1.0 -> web2.0时代
1999 出现
2004 提出
2007 被W3C接纳
2008 第一份正式草案
2014 官方推荐
2020 完成最终测试
2022 正式发布
5.2、HTML5的新特性
- 新增语义化的标签
- 新增表单元素和表单属性
- 新增网页上绘制图形的canvas元素
- 新增多媒体相关的video和audio
- 对本地离线存储的更好支持
5.3、HTML5兼容
最新版本的Chrome、Firefox、Opera、Safari支持部分HTML5特性，IE9支持某些HTML5特性.
处理兼容——IE8及更早版本浏览器兼容
-
1、使用JavaScript新增元素的方法解决兼容问题
<script> document.createElement("header"); </script> <style> header{ display: block; } </style> <header>头部</header> -
2、使用谷歌提供的html5shiv.js插件解决兼容问题
用于解决IE9及以下版本的浏览器对HTML5新增元素的不兼容问题
注意点：必须写在网页头部。<!--[if lte IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
5.4、HTML5移除标签
- applet标签：定义嵌入的applet
- font标签：文字的字体、字号、颜色
- basefont标签：文本的默认字体、字号、颜色
- big标签：大号文本
- center标签：居中文本
- s标签：加删除线的文本
- strike标签：加删除线的文本
- u标签：下划线文本
- dir标签：目录列表
- frame标签：框架集的窗口或框架
- frameset标签：框架集
- noframes标签：针对不支持框架的用户的替代内容
...
5.5、新增标签
(1)、新增结构标签
- 网页的头部区域或某个模块的头部
通常包含整个页面或一个模块的标题、logo、搜索框等
<header></header>
- 网页的底部区域或某个模块的底部
通常包含网页中的版权信息、相关链接、文档的作者信息，使用条款等
<footer></footer>
- 导航
通常包含页面中主要导航链接（传统导航、侧边栏导航、页内导航、翻页操作）
<nav></nav>
- 页面中独立、完整的内容
通常包含页面中的主体内容，可以是一篇文章，一个论坛的帖子，一段用户评论等
<article></article>
- 文章的章节
通常包含一个标题和内容组成
<section></section>
- 侧边栏
通常包含与主要内容相关的引用、侧边栏、广告、链接组等
<aside></aside>
- 标题组
通常是h1~h6的组合
<hgroup></hgroup>
- 文章中的联系信息
通常包含文章作者信息或编辑者的信息，电子邮箱，电话号码，地址等
<address></address>
自带斜体效果
(2)、其他标签
- figure标签
一个figure标签中只能有一个figcaption标签
<figure>
被主体内容引用的内容，相对独立的内容块，如：图片、图表、代码块等
<figcaption>定义figure标签的标题</figcaption>
</figure>
块级标签，figure标签自带外间距
- 带有标记的文本
页面中突出显示的内容
<mark></mark>
自带文字颜色和背景颜色，颜色可修改
- 日期时间标签
公历时间——行级标签
<time>2021-3-22</time>
<time pubdate="pubdate" datetime="2021-3-22"></time>
pubdate属性：当前内容的发布时间
datetime属性：日期时间，如果没有定义时间属性，则必须在标签之间设置日期时间
- 进度条——行块级标签
<progress max="num" min="num" value="num"></progress>
max属性 最大值
min属性 最小值
value属性 初始值
5.6、新增多媒体标签
（1）audio标签
兼容
- HTML5中新增的音频的标准方法
- IE8及更早版本的浏览器中不支持
HTML5中支持的音频格式
- ogg audio/ogg 支持浏览器Chrome、Firefox、Opera10+
- mp3 audio/mpeg 支持浏览器Chrome、Firefox、Opera10+、IE9+、Safari
- wav audio/wav 支持浏览器Chrome、Firefox、Opera、Safari
语法
<audio src="音频文件路径">您的浏览器不支持audio元素播放音频文件</audio>
常用属性
- src属性：音频文件路径
- controls属性：播放控件
- loop属性：循环播放
- muted属性：静音
source标签
链接不同格式的文件(音频和视频文件)，浏览器使用第一个可以被识别的格式
<audio controls>
<source src="videoAudio/nada.wav">
<source src="videoAudio/hanmai.mp3">
<source src="videoAudio/biubiubiu.ogg">
您的浏览器不支持audio元素，播放音频文件
</audio>
（2）video标签
兼容
- HTML5中新增的视频的标准方法
- IE8及更早版本的浏览器中不支持
HTML5中支持的视频格式
- ogg 支持浏览器Chrome、Firefox、Opera10+
- mp4--mpeg4 支持浏览器Chrome、Firefox、Opera10+、IE9+、Safari
- webM 支持浏览器Chrome、Firefox、Opera
语法：
<video src="视频文件路径">您的浏览器不支持video元素，播放视频文件</video>
常用属性
- src属性：视频文件路径
- controls属性：播放控件
- loop属性：循环播放
- muted属性：静音
- width属性、height属性 视频播放器的宽度和高度
- poster属性：预览图片
5.7、新增表单元素和表单属性
（1）新增表单的元素
- 包含URL地址（带着协议的完整路径）的输入域，在提交表单时，自动验证URL域的内容
<input type="url" name="url" placeholder="请输入URL地址">
- 包含e-mail地址的输入域，在提交表单时，自动验证email地址的值
<input type="email" name="e-mail" placeholder="请输入邮箱地址">
- 用于搜索关键字的文本输入域
<input type="search" name="text" placeholder="请输入要检索的内容">
- 用于电话号码的文本输入域，用于触屏网页开发，在电脑中无效
<input type="tel" name="telnum" placeholder="请输入电话号码">
- 用于包含数值的输入域
<input type="number" max="10" min="0" value="5" step="2">
max属性 最大值
min属性 最小值
step属性 合法的数字间隔，默认为1
当用户输入的数值不在限制范围内，会弹出相关提示信息，会阻止表单提交
- 用于数字滑动条
<input type="range" max="10" min="0" value="5" step="2">
number和range类型区别在于外观样式不同，默认值不同
range类型的min默认为0，max属性默认值为100
- 一个颜色选择器
<input type="color">
<input type="color" value="#ff0000">
- 可选下拉列表
datalist标签，可选下拉列表，需要与input标签组合使用
<input list="con">
<datalist id="con">
<option value="aaaaa">aaaaa</option>
<option value="bbb">bbb</option>
</datalist>
日期时间标签
- 选择一个年、月、日
<input type="date">
- 手动输入年、月、日、时、分（UTC时间）
1884 华盛顿 国际子午线会议 24个时区 英国 东8区 UTC+8
<input type="datetime">
- 选择一个年、月、日、时、分（无时区）
<input type="datetime-local">
- 选择一个年、月
<input type="month">
- 选择一个时间
<input type="time">
- 选择周，全年的第几周
<input type="week">
（2）新增表单属性
总结使用属性
- placeholder属性：设置文本域的提示信息
- max、min、step属性：最大值、最小值、合法数字间隔，用于包含数字的文本域中，如：input的number类型、range类型
- list属性：实现数据列表的下拉效果
autofocus属性：自动获取焦点，一个页面中只能在一个表单元素上设置
autocomplete属性：自动完成功能
autocomplete="on" 启用自动完成功能
autocomplete="off" 不采用自动完成功能
在input标签中name属性是必要的
-
required属性：提交表单时元素不能为空
-
pattern属性: 对用户输入内容进行正则验证
-
multiple属性：可以选择多个值，适用于input标签的email类型和file类型
-
form属性：规定输入域所属的表单
<form action="#" id="aa"></form>
<input form="aa" type="password" name="pwd" placeholder="请输入密码">
<form action="#">
<input type="password" name="pwd" placeholder="请输入密码">
</form>
