小白要进阶

H5的新特性

1.h5新语义元素（有利于代码可读性和SEO）
2.本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储，使用之前应该先判断支持情况。
注意：localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

	localStorage	sessionStorage	cookie
描述	将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。	从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。	由服务器端生成，发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器
生命周期	始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。可以在localStorage中加一个时间字段控制有效期。	基于会话，关闭浏览器之后存储消失	生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。默认情况下的有效期是很短暂的，一旦用户关闭浏览器，cookie保存的数据就会丢失。
大小	5MB	5MB	4k 有个数限制（各浏览器不同），一般不能超过20个。
作用域	相同浏览器的不同页面间可以共享相同的 localStorage （页面属于相同域名和端口）	不同页面或标签页间无法共享如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage	它是通过文档源和文档路径来确定的，通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的web页面有关，并对该页面以及和该页面同目录或者子目录的其他页面可见。
应用场景	常用于长期登录（+判断用户是否已登录）适合长期保存在本地的数据。	敏感账号一次性登录	自动登录
内容类型	只能是字符串
与服务器通信	只有在请求的时候使用数据，不参与通信，不会自动把数据发给服务器 (Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 window.addEventListener('storage', showStorageEvent, true) )		每次会携带在HTTP头中，若数据过多会带来性能问题。
使用方式	可以使用原生接口 setItem (key, value) 、getItem (key)、removeItem (key) clear () 、key (index)		需要自己封装setCookie、getCookie等方法
缺点	存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。	Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。	大小受限用户可以操作（禁用）cookie 使功能受限安全性较低，有些状态不可能保存在客户端。每次访问都要传送cookie给服务器，浪费带宽。 cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
共同点	都保存在浏览器端

3.离线web应用
页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用

if(window.applicationCache){
//支持离线应用
}

4.表单新增功能
以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定


      
 


placeholder屬性


autofocus属性，页面只能有一个


还有type为email、number等，但是实际项目中一般使用自定义。

5. CSS3
CSS3提供了更多的选择器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size。

6.地理定位
h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法:

getCurrentPosition()、watchPosition()、clearWatch()

页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。

总结：

html5 是公认的web开发的html规范，是一系列关于html的标准;
h5是一系列技术的集合，它是应用一系列的web技术出现的产物。

使用html5shiv可以解决ie低版本不兼容的问题，只需要在head中加上,当版本低于IE9时，浏览器会加载html5.js脚本，使得支持html5的新功能，也可以将脚本文件下载到本地

HTML语义化是什么？

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

为什么要语义化？

有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。

语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构

方便其他设备的解析

便于团队开发和维护

HTML5新增标签
新的语义和结构元素		定义文档中的主体部分的节、段。
		一个特殊的section标签，比section有更明确的语义。定义来自外部的一个独立的、完整的内容块，例如什么论坛的文章，博客的文本。
		用来装载页面中非正文的内容，独立于其他模块。例如广告、成组的链接、侧边栏。
		定义文档、页面的页眉。通常是一些引导和导航信息，不局限于整个页面头部，也可以用在内容里。
		定义了文档、页面的页脚，和header类似。
		定义了一个链接组组成的导航部分，其中的链接可以链接到其他网页或者当前页面的其他部分。
		用于对网页或区段(section)的标题元素(h1~h6)进行组合。
		用于对元素进行组合。
		为figure元素加标题。一般放在figure第一个子元素或者最后一个。
		定义元素的细节，用户可以点击查看或者隐藏。
		和details连用，用来包含details的标题。
		在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。
		进度条，运行中的进度。
		定义日期或者时间。
		定义命令行为。
		定义度量衡，仅用于已知最大和最小值的度量。
新元素		用来进行canvas绘图。
新多媒体元素		定义视频。
		定义音频。
		定义嵌入网页的内容。比如插件。
		该标签为媒介元素(比如video、audio)定义媒介元素。
		为诸如
新表单元素		定义不同类型的输出，样式与span无异。
		定义加密内容。
		定义可选数据的列表，与input配合使用()可制作输入值的下拉列表。
已移除的元素	、、、、、、、、

H5的新特性

总结：

HTML语义化是什么？

为什么要语义化？

HTML5新增标签