文章目录

六、HTML5新增标签
- 6.1 布局标签
- - 6.1.1 常规布局标签
  - 6.1.2 控件标签
  - - 1）meter标签
    - 2）progress标签
    - 3）details标签
    - 4）dialog标签
  - 6.1.3 文本标签
  - - 1）ruby标签
    - 2）mark标签
- 6.2 表单标签
- - 6.2.1 H5新增input类型
  - 6.2.2 H5新增表单相关属性
- 6.3 多媒体标签
- - 6.3.1 video视频标签
  - - 1）video标签的属性
    - 2）video标签的其他用法
  - 6.3.2 radio音频标签

六、HTML5新增标签

6.1 布局标签

6.1.1 常规布局标签

标签	语义	元素种类
header	整个页面，或部分区域的头部	块级
footer	整个页面，或部分区域的底部	块级
nav	导航	块级
article	文章、帖子、杂志、新闻、博客、评论等。	块级
section	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。	块级
aside	侧边栏	块级
menu	定义列表或菜单	块级
small	定义一小段文本	行内

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

<hr>

<article>
    　　<h2>文章标题</h2>
    　　<p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
</article>

<hr>
<menu>
    <li>定义列表</li>
    <li>定义列表</li>
    <li>定义列表</li>
</menu>

<hr>
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
<hr>
</body>
</html>

6.1.2 控件标签

1）meter标签

meter标签是一个行内块标签，用于定义度量衡；

meter标签的属性：

属性	值	描述
max	数值	规定最大值
min	数值	规定最小值
value	数值	规定当前值
high	数值	规定高值
low	数值	规定低值
optimum	数值	规定最优值

1）只设置min、max、value属性时,不管value值是多少,度量条的颜色始终是绿色

2）设置了low、high属性时
- 1）当value值处于low(含)与high(含)之间时,度量条的颜色为绿色
- 2）当value值不处于low与high之间时(小于log或大于high),度量条颜色为黄色

3）设置了low、high、optimum属性时,首先需要看optimum所处在的区间，例如optimum="90"处于80~100区间，那么：
- 1）value值处于80(含)~100(含)区间则为绿色
- 2）value值处于20(含)~80(不含)区间则为黄色
- 3）value值处于0(含)~20(不含)区间则为红色

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    只设置min、max、value属性时,不管value值是多少,度量条的颜色始终是绿色
-->
<meter min="0" max="100" value="10"></meter>
<hr>
<!--
    设置了low、high属性时
        当value值处于low(含)与high(含)之间时,度量条的颜色为绿色,表示正常
        当value值不处于low与high之间时(小于log或大于high),度量条颜色为黄色,表示警告
-->
<meter min="0" max="100" value="80" low="20" high="80"></meter>
<hr>
<!--
    设置了low、high、optimum属性时,首先需要看optimum所处在的区间
        例如optimum="90"处于80~100区间,那么:
            1. value值处于80(含)~100(含)区间则为绿色
            2. value值处于20(含)~80(不含)区间则为黄色
            3. value值处于0(含)~20(不含)区间则为红色
-->
<meter min="0" max="100" value="1" low="20" high="80" optimum="90"></meter>
</body>
</html>

2）progress标签

progress标签用于显示某个任务完成的进度的指示器，一般用于表示进度条，属于行内块标签；

属性	值	描述
max	数值	规定目标值。
value	数值	规定当前值。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<progress value="80" max="100"></progress>
</body>
</html>

3）details标签

details标签用于描述文档或文档某个部分的细节，可以通过其open属性来控制details标签内容的折叠。属于块级标签；
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<details>
    <summary>戳我！！</summary>
    <p>精彩内容即将呈现</p>
</details>

<details open>
    <summary>戳我！！</summary>
    <p>精彩内容即将呈现</p>
</details>
</body>
</html>

4）dialog标签

dialog标签用于描述文档或文档某个部分的细节，可通过open属性来控制其显示与隐藏；属于块级标签；
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dialog open id="window">
    <h4>hello</h4>
    <p>xxxxxx</p>
</dialog>

<button id="btn">点击</button>

<!--js代码,后续再学,只看效果-->
<script>
    document.getElementById("btn").onclick = function () {
        if (document.getElementById("window").getAttribute("open") == 'open') {
            document.getElementById("window").removeAttribute("open")
        } else {
            document.getElementById("window").setAttribute("open","open")
        }
    }
</script>
</body>
</html>

6.1.3 文本标签

1）ruby标签

ruby标签用于文本注音，搭配rt标签使用；两个标签都是行内元素。
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<details>
    <summary>查看生僻字</summary>
    <ruby>
        <!--span标签中写文字-->
        <span>犇 猋 骉 麤</span>
        <!--rt标签中写注音-->
        <rt>bēn biāo biāo cū</rt>
    </ruby>
</details>

</body>
</html>

2）mark标签

mark标签用于定义带有记号的文本；属于行内元素。
【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<mark>HTML</mark>的全称为<mark>超文本标记语言</mark>，是一种<mark>标记语言</mark>。
<p></p>
</body>
</html>

6.2 表单标签

6.2.1 H5新增input类型

在H5推出后，对input的type做了许多丰富，如下：

属性名	功能
email	邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url	类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number	数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search	搜索类型的输入框，表单提交时不会验证格式。
tel	电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range	范围选择框，默认值为 50 ，表单提交时不会验证格式。
color	颜色选择框，默认值为黑色，表单提交时不会验证格式。
date	日期选择框，默认值为空，表单提交时不会验证格式。
month	月份选择框，默认值为空，表单提交时不会验证格式。
week	周选择框，默认值为空，表单提交时不会验证格式。
time	时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local	日期+时间选择框，默认值为空，表单提交时不会验证格式。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/" method="post">
    <!--输入的值必须符合邮箱格式 xxx@xx.xx -->
    email: <input type="email" name="email">
    <hr>
    <!--输入的值必须符合url格式 xxx://xxx.xx.xx-->
    url: <input type="url" name="url">
    <hr>
    number: <input type="number" name="number">
    <hr>
    search: <input type="search" name="search">
    <hr>
    tel: <input type="tel" name="tel">
    <hr>
    <!--
        min: range框的最小值
        max: range框的最大值
    -->
    range: <input type="range" name="range" min="10" max="100">
    <hr>
    color: <input type="color" name="color">
    <hr>
    month: <input type="month" name="month">
    <hr>
    week: <input type="week" name="week">
    <hr>
    date: <input type="date" name="date">
    <hr>
    time: <input type="time" name="time">
    <hr>
    datetime: <input type="datetime-local" name="datetime">
    <hr>
    <input type="submit">

</form>
</body>
</html>

案例效果：

打开F12控制台，点击提交，查看提交数据的详情：

6.2.2 H5新增表单相关属性

1）控件新增属性

2）新增表单相关属性：

属性名	用法	描述
novalidate		表单提交时不再进行验证

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- novalidate: 提交时不对表单进行校验-->
<form action="/" method="post" novalidate>
    用户名: <input type="text" name="username" placeholder="请输入用户名" required accesskey="u" >
    <hr>
    密码: <input type="text" name="password" placeholder="请输入密码" required accesskey="p" autofocus>
    <hr>
    邮箱: <input type="email" name="email" placeholder="请输入邮箱" >
    <hr>
    选择文件(单个): <input type="file" name="file">
    <hr>
    选择文件(多个): <input type="file" name="files" multiple>
    <hr>
    城市:
    <input list="cities" name="cities">
    <datalist id="cities" >
        <option value="NC">南昌</option>
        <option value="NN">南宁</option>
        <option value="NJ">南京</option>
        <option value="BJ">北京</option>
        <option value="XC">西昌</option>
    </datalist>
    <hr>
    <input type="submit">
</form>
</body>
</html>

打开F12控制台，点击提交，查看提交数据的详情：

6.3 多媒体标签

6.3.1 video视频标签

1）video标签的属性

video 标签用于定义视频，是双标签。

video标签的属性如下：

属性	描述	使用示例
src	视频的URL地址
width	视频控件的宽度，宽高必须等比例设置
height	视频控件的高度
controls	显示视频控件的其他功能，如播放、进度条、音量大小、全屏化等功能
muted	视频静音

1）none：不预加载视频
2）metadata：预先加载视频的元数据，如视频长度
3）auto：让浏览器自动选择（根据网速等综合情况来选择加载的长短）
Tips：每个浏览器的默认值都不相同，即使规范建议设置为 metadata | |
| disablepictureinpicture | 禁用视频"画中画"功能 | |
| controlslist | 禁用视频控件默认的一些功能，即使有些浏览器并不会显示这么全的功能
1）nodownload：不要视频下载按钮
2）nofullscreen：不要全屏播放按钮
3）noremoteplayback：不要远程回放按钮
4）noplaybackrate：不要播放速度按钮
Tips：如果要一次性禁用多个视频控件用","隔开，但有些浏览器不支持一次性禁用多个视频控件； | |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>只有封面,其他什么都没有</h3>
<video src="video/七里香.mp4" width="400"></video>
<hr>
<h3>显示了播放、进度条、全屏化等控制按钮</h3>
<video src="video/七里香.mp4" width="400" controls></video>
<hr>
<h3>自动播放视频</h3>
<video src="video/七里香.mp4" width="400" controls muted autoplay></video>
<hr>
<h3>视频封面</h3>
<video src="video/七里香.mp4" width="400" poster="img/1.png" controls preload="metadata"></video>
<h3>禁止画中画</h3>
<video src="video/七里香.mp4" width="400" controls preload="metadata" disablepictureinpicture></video>
<h3>设置video控件列表-禁用全屏</h3>
<video src="video/七里香.mp4" width="400" controls preload="metadata" controlslist="nofullscreen"></video>
</body>
</html>

2）video标签的其他用法

视频格式有非常多，但我们并不能保证所有的视频格式浏览器都能够正常解析，因此video标签允许我们有多个"备选方案"；
【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<video controls preload="metadata">
    <source src="video/半城烟沙.mkv">
    <source src="video/七里香.MP4">
    <p>对不起,您的浏览器暂时不支持视频播放！请下载最新浏览器</p>
</video>

</body>
</html>

6.3.2 radio音频标签

radio 标签用于定义音频，是双标签。

radio标签的属性如下：

属性	描述	使用示例
src	音频的URL地址
width	音频控件的宽度，默认为300px
height	音频控件的高度，默认为30px
controls	显示音频控件的其他功能，如播放、进度条、音量大小、播放速度等功能
muted	音频静音

1）none：不预加载音频
2）metadata：预先加载视频的元数据，如视频长度
3）auto：让浏览器自动选择（根据网速等综合情况来选择加载的长短）
Tips：每个浏览器的默认值都不相同，即使规范建议设置为 metadata | |

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--
    src: 音频的地址
    controls: 显示音频控件
    preload: 音频预加载
    loop: 循环播放
-->
<audio src="./audio/LettingGo.MP3" controls preload="metadata" loop></audio>
<hr>

<audio  controls preload="metadata" >
    <source src="./audio/红色高跟鞋.MP3">
    <source src="./audio/LettingGo.MP3">
    <p>对不起,您的浏览器版本过低,请升级您的浏览器</p>
</audio>
</body>
</html>