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属性綁定
<form id="testform">
<input type="text" />
</form>
<input form=testform />
placeholder屬性
<input type="text" placeholder="请输入密码" />
autofocus属性,页面只能有一个
<input type="text" 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的新功能,也可以将脚本文件下载到本地
<head>
<!--[if lt IE 9]>
<script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
</script>
<![endif]-->
</head>
HTML语义化是什么?
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。
为什么要语义化?
有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
方便其他设备的解析
便于团队开发和维护
HTML5新增标签 | ||
新的语义和结构元素 | <section></section> | 定义文档中的主体部分的节、段。 |
<article></article> | 一个特殊的section标签,比section有更明确的语义。定义来自外部的一个独立的、完整的内容块,例如什么论坛的文章,博客的文本。 | |
<aside></aside> | 用来装载页面中非正文的内容,独立于其他模块。例如广告、成组的链接、侧边栏。 | |
<header></header> | 定义文档、页面的页眉。通常是一些引导和导航信息,不局限于整个页面头部,也可以用在内容里。 | |
<footer></footer> | 定义了文档、页面的页脚,和header类似。 | |
<nav></nav> | 定义了一个链接组组成的导航部分,其中的链接可以链接到其他网页或者当前页面的其他部分。 | |
<hgroup></hgroup> | 用于对网页或区段(section)的标题元素(h1~h6)进行组合。 | |
<figure></figure> | 用于对元素进行组合。 | |
<figcaption></figcaption> | 为figure元素加标题。一般放在figure第一个子元素或者最后一个。 | |
<details></details> | 定义元素的细节,用户可以点击查看或者隐藏。 | |
<summary></summary> | 和details连用,用来包含details的标题。 | |
<mark></mark> | 在视觉上向用户展现出那些想要突出的文字。比如搜索结果中向用户高亮显示搜索关键词。 | |
<progress></progress> | 进度条,运行中的进度。 | |
<time></time> | 定义日期或者时间。 | |
<command></command> | 定义命令行为。 | |
<meter [min/max/low/high/optimum/value]></meter> | 定义度量衡,仅用于已知最大和最小值的度量。 | |
新元素 | <canvas></canvas> | 用来进行canvas绘图。 |
新多媒体元素 | <video></video> | 定义视频。 |
<audio></audio> | 定义音频。 | |
<embed></embed> | 定义嵌入网页的内容。比如插件。 | |
<source></source> | 该标签为媒介元素(比如video、audio)定义媒介元素。 | |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 | |
新表单元素 | <output></output> | 定义不同类型的输出,样式与span无异。 |
<keygen></keygen> | 定义加密内容。 | |
<datalist id='dl'></datalist> | 定义可选数据的列表,与input配合使用(<input list='dl'>)可制作输入值的下拉列表。 | |
已移除的元素 | <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font> <frame>、<frameset>、<noframes>、<strike>、<tt>
|
input新增类型 | |
color | 选择颜色 |
date | 选择日期 |
datetime | 选择一个日期(UTC 时间) |
datetime-local | 选择一个日期和时间 (无时区) |
email | 用于检测输入的是否为email格式的地址 |
month | 选择月份 |
number | 用于应该包含数值的输入域,可以设定对输入值的限定 |
range | 用于定义一个滑动条,表示范围 |
search | 用于搜索,比如站点搜索或 Google 搜索 |
tel | 输入电话号码 |
time | 选择一个时间 |
url | 输入网址 |
week | 选择周和年 |