五、H5新增内容

1.新增语义标签

1.1 什么是语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div>和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

有利于seo优化

1.2 新增了哪些语义化标签

新增语义标签	描述
header	描述了文档的头部区域
nav	用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 `<nav>` 元素中!
section	定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
article	定义独立的内容。
aside	定义页面主区域内容之外的内容（比如侧边栏）
figcaption	定义 figure 元素的标题.
figure	规定独立的流内容（图像、图表、照片、代码等等）。
footer	描述了文档的底部区域，通常用来定义页脚

figure标签

表示标签定义一段独立的流内容，

使用figcaption元素为其添加标题第一个或最后一个子元素的位置

html

<figure>
    <figcaption>这个图片的标题</figcaption>
    <img src="xiongda.png"/>
</figure>

3. Audio音频标签

可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，但是播放的格式是有限的。

可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中

3.1 语法

html

<audio src="./media/audio.mp3" controls autoplay></audio>

3.2 audio的属性

属性	值	描述
autoplay	autoplay	音频在就绪后自动播放，在 chrome 浏览器中已经禁用了 autoplay 属性
controls	controls	向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	循环播放
muted	muted	音频输出为静音
preload	auto\|metadata\|none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL路径

3.3 audio浏览器兼容

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

3.4 source标签

因为不同浏览器支持不同的格式，所以使用source标签让浏览器选择适合自己的视频格式

html

<audio controls>
    <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->                
    <source src="myAudio.mp3" type="audio/mpeg">
    <source src="myAudio.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

4. Video视频标签

4.1 video标签支持三种格式

MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg ：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

4.2 语法格式

html

<video src="./media/video.mp4" controls="controls"></video>

4.3 video的参数

属性	值	描述
autoplay	autoplay	视频在就绪后自动播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	循环播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

4.4 video浏览器兼容

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

4.5 source标签

html

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

多媒体标签总结
音频标签和视频标签使用基本一致
多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加muted属性就可以自己播放了
注意：重点记住使用方法及自动播放即可，其他属性在使用时查找对应的手册

6. 新增表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

autocomplete
novalidate

<input>新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

6.1 autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能

当在一个表单域填写并提交信息之后，再次进入该页面填写表单信息，浏览器会提供信息选项自动填充信息

注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

html

<!-- 注意 form 的 autocomplete 属性为 "on"（开），但是 e-mail 自动为“off”（关）。 -->
<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

先填写并提交

当下次填写表单时，浏览器就会有自动填充提示

6.2 novaldate

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不自动验证 form 或 input 域。

如下，当input的type属性为email时，点击提交按钮，表单应该会自动验证该input内容的格式是否正确，但表单添加了novalidate 属性，则提交时不会自动验证

html

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

6.3 autfocus

进入页面时，表单控件自动聚焦，属性是一个布尔属性。

html

First name:<input type="text" name="fname" autofocus>

6.4 form

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

html

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

6.5 list

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

html

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

6.6 min、max、step

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

html

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

html

<input type="number" name="points" step="3">

上面点击添加输入框的增加或减少，每次+3

6.7 multiple

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

multiple 属性适用于以下类型的 <input> 标签：email 和 file:

html

<input type="file" name="img" multiple>

6.8 pattern属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

**注意:**pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。

提示： 是用来全局 title属性来描述模式。

html

<form>
    数字<input type="text" pattern="d{3}" title="数量至少为三位数字"/>
    <input type="submit" />
</form>

6.9 placeholder

描述输入域所期待的值

html

<input type="text" placeholder="请输入姓名">

6.9.1 修改placeholder颜色

html

<style>
    input::-webkit-input-placeholder{
        color:red;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:red;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:red;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
        color:red;
    }
<style>

input改成相应的类名

7.新增自定义属性

在H5之前我们给标签添加自定义元素，直接在标签里写上自己命名的属性

但是，有时候我们自己定义的属性在不知道的情况下，可能会与标签原本的属性重名，这就会引起一些不便

在H5中，新增一种自定义属性的方式

语法：在标签中通过data-*定义

html

<div data-title='自定义标题'></div>

通过data-*定义的属性，可以通过ele.getAttribute()获取

W3C定义新标准中，标签的data-*属性会被放入到dom元素的dataset中

所以在js中我们可以直接通过ele.dataset.key去获取

html

<div class="box" data-title="自定义标题" data-hello="你好"></div>
<script>
    const box=document.querySelector('.box')
    console.log(box.dataset.title)  // 自定义标题
    console.log(box.dataset.hello)  // 你好
</script>

五、H5新增内容 ​

1.新增语义标签 ​

1.1 什么是语义元素 ​

1.2 新增了哪些语义化标签 ​

figure标签 ​

3. Audio音频标签 ​

3.1 语法 ​

3.2 audio的属性 ​

3.3 audio浏览器兼容 ​

3.4 source标签 ​

4. Video视频标签 ​

4.1 video标签支持三种格式 ​

4.2 语法格式 ​

4.3 video的参数 ​

4.4 video浏览器兼容 ​

4.5 source标签 ​

6. 新增表单属性 ​

6.1 autocomplete ​

6.2 novaldate ​

6.3 autfocus ​

6.4 form ​

6.5 list ​

6.6 min、max、step ​

6.7 multiple ​

6.8 pattern属性 ​

6.9 placeholder ​

6.9.1 修改placeholder颜色 ​

7.新增自定义属性 ​

五、H5新增内容

1.新增语义标签

1.1 什么是语义元素

1.2 新增了哪些语义化标签

figure标签

3. Audio音频标签

3.1 语法

3.2 audio的属性

3.3 audio浏览器兼容

3.4 source标签

4. Video视频标签

4.1 video标签支持三种格式

4.2 语法格式

4.3 video的参数

4.4 video浏览器兼容

4.5 source标签

6. 新增表单属性

6.1 autocomplete

6.2 novaldate

6.3 autfocus

6.4 form

6.5 list

6.6 min、max、step

6.7 multiple

6.8 pattern属性

6.9 placeholder

6.9.1 修改placeholder颜色

7.新增自定义属性