《HTML5秘籍》学习总结--2016年7月24日

前段时间因为工作中看到同事使用了一个type为date的<input>元素，直接就形成了一个日期选择的表单控件，当时觉得很神奇，以为是什么插件，就问了同事是怎么做出来的，同事告诉我这是HTML5的新控件类型。于是这件事让我决定先好好学习下HTML5新标准相对于HTML4时代有什么不同，其实刚开始学习前端的时候，在知乎社区就了解到了，这是前端界未来很有发展潜力的新标准，正是HTML5让WEBAPP变得更有实现的机会以及让flash慢慢走衰……由于自身水平的不足，我选择的是看一本关于H5的书，因为书会介绍更多的来龙去脉和发展历史，对于我这种新人来说更具有启发性。我看的是Matthew MacDonald的《HTML5秘籍》。

---

这张图是我目前学习和了解到的H5的一部分基础知识点，里面没有学习到太多H5的两个很重要的部分，一个是离线应用，一个是canvas绘图，canvas绘图上是浅尝辄止，稍做了一些了解。这两个部分没有花时间，第一因为自己耐心不足，第二是因为工作中一段时间内可能都还用不到，没有实际的需求，怕这两个对我目前来说算复杂的部分学了以后搁置久了也会忘了，所以打算以后有需求的时候或者有一定积累以后再深入学习。

接下来我就按照这张思维导图说说看完这本书以后记录和总结。

书写规范

1. 包含html,head,body标签；
2. 标签名全部为小写；
3. 为属性值加上引号；
4. 空元素的标签不要闭合。

支持特性检测和腻子脚本

H5新增了许多新特性，但是浏览器并不是全部支持这些新特性，并且不同的浏览器以及不同的版本支持特性的程度都不相同，所以使用H5新特性前，需要做支持特性检测，推荐使用[Modernizr](https://github.com/Modernizr/Modernizr#building)插件，这样可以在考虑到兼容性的情况下使用H5的新特性。此外，还有各种各样的腻子脚本(polyfill)，这些腻子脚本可以提供考虑了兼容性的某个（某些）新特性的解决方案。

容器语义元素

`

`是导航条的语义元素，一般将网站的导航条放在这个容器内。

<header>表示网页的头部，比如logo，导航，用户信息之类的都可以放在里面。

<footer>表示网页的尾部，一般放一些版权申明和联系方式。

<figure>和<figcaption>元素是用于插图的新语义标签，<figcaption>和<img>放在<figure>内部，<figcaption>表示图标题。

<detail>和<summary>：效果有点像折叠面板，<detail>作为折叠内容的容器，<summary>作为折叠后的标题，放在<detail>元素的内部，<detail>内部还要放折叠后展开可见的内容，具体效果如图：

类似于上面的那些容器级语义元素，就不在此一一赘述了。

文本级语义元素

在这本书中，了解到的H5中的文本级语义元素只有<time>, <output>, <mark>这三个，其中<time>用来作为时间的存放元素，<output>作为输出结果的存放元素，<mark>作为标记（即高亮）文本的存放元素--有些浏览器可能会对<mark>元素内的文字应用特殊的样式，但是有些浏览器是没有的，所以需要的话，最好自己设定<mark>元素的样式。

表单级语义元素

---<input>

<input>元素算是我在学习过程中最频繁遇到的表单控件元素之一了，在H5中，input元素有了一些新特性：

属性上：

title：属性加在表单控件上，用于给提示信息。

autofocus：属性只能加在一个表单控件上，用于表单控件的自动获得焦点。

pattern：属性加在表单控件上，用于正则验证。

novalidate：还有一个关闭表单验证功能的办法，这个属性直接加在<form>上，用于控制关闭表单验证功能。

type：属性是我看来的重点，这本书里面介绍了许多个我之前没有用过属性，并且就像文章开头说的，正是<input>的"date"这个type，才引起了我对H5的关注和学习的想法。在书中提到的type的值有：email, url, search, tel, number, range, date, time。相信根据字面意思大部分属性值就很好理解了，其中range属性会让<input>变成一个滑动条，可以手动滑动，当设置这种type属性时，还需要给<input>设置min, max, step, value这些值才能正常工作。

---新表单控件

<datalist>, <option>：这两个新元素用来显示输入建议，需要将目标<input>元素的list属性值设置为对应的<datalist>的id。兼容方面的解决办法：H5秘籍 P110

<datalist id="choices">
  <span class="label">Pick up an option:</span>
  <select id="favoriteChoice">
    <option label="alpha" value="alpha">
    <option label="beta" value="beta">
    <option label="gama" value="gama">
  </select>
  <br>
  <span class="label">Or type it in:</span>
</datalist>
<input list="choices name="list">  //可以识别datalist的就只会读取里面的option内容

<fieldset>,<legend>：这两个元素用来展示表单的范围和给表单标题。后者放在前者中。

<progress>：这个元素用于表现进度，拥有一个max属性和一个value属性。默认max为1。

<meter>：这个元素和<progress>类似，不过偏向于表示数值，有min, max, low, high, value这五个属性。

---表单事件

• onblur
• onchange
• oncontextMenu
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onselect
• onsubmit

其中值得一提的是oncontextMenu事件，它在上下文菜单被触发时产生。其它事件都很好从字面上理解。

---表单CSS伪类

• :required
• :valid
• :inrange

其中:inrange伪类需要控件有min和max属性才可以进行判断。

音频和视频元素

---audio

control属性：告诉浏览器要包含播放控件。

preload属性：控制音频的预加载。

autoplay属性：控制音频的自动播放。

loop属性：控制音频的循环播放。

---video

audio的全部属性：control, preload, autoplay, loop.

width：控制视频播放控件的宽度。

height：控制视频播放控件的高度。

poster：用于替换视频的图片，在以下三种情况会使用到：1.视频第一帧未加载完毕；2.把preload属性设为none；3.没有找到指定的视频文件。

---source

source主要用于配合audio、video使用可以解决浏览器只支持有限的媒体格式的问题，使用的时候用source一个个地添加媒体文件。

src：媒体源文件。

type：提供源文件的MIME信息。

---JS控制音视频方法

[audio]

属性：currentTime提供当前音频播放到的时间。

方法：play()控制开始/继续播放。pause()控制播放暂停。

[video]

属性：currentTime提供当前视频播放到的时间。playbackRate控制播放速率，默认为1正常播放，负值时为倒着播放。duration提供当前播放视频的总时长。

方法：play()控制开始/继续播放。pause()控制播放暂停。

---好用的音视频插件

VideoJS和jPlayer.

Canvas绘图

---context

canvas元素对应着一个对象，这个元素有.getContext()方法，这个方法可以生成一个可以画图的Context对象，具体流程：

var canvasElement=document.getElementById("id");
var context=canvasElment.getContext("2d");  //目前还只有二维上下文，没有三维上下文

具体的使用方法暂时还没有学习，需要的时候再进行深入学习。

---canvas高级绘图

context.drawImage()：在画布上的特定位置画指定的图片。

复杂图绘制的要点：记录绘制的所有内容和过程，才能在将来灵活地修改它们。

CSS3

---WEB字体格式

• @font-face方式注册字体

  @font-face{
    font-family: 'selfDefineName';
    src: url('url-address');
    src: local('local-font'),
    url: ('xxxx') format('yyy');
  }
  

• 使用<link>添加谷歌在线字体

---多栏文本

多栏文本可以在一个块内把文本分成多个竖栏显示。通过把属性加在需要分栏的块级元素上来实现。主要有这些属性：

• column-count
• column-width -- 用于规定每栏的宽度
• column-gap
• column-rule -- 规定列之间的宽度、样式和颜色规则

---媒体查询

媒体查询是H5中的一个我认为的重点，主要用于响应式布局和浏览器兼容性的调整。可以针对不同的设备和浏览器采用不同的样式。
@media(){}：这是一种直接写在样式表中的方法，通过括号内的控制量来确定对应的样式，括号内的控制量有max-width、max-device-width、orientation，还有设备类型(print等)；
媒体查询控制样式表的引入：在link中添加media属性，属性值为控制内容；
CSS hack和其它针对特定浏览器的方法：

• IE9以下的版本，可以这样引入针对IE9以下版本的样式表：
• IE10 IE11IE10/11不支持条件性注释的3个解决方法
• 火狐和chromeIE Chrome Firefox CSS Hack

---透明度

• rgba(r,g,b,a)方法赋值颜色
• 使用opacity属性（推荐）

---背景盒子

背景图片：background-image，background-position，background-repeat。这些值可以同时传递多个参数，每个值都传递多个参数就可以同时控制传入的多个背景图。

阴影盒子：box-shadow

---过渡效果

利用transition这个CSS属性，使用方法：[-prefix-]transition: propertyName1 usetime1[,propertyName2 usetime2];

---变换效果

transform有这些方法：scale()，scaleX()，skew()，rotate()，使用方法：[-prefix-]transform: method1(para) method2(para);

数据存储

---存储方式

localStorage：本地存储，不清除的话可以一直保留。

sessionStorage：会话存储，关闭页面的话会清除。

---本地存储的操作

• .removeItem("key")
• .clear()
• .key(i)

---JSON数据的存储方式

由于本地存储只能存放字符串类型的数据，所以对于JSON数据，要先进行字符串化：

1. JSON.stringify()
   2.JSON.parse()
   这样就可以完成JSON数据的存取。

---响应存储变化事件

onStorage，这个事件添加事件响应函数的时候，可以用如下的事件对象的属性来取得一些数据。event.key, event.oldValue, event.newValue, event.URL。

---File API

取得文件共有两种方式：1.type为file的input；2.隐藏input，需要时用JS调用input的click事件，触发input的onchange事件。

• 文件属性：文件属性有三个信息，文件名、字节大小、MIME类型。
• 文件对象FileReader：

事件：

FileReader.onload, FileReader.onProgress, FileReader.onError, FileReader.onLoadEnd.

方法：

FileReader.readAsText(), FileReader.readAsBaniryString(), FileReader.readAsDataURL(), readAsArrayBuffer(), FileReader.abort()。使用这些方法时，文件存在e.target.result中。

WEB服务器与通信

• 服务器发送事件：让WEB服务器与浏览器页面保持连接。
• WEB Socket：让浏览器和服务器快速即时地发送数据，有以下几个事件onopen, onmessage, onerror, onclose。

任务放在后台处理

使用new Worker("JS文件") 创造一个worker对象。

• 事件：worker.onmessage这个事件在客户端和服务端都存在。
• 方法:worker.postMessage()这个方法在客户端和服务端都存在。