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属性綁定

<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 选择周和年

H5的新特性的更多相关文章

  1. CSS3和H5的新特性

    H5的新特性 1.   用于绘画 canvas 元素. 2.   用于媒介回放的 video 和 audio 元素. 3.   本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不 ...

  2. H5学习之旅-H5的新特性（1）

    随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言 新特性介绍 1.用于回话的canvas标签 2 ...

  3. 【repost】H5的新特性及部分API详解

    h5新特性总览 移除的元素 纯表现的元素: basefont.big.center.font等 对可用性产生负面影响的元素: frame.frameset.noframes 新增的API 语义: 能够 ...

  4. H5常用新特性

    html5新特性 [注意]这些新特性都有兼容性的问题,基本是IE9+以上版本的浏览器才支持,如果不考兼容性问题,可以大量使用这些新特性 html5新增的语义话标签 <header> :头部 ...

  5. JS 前端 将图片转换为Base64利用H5 FileReader新特性

      file = document.getElementById("image"); var file=file.files[0]; var fileName=file.name; ...

  6. H5、C3、ES6的新特性

    H5的新特性 1.语义化标签 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其 ...

  7. H5新特性之data-*

    简单介绍:html5的data-*能够为标签添加一些自定义的属性和值,并且这种自定义的属性和值可以通过js来获取,十分的便捷 代码: //html<tr th:each="plan : ...

  8. h5新特性 File API详解

    之前一直觉得h5的新特性就是一些新标签呢,直到想研究一下图片上传预览的原理,才发现还是有好多新的api的,只是不兼容ie低版本,挺可惜的, File API在表单中文件输入字段基础上,又添加了一些直接 ...

  9. 前端面试基础-html篇之H5新特性

    h5的新特性(目前个人所了解)如下 语义化标签 表单新特性 视频(video)和音频(audio) canvas画布 svg绘图 地理定位 为鼠标提供的拖放API webworker (重点)Stor ...

随机推荐

  1. vue用template还是JSX？

    各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...

  2. NLP（二十五）实现ALBERT+Bi-LSTM+CRF模型

      在文章NLP(二十四)利用ALBERT实现命名实体识别中,笔者介绍了ALBERT+Bi-LSTM模型在命名实体识别方面的应用.   在本文中,笔者将介绍如何实现ALBERT+Bi-LSTM+CRF ...

  3. Vue2.0 【第三季】第2节 computed Option 计算选项

    目录 Vue2.0 [第三季]第2节 computed Option 计算选项 第2节 computed Option 计算选项 一.格式化输出结果 二.用计算属性反转数组 Vue2.0 [第三季]第 ...

  4. .net webapi 接收保存图片到服务器，并居中剪裁压缩图片

    原文链接:https:////www.cnblogs.com/Jackyye/p/12510943.html 每天解决一些c#小问题,在写微信小程序,或者一些手机软件接口,我们经常要用到上传图片到服务 ...

  5. （转）浅析epoll – epoll例子以及分析

    原文地址:http://www.cppfans.org/1419.html 浅析epoll – epoll例子以及分析 上篇我们讲到epoll的函数和性能.这一篇用用这些个函数,给出一个最简单的epo ...

  6. go源码分析(二) 使用go http包开发web时遇到的坑之重复注册Handle路由

    我们使用Handle注册http时 如果添加两行,即重复注册函数. http.HandleFunc("/",index) http.HandleFunc("/" ...

  7. ipadmini从9.3.5降级8.4.1并完美越狱

    ipadmini之前是iOS9.3.5实在是卡的用不了,于是打算降级,但是尝试了包括改版本描述等很多方法一直失败.今天突然成功降级8.4.1并且完美越狱,运行流畅了非常多.赶紧发个教程,回馈一下网友. ...

  8. 关于pytorch在windows上编辑的问题集合

    cmake在windows上自动寻找v140(VS2015)的编译器,现在只有VS2013的IDE,所以要修改编译器 修改掉VS2015的编译器名称,报错提示参数CMAKE_C_COMPILER和CM ...

  9. Java多线程并发07——锁在Java中的实现

    上一篇文章中,我们已经介绍过了各种锁,让各位对锁有了一定的了解.接下来将为各位介绍锁在Java中的实现.关注我的公众号「Java面典」了解更多 Java 相关知识点. 在 Java 中主要通过使用sy ...

  10. 安装sql server 2005时出现“安装汇编”错误的解决办法

    今天安装sql server 2005 management studio到最后步骤的时候报“安装汇编”错误,卸载重装的几遍还是不行,最后将net framework 3.5删除后,终于安装成功了.