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. Cisco asa组建IPSEC for ikev1

    IPSec的实现主要由两个阶段来完成:--第一阶段,双方协商安全连接,建立一个已通过身份鉴别和安全保护的通道.--第二阶段,安全协议用于保护数据的和信息的交换. IPSec有两个安全协议:AH和ESP ...

  2. django 从零开始 12 快速集合queryset对象

    使用序列化将查询到的quweyset对象进行一个格式转换          还没看文档理解 待写 from django.core.serializers import serializers 导入该 ...

  3. nohub 将程序永久运行下去

    今天看了一遍文章,一直以为将程序制成sh脚本,通过crontab来间隔执行以为是真的不断执行,后来才发现是错误的,每隔一段时间都会执行一次,都会占用一个进程,难怪一看进程几十来个同样名字的进程在运行 ...

  4. C++ 指针函数

    #include <stdio.h> #include <windows.h> using namespace std; template<typename T> ...

  5. [vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives.

    使用VScode开发vue中,v-for在Eslint的规则检查下出现报错:如下Elements in iteration expect to have ‘v-bind:key’ directives ...

  6. 使用express+shell在服务器上搭建一套简单的前端部署系统

    前言 个人项目越来越多,部署需要频繁操作服务器,所以手动搭建一套简单的部署系统. 效果如图 其中包含 原生html+css+js项目,单页面react, vue, angular项目,实现了一键打包发 ...

  7. ant-design-pro 如何打包成 本地html，双击即可查看

    由于 ant-design-pro 的 mock 是一个单独的服务,所以没有办法整合到一起打包.暂时我是没有找到. 所以解决方案就是不用 mock . 由于 系统有异步调取,所以一旦有异步调取就会失败 ...

  8. C/C++、C#、JAVA(二)：基本类型和转换操作

    基本类型和转换操作 数据类型 C语言中的基本类型如下. 类型 存储大小 值范围 char 1 字节 -128 到 127 或 0 到 255 unsigned char 1 字节 0 到 255 si ...

  9. Natas15 Writeup（sql盲注之布尔盲注）

    Natas15: 源码如下 /* CREATE TABLE `users` ( `username` varchar(64) DEFAULT NULL, `password` varchar(64) ...

  10. Unity 游戏框架：资源管理神器 ResKit

    此篇文章准备了将近两周的时间,写了改,改了删.之前有朋友反馈,上一个文章太冗长了,影响阅读体验,这一讲就走个精简路线.所以只要不是很重要的内容就都删减掉了. 文章分两个部分,第一部分是原理,第二部分是 ...