代码改变世界

随笔分类 -[05]HTML5/CSS3

《深入理解Bootstrap》勘误

2014-05-25 09:34 by 汤姆大叔, 9034 阅读, 收藏, 编辑
感谢大家感谢大家仔细阅读本书,并给本书指出了那么多的错误,下次重印时,一定会修正。勘误列表ID发行人章节原文更新文备注1剑衣清风(微博)1.5选择器(p7)[att$=value] 该属性的值必须包含特定值(而无论其位置怎么样)。[att*=value] 该属性的值必须以特定值结束 。[att$=v...

全球第一本基于Bootstrap V3.x的图书《深入理解Bootstrap》终于上市了,再次免费送书15本【活动结束】

2014-05-23 08:58 by 汤姆大叔, 33572 阅读, 收藏, 编辑
先说活动规则,再说书的事经过将近1年的努力,终于有了第一本自己独立编写的书:《深入理解Bootstrap》,基于最新版V 3.1 ,侧重于源码详解、架构分析、插件扩展(全新开发)实战。为了感谢大家以往依赖的支持,所以再次来个大放送,15个名额,具体活动内容和规则如下:活动1:博客园回帖送书规则:5月...

大叔手记(17):大叔2011年读过的书及2012年即将要读的书

2012-01-04 09:39 by 汤姆大叔, 25621 阅读, 收藏, 编辑
前言2011年是大叔最累的一年(基本上都是晚上12点以后睡觉,早上6点30分起),读得书也是异常的多,一方面要保持自己的技术在最前列,另外方面技术管理和项目管理方面的东西也要进一步进阶,2011年读过的书超过60本(也包括只收藏不读的书,还有一些非常小的英文电子书就不列了),除了一些大牛的书,其它的书基本上都是粗读的(一周一本),同时2012年的书也是按照这个计划来安排的,即:国际/国内大牛的书通读,一般的书粗读,以保证技术人员和管理人员的先进性:)。带 [荐]字的都是推荐大家读的。看了这篇帖子,大家千万别像我这么变态地读书,因为大叔已经不怎么亲自Coding了,所有以大量的时间读书。大叔在这

HTML5学习笔记简明版(11):新增的API

2011-12-18 11:52 by 汤姆大叔, 5176 阅读, 收藏, 编辑

HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口。这些接口在所有实现了Document接口的元素对象上进行了实现,例如:getElementsByClassName,innerHTML以及activeElement和hasFocus。同时,也对HTMLElement接口增加了一些扩展,如getElementsByClassName,innerHTML,classList。

HTML5学习笔记简明版(10):废弃的元素和属性

2011-12-17 20:36 by 汤姆大叔, 3849 阅读, 收藏, 编辑
本章节列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话可以使用一些替代方案。例如parser section 可以处理isindex 元素的功能。另外,HTML4里的一些属性不会再被允许在HTML5里使用了,规范里详细说明了如何处理现有的文档,并且以后新文档不能再使用这些属性,因为他们会标记成不合法的属性。但是HTML5提供了相应的替代方案供开发人员使用。

HTML5学习笔记简明版(9):变化的元素和属性

2011-12-15 08:40 by 汤姆大叔, 2066 阅读, 收藏, 编辑

本章节介绍的HTML5的对现有元素和属性的更改,其中元素有14个类型的更改,属性有7大类的更改。例如,没有href属性的a元素将显示成一个占位符,而且a元素内部现在支持flow content类型的元素了(例如:article, input, span等)。address可以被article, aside, nav, section限定范围了,以前只能作用于全局范围。

HTML5学习笔记简明版(8):新增的全局属性

2011-12-14 09:51 by 汤姆大叔, 6956 阅读, 收藏, 编辑

本章节介绍的是HTML5在现有元素上增加的全局属性:contenteditable,contextmenu,data-*,draggable和dropzone,hidden,role和aria-*,spellcheck,主要是用来提供用户体验的。 比如,任何元素使用contenteditable属性的话,代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。

使用HTML5/CSS3五步快速制作便签贴特效

2011-12-13 11:58 by 汤姆大叔, 8625 阅读, 收藏, 编辑
摘要本篇文字将展示给你的是,如何利用HTML5/CSS3,仅用5步就可以制作便签贴效果的HTML页面,效果图如下:(注:图里的文字纯属杜撰,搞笑目的,如有雷同,纯属巧合,谢谢!)注:该效果可以在Safari, Chrome,Firefox和Opera在看到效果,IE上由于对HTML5的支持不完全,所以看不出效果。第一步:创建基本HTML和正方形首先添加基本的HTML结构以及构建基本的正方形,代码如下: <ul> <li><a href="#"> <h2>Dudu:</h2> <p>最近咋没有美女发帖呢?

HTML5学习笔记简明版(7):新增属性(2)

2011-12-13 08:52 by 汤姆大叔, 4545 阅读, 收藏, 编辑

本章节介绍的是HTML5对现有元素新增的属性。例如,input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl)。或者textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。

HTML5学习笔记简明版(6):新增属性(1)

2011-12-12 13:30 by 汤姆大叔, 4532 阅读, 收藏, 编辑

本章节介绍的是现有元素上新增的一批属性。为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问

HTML5学习笔记简明版(5):input的type超级类型

2011-12-12 08:39 by 汤姆大叔, 3819 阅读, 收藏, 编辑
HTML5为input的type类型增加了多种枚举值,用来表达不同的意思,同事具有验证功能,如果格式不对,浏览器将原始提供错误提示,堪称超级牛X啊。同时大叔发现mhtml5网站上已经有很多现成的资料了,所以余下的一些新元素请大家自行参考该网站的资料学习,大叔将着重继续学习HTML5在现有元素上的更新改变。

HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output

2011-12-09 08:58 by 汤姆大叔, 5448 阅读, 收藏, 编辑
本章节介绍的HTML5的另外6个新元素video,audio,meter,datalist,keygen,output。通过video标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。audio有原生支持音频播放的功能,而不需要浏览器安装额外的扩展;目前支持audio元素的浏览器主要有Safari 4,Firefox 3.5和Chrome 3。

HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav

2011-12-08 08:54 by 汤姆大叔, 7436 阅读, 收藏, 编辑
本章节介绍的HTML5的另外5个新元素hgroup,header,footer,address,nav。header元素是一种具有引导和导航作用的辅助元素。通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片。

HTML5学习笔记简明版(2):新元素之section,article,aside

2011-12-07 10:39 by 汤姆大叔, 14143 阅读, 收藏, 编辑
本章节主要介绍的是HTML5的三个新元素:section,article,aside。section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表introduction, news items和contact information。

HTML5学习笔记简明版(1):HTML5介绍与语法

2011-12-06 09:33 by 汤姆大叔, 16304 阅读, 收藏, 编辑
HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如nav网站导航块和footer)。新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,比如视频音频用的video和audio,总结而言,有如下几大特点:

HTML5学习笔记简明版 目录索引

2011-12-06 09:19 by 汤姆大叔, 13820 阅读, 收藏, 编辑
之前学习HTML5的时候,没有及时记录下来,所以最近有时间大概写了一下,现已更新完毕,希望大家喜欢。HTML5学习笔记简明版(1):HTML5介绍与语法HTML5学习笔记简明版(2):新元素之section,article,asideHTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,navHTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,outputHTML5学习笔记简明版(5):input的type超级类型HTML5学习笔记简明版(6):新增属性(1)HTML5学习笔记简明版(7):新增

【翻译】我钟爱的HTML5和CSS3在线工具

2011-11-20 16:16 by 汤姆大叔, 9940 阅读, 收藏, 编辑
我真的喜欢上了HTML5, CSS3, JavaScript编程,但是有一些代码还是需要一些辅助工具来做才行,例如,CSS3的Gradient渐变如果手写代码的话真的不爽,还有像animation动画,transform转变或者是需要矢量扩展的style代码都是很复杂的。网上有很多非常流行的在线工具可以很简单地生成HTML5/CSS3代码,能够提高我们的开发速度。下面列举一些我钟爱的工具。HTML...

【翻译】使用Modernizr探测HTML5/CSS3新特性

2011-11-18 12:57 by 汤姆大叔, 18714 阅读, 收藏, 编辑
HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实,老版本浏览器已经使用了很多年,我们依然需要考...