Day11 HTML5 学习笔记

1 HTML5 新增语义化标签

1.1 新增结构化布局标签

标签名	语义和功能	属性	单标签还是双标签
header	页面或section的页眉（页头）		双
footer	页面或section的页脚		双
nav	导航		双
section	页面中的一小节或文章中的一段		双
article	文章、新闻、帖子、评论等		双
aside	侧边栏		双

注意：

这些新增的结构化布局标签本质就是有语义的 div。

1.2 新增状态标签

标签名	语义和功能	属性	单标签还是双标签
meter	表示静态的度量，如电量、温度、磁盘容量等	max、min、value、low、high、optimum （了解）	双
progress	表示进度，如进度条	max、value （了解）	双

问题：meter 和 progress 什么区别？（重要）

答案：meter 表示静态的度量，progress表示动态的进度。

注意：

meter 和 progress 在不同浏览器表现样式不同，而且不容易设置样式，所有这两个标签不常用； 但是，需要知道二者区别。

1.3 新增列表标签

标签名	语义和功能	属性	单标签还是双标签
datalist	用于搜索框的关键字提示		双
details	用于展示问题和答案 或者 专有名词和对专有名字的解释		双
summary	写在 details 的里面，用于指定问题或专有名词		双

① datalist 的用法

<input type="text" list="myData">
<datalist id="myData">
    <option value="a1"></option>
    <option value="a2"></option>
    <option value="ab1"></option>
    <option value="abb"></option>
    <option value="abc"></option>
    <option value="bbc"></option>
    <option value="a100"></option>
</datalist>

注意：

input 的 list 属性值与 datalist 的ID值保持一致。

② details 的用法

 <details>
     <summary>如何一夜暴富？</summary>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis non voluptatem porro natus maiores. Obcaecati pariatur sequi dolorum, nihil rerum, culpa modi ducimus magni iusto praesentium ad perspiciatis ab ipsa.
     </p>
     <p>
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae illum dolorem pariatur autem minima doloribus deserunt qui quasi ut culpa, alias corrupti nihil atque aliquam mollitia quibusdam a. Possimus, iusto?
     </p>
</details>

1.4 新增注释标签（注音标签）

标签名	语义和功能	属性	单标签还是双标签
ruby	包裹需要注音的文字		双
rt	里面写注音，rt 标签写在 ruby 的里面		双

<p>
    萌萌说
    <ruby>魑<rt>chi</rt></ruby>
    <ruby>魅<rt>mei</rt></ruby>
    <ruby>魍<rt>wang</rt></ruby>
    <ruby>魉<rt>liang</rt></ruby>
    真好吃
</p>

1.5 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记		双

注意：

w3c 建议 mark 用于标记搜索结果中的关键字。

2 HTML5 表单新增功能

2.1 表单控件新增属性

placeholder： 设置提示文字； 用于文本输入类的表单控件（如文本输入框、密码输入框、文本域等）。

autofocus： 自动获取焦点，无需给值； 适用于所有的表单控件。

autocomplete： 设置表单控件是否记录输入历史；值是 on 后者 off； 适用于文本输入类的表单控件。

required： 设置该表单控件必填或必选；无需设置值； 如果设置了 required 又没有填写，提交的时候会提示且无法提交。 适用于除按钮外其他表单控件。

pattern： 指定正则验证表单控件的格式，适用于文本输入类表单控件。当表单提交的时候进行验证，验证不通过会提示且无法提交表单；空的输入框不会验证，往往与 required 配合。

2.2 input 标签的 type 属性新增的值

① 文本输入类

• email： 邮箱。
• url： URL网址。
• number： 数字；可以设置数 max、min、step。
• search： 搜索框。
• tel： 电话号码；移动端弹出数字键盘。

<!--邮箱-->
<!--在提交的时候进行验证； 空的不会验证 -->
<input type="email" name="email" placeholder="请输入邮箱">

<!--url-->
<!--在提交的时候进行验证； 空的不会验证 -->
<input type="url" name="url" placeholder="请输入网址">

<!--数字-->
<!-- 无法输入数字以外其他字符，配合 max\min\step 属性设置数字的有效范围，提交的时候也进行验证； 空的不验证 -->
<input type="number" name="num">
<input type="number" name="num" min='10' max='100' step='10'>

<!--搜索框-->
<!-- 表现同 text 相同，主要是语义 -->
<input type="search" name="kw" placeholder="搜索">

<!--电话号码 同text  但是用移动设备，会直接弹出数字键盘-->
<input type="tel" name="tel_num" placeholder="请输入电话号码">

② 范围选择框

• range 范围选择框

<input type="range" name="range">
<input type="range" name="range" value="80">
<input type="range" name="range" value="80" max="100" min="0">

③ 颜色选择框

• **color ** 颜色选择框

<input type="color" name="color">

④ 时间日期选择类

• date： 选择日期（年月日）。
• month： 选择哪一年哪一月。
• week： 选择哪一年的第几周。
• time： 选择时间（时分）。
• datetime-local： 选择日期和时间。

input type="date" name="date">
<input type="month" name="month">
<input type="week" name="week">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="datetime-local" name="datetime">

2.3 form 标签新增属性

novalidate 属性： 如果给 form 标签设置了该属性，表单提交的时候不再进行验证；该属性无需给值。

3 HTML5 音视频

3.1 音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	视频	src 指定视频地址. width 设置视频宽度 height 设置视频高度 controls 显示控制条，不需要值 muted 设置静音，不需要值 autoplay 自动播放，不需要值 loop 设置循环播放，不需要值 preload 预先加载，默认播放视频的时候加载，不需要值 poster 指定视频封面图地址	双
audio	音频	src 指定音频地址. controls 显示控制条，不需要值 muted 设置静音，不需要值 autoplay 自动播放，不需要值 loop 设置循环播放，不需要值 preload 预先加载，默认播放视频的时候加载，不需要值	双
source	引入资源（音视频）	src 指定音频或视频的地址 type 指定音频或视频的类型	单

3.2 浏览器支持的音视频格式

① 视频格式

mp4		推荐使用，目前所有的浏览器皆支持
webm
ogg

② 音频格式

mp3 	推荐使用，所有浏览器皆支持
wav
ogg

3.3 兼容性高的处理音视频

<video controls>
        <source src="../sources/video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="../sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="../sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
        您的破浏览器不支持视频
</video>

4 HTML5 新增全局属性 （了解）

contenteditable	可以设置为 true 或 false， 设置元素可以编辑里面的文本内容
hidden	添加该属性回隐藏，与display:none效果一样；无需给值

5 HTML5 兼容性方案

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->

IE8以及以下版本的IE浏览器，引入 html5shiv.js ,可以让浏览器识别 H5 新增标签。