H5的新特性

https://blog.csdn.net/weixin_42441117/article/details/80705203

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屬性
<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>

</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'>)可制作输入值的下拉列表。
已移除的元素

input新增类型
color 选择颜色
date 选择日期
datetime 选择一个日期（UTC 时间）
datetime-local 选择一个日期和时间 (无时区)
email 用于检测输入的是否为email格式的地址
month 选择月份
number 用于应该包含数值的输入域，可以设定对输入值的限定
range 用于定义一个滑动条，表示范围
search 用于搜索，比如站点搜索或 Google 搜索
tel 输入电话号码
time 选择一个时间
url 输入网址
week 选择周和年

巴特西

H5的新特性

最新文章

热门文章