【努力学习 HTML5 （3）—— 改造传统的 HTML 页面】的更多相关文章

努力学习 HTML5 （3）—— 改造传统的 HTML 页面

要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. ApocalypsePage_Original.html,这是一个格式非常规范的页面,所有的样式均来自于外部样式表. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8…

努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况

经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示. 毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> 元素就行了.为此我们要做的就是为它们添加点样式规则.之后就可以得到超级可靠的语义元素了,即使使用10年前的浏览器也可以正常浏览. 为语义元素添加样式 浏览器遇到不认识的元素时,会把它们当做内联(inline)元素.大多数 HTML5 语义元素都是块级元素. 因此我们添加一条超级规则,为9个 HTML5 元素…

努力学习 HTML5 （1）—— 初体验

HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 <!doctype html> <title>A Tiny HTML Document</title> <p>Let's rock the browser, HTML5 style.</p> 只包含一行文本的超简单的 HTML5 文档,它在浏览器中效果…

努力学习 HTML5 （2）—— 元素的增和删

HTML5 放松了某些规则,HTML5 的制定者想让这门语言更紧密地反映浏览器的现实. 放松的规则 不要求包含 <html>.<head> 和 <body> 元素. 不区分大小写. 允许省略关闭空元素,例如 <img>.<br> 或者 <hr>. 属性值可以不加引号,只有属性名没有属性值也可以. 如果能做到以下几点,就算是良好的 HTML5 风格了. 包含可选的<html>.<head> 和 <body&…

学习HTML5必读之《HTML5设计原理》

引子:很久前看过的一遍受益匪浅的文章,今天再次转过来,希望对学习HTML5的朋友有所帮助. 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一方面,当然了,就是HTML5.我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范. 实际上,确实有人会谈到规范的内容.史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性.而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API.因此,我今天站…

大熊君学习html5系列之------Online && Offline（在线状态检测）

一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, online,offline 事件用来监测浏览器处于在线或离线状态.HTML5提出的离线存储,web应用程序可以在不连接互联网的情况下满足用户的部分需求,…

大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是“requestAnimationFrame API”及在客户端浏览器中的作用,并且会引入一个实际的例子做为讲解的原型范例,让我们先来看看“request…

大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是“XMLHttpRequest Level 2 API”及在客户端浏览器中的作用,并且会引入一个实际的例子做为讲解的原型范例,让我们先来看看“XHR AP…

大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是“WebStorage API”及在客户端浏览器中的作用,并且会引入一个实际的例子做为讲解的原型范例,让我们先来看看“WebStorage API”: H…

大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）

一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是对昨天文章中的代码进行重构,并且相应的美化了一下前台UI界面,如下图所示的效果: 哈哈哈酷吧!继续让咱们做个简单的回顾: 为了提高Web页面的响应速度,越…