html5相关笔记（三）
1.html5的应用场景
◆极具表现力的网页（案例特别多）
◆网页应用程序（pc端：iCloud、百度脑图、Office 365...，app端：淘宝、京东、美团...，wechat端：淘宝、京东、美团...）,wechat表示微信，也就是微信小程序。
◆混合式本地应用（PC端：网易云音乐、有道词典...，app端：淘宝、京东、美团...）
◆简单的游戏
◆
2.Sublime有一个插件，叫做Sublime Server，可以让sublime打开的文件以http服务的方式打开，如果使用file文件路径的方式打开，可能无法使用一些api。
3.progress进度条标签在不同的浏览器上呈现的样式不同，所以需要取消默认的样式，如在谷歌浏览器中使用 -webkit-appearance:none;，就取消默认的样式【
★修改html5标签默认的样式，首先取消默认的呈现，然后再修改它每一个组成的样式，以伪元素的方式进行修改，审查元素时就能够知道。
◆element::webkit-progress-bar {
background-color:red;
},表示修改进度条的的背景颜色为红色。
】。
4.html5中新增的标签的链接关系 rel
◆通过链接关系属性声明链入的链接和当前文档之间的关系
◆<a href="" rel="prev">上一页</a> 表示这是一个上一页的链接
◆用来描述指定链接与当前文档的关系，便于机器理解文档的结构【
◇<link rel="stylesheet" href="style.css">表示这是一个样式表
◇<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"> 表示这是一个交互文件
◇<link rel="shortcut icon" href="favicon.ico">表示这是一个图标
◇<link rel="pingback" href="http://myblog.com/xmlrpc.php">
◇<link rel="prefetch" href="http://myblog.com/main.php">
...
◇<a rel="archives" href="http://myblog.com/archives">old posts</a>
◇<a rel="external" href="http://notmysite.com">tutorial</a>
◇<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
◇<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
◇<a rel="tag" href="http://myblog.com/category/games">games posts</a>
...
】
★常见的链接关系【
alternate 文档的可选版本（例如打印页、翻译页或镜像）
stylesheet 文档的外部样式表
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接（告诉蜘蛛不要抓这个网站链接里的内容，表示这是一个私密链接，这也是个标准，君子协议，防君子不防小人）
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接
】
5.不同的浏览器可能会对html5某些标签不支持，有可能会报错，可以使用某些方式来告诉浏览器这就是标签
◆<script>document.createElement("header");//浏览器就知道header是一个标签了</script>
◆获取引入一个别人写好的脚本，html5shiv.js。
6.html5中结构数据标记属性 itemscope itemtype（类似key/value对的结构化解释）
◆利于抓取数据，数据提取出来更加方便了，这个很高级，Google有一个这样的工具可以解析，三年前只有google能够支持。
◆以下是代码【
<div itemscope itemtype="http://example.com/hello">
<p>我叫<span itemprop="主人">汪磊</span>。</p>
<p>
我养了一条叫
<span itemprop="狗名">旺财</span>的
<span itemprop="品种">金毛</span>犬。
</p>
</div>
】
7.html5中的ARIA属性
◆Accessible Rich Internet Application （无障碍富互联网应用程序），主要针对于屏幕阅读设备（e.g NVDA），更快更好的理解网页，不仅仅是为了盲人用户，更多语义化，关爱视力障碍的人群。
★推荐一个关于ARIA属性详解的网站：http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/
8.html5中的智能表单元素 number、email、tel、url作用更多的是移动手机端的虚拟键盘适配，智能表单最好用于移动端，pc端还是用jquery中控件插件。
9.最专业的文档其实火狐文档。
10.多媒体 video audio 兼容性方案是 source套object，其实如果source都没用，那个浏览器就特别老了，用不了html5、css3那么很多新功能都用不了，但是需要渐进增强，source使用的html5播放器，object使用的flash播放器
◆video的poster属性表示视频没有播放的时候显示的图片<video src='1.mp4' controls='controls' poster='toy.png'></video>
◆当video标签不被兼容的时候，可以下载一个组件，网址是：https://html5media.info/，可以在IE7以上所有的浏览器都能够使用，只需要引入这个组件然后正常使用video标签即可。
★在使用http协议的情况下可以使用视频字幕标签【
//代码
<video id="clip" controls>
<source src="fun.mp4" type="video/mp4" />
//字母标签
<track label="Chinese" kind="subtitles" srclang="cn" src="video-subtitles-cn.vtt" default />
</video>
//文件名 video-subtitles-cn.vtt
//文件内容
（
WEBVTT FILE
1
00:00:00.000 --> 00:00:12.000 D:vertical A:start
2
00:00:12.000 --> 00:00:15.300
大家好我是毛毛，哎呀
）
】
11.SVG（Scalable Vector Graphics 可缩放矢量图形）
◆位图就是由一堆像素点组成的图片，每个像素点有对应的颜色，当进行缩放的时候会出现锯齿和失真的情况。
◆矢量图是由记录的线及路径、半径、填充色组成的图片，由于它是由路径而不是由一些具体的点组成，所以它可以无限制的进行缩放，并且在缩放时候也不会失真。
◆基于可扩展标记语言也就是xml
◆优势：体积小，质量高，效果好，可控程度高，可以用css样式来控制。
◆这个一般由美工来做，用来做一些字体图标，使用的工具是AI，在AI中的文件菜单中选择 脚本选项，之后就是导出格式为svg。
◆在html页面中使用svg的四种方式 【
◇<svg></svg> 直接将svg代码粘贴到html页面中，或者通过js发送异步请求获取svg，然后添加到svg标签对中，svg是静态文件，所以发送请求之后获取到的是字符串，将字符串添加到svg中去就类似将svg代码黏贴到html页面中。
◇<iframe src='demo.svg' frameborder='0'></iframe> 使用iframe标签来嵌套显示，其实svg文件可以像html页面一样直接在浏览器显示，推荐使用iframe。
◇<object data='demo.svg' type=''></object> object标签一般用于载入第三方控件，也可以用来显示svg，可以通过css样式来设置高度宽度。
◇<embed src='demo.svg' type=''> embed一般用于载入媒体，也可以用来载入svg，但是在html5的标准中并没有定义embed，但是所有的浏览器都支持。
】
12.Markdown 是一个相当简单的标记语言
◆用普通文本描述富文本的语法
◆Markdown的扩展名是.md或者.markdown
◆语法 【
# 一个#号表示h1
## 两个#号表示h2
默认在一行写文本就表示一个p标签
- 一个横杠表示无序列表
1. 数字加一个点表示有序列表
```javascript
alert('123');
```
前后的```这是用来写代码的，中间放代码，如果你知道是什么代码，可以直接写代码的类型
> http://wowubuntu.com/markdown/ 一个>加一段链接表示引文
】
◆markdown 语法中文网站:http://wowubuntu.com/markdown/
13.html5新选择器就是将我们经常需要的操作又包装以一层。
14.访问历史记录API
◆界面上的所有js操作不会被浏览器记住，就无法回到之前的状态，在html5中可以通过window.history操作访问历史状态，让一个页面可以有多个个历史记录。
◆window.history.forward();//前进
◆window.history.back();//后退
◆window.history.go();//刷新 也可以在go()中增加参数，go(-1)表示后退一步，go(1)表示前进一步。
◆window.history.pushState(放入历史中的状态数据);//通过js可以加入一个访问状态【
window.history.pushState("传递一个数据","设置历史状态的标题，但是浏览器不支持"，"?demo=我是一个demo");//最后一个参数会在当前url地址栏的链接后面显示，如 http://www.baidu.com?demo=我是一个demo。
】
◆当执行后退或者前进操作的时候，会触发一个popstate事件，可以通过在function中获取event对象，通过event对象的state属性，可以
;
获取到pushState中的第一个参数的值，也就是你传递的一个数据。
◆window.loaction.search属性值可以获取到当前url地址栏的参数字符串，，如果参数字符串是进行编码的，那么可以使用decodeURI方法来进行解码。
◆
◆
15.启用javascript代码的严格模式 在js代码的上面写上 'use strict';
16.文件系统 FileAPI
◆document.forms[0].input_file01，表示当前文档中第一个form对象中的name属性为input_file01的表单元素，如<input type="file" name="input_file01" />，只有表单元素可以这么做，对于表单而言这么做也比较特殊。
◆获取文件域中的文件，doucment.forms[0].input_file01.files，就可以获取一个数组，这个数组称为FileList。
◆文件域标签默认只能够选择一个文件，如果想多选，需要设置multiple='multiple' 属性值，这是html5新增的。
◆Bootstrap中的类名写的非常好，几乎看到类名就知道是个什么东西了，但是太长了。
◆如果你认为文件域的选择文件的按钮过于丑陋，你可以用一个自定义的按钮覆盖到上面去，当你点击自定义的按钮时，触发文件域的单击事件即可，也就是trigger('click')或者click()再或者triggerHandler('click')。
◆其实获取文件域选择的文件，最好是使用文件域的change事件而不是其它按钮的单击事件。
★FileReader这个对象可以获取到文件的内容，只是能够获取【
☆创建文件读取器对象:var fr=new FileReader();
☆绑定读取器加载开始的事件 fr.addEventListener('loadstart',function(){});
☆绑定读取器读取进度的事件 fr.addEventListener('progress',function(event){
var event=event || window.event;
var value=event.loaded/event.total*100+'%';//获取以百分比显示的进度，loaded表示已经加载的字节数，total表示文件总字节数
})
☆绑定读取器的加载事件 fr.addEventListener('load',function(){
var text=this.result;//获取读取器读取到的内容
})
☆最后就是执行读取器读取文件的方法：
【
switch (file.type) {//判断文件类型
case 'text/html':
case 'text/plain':
case 'text/css':
case 'text/javascript':
reader.readAsText(file);//直接读取文本
break;
case 'image/png':
case 'image/jpg':
case 'image/jpeg':
case 'image/gif':
case 'image/vnd.microsoft.icon':
reader.readAsDataURL(file);//读取url地址
break;
default:
// reader.readAsBinaryString(file);//读取二进制码的字符串
reader.readAsArrayBuffer(file);//读取字节数组
break;
}
】
☆
】
17.拖拽API获取拖拽过来的文字，可以通过事件对象的event.transfer.getData('text/plain')方法来获取，如果是图片链接的话，可以通过event.transfer.getData('text/uri-list')来获取。
18.给一个带小数的数字保留两位小数使用toFixed方法，如(3.1415926).toFixed(2);，返回值是3.14 。
◆极具表现力的网页（案例特别多）
◆网页应用程序（pc端：iCloud、百度脑图、Office 365...，app端：淘宝、京东、美团...，wechat端：淘宝、京东、美团...）,wechat表示微信，也就是微信小程序。
◆混合式本地应用（PC端：网易云音乐、有道词典...，app端：淘宝、京东、美团...）
◆简单的游戏
◆
2.Sublime有一个插件，叫做Sublime Server，可以让sublime打开的文件以http服务的方式打开，如果使用file文件路径的方式打开，可能无法使用一些api。
3.progress进度条标签在不同的浏览器上呈现的样式不同，所以需要取消默认的样式，如在谷歌浏览器中使用 -webkit-appearance:none;，就取消默认的样式【
★修改html5标签默认的样式，首先取消默认的呈现，然后再修改它每一个组成的样式，以伪元素的方式进行修改，审查元素时就能够知道。
◆element::webkit-progress-bar {
background-color:red;
},表示修改进度条的的背景颜色为红色。
】。
4.html5中新增的标签的链接关系 rel
◆通过链接关系属性声明链入的链接和当前文档之间的关系
◆<a href="" rel="prev">上一页</a> 表示这是一个上一页的链接
◆用来描述指定链接与当前文档的关系，便于机器理解文档的结构【
◇<link rel="stylesheet" href="style.css">表示这是一个样式表
◇<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"> 表示这是一个交互文件
◇<link rel="shortcut icon" href="favicon.ico">表示这是一个图标
◇<link rel="pingback" href="http://myblog.com/xmlrpc.php">
◇<link rel="prefetch" href="http://myblog.com/main.php">
...
◇<a rel="archives" href="http://myblog.com/archives">old posts</a>
◇<a rel="external" href="http://notmysite.com">tutorial</a>
◇<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
◇<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
◇<a rel="tag" href="http://myblog.com/category/games">games posts</a>
...
】
★常见的链接关系【
alternate 文档的可选版本（例如打印页、翻译页或镜像）
stylesheet 文档的外部样式表
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接（告诉蜘蛛不要抓这个网站链接里的内容，表示这是一个私密链接，这也是个标准，君子协议，防君子不防小人）
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接
】
5.不同的浏览器可能会对html5某些标签不支持，有可能会报错，可以使用某些方式来告诉浏览器这就是标签
◆<script>document.createElement("header");//浏览器就知道header是一个标签了</script>
◆获取引入一个别人写好的脚本，html5shiv.js。
6.html5中结构数据标记属性 itemscope itemtype（类似key/value对的结构化解释）
◆利于抓取数据，数据提取出来更加方便了，这个很高级，Google有一个这样的工具可以解析，三年前只有google能够支持。
◆以下是代码【
<div itemscope itemtype="http://example.com/hello">
<p>我叫<span itemprop="主人">汪磊</span>。</p>
<p>
我养了一条叫
<span itemprop="狗名">旺财</span>的
<span itemprop="品种">金毛</span>犬。
</p>
</div>
】
7.html5中的ARIA属性
◆Accessible Rich Internet Application （无障碍富互联网应用程序），主要针对于屏幕阅读设备（e.g NVDA），更快更好的理解网页，不仅仅是为了盲人用户，更多语义化，关爱视力障碍的人群。
★推荐一个关于ARIA属性详解的网站：http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/
8.html5中的智能表单元素 number、email、tel、url作用更多的是移动手机端的虚拟键盘适配，智能表单最好用于移动端，pc端还是用jquery中控件插件。
9.最专业的文档其实火狐文档。
10.多媒体 video audio 兼容性方案是 source套object，其实如果source都没用，那个浏览器就特别老了，用不了html5、css3那么很多新功能都用不了，但是需要渐进增强，source使用的html5播放器，object使用的flash播放器
◆video的poster属性表示视频没有播放的时候显示的图片<video src='1.mp4' controls='controls' poster='toy.png'></video>
◆当video标签不被兼容的时候，可以下载一个组件，网址是：https://html5media.info/，可以在IE7以上所有的浏览器都能够使用，只需要引入这个组件然后正常使用video标签即可。
★在使用http协议的情况下可以使用视频字幕标签【
//代码
<video id="clip" controls>
<source src="fun.mp4" type="video/mp4" />
//字母标签
<track label="Chinese" kind="subtitles" srclang="cn" src="video-subtitles-cn.vtt" default />
</video>
//文件名 video-subtitles-cn.vtt
//文件内容
（
WEBVTT FILE
1
00:00:00.000 --> 00:00:12.000 D:vertical A:start
2
00:00:12.000 --> 00:00:15.300
大家好我是毛毛，哎呀
）
】
11.SVG（Scalable Vector Graphics 可缩放矢量图形）
◆位图就是由一堆像素点组成的图片，每个像素点有对应的颜色，当进行缩放的时候会出现锯齿和失真的情况。
◆矢量图是由记录的线及路径、半径、填充色组成的图片，由于它是由路径而不是由一些具体的点组成，所以它可以无限制的进行缩放，并且在缩放时候也不会失真。
◆基于可扩展标记语言也就是xml
◆优势：体积小，质量高，效果好，可控程度高，可以用css样式来控制。
◆这个一般由美工来做，用来做一些字体图标，使用的工具是AI，在AI中的文件菜单中选择 脚本选项，之后就是导出格式为svg。
◆在html页面中使用svg的四种方式 【
◇<svg></svg> 直接将svg代码粘贴到html页面中，或者通过js发送异步请求获取svg，然后添加到svg标签对中，svg是静态文件，所以发送请求之后获取到的是字符串，将字符串添加到svg中去就类似将svg代码黏贴到html页面中。
◇<iframe src='demo.svg' frameborder='0'></iframe> 使用iframe标签来嵌套显示，其实svg文件可以像html页面一样直接在浏览器显示，推荐使用iframe。
◇<object data='demo.svg' type=''></object> object标签一般用于载入第三方控件，也可以用来显示svg，可以通过css样式来设置高度宽度。
◇<embed src='demo.svg' type=''> embed一般用于载入媒体，也可以用来载入svg，但是在html5的标准中并没有定义embed，但是所有的浏览器都支持。
】
12.Markdown 是一个相当简单的标记语言
◆用普通文本描述富文本的语法
◆Markdown的扩展名是.md或者.markdown
◆语法 【
# 一个#号表示h1
## 两个#号表示h2
默认在一行写文本就表示一个p标签
- 一个横杠表示无序列表
1. 数字加一个点表示有序列表
```javascript
alert('123');
```
前后的```这是用来写代码的，中间放代码，如果你知道是什么代码，可以直接写代码的类型
> http://wowubuntu.com/markdown/ 一个>加一段链接表示引文
】
◆markdown 语法中文网站:http://wowubuntu.com/markdown/
13.html5新选择器就是将我们经常需要的操作又包装以一层。
14.访问历史记录API
◆界面上的所有js操作不会被浏览器记住，就无法回到之前的状态，在html5中可以通过window.history操作访问历史状态，让一个页面可以有多个个历史记录。
◆window.history.forward();//前进
◆window.history.back();//后退
◆window.history.go();//刷新 也可以在go()中增加参数，go(-1)表示后退一步，go(1)表示前进一步。
◆window.history.pushState(放入历史中的状态数据);//通过js可以加入一个访问状态【
window.history.pushState("传递一个数据","设置历史状态的标题，但是浏览器不支持"，"?demo=我是一个demo");//最后一个参数会在当前url地址栏的链接后面显示，如 http://www.baidu.com?demo=我是一个demo。
】
◆当执行后退或者前进操作的时候，会触发一个popstate事件，可以通过在function中获取event对象，通过event对象的state属性，可以
;
获取到pushState中的第一个参数的值，也就是你传递的一个数据。
◆window.loaction.search属性值可以获取到当前url地址栏的参数字符串，，如果参数字符串是进行编码的，那么可以使用decodeURI方法来进行解码。
◆
◆
15.启用javascript代码的严格模式 在js代码的上面写上 'use strict';
16.文件系统 FileAPI
◆document.forms[0].input_file01，表示当前文档中第一个form对象中的name属性为input_file01的表单元素，如<input type="file" name="input_file01" />，只有表单元素可以这么做，对于表单而言这么做也比较特殊。
◆获取文件域中的文件，doucment.forms[0].input_file01.files，就可以获取一个数组，这个数组称为FileList。
◆文件域标签默认只能够选择一个文件，如果想多选，需要设置multiple='multiple' 属性值，这是html5新增的。
◆Bootstrap中的类名写的非常好，几乎看到类名就知道是个什么东西了，但是太长了。
◆如果你认为文件域的选择文件的按钮过于丑陋，你可以用一个自定义的按钮覆盖到上面去，当你点击自定义的按钮时，触发文件域的单击事件即可，也就是trigger('click')或者click()再或者triggerHandler('click')。
◆其实获取文件域选择的文件，最好是使用文件域的change事件而不是其它按钮的单击事件。
★FileReader这个对象可以获取到文件的内容，只是能够获取【
☆创建文件读取器对象:var fr=new FileReader();
☆绑定读取器加载开始的事件 fr.addEventListener('loadstart',function(){});
☆绑定读取器读取进度的事件 fr.addEventListener('progress',function(event){
var event=event || window.event;
var value=event.loaded/event.total*100+'%';//获取以百分比显示的进度，loaded表示已经加载的字节数，total表示文件总字节数
})
☆绑定读取器的加载事件 fr.addEventListener('load',function(){
var text=this.result;//获取读取器读取到的内容
})
☆最后就是执行读取器读取文件的方法：
【
switch (file.type) {//判断文件类型
case 'text/html':
case 'text/plain':
case 'text/css':
case 'text/javascript':
reader.readAsText(file);//直接读取文本
break;
case 'image/png':
case 'image/jpg':
case 'image/jpeg':
case 'image/gif':
case 'image/vnd.microsoft.icon':
reader.readAsDataURL(file);//读取url地址
break;
default:
// reader.readAsBinaryString(file);//读取二进制码的字符串
reader.readAsArrayBuffer(file);//读取字节数组
break;
}
】
☆
】
17.拖拽API获取拖拽过来的文字，可以通过事件对象的event.transfer.getData('text/plain')方法来获取，如果是图片链接的话，可以通过event.transfer.getData('text/uri-list')来获取。
18.给一个带小数的数字保留两位小数使用toFixed方法，如(3.1415926).toFixed(2);，返回值是3.14 。
