# HTML5 基础
# HTML5的出现的目的
- Web浏览器之间的兼容性很低
- 文档结构不够明确，过多的使用
<div> - web应用程序的功能受到了限制
# HTML5版本于HTML4的区别
- IE 6,7,8 不支持HTML5
- 语法的改变
- 内容类型
text/html
- DOCTYPE 文档类型
<!DOCTYPE html>
- 指定字符编码
<meta charset="utf=8">
省略引号 属性值可以不写双引号
带有默认值
checked="checked" //选中 checked="" //选中 check //选中 check="unchecked" //未选中
# 新增元素
- 新增的结构元素 section ， article ，aside， header ，footer ，nav ，figure, main
- 新增的其他元素 audio ， video ，canvas(画布) ，mark ，time ，command ，source ，menu
- 新增的input元素类型 email ， url ，number ，range
# 废除的元素
不再使用frame框架 仅支持iframe
# 新增的属性
# 废除的属性
# 全局属性—HTML5中新增的特性
可以对全局对象都适用的属性
- contentEditable 属性 指定元素可编辑 ，必须是那种可以获取到鼠标焦点的 value：true false
- designMode 属性 指定页面是否可以被编辑 value：on off
- hidden 属性 隐藏元素
- spellcheck属性 针对input和textarea输入框 新增的输入拼写检查
- tabindex属性 用于指定tab的显示顺序，可以让不能获取焦点的标签获取到焦点 value：tabindex="x"
# 标签
# 常用的标签
# section
<div>和<section>两者都有对网页进行布局的作用。<div>本身没有任何语义，仅用于页面布局或者给模块添加样式
<section>顾名思义就是一个章节，它适用于对文档进行分块，将文档划分为章节（常用于修饰文档大纲），或者对一篇文章进行分块，将整篇文章分成不同的内容块。
**note：**注意：一个<section>元素不能是<address>元素的子节点。
# article
<article>标签是特殊的<section>标签，与section不同，<article>标签是将文档或文章中的内容划分为相对独立的模块（如，将整本书的内容划分成多篇文章，或者将一篇文章划分成相对独立的不同的小结等），当然，我们所说的独立是指同一级别的article标签中的内容是相互独立的，所以一般在article标签内一般包含header和footer标签。
# section vs article
Version 1:
<article>
<header>
<h1>大家好，我是美食爱好者小丽</h1>
</header>
<p>本文介绍一下美食爱好者小丽喜欢的水果。。。</p>
<section>
<h2>小丽喜欢的第一种水果是石榴</h2>
<p>美味的石榴营养丰富，富含维C。。。</p>
</section>
<section>
<h2>小丽喜欢的第二种水果是葡萄</h2>
<p>葡萄可以美容养颜。。。</p>
</section>
<footer>
<p>版权出自小丽</p>
</footer>
</article>
Version 2:
<section>
<h2>新闻.国内专题</h2>
<article>
<h3>2014年南方暴雨</h3>
<p>2014年南方暴雨详情</p>
</article>
<article>
<h3>山西官场地震</h3>
<p>山西官场地震详情介绍</p>
</article>
</section>
关于两者做一下总结：一般来说,互为兄弟关系的两个相邻的<section>标签里面的内容一般是相关联的，而对于两个相邻的<article>标签而言，它们里面的内容是没有关联的，是独立的。 由上面的例子可以更加深刻地理解section和article,从语义上讲，article主要强调独立完整性，而section之间可能会有关联，每个section内容也不是完整， 正如上面的代码看到的，article是独立完整的一篇文章或者文档，而section可能有所关联且不完整。从理论上讲，article适用的内容，都可以使用section，但如果符合使用article的要求就不要使用section。
# aside
标签布局与当前文档内容相关却在此文档内容之外的内容
# header
# footer
# nav
<nav>元素代表一个部分包含链接，链接到其他页面或者同一页面的其他部分，主要定义了文档中的导航部分
# Canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。
创建：
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<script type="text/javascript">
var c=document.getElementById("myCanvas");
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
# SVG
HTML5 内联 SVG
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
# 地理位置
getCurrentPosition() 方法来获得用户的位置
# HTML5 拖放
拖放（Drag 和 Drop）是很常见的特性。它指的是抓取某物并拖入不同的位置。 拖放是 HTML5 标准的组成部分：任何元素都是可拖放的
拖动某元素时，依次会触发下列事件：(针对被拖放的元素)
- dragstart 按下鼠标并开始移动鼠标时，会在被拖放的元素上触发
dragstart事件 - drag 触发
dragstart事件后，随即会触发drag事件，在元素被拖动期间持续的触发该事件 - dragend 拖动停止时，会触发
dragend事件
当某个元素被拖放到一个有效的放置目标上时，下列事件会依次发生：(针对放置目标)
- dragenter
- dragover
- dragleave或drop
如何拖放：
Step1：把元素设置为可拖放，为了把一个元素设置为可拖放，请把 draggable 属性设置为 true：
<img id="drag1" src="./gift.png" draggable="true" ondragstart="drag(event)" width="336" height="269">
Step2：然后规定当元素被拖动时发生的事情 ondragstart 和 setData()
- ondragstart() 可以调用一个函数（drag（event））规定拖动什么数据
- dataTransfer.setData() 方法设置被拖动数据的数据类型和值
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")
//实质上是移动了这个元素到新的位置
Step3: 拖到何处 - ondragover
ondragover 事件规定被拖动的数据能够被放置到何处。 默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。 这个任务由 ondragover 事件的 event.preventDefault() 方法完成：
event.preventDefault()
Step4: 进行放置 - ondrop 当放开被拖数据时，会发生 drop 事件, ondrop 属性调用了一个函数，drop(event)：
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
解释：
- 调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素中
重点：
- DataTransfer 对象：拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。
- draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>
- ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
- ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
- ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
- ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
- ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
- ondragleave 事件： 当拖拽的元素离开时触发，此事件作用在被拖拽元素上
- Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉
- Event.effectAllowed 属性：就是拖拽的效果
# dataTransfer 对象
为了在拖放时实现数据交换，IE5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据，因为他是事件对象的属性。所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性或方法来完善拖放功能。
dataTransfer有两个主要的方法：
- getData() 取得由setData()保存的值
- setData() 第一次参数是
text或者URL
eg：
event.dataTransfer.setDate('text', 'some text')
event.dataTransfer.setDate('URL', 'http://www.google.com')
var text = event.dataTransfer.getDate('text');
var url = event.dataTransfer.getDate('URL');
# dropEffect 与 effectAllowd
利用dataTransfer对象，不仅能够传输数据还可以通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。为此需要访问dataTransfer对象的两个属性：
- dropEffect
- effectAllowd
通过dropEffect可以知道被拖动的元素能够执行哪种放置行为。用于设置目标元素将执行的操作，若属性值属于effectAllowed范围内，则鼠标指针将显示对应的指针样式，否则则显示禁止的指针样式。
取值范围：
- none ：被拖拽元素不能在目标元素上作任何操作，一直显示禁止的指针样式。除了文本框外其他元素的默认值均为none
- move ：被拖拽元素将被移动到目标元素内，若属于effectAllowed 范围内时，则鼠标指针显示移动的样式，否则则显示禁止的指针样式
- copy ：被拖拽元素将被复制到目标元素内，若属于 effectAllowed 范围内时，则鼠标指针显示复制的样式，否则则显示禁止的指针样式
- link ：被拖拽元素将以超链接的形式打开资源，若属于 effectAllowed 范围内时，则鼠标指针显示超链接的样式，否则则显示禁止的指针样式
dropEffect只有搭配了effectAllowd属性才有用。effectAllowd属性表示允许拖动元素的哪种dropEffect，此属性用于设置被拖拽元素可执行的操作，只有在ondragstart事件处理函数中设置才会生效。可能的值如下：
取值范围:
- uninitialized：没有限定dropEffect属性的值，效果和 all 一样。
- none: 鼠标指针一直为禁止样式，不管dropEffect的属性值是什么
- copy：限定dropEffect的属性值为copy，否则会鼠标指针为禁止样式
- link：限定dropEffect的属性值为link，否则会鼠标指针为禁止样式
- move：限定dropEffect的属性值为move，否则会鼠标指针为禁止样式
- copyLink：限定dropEffect的属性值为copy和link，否则会鼠标指针为禁止样式
- copyMove：限定dropEffect的属性值为copy和move，否则会鼠标指针为禁止样式
- linkMove：限定dropEffect的属性值为link和move，否则会鼠标指针为禁止样式
- all：允许dropEffect的属性值为任意值
# 可拖动
默认情况下，图像、链接、和文本是可以拖动的，文本只有在选中时才可以拖动。让其他元素拖动也是可能的。HTML5为元素设置了一个draggable属性，表示元素是否可以拖动：
- true 可以拖动
- false 不可以拖动
# html5 web 存储
HTML 本地存储：优于 cookies。
什么是 HTML 本地存储？ 通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。 在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。 与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。 本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。
HTML 本地存储对象 HTML 本地存储提供了两个在客户端存储数据的对象： window.localStorage - 存储没有截止日期的数据 window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）
# localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。
eg：
// 存储
localStorage.setItem("lastname", "Gates");
或是
localStorage.lastname = "Gates";
// 取回
localStorage.getItem("lastname");
或是
localStorage.lastname
//删除
localStorage.removeItem("keyname")
localStorage如何存取，删除对象
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
注意：亲测表明localStorge仅仅对于同源的网站下是可用的
比如，对于在此链接(http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage)下设置的localStorage，那么在www.baidu.com下是访问不到的。但是在http://stackoverflow中是可以访问到的。
# sessionStorage对象
sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。
# HTML事件属性
具体的事件描述参考：http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
classList 属性管理元素上面的类
- add
- contains
- remove
- toggle
# HTMLDocument的变化
readyState属性，Document的readyState可能存在两个可能的值：
- loading 加载 document 仍在加载。
- interactive 互动 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
- complete 完成 文档和所有子资源已完成加载。状态表示
load事件即将被触发
当这个属性的值变化时，document对象上的readystatechange事件将被触发
# 兼容模式
从IE6开始区分渲染页面的模式是标准的还是混杂的。document上提供了compatMode用于标识这个
if(document.compatMode == 'CSS1Compat'){
console.log('standars mode');
} else {
console.log('quirks mode');
}
# 标准模式与兼容模式（怪异模式）各有什么区别?
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页，而Quirks(兼容)模式(也就是松散呈现模式或者怪异模式)用于呈现为传统浏览器而设计的网页。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行
兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看
# 自定义数据属性
HTML5规定了可以为元素添加非标准的属性，但是要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意的添加，随便命名。可以通过使用dataset属性来访问自定义属性的值
# 插入标记
- innerHTML
- outerHTML
- insertAdjacentHTML
# scrollIntoView()
scrollIntoView可以在所有的HTML元素上面调用，通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中。
scrollIntoView(alignToTop)
- 如果alignToTop为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐
- 如果alignToTop为false，元素的底端将和其所在滚动区的可视区域的底端对齐
# 文档模式
IE8时引入文档模式的概念，仅有IE系列浏览器支持，同时在IE11开始弃用 https://docs.microsoft.com/en-us/internet-explorer/ie11-deploy-guide/deprecated-document-modes
# 插入文本
innerText 通过操作元素中包含的所有的文本内容，包括子文档树中的文本。
- 在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来
- 在通过innerText写入值时，结果会删除元素的所有节点，插入包含相应文本值的文本节点
outerText 除了作用范围扩大到了包含调用它的节点之外，outerText和innerText基本上没有多大的区别
- 读取值时，结果一样
- 写值时，会替代调用它的元素
# 跨文档消息传递 cross-document messaging XDM
指的是来自不同域的页面之间传递消息。核心为postMessage()方法
postMessage()方法接受两个参数: 一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数强调了安全方面的限制
var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage('A secret', "http://www.wrox.com");
将消息发送到指定域，如果不符合，则什么都不做。接受到message消息时，会触发window对象的message事件，传递给事件处理程序的事件对象包含三个信息
- data: 从postMessage发送的第一个消息数据
- origin：发送消息的文档所在的域
- source: 发送消息的文档的window对象的代理
# 媒体元素
# 离线应用与客户端存储
# 离线检测
HTML5提供了一个navigator.onLine属性，这个属性值为true表示能上网，值为false表示false表示设备离线
# 应用缓存
HTML5的应用缓存，或者简称为appcache。Appcache就是从浏览器的缓存中分出来一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件manifest file，列出要下载和缓存的资源。eg：
CACHE MANAFEST
#Comment
file.js
file.css
在最简单的情况下，描述文件中列出的都是需要下载的资源，以备离线时使用
# Cookie
HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储会话信息的
限制 cookie在性质上是绑定在特定的域名下的，当设定一个cookie之后，再给创建它的域名发送请求时，都会包含这个cookie。 每个域下的cookie总数是有限的，cookie的长度也是有限制的
构成
- 名称：cookie不区分大小写
- 值：
- 域：cookie对哪个域是有效的
- 路径：
- 失效时间：表示cookie何时应该被删除的时间戳。默认情况下浏览器会话结束时即将所有的cookie删除
- 安全标志：
# Web存储机制
- sessionStorage
- globalStorage => localStorage
# IndexedDB
IndexedDB实在浏览器中保存结构化数据的一种数据库，IndexedDB的设计完全是异步执行的。
← HTML 基础 HTML5 History →