HTML5新特性、新增标签

1.HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签

  • HTML5是超文本标记语言的第五次重新修订,2014年10月29日标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。

  • HTML5的新特性:

  • 用于绘画:canvas元素

  • 用于媒体回访:video和audio元素

  • 对本地离线存储的更好支持:localstorage

  • 新的语义化标签:article、footer、header、nav、section、figure

  • 新的表单控件:calendar、date、time、email、url、search

  • 低版本的 IE 支持 HTML5新标签

// 第一种方法使用html5shiv库

<!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]--> // 在页面中调用时必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用.

// 第二种方法通过js动态创建元素

<!--[if IE]> <script>

(function(){ var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */] for(var i = 0; i < a.length; i++){ document.createElement(a[i]);

}

})() </script>

<![endif]--> // css属性设置

section,article,nav,header,footer{display:block;}

2.input有哪些新增类型

  • email

  • url

  • number

  • range

  • color

  • Date Picker

  • Date

  • month

  • week

  • time

  • datatime

3.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

  • cookie:

  • cookie 是服务器保存在浏览器的一小段文本信息

  • cookie的组成:

  • cookie的名称

  • cookie的值

  • cookie的过期时间

  • cookie所属的域名(默认为当前域名)

  • cookie生效的路径(默认为当前网址)

  • cookie累计长度限制为4KB,超过的将被忽略IE7和之后的版本最后可以有50个cookie,Firefox最多50个cookie,chrome和Safari没有做硬性限制,IE 和 Opera 会清理近期最少使用的 cookie , Firefox 会随机清理 cookie 。要实现读取写入移除检测等功能操作cookie,要自己实现。

  • 同源策略:

  • cookie 还需要指定作用域,不可以跨域调用,只有域命相同和端口相同的网址才可共享cookie设置http-only可禁止javascript读取cookie,用来防止cookie被窃取

  • localStorage:

  • localStorage是Web Storage的一种,让网页在浏览器端保存数据,存储容量比cookie更大localStorage长期保存数据,下一次访问该网站的时候,可以读取到之前保存的数据。不同浏览器对每个域名的存储上限不同,Chrome是2.5MB,Firefox和Opera是5MB,IE是10MB。其中,Firefox的存储空间由一级域名决定,而其他浏览器没有这个限制。也就是说,在Firefox中,a.example.comb.example.com共享5MB的存储空间。

  • 同源策略

  • 只有同域的网页才能读取localStorage自带的API存入数据

  • 用localStorage.setItem("key", "value") 设置数据

  • 用localStorage.getItem("key") 获取某个键名的数据

  • 用localStorage.removeItem("key") 删除所保存的数据

  • 用localStorage.clear() 清空所有数据

  • 但是 cookie 也是不可以或缺的: cookie 的作用是与服务器进行交互,作为 HTTP 规范的一部分而存在 ,而 localStorage 仅仅是为了在本地“存储”数据而生
    详说 Cookie, LocalStorage 与 SessionStorage

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值