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. 一次 Druid 连接池泄露引发的血案！

    最近某个应用程序老是卡,需要重启才能解决问题,导致被各种投诉,排查问题是 Druid 连接池泄露引发的血案.. 异常日志如下: ERROR - com.alibaba.druid.pool.GetCo ...

  2. 小巧开源的 baresip VOIP 项目

    Baresip is a modular SIP User-Agent with audio and video support https://github.com/alfredh/baresip ...

  3. adb模拟按键与输入

    在 adb shell 里有个很实用的命令叫 input,通过它可以做一些有趣的事情. input 命令的完整 help 信息如下: Usage: input [<source>] < ...

  4. C语言程序设计（五） 选择控制结构

    第五章 选择控制结构 分治策略:任务分解细化 程序设计语言:为了让计算机执行由高级语言编写的程序指令,必须把这些指令从高级语言形式转换成计算机能理解的机器语言形式,这种转换是由编译器来完成的 算法:为 ...

  5. 测试必知必会系列- Linux常用命令 - mkdir

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! 新建一个文件夹 yyTest mkdir yyTest 新建三个文件夹 yyTest1 yyTest2 yyTe ...

  6. javaScript 基础知识汇总 （十二）

    1.属性的标志和描述符 属性的标志 对象属性除value外还有三个特殊属性,即标志 writable ----如果为true,则可以修改,否则它只是只读的. enumerable ----如果为tru ...

  7. 深入理解计算机系统 (CS:APP) - 高速缓存实验 Cache Lab 解析

    原文地址:https://billc.io/2019/05/csapp-cachelab/ 这个实验是这学期的第四个实验.作为缓存这一章的配套实验,设计得非常精妙.难度上来讲,相比之前的修改现成文件, ...

  8. Requests发送带cookies请求

    一.缘 起 最近学习[悠悠课堂]的接口自动化教程,文中提到Requests发送带cookies请求的方法,笔者随之也将其用于手头实际项目中,大致如下 二.背 景 实际需求是监控平台侧下发消息有无异常, ...

  9. 使用Jmeter进行压力测试结果偏差较大原因分析

    Apache软件基金会(ASF)是一家总部位于美国的非营利性慈善组织.ASF的所有产品都通过公共论坛的在线协作开发,并从美国境内的中央服务器分发.Jmeter是ASF的一款开源免费软件 ,在国内被很多 ...

  10. BJDCTF

    python3的模板注入 非常简单...就是直接执行命令就行..虽然过滤了flag,但是拼接下就好了.... payload: http://fd5883ee-b8e2-4bf1-88af-33936 ...