H5新特性

HTML5是什么?

HTML5 是 HTML标准的最新演进版本,它是一个新的 HTML 语言版本包含了新的元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们,通常简称为 HTML5

HTML5的新特性,新增标签

1.新特性
1.语义化标签:header、footer、section、nav、aside、article
2.增强型表单:input 的多个 type
3.新增表单元素:datalist、keygen、output
4.新增表单属性:placehoder、required、min 和 max
5.音频视频:audio、video
6.canvas
7.地理定位
8.拖拽
9.本地存储:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除
10.新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
11.WebSocket:单个 TCP 连接上进行全双工通讯的协议

2.新增标签

标签描述
header定义了文档的头部区域
footer定义了文档的尾部区域
section定义文档中的节
nav定义了文档的导航
article定义页面独立的内容区域
aside定义页面的侧边栏内容
detailes用于描述文档或文档某个部分的细节
dialog定义对话框,比如提示框
summary标签包含 details 元素的标题

使用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>

3.input 有哪些新增类型?

input 的 type描述
color主要用于选取颜色
date从一个日期选择器选择一个日期
datetime选择一个日期(UTC 时间)
email包含 e-mail 地址的输入域
month选择一个月份
number数值的输入域
range一定范围内数字值的输入域
search用于搜索域
tel定义输入电话号码字段
time选择一个时间
urlURL 地址的输入域
week选择周和年

4.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
共同点:sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别
1.cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,localStorage不会自动把数据发给服务器,仅在本地保存
2.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。localStorage不会自动把数据发给服务器
3.cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据
4.localStorage支持事件通知机制,可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序员自己封装
HTML5中提供了localStorage对象可以将数据长期保存在客户端,除非人为清除,localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时,更新value
2.获取 localStorage.getItem(key)如果key不存在返回null
3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除
4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
注意:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值