HTML5 history新特性pushState、replaceState,popstate

http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.History 使用back(),forward(),和go()方法可…

HTML5 history新特性pushState、replaceState

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.History 使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退前进和后退后退: window.history.back(); 这个方法会像用户点击了浏览器工具栏上的返回键一样. 同样的,也可以用以下方法产生用户前进行为: window.history.forward(…

使用 HTML5 History 新特性增强 Ajax 的体验(转)

一. 场景再现如大家熟知,Ajax 可以实现页面的无刷新操作,但会造成两个与普通页面操作(有刷新地改变页面)有着明显差别的问题—— URL 没有修改以及无法使用前进.后退按钮.例如常见的 Ajax 分页,在第一页点击第二页的链接,Ajax 分页完成后浏览器地址栏上显示的 URL 依然是第一页的 URL,使用后退按钮也无法回到第一页.url 的改变代表一个标识,在传统的网页体验中,内容的变更伴随 url 的改变,url 的改变.前进和后退按钮三者之间更加形成一种独特的导航体验,而 Ajax 破坏…

Atitti html5 h5 新特性attilax总结

Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位符 (Placeholder) 在HTML4或XHTML中,你需要用JavaScript来给文本框添加占位符.比如,你可以提前设置好一些信息,当用户开始输入时,文本框中的文字就消失. 而在HTML5中,新的“placeholder”就简化了这个问题. 9.必要属性 (Required Attribu…

Atitit html5.1 新特性attilax总结

Atitit html5.1 新特性attilax总结 9. 嵌入 header 和 footer1 7. 校验表单1 6. 浏览器的上下文菜单2 1. 响应式图像2 Attilax觉得还不错的心特性 9. 嵌入 header 和 footer HTML5.1 允许你在另一个 header 嵌入 header 和 footer.你可以向头部元素添加一个 header 或 footer ,假如它们在段落内容里包含它们自己.假如你想添加详细阐述诸如 <section> 和 <article&…

浅谈HTML5的新特性

2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容. HTML5 的新特性 ① 语义特性(Semantic) HTML5赋予网页更好的意义和结构. ② 本地存储特性(OFFLINE & STORAGE) 基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Ca…

HTML5的新特性：范围样式，又叫做<style scoped>

Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于style标签的子元素上.这会限制样式只影响style标签的父元素和它所有的后代元素. 例子下面是一个使用了标准样式的简单页面: <html> <body> <div>a div! <span>a span!</span></div>…

使用Modernizr探测HTML5/CSS3新特性（转载）

转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.html HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特…

使用Modernizr探测HTML5/CSS3新特性

[转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实,老版本浏览器已经使用了很多年,我们依然需要考虑这些版本的兼容性问题.本文要解决的问题就是:在我们使用HTML5/CSS3技术的时候,如何…

28个你必须知道的HTML5的新特性,技巧以及技术

崭新新的页面布局传统的: HTML5: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p&g…

浅谈html5及其新特性

什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的. 新特性 HTML5 中的一些有趣的新特性: 用于绘画的…

HTML5的新特性及技巧分享总结

原文链接:http://www.aseoe.com/show-10-645-1.html?utm_source=tuicool&utm_medium=referral 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染所有浏览器都支持 <!DOCTYPE> 声明. <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.…

HTML5的新特性

HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.footer.header.nav.section 新的表单控件,比如 calendar.date.time.email.url.search 一.html5视频: 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件…

开发者必须知道的HTML5十五大新特性

HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型 (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x…

28个你必须知道的HTML5的新特性，技巧以及技术

原文地址:http://adamlu.com/?p=584#header 总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src="path/to/image" alt="About image" /> <…

HTML5十五大新特性

HTML5想必大家都很熟悉了.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型 (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2."http://www.w3.org/TR/xhtml1/DTD/x…

HTML5 的新特性以及新标签的浏览器兼容问题

新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1) 拖拽释放(Drag and drop) API 2) 语义化更好的内容标签(header,nav,footer,aside,article,section) 3) 音频.视频API(audio,video) 4) 画布(Canvas) API 5) 地理(Geolocation) API 6) 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: 7…

学习HTML5之新特性标签一览（详细）

HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数先来记录一下HTML5增加的几个新的标签吧! 1. <canvas>画布标签 HTML5的新标签举例: <html> <head> <title>canvas画布的应用</title> <p align="center"&g…

小强的HTML5移动开发之路（2）——HTML5的新特性

来自:http://blog.csdn.net/dawanganban/article/details/17592787 一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript在上面绘图.下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head>…

学习前端第一天心得体会（初步了解HTML5的新特性以及和HTML的区别）

一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建. HTML5 是跨平台的,被设计为在不同类型的硬件(PC.平板.手机.电视机等等)之上运行. 二.HTML5的一些特殊标签. 1.video标签,该标签是HTML5特有的标签,主要是为了解决pc上视频播放问题. 属性:autoplay:视频准…

html5 history 信息api pushState

这个功能可以进行传参,还可以解决ajax无法前进和倒退的问题首先,history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性,所以IE9以下的是不支持的. 直接上代码: history.replaceState() 顾名思义就是替换的意思,所以它的作用就是替换当前地址栏的url <!DOCTYPE HTML> <head> <script src="jquery-1.8.2.m…

Html5的新特性总结

新加语义化标签: HTML5其实是关于图像,位置,存储,速度的优化和改进图像: 到目前为止,基本上想要直接在网页上进行绘图还是不能轻易完成的,即使是几何图形也不可以.在浏览器当中直接能跟图片的交互操作也很有限,多数是保存和点击.如果希望能够跟图片进行更多的操作或者在浏览器当中画出图形,就需要flash, silverlight 这类插件来帮忙. HTML5了解人们的需求,HTML5已经确定引入canvas标签,通过canvas,用户将可以动态的生成各种图形图像,图表以及动画. 位置: 这个大头…

html5的新特性——拖放API

在HTML5之前只能使用鼠标事件模拟出"拖放"效果:HTML5专门为拖放提供了7个事件句柄. 被拖动的源对象可以触发的事件: (1)ondragstart:源对象开始被拖动 (2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动) (3)ondragend:源对象被拖动结束拖动源对象可以进入到上方的目标对象可以触发的事件: (1)ondragenter:目标对象被源对象拖动着进入 (2)ondragover:目标对象被源对象拖动着悬停在上方注意:必须组织drago…

html5.2新特性【长期更新】

先来说几个新定义: 1.p标签里只能是文字内容,不能在里面使用浮动,定位这些特性了.语义化加强,p标签就是文字标签. 2.legend以前只能是纯文本,新版可以加标签了,很爽吧. <fieldset> <legend><h1>健康信息</h1></legend> 身高:<input type="text" /> 体重:<input type="text" /> </fields…

html5 css3新特性了解一下

html5: 用于绘画的 canvas 元素以及SVG 用于媒介回放的 video 和 audio 元素拖拽(Drag 和 drop) 地理定位(Geolocation) 对本地离线存储的更好的支持 localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高. 在…

一个最简html5文档来说明html5的新特性和写法

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8">  <title>html5文档</title> <link href="x.css" rel="stylesheet">…

html5.css3新特性

块: article section, Nav aside header footer 内容分组 future fig caption main 文本级别标签 time i b em strong article: 包含一个或多个header 或者footer nav : 导航重要区域 aside: 对页面的补充侧边栏,友情链接 div : 广泛 section: 明确的主题,通常有标题区域 main : 主题内容,每个页面只能包含一个mian标签,,main标签中不包含网站标题…

html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题

一.背景使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新.这样可以开发交互性很强的富客户端程序,减少网络传输的内容.但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮进行操作.比如在页面执行某个动作,该动作利用ajax请求到服务器获取数据,更新了当前页面的某些内容,这时想回到操作前的界面,用户就会习惯点击浏览器的后退按钮,实际这里是无效的(要么页面没反应,要么打开一个前面打开的过的页面),或者想收藏当前页面(以便于重新打开时直接显示当前的信息),也是无法做到的.…

html5新特性

这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录对于初接触的人来说是一个导向对于已经接触过的人来说是一个检测你掌握程度的检测 html5新特性综述: 1.用于绘画的canvas和SVG, canvas和SVG都允许在浏览器中创建图片,但是他们的实现原理是不同的. SVG通过xml完成2d图形的绘制:----------反正我不用 canvas是通过JavaScript完成2d图形:---------我也不常手写他最多也…

HTML5和CSS3的一些新特性

html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 新特性: 1. 拖拽释放(Drag and drop) 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(audio,video) 4. 画布(Canvas) 5. 地理(Geolocation) 6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: 7. ses…

【HTML5 history新特性pushState、replaceState,popstate】的更多相关文章