Web前端新手入门系列：HTML5

6. HTML5

HTML5在HTML的基础上新增了一些特性和标准。

HTML部分详见：Web前端新手入门系列：1、HTML

6.1 HTML5新特性

1. 增加了audio和video音频播放，抛弃了Flash
2. 新增canvas画布（绘画，制作动画，小游戏开发等)
3. 地理定位
4. 离线缓存
5. 硬件加速
6. Web Socket(全双工通信)
7. 增加本地存储
8. 增加语义化标签

6.2 HTML5网页标准结构

​ 不用在div里面写class来区分了，直接使用这些标签即可

< main>

​ < main>标签规定文档的主要内容

​ < main>元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。在一个文档中，不能出现一个以上的< main>元素。< main>元素不能时以下元素的后代:< aside>、< footer> 、< header>或< nav>。

<main>
	<h1>Web Nrowsers</h1>
    <p></p>
    <article></article>
</main>

6.2.1 语义化标签

1. mark

   mark 定义高亮元素(行级标签)

   <p>这是<mark>亮</mark>的</p>
   

2. summary & details

   摘要和描述，用于名词解释或用于封装一个区块

   <details>
   	<summary>日暮里</summary>
       <div>
           <h4>森的妖精</h4>
       </div>
   </details>
   

3. meter

   meter定义度量衡

   meter：显示一个技术仪表

   属性

   value:当前值 min{number}：最小值 max{number}：最大值 low{number}:指定范围的最小值

   high{number}：指定范围的最大值

   <meter value="100" min="30" max="200">100</meter>公里/小时
   

4. progress

   progress定义进度条

   progress：显示一个进度条

   属性

   max{number}：进度的最大值 min{number}:进度的最小值 value：当前值

   <p>任务已经完成了:</p><progress value="65" min="0" max="100">65%</progres>
   

5. dialog

   dialog定义对话框或窗口

   <dialog open>打开的对话窗口</dialog>
   

6. figure

   用于对元素进行组合，一般用来组合一张图的标题、图片和图片描述等，便于布局。

   <figure>
   	<h5>无限剑制</h5>
       <p>此身为剑所天成</p>
       <img src=“” alt="" />
   </figure><!---->
   

6.3 HTML5多媒体

6.3.1 audio

播放音乐或音频，IE9以下的版本不支持，< audio> 元素支持三种音频格式文件:MP3,Wav和Ogg。

音频格式的MiME类型

MP3:audio/mpeg Ogg:audio/ogg WAV:audio/wav

属性：

1. src{string}：音频的url地址
2. autoplay{boolean}：音频在就绪后马上播放
3. controls{boolean}：显示控件
4. loop{boolean}：音频循环播放
5. muted{boolean}：静音
6. preload：当使用autoplay时，preload自动失效

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

6.3.2 video

< video>元素提供了播放、暂停和音量控件来控制视频。

同时也提供了width和height属性控制视频的尺寸。

如果设置了高度和宽度，则所需的视频空间会在页面加载时保留，设置宽度时，会自动按比例调整高度，一般只设置宽度。

如果没有设置这些属性，浏览器就不能在加载时保留特定的空间，页面根据原始视频的大小而改变。

IE9以下的版本不支持。

​ < video>元素支持多个< source>元素，< source>元素可以连接不同的视频文件。浏览器将使用第一个可识别的格式。

视频格式：

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

属性：

1. src{string}：视频的url地址
2. autoplay{boolean}：视频在就绪后马上播放
3. controls{boolean}：显示控件
4. loop{boolean}：视频循环播放
5. muted{boolean}：静音
6. preload：当使用autoplay时，preload自动失效
7. width{string|number}：视频宽度
8. height{string|number}：视频高度
9. poster{string}：当视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

<video src="ssa.mp4" controls width=400px poster=""></video>

6.3.3 embed

嵌入内容或加载插件

属性：

1. src{string}:文件路径
2. width{string|number}：视频宽度
3. height{string|number}：视频高度
4. type：类型

<embed src="run.swf" type="application/x-shockwave-flash" /><!--flash插件-->
<embed src="movie.ogg" type="video/ogg" autostart="true" loop hidden="true" starttime="00:05" /><!--视频-->

6.3.4 canvas

画布，是一个容器元素，必须结合JavaScript使用，单独使用没意义。canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现。

<canvas width="400" height="200" style="background:yellow"></canvas>
<script>/*用于包裹脚本代码*/
	var canvas = document.getElementsByTagNmae('canvas')[0];//DOM操作，用来获取canvas这个标签元素
    var ctx = canvas.getContext('2d');//绘制2D图
    ctx.fillStyle =‘#ff0000’;//设置填充色
    ctx.fillRect(0,0,200,100);//矩形填充，起点的横纵坐标，宽高
</script>

6.4 HTML5 新增常用属性

1. contentEditable

   只能是true或false，几乎可以为所有元素指定，将元素设为可编辑模式

   <p contentEditable="true">可编辑内容</p>
   

2. hidden

   对元素进行隐藏，一般用来传值或当某个条件成立时，执行内容显示，默认值为hidden

   <p hidden>隐藏的段落</p>
   <p>可见的段落</p>
   

3. data-*

   用于存储页面或应用程序的私有自定义数据，一般用于传值，*表示自定义属性的名字

   <p data-id="0001">content</p>
   

4. multiple

   规定输入域中可选择多个内容，用于表单组件中，如file/select

   <select multiple>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
   </select>
   

5. required

   约束表单元在提交前必须输入值，用于表单组件中，需要结合提交按钮使用。

   <form action="#">
   	<input type="text" placeholder="请输入用户名" required /> <br/>
       <input type="email" placeholder="请输入邮箱" /> <br/>                             		<input type="submit"/>
   </form>
   

6. pattern

   用于验证输入字段的模式，用于表单组件中，需要结合提交按钮使用。

   <form action="#">
   	<input type="text" placeholder="请输入用户名" pattern=“[A-Za-z0-9]{4,6}” /> <br/>
       <!--正则写法，表示4到6位的这些符号的组合-->
       <input type="email" placeholder="请输入邮箱" /> <br/>                             		<input type="submit"/>
   </form>
   

6.5 HTML5新表单属性

6.5.1 新表单

1. color：颜色

2. email：邮箱

3. tel：电话号码

4. url：网址

5. number：数字

   <form action="#">
   	<input type="number" step="10" min="-100" max="100"/> <!--可以选择数字，step控制步长-->
   </form>
   

6. range：范围

   <form action="#">
   	<input type="range" value="20" min="-100" max="100"/> <!--一个范围，value默认值-->
   </form>
   

7. search：搜索框，自动在后面加个×

8. date：日期，选择日期

9. datetime：日期时间

10. datetime-local：本地日期时间

11. year：年份

12. month：月份

13. week：周

14. time：时间

字面意思，需要输入对应的内容才能提交或者进行对应的选择

6.5.2 form属性

1. formaction

   表单请求地址，更改表单的action属性值，修改数据提交的地方

   <form action="http://www.baidu.com">
       <!--请求到对应网址-->
       <input type="submit" value="提交" formaction="http://www.sohu.com"/><!--修改-->
   </form>
   

2. formenctype

   修改表单请求的类型

   <form action="#" enctype ="application/x-www-form-urlencoded"><!--普通表单类型-->
       <input type="submit" formenctype="multipart/form-data"/><!--文件上传类型-->
   </form>
   

3. formmethod

   修改数据提交的方法

   <form action="#" method="get"><!--默认是get-->
       <input type="text" name="username"/>
       <input type="submit" formmethod="post"/>
   </form>
   

   常用提交方式有get和post两种，区别在于

   1. get是以字节位单位提交，只接受ASCII码，而post是以字符为单位提交
   2. get是以明文方式提交，提交数据会显示在地址栏中，不用来传输敏感数据，而post是暗文方式提交
   3. get在浏览器中回退是无害的，而post会再次提交请求
   4. get会被浏览器主动缓存，而post不会，除非手动设置
   5. get和post在传输字节数上一般没有限制，个别浏览器会有，可以认为get一般不超过2kb，而post一般不超过2mb

4. form

   设置表单元素属于哪个表单

   <form action="#" id="user-info">
       <input type="text" name="username"/>
       <input type="submit"/>
   </form>
   <form action="#" id="student-info">
       <input type="text" name="username"/>
       <input type="submit"/>
   </form>
   <input type="password" name="userpwd" form="user-info"/><!--提交user-info的数据-->
   

5. novalidate

   不验证格式

   <form action="#" novalidate ><!--设置后不会验证是否满足邮箱格式-->
       <input type="email" name="usereamil"/>
       <input type="submit"/>
   </form>
   

6.5.3 input属性

1. autocomplete

   ​ 规定输入字段是否应该启用自动完成功能

   ​ 自动完成给允许浏览器预测对字段的输入。当用户在字段开始输入时，浏览器基于之前输入过的值，显示出在字段中填写的选项

   ​ autocomplete 属性适用于< form>，以及< input>的如下类型：text，search，url，telephone，email，password，datepickers，range和color

   ​ 某些浏览器可能需要手动启用自动完成功能

   ​ 为了保护敏感数据，避免本地浏览器对它们的不安全存储，一般需要关闭。

   属性值：

   ​ on：默认。规定启用自动完成功能

   ​ off：禁用自动完成功能

   <input autocomplete="off"/>
   

2. autofocus

   规定当页面加载时，input元素应该自动获得焦点

   <input autofocus/>
   

3. step

   ​ 规定输入字段的合法数字间隔，例如 step=“3”,则合法的数字应该时-3，0，3，6。step属性可以与max以及min属性配合使用，以创建合法值得范围。step、max、min属性适用于input的如下类型：number、range、date、datetime、datetime-local、month、time以及week

   <form action="demo_form.asp" method="get">
       <input type="number" name="points" step="3"/>
       <input type="submit"/>
   </form>
   

4. multiple

   ​ 规定输入字段可选择多个值，适用于input的如下类型：email和file

   <form action="demo_form.asp" method="get">
       <p> Selec images:</p><input type="file" name="img" multiple/>
       <input type="submit"/>
   </form>
   

5. pattern(regexp)

   规定用于验证的输入字段的模式，模式指正则表达式。适用于input的如下类型：text，search，url，telephone，email以及password。需使用标准的"title"属性来描述模式。

   regexp：规定用于验证输入字段的模式

   <input pattern="regexp"/>
   

6. placeholder

   ​ 该属性提供可描述输入字段预期值的提示信息(hint)，提示会在输入字段位空时显示，在字段获得焦点时消失。该属性适用于input的如下类型：text，search，url，telephone，email以及password

   <input placeholder="text"/>
   

7. required

   规定必须在提交之前输入字段，required属性适用于input的以下类型：text，search，url，telephone，email，password，date，pickers，number，radio以及file

   <form action="demo_form.asp" method="get">
       <p>Name: </p><input type="text" name="username" required/>
       <input type="submit"/>
   </form>