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>