HTML5 —新增标签

一、html5简介

1. HTML5 是最新的 HTML 标准。
2. HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
3. HTML5 拥有新的语义、图形以及多媒体元素。
4. HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
5. HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

二、新增语义化标签

1、语义化标签的好处：

1. 去掉或样式丢失的时候能让页面呈现清晰的结构
2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
3. 便于团队开发和维护,遵循W3C标准,可以减少差异化

2、块元素：

标签	描述
<header></header>	定义文档或节的页眉。
<nav></nav>	导航栏
<section></section>	定义文档中的节
<main></main>	定义文档的主内容。
<aside></aside>	定义页面内容之外的内容，侧边栏。
<article></article>	定义文档内的文章，和段落p类似。
<figure>    <figcaption>独立流内容标题 </figcaption> </figure>	<figure>定义自包含内容，比如图示、图表、照片、代码清单等等。 <figcaption>定义 <figure> 元素的标题
<details>  <summary>概要，标题</summary>  内容 <details>	<details>定义用户可查看或隐藏的额外细节。 定义 <details> 元素的可见标题。
<footer></footer>	定义文档或节的页脚

 用法示例：

  <!-- 都是块元素 ，用法和div类似-->
    <header>头</header>
    <nav>导航</nav>
    <main>
        对文档来说是唯一的，其他元素不能包该元素，一个文档只能出现一次，只能放在body里面
        <header>主题头</header>
        <footer>主题脚部</footer>
    </main>
    <aside>侧边栏</aside>
    <section>节</section>
    <article>和段落p类似，文章 段落</article>
    <!-- 定义文章的节，小块 -->
    <footer>
        <header>底部头部</header>
        脚注
    </footer>

<!-- 块元素 -->
    <details>
        <summary>摘要</summary>
        详情,概要,不定义默认显示为详情,可以用summary定义
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel tenetur necessitatibus aspernatur maiores alias
        assumenda quia quam odio commodi eum fugiat, placeat, dicta consectetur beatae quo iure minima porro. Error?
    </details>

    <figure>
        <p> 规定独立的流内容（图片、图像、照片、代码等等）</p>
        <img src="1-banner1.jpg" alt="">
        <figcaption>文字说明 对主题内容的补充说明</figcaption>
    </figure>

3、新增行内块元素

• 进度条 progress：

进度条：
<progress value="50" max="100">
        进度条,不显示证明浏览器不支持 ，不给进度则一直左右动，浏览器不支持时显示此行文字。
        <!--value代表进度值,max表示最大值-->
</progress

•  度量衡 meter

 

 度量衡：
    <meter value="90" min="1" max="100" low="60" high="80">
        浏览器不支持时显示此行文字
    </meter>
    <!-- 磁盘等使用的百分比 
        low和height表示到一定程度变色
        此行代码表示高于60低于80变黄,高于80的变红
        一般很少用 -->

 

•  时间 time

   <p>我们每天早上<time>9：00上课</time></p>
    <!-- 告诉浏览器这是个时间,搜索引擎会生成更智能的搜索结果，例如手机事务提醒，就类似该原理 -->

 

•  标记 mark

 <section>
        今年的<time datetime="2022-2-14">情人节</time>是<mark>一个人</mark>过 
        mark标记，使文字背景变色
  </section>

 三、新增表单控件

1、数据列表

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

<input type="" list="id">
<datalist id="id值“
    <option value="值">文本</option>
......
</datalist>

   <input type="text" list="car">
    <datalist id="shuguo">
        <!-- value可以删掉不写，但是不能为空，带value值，输入框中出现的就是value值 -->
        <!-- 此标签在IE中只支持10以上版本 -->
        <option>葡萄</option>
        <option>橘子</option>
        <option value="tao">油桃</option>
        <option value="yt">樱桃</option>
        <option value="mg">芒果</option>
        <option value="xg">西瓜</option>
    </datalist>

2、电子邮箱 

在提交表单时，会自动验证 email 域的值。

<input type="email">

  邮箱：<input type="email" name="email" autofocus required>
            <!-- autofocus表示打开自动获得焦点 -->
            <!-- required表示必填项，提交前必须填写该项 -->

3、网址

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

<input type="url">

  url:<input type="url" name="url"> 
            <!-- 必须输入网址形式 -->

4、数字

<input type="number" min="" max="" step="步长">

  年龄：<input type="number" name="age" value="18" step="2" min="1" max="120"> 
         <!-- 18岁不是从1开始的加2后的值，会被校对，所以不是有效值，可以选择不写value值 -->
         <!-- step 步长，不写默认为1，等于2的话点一下加2 -->
         <!-- 可以设置初始值value -->
         <!-- min  最小值 -->
          <!-- max  最大值 -->

5、搜索域

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

 <input type="search">

搜索域：<input type="search" name="search">

6、电话

<input type="tel">

电话：<input type="tel" name="tel" pattern="\d{11}">
       <!-- pattern 格式 模式，规定电话的格式 -->
       <!-- [0-9]  等同于 \d 数字0到9中取值 -->
       <!-- \d{11}  ，正则表达式，表示在0-9里面取11位数字 -->

7、日期控件

（1）年月日

<input type="date">

年月日：<input type="date" name="date">

（2）年月

<input type="month">

年月：<input type="month" name="month"> 

（3）年周

<input type="week">

年周：<input type="week" name="week">

（4）时间

<input type="time">

时分：<input type="time" name="time">

（5）UTC年月日时分

<input type="datetime">

 utc时间:<input type="datetime" name="datetime">
            <!-- 国际协调时 国内浏览器基本都不支持，作为了解-->

（6）本地年月份时分

 <input type="datetime-local">

 本地时间:<input type="datetime-local" name="datetime-local">
            <!-- 本地时间-->

8、其他

（1）滑动条

<input type="range" min="" max="' step="">

滑动条：<input type="range" name="rang" min="0" max="10" value="2" step="2">
            <!-- 此标签在IE中只支持10以上版本 -->
            <!-- step规定一下滑动多少 -->

（2）拾色器

<input type="color">

 颜色：<input type="color" name="color" value="#fF0000">
            <!-- 规定颜色只能用全写的16进制，拾色器 -->
            <!-- IE不显示颜色，兼容性很差 -->

四、音频和视频

        Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。

1、音频

<audio src="音频路径"></audio>

  <audio src="song.mp3" controls loop>您的浏览器不支持此标签</audio>
    <!-- controls="controls"向用户展示控件，不加默认没有 -->
    <!-- loop单曲循环，视频同样支持 -->

2、视频

  <video src="视频路径"></video>

  <video src="explore_promo.mp4" 
    controls="controls" 
    autoplay 
    muted
    poster="1-banner1.jpg">您的浏览器不支持此标签</video>
    <!-- poster=""给视频加封面 -->
    <!-- autoplay视频加载结束后立马播放 -->
    <!-- muted 视频/音频静音，视频不自动播放，因为有声音，怕你社死，关闭声音，就会自动播放，十分银杏化 -->

解决兼容性问题：

 <audio >
        <source src="song.mp3" type="audio/mp3"> 
        <!-- 为了兼容不同的音频格式，视频操作类似 -->
        <source src="song.ogg" type="audio/ogg"> 
    </audio>