HTML5新特性

本文介绍了HTML5的主要新特性,包括语义化标签、本地存储特性及其应用、移除的HTML元素、新增的表单控件及新技术如WebWorker、WebSocket等。详细解释了应用程序缓存的工作原理和使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.语义化标签
article、footer、header、nav、section;
2.本地存储特性
(1)应用程序缓存(Application Cache)
使用方法


页面声明使用App Cache


 <!DOCTYPE HTML> 
 <html manifest="index.manifest"> 
清单文件中写明资源。


CACHE MANIFEST
theme.css 
logo.gif 
main.js


NETWORK:
login.asp


FALLBACK:
/html5/ /404.html


manifest 文件可分为三个部分:


CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存 
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)


CACHE MANIFEST,是必需的 
NETWORK 规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的 
FALLBACK 规定如果无法建立因特网连接,则用 “404.html” 替代 /html5/ 目录中的所有文件


一旦应用被缓存,它就会保持缓存直到发生下列情况:


用户清空浏览器缓存 ,用户怎么做,页面左右不了,说了等于没说。
manifest 文件被修改,请注意:更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改,一般是加一个注释,注释的内容是日期,想更新了,改一下日期。
由程序来更新应用缓存,这个稍微靠谱一点。
需要注意的是,更新后的资源需要下次打开页面才能生效,本次打开的页面在更新资源之前就已经从缓存中拿到资源并加载完毕了。


sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。


区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。


而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。


数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。


作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。


3. 移除的元素:
    纯表现的元素:basefont,big,center,font, s,strike,tt,u;
    对可用性产生负面影响的元素:frame,frameset,noframes;


4.表单控件
calendar、date、time、email、url、search;


5.新的技术
webworker, websocket, Geolocation
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值