一、H5简介

1. 什么是H5?

HTML5是新一代的HTML标准，2014年10月由万维网联盟(W3C)完成标准的制定。
官网地址：
- W3C提供：www.w3.org/TR/html/ind…
- WHATWG提供: whatwg-cn.github.io/html/multip…
狭义的H5指的是新一代的HTML标准，广义上指的是整个前端。

2. H5的优势

针对javascript新增了很多可操作的接口
新增了多媒体语义化标签，可以很好地替代flash
更加注重语义化，对搜索引擎（seo）比较友好。
可移植性好，可以大量应用在移动设备上。

HTML5兼容性

支持 Chrome、Safari、Opera、Firefox等主流浏览器。

IE必须9以上版本才支持HTML5,且仅仅支持部分新特性。

二、新增的标签

1. 语义化标签

标签名	语义	单/双标签
header	整个页面的头部	双
footer	整个页面的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论	双
section	页面中的某段文字	双
aside	侧边栏	双
main	文章的主要内容	双
hgroup	包裹连续的标题，比如文章的标题、副标题的组合。	双

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>

    </style>
</head>
<body>
<!--顶部导航区-->
<header>
    <h1>Rock 学前端</h1>
</header>
<hr>
<!--主导航-->
<nav>
    <a href="#">主页</a>
    <a href="#">百度</a>
    <a href="#">购物车</a>
    <a href="#">我的</a>
</nav>
<!--主要内容区-->
<div class="main">
    <article>
        <h2>《javascript 高级教程》</h2>
        <section>
            <h3>第一种方式：</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet iusto laborum optio! A accusamus
                blanditiis
                eius et expedita, ipsam iste modi necessitatibus quas quasi quia recusandae saepe similique tempora
                temporibus?</p>
        </section>
        <h2>《javascript 高级教程》</h2>
        <section>
            <h3>第一种方式：</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet iusto laborum optio! A accusamus
                blanditiis
                eius et expedita, ipsam iste modi necessitatibus quas quasi quia recusandae saepe similique tempora
                temporibus?</p>
        </section>
    </article>
    <aside>
        <nav>
            <ul>
                <li><a href="#">个人信息</a></li>
                <li><a href="#">设置</a></li>
                <li><a href="#">退出登录</a></li>
                <li><a href="#">测试</a></li>
            </ul>
        </nav>
    </aside>
</div>
<hr>
<footer>
    <ul>
        <li><a href="#">页脚链接</a></li>
        <li><a href="#">页脚链接</a></li>
        <li><a href="#">页脚链接</a></li>
    </ul>
</footer>
</body>
</html>

2. 状态标签

2.1 meter

语义：定义已知范围的标准度量，也被称为gauge（尺度）,双标签。用于电量、磁盘容量等。

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

2.2 progress

语义：用于描述某个工程的进度。

属性	值	描述
max	数值	当前进度的最大值
value	0-max	进度的当前值


<span>手机电量</span>
<meter max="100" min="0" value="19" low="20" high="80" optimum="90"></meter>
<br>
<span>当前进度</span>
<progress max="100" value="60"></progress>

3. 列表标签

语义：用于数据列表相关的操作。

标签名	语义
datalist	用于搜索框的关键字提示, 添加一个 id ,在input框中使用list属性指向该id
details	用于展示问题和答案，对专有名词将进行解释
summary	放在details中，用于制定名词的标题

3.1 datalist

用于搜索框的关键字提示, 添加一个 id ,在input框中使用list属性指向该id


<form action="#">
    <input type="text" list="myData">
    <button>搜索</button>
</form>
<datalist id="myData">
    <option value="周杰伦">周杰伦</option>
    <option value="周冬雨">周冬雨</option>
    <option value="马冬梅">马冬梅</option>
</datalist>

3.2 details 和 summary


<details>
    <summary>
        总结
    </summary>
    <p>好好学习 天天向上</p>
</details>

运行效果：

4. 文本标签

4.1 文本标记 mark

W3c推荐用于标注搜索结果中的关键文字

4.2 文本注音 ruby 和 rt 标签


<ruby>
    <span>魑魅魍魉</span>
    <rt>chī mèi wǎng liǎng</rt>
</ruby>

运行效果

5. 表单相关的新增

5.1 palceholder

用于提示用户输入的内容

5.2 require

表示该输入位必填项

5.3 autofocus

自动获得焦点

5.4 autocomplate

可选值on off*用于记录历史记录

on 必须要浏览器开启地址和其它信息的记录的功能

不能用在密码上，也不能用在单选多选和多行输入上

5.5 pattern

用于匹配正则，值是一个正则表达式的字符串

需要加上require才能生效

多行输入不能使用

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        .container {

        }
    </style>
</head>
<body>
<div class="container">
    <form action="#">
        账号：<input type="text" name="account" placeholder="账号" autofocus required autocomplete="off">
        <!--autocomplete
            1. 可选值 on off 用于记录历史记录
            2. on必须要浏览器开启地址和其它信息的记录的功能
            3. 不能用在密码上，也不能用在单选多选和多行输入上
         -->
        <br>
        <!--autofocus会写几次会聚焦到第一个身上-->
        密码：<input
            type="password"
            name="pwd"
            placeholder="密码"
            autofocus
            required
            pattern="\w{6}"
            value="abc_12"
    >
        <!--    字母数字下划线 6 位-->
        <!--
        pattern：
            1. 用于匹配正则，值是一个正则表达式的字符串
            2. 需要加上require才能生效
        -->
        <br>
        性别：
        <input type="radio" name="gender" value="male" required>男
        <input type="radio" name="gender" value="female" required> 女
        <br>
        爱好：
        <input type="checkbox" name="hobby" value="smoke" required>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="read">看书
        <br>
        其它
        <textarea name="other" placeholder="请输入密码" required> </textarea>
        <br>
        <button>提交</button>
    </form>
</div>
</body>
</html>

6. 表单type属性新增的值

**注意：**只有同时配合required使用的时候，输入的内容为空的时候才会被阻止。

6.1 email 用于提交邮箱


<form action="#">
    <input type="email">
    <button>提交</button>
</form>

6.2 url 用于提交网址

<input type="url">
<button>提交</button>

6.3 number 用于提交数字

<input type="number" step="2" max="80" min="20">
<button>提交</button>

step = 2 只能使用 0，2，4，，6.....
max 定义输入的最大值
min定义输入的最小值

6.4 search 搜索框

搜索框：<input type="search">
<button>提交</button>

6.5 scroll bar

滚动条：<input type="range" name="range" max="10" min="0" value="3">
<button>提交</button>

6.6 拾色器

拾色器：<input type="color" name="color">
<button>提交</button>

6.7日期选择器

日期选择器：<input type="date" name="data">
<br>
月份：<input type="month" name="month">
<br>
周：<input type="week" name="week">
<br>
时间：<input type="time" name="time">
<br>
日期加时间：<input type="datetime-local" name="date-detail">
<button>提交</button>

6.8 novalidate

用法：在form 表单上加上改属性可以让表单不再进行表单验证


<form action="#" novalidate>
    <input type="text" readonly value="123">
</form>

7.新增的视频标签

controls 出现控制的按钮
loop 循环播放
muted 静音
autoplay 只有静音才能自动播放
preload 预加载
- auto：浏览器自己协调，受到网速等限制，
- none：不进行加载
- metadata：基本信息，比如总时长
poster 视频加载前显示的封面，比例最好一样
src 视频地址
type 视频格式视频格式：mp4,webm,ogg


<video
        src="./小电影.mp4"
        controls
        muted
        poster="./封面.png"
        preload="auto"
        autoplay
        width="600">
</video>

8.新增的音频标签

controls 出现控制的按钮
autoplay 自动播放
loop 循环播放
preload 预加载
- auto：浏览器自己协调，受到网速等限制，
- none：不进行加载
- metadata：基本信息，比如总时长
src 音频地址


<audio
        src="小曲.mp3"
        controls
        autoplay
        loop>
</audio>

9. 新增的全局属性

contenteditable 是否可编辑

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        .box1{
            width: 500px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="box1" contenteditable="true">Lorem ipsum dolor sit amet.</div>
</body>
</html>

可以发现输入框触发了输入功能

spellcheck 是否检查拼写,对元素的语法进行拼写检查,需要同时打开浏览器的拼写检查功能。
draggable 是否可拖动

<div class="box2 box" draggable="true" ondragend="test(event)">Lorem ipsum dolor sit amet.</div>
<script>
    function test(e) {
        console.log(e.target.innerHTML);
        console.log(e.x);
    }
</script>

hidden 是否隐藏: 直接在元素身上使用可以隐藏元素。(不占位)
data-* 存储页面的私有定制数据(私有定制的属性)

<div class="data-a"></div>
<div class="data-b"></div>
<div class="data-c"></div>

contextmenu 右键菜单显示右键菜单参考文章： www.zhihu.com/question/58…

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        #custom-menu {
            display: none;
            position: absolute;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        #custom-menu li {
            padding: 8px;
            cursor: pointer;
        }
        #custom-menu li:hover {
            background-color: #f5f5f5;
        }
        .content {
            width: 150px;
            height: 60px;
            background-color: #eee;
        }

    </style>
</head>
<body>
<div>
    <div class="content" contextmenu="custom-menu">右键点击此处</div>
    <ul id="custom-menu">
        <li>菜单项 1</li>
        <li>菜单项 2</li>
        <li>菜单项 3</li>
    </ul>
    <script>
        document.querySelector(".content").addEventListener('contextmenu', function(e) {
            // 取消默认的右键菜单
            e.preventDefault();
            // 获取自定义菜单元素
            var menu = document.querySelector('#custom-menu');
            // 设置菜单位置
            menu.style.left = e.clientX + 'px';
            menu.style.top = e.clientY + 'px';
            // 显示菜单
            menu.style.display = 'block';
        });

        document.addEventListener('click', function() {
            // 点击页面其他地方，隐藏自定义菜单
            document.querySelector('#custom-menu').style.display = 'none';
        });
    </script>
</div>
</body>
</html>

十八、H5常用的新增标签

一、H5简介

1. 什么是H5?

2. H5的优势

HTML5兼容性

二、新增的标签

1. 语义化标签

2. 状态标签

2.1 meter

2.2 progress

3. 列表标签

3.1 datalist

3.2 details 和 summary

4. 文本标签

4.1 文本标记 mark

4.2 文本注音 ruby 和 rt 标签

5. 表单相关的新增

5.1 palceholder

5.2 require

5.3 autofocus

5.4 autocomplate

5.5 pattern

6. 表单type属性新增的值

6.1 email 用于提交邮箱

6.2 url 用于提交网址

6.3 number 用于提交数字

6.4 search 搜索框

6.5 scroll bar

6.6 拾色器

6.7日期选择器

6.8 novalidate

7.新增的视频标签

8.新增的音频标签

9. 新增的全局属性