- 博客(0)
- 资源 (56)
- 收藏
- 关注
RSS订阅细谈HTML 5新增的元素
对于HTML的渲染，浏览器一直停留在1999年的水平。为此，HTML 5是一个实用主义方案，这样不仅可以继续处理这么多年来散落在世界各个角落的HTML，也可以让浏览器厂商更容易添加新特性。这就叫degrade gracefully（优雅降级）。让我们来看看HTML 5增加的一些新元素。
HTML 5结构元素
这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：
2011-11-29
随机字符变换效果的jQuery插件开发教程
在这篇快速的jQuery插件开发教程中，我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果，可以用在标题，logo及其幻灯效果中。
2011-11-29
HTML4和HTML5之间的10个主要不同
HTML5是最新的HTML标准，或迟或早，所有的web程序员都会发现需要使用到这个最新的标准，而且，很多人都会感觉到，重新开发一个HTML5的网站，要比把一个网站从HTML4迁移到HTML5上容易的多，这是因为这两个版本之间有很大不同之处。
事实上，HTML5并没有对HTML4做什么重大的修改，它们很多东西都是相似的。
可是，其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部，全部列出来是不可能的)：
1. HTML5标准还在制定中
这头一个不同之处显而易见，但非常重要，我需要先从它开始。也许你已经注意到了关于HTML5很酷的言论到处都是，但是事实情况是，HTML5是一个还未完成的标准。HTML4已经有10岁了，但它仍是当前正式的标准的事实没有改变。
2011-11-29
HTML 5离线存储之Web SQL
本篇没有考虑异步,多线程及SQL注入
WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite),
且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别)
1,打开数据库
2,创建表
3,新增数据
4,更新数据
5,读取数据
6,删除数据
事实上,关键点在于如何拿到一个可执行SQL语句的上下文,
像创建表,删除表,CRUD操作等仅区别于SQL语句的写法.OK,貌似"SqlHelper"啊,换个名字,dataBaseOperator就它了
2011-11-29
HTML 5基础之HTML 5 API的威力
本篇文章是一个由四个部分构成的系列的第三部分，该文章系列旨在寻找并突出说明HTML5中的变化。其开始先介绍新的标签和页面的组织，接着提供一些网页设计方面的高层面信息，然后是表单的创建，以及API的使用及其价值所在，最后是Canvas提供的一些颇具创意的可能做法。这一第三部分介绍了HTML5的API，使用一个例子页面来说明它们的功能。
那么，什么是API呢？
应用编程接口（application program interface，API）是访问一个软件应用的编程指令和标准的集合。通过使用API，你就可以设计出由API提供的服务来驱动的产品。
HTML5拥有一些新的API，例如：
2011-11-29
检测浏览器支持哪些HTML5新特性的方法
HTML5不能说是一个全新的事物，但是大部分人对HTML5的了解还是比较少的。（如果你想了解HTML5的话，不妨查看IE9发布的HTML5视频。） 虽然目前新版的主流浏览器，诸如IE9、Firefox4、Chrome10都已经开始支持HTML5特性了，但是目前所有浏览器对HTML5的支持事不 完整的，主要是因为HTML5还处在制定过程中。如果你想检测你的浏览器究竟支持 HTML 5 的哪些特性，可以查看下面我们介绍的一种方法。
当 浏览器渲染 web 页面的时候，它会构造一个文档对象模型（Document Object Model，DOM）。这是一组用于表现页面上 HTML 元素的对象。每一个元素，例如每一个 <p>，每一个 <div>，每一个 <span> 都有不同的 DOM 对象表示。当然，也有一种全局的对象，例如 window 和 document，不过它们不是用来表示特定元素的。
2011-11-25
HTML5特性检测--检测技术
4种基本技术可以用于检测浏览器是否支持某种html5特性，从简单到复杂的顺序：
1、检测全局对象（window或navigator）是否拥有特定的属性。
如果浏览器支持地理位置API的话，全局的navigator对象上会有一个名为geolocation的属性，反之，navigator对象上该属性的值为undefined:
function supports_geolocation(){
return !!navigator.geolocation;
}
如果不想写这个方法的话，可以使用modernizr库提供的方法检测浏览器是否支持地理位置API：
if(Modernizr.geolocation){ do something}
else{ do something }
2、创建一个元素，然后检测该元素的DOM对象是否拥有特定的属性。以检测画布特性为例。
2011-11-25
HTML5标准最新技术预览
已经存在近十年的HTML4已经成为不断发展的Web开发领域的瓶颈；HTML5标准在此时显得尤为重要。每天都有新颖而创新的网站出现，全方位地拓展HTML的边界。Web开发者正在寻求新的技术，提供更强大的功能，那些因为脚本语言和浏览器的限制而被隐瞒了的功能。
为了实现更好的灵活性和更强的互动性，及创造令人兴奋而更具交互性的网站和应用程序，HTML5 引入和增强了更为广泛的特性，包括控制，APIs，多媒体，结构和语义等。
有关HTML5标准的工作，起于2004年，在W3C HTML WG和WHATWG的共同努力下，目前还在进行中。许多关键成员加入了W3G的工作，包括四大主流浏览器厂商代表：苹果，Mozilla，Opera，和 微软；还有一些有着不同利益和专业知识的其他组织和个人。
2011-11-25
HTML5标记省略 语法规则
HTML5的标记可以省略，在不影响页面布局的情况下，可以节省网页体积大小。减少代码量。
某些标记可以省略。
省略标记的开始标记并不意味着标记不存在，它是隐含的，但它仍然存在。一个HTML文件总是有一个根标记HTML，即使字符串没有出现在页面标记中的任何地方。
HTML标记的开始标记可以省略，如果HTML标记内的第一个标记不是注释。
HTML标记的结束标记可以省略如果HTML标记不是随后立即跟随着一条注释。
head标记的开始标记可以省略，如果该标记是空的，或者head内的标记首先是一个标记而不是注释。
head标记的结束标记可以省略，如果head标记后没有立即跟随空格字符或注释。
一个body标记的开始标记可以省略，如果该标记是空的，或者如果在body标记的第一个标记是不是一个空格字符或注释，但如果body内部标记的第一个标记是一个脚本或样式标记，则不可以省略body标记。
一个body标记的结束标记可以省略，如果body标记不是随后立即跟随注释。
2011-11-25
解读 HTML5：建议、技巧和技术
现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。
2011-11-24
初学者必知的HTML 5入门级技巧
Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML 5，本文总结了11个HTML 5的初级技巧，希望能对你进一步学习好HTML 5会有所帮助。
1. 新的Doctype声明
XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。
<!DOCTYPE html>
HTML 5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然 也可以支持HTML 5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。
2. <figure>标签
2011-11-24
22个HTML5 技巧一
HTML5 技巧一：当今科技发展的速度真惊人，稍不留神，就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜，我们将通过这篇文章向大家介绍一些HTML技巧。
1. 新的文档类型（Doctype）
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。
<!DOCTYPE html>
现在只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）
2. 图形（Figure）元素
2011-11-24
22个HTML5 技巧三
22个HTML5 技巧三：我们继续讲解HTML5的技巧。
16. 视频支持
音频元素<audio>非 常像，在新的浏览器上也支持HTML5视频。事实上，就在最近YouTube宣布了一项新的 HTML5视频嵌入。可惜的是，由于HTML5说明文件并没有为视频指出某个特定的编码器，所以都主要取决于浏览器来决定了。尽管Safari和IE9可 以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。
17. 视频预先加载
你首先需要决定是否需要浏览器来预先加载视频。是否有需要？假设，一个访客进入某个专门用来显示视频的页面，那么就非常有必要预先加载这个页面节省一点等待的时间。你可以通过设置 preload=”preload”来预先加载视频，或者之间添加preload也可以。
<video preload>
…
</video>
18. 显示控件
2011-11-24
22个HTML5 技巧二
22个HTML5 技巧二：上面一章讲到了HTML5的几个技巧，现在我们来学习新的技巧
8. 占位符
此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name=”email” type=”email” placeholder=”[email protected]” />
9. 本地存储
多 亏了HTML5的 local storage ，我们可以让高级浏览器"记住"我们输入的内容，就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持，但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 语义性的Header和Footer
<div id=”header”>
2011-11-24
HTML5中对title属性的定义与规定
注意，这里说的不是title标签（<title></title>），而是title属性(如 <a title=”…)
总结：
元素的title属性的值就是该元素的咨询信息，并有可能适当的以提示框的形式显示出来。
title属性是纯文本形式的。
例如:超级连接的（<a>标签）title属性可以设置成目标资源的简单描述
示例：
代码: 全选 运行
2011-11-23
HTML5中对lang与xml:lang属性的解释
元素的lang（无命名空间的）属性用于定义元素的内容及其他文本属性的语言种类。
它的值必须是符合BCP 47规定范围内的一个语言标签。
当该属性设置成空字符串时，代表语言未知。
lang(在XML命令空间内的 xml:lang)，就是XML标准里定义的。
如果一个元素没有定义lang属性，且其父元素有lang属性，它将继承。
任何html原书都可以设置lang（无命名空间的）属性。
lang（在XML命令空间内的）可以使用在XML文档中的HTML元素上。
如果一个元素既设置有命名空间的lang属性，又设置没有命名空间的lang属性，请确保两个属性的值一致。
请不要在html文档中使用带有xml命名空间的lang属性。
2011-11-23
HTML5设计原理
今天我想跟大家谈一谈HTML5的设计。主要分两个方面：一方面，当然了，就是HTML5。我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范。
实际上，确实有人会谈到规范的内容。史蒂夫•福克纳（Steve Faulkner）会讲HTML5与可访问性。而保罗•艾里什（Paul Irish）则会讲HTML5提供的各种API。因此，我今天站在这里，不会光讲一讲HTML5就算完事了。
2011-11-23
HTML5的中的新元素
新千年以来，超文本标记语言（HTML）5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。
超文本标记语言（HTML）的开发到 1999 年 HTML 4 就停止了。万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要（RSS）阅读器这类浏览器特性上。Web 设计人员开始学习使用异步 JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 JavaScript™ 语言建立自己的应用程序。但是在接下来的八年中，HTML 本身没有任何变化。
2011-11-23
HTML5表单新特征简介与举例
其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征、窍门和技术”一文中就有所介绍，不过，有些遗憾的是，此部分的介绍是以视频形式展示的，其实，是视频还好啦，关键是TouTuBe视频，需要越狱观看。得，像我这样安分守已的良民，除了看空姐，其他情况都是懒得fan墙的，所以这部分视频展示的内容，其实就是个“空”。
2011-11-23
HTML5 元素通用DOM接口
HTML5 元素通用DOM接口
interface HTMLElement : Element {
// DOM tree accessors
NodeList getElementsByClassName(in DOMString classNames);
// dynamic markup insertion
attribute DOMString innerHTML;
attribute DOMString outerHTML;
void insertAdjacentHTML(in DOMString position, in DOMString text);
// metadata attributes
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
2011-11-23
HTML 5之表单新功能解析
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML 5.虽然HTML 5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML 5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML 5离我们不再遥远.
2011-11-23
HTML 5的革新：结构之美
本文从页面的doctype说起，到用HTML 5新标签搭建语义化更明确的页面的结构，再解释了一番与页面结构相关的新标签。相信大家对HTML 5的结构性新标签有了一个新的认知，如果你有兴趣，那就打开你的IDE，写上一段由HTML 5新标签搭建的代码，然后用CSS去描绘你的宏伟蓝图吧!
AD： &script src="http://www.51cto.com/js/article/keywords_ad_new.js"&&/script&
HTML 5如同一场革命，正在Web2.0后时代轰轰烈烈的进行着。
2011-11-23
HTML 5标签、属性、事件及兼容性速查表
HTML 5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ，本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。
2011-11-23
全方位了解HTML5
随着web技术的发展，HTML 标准自1999年12月发布的 HTML 4.01 后，后继的 HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG） 的组织，HTML5草案的前身名为 Web Applications 1.0，於2004年被 WHATWG 提出，於2007年被 W3C 接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。2010年9月22正式向公众推荐。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。具体如下：
扩展体验
2011-11-21
HTML5中对id属性的定义与规定
此次课程主讲内容是ID元素
id是一个元素的唯一标识，需确保每个元素的id的独一性。
id至少由一个字符组成，且不能包含空字符。
具有不为空id属性的元素，可以在css或DOM的getElementById() 方法中方便调用。
不排除一个元素有多个id的可能。
id属性值必须反映该元素的内容。
更多详情可访问html5中国：http://www.html5cn.org
2011-11-21
HTML5新增标签和属性简介
HTML5以进入实际应用，它的强大之处早有耳闻，下面来看一下html5中的新标签和属性。
HTML5中的新标签：
<article> :定义article
<aside>:定义页面内容之外的内容
<audio>:定义声音内容
<canvas>：定义图形
2011-11-21
HTML5 对各个标签的定义与规定：section
标签是 HTML 5 中的新标签。
W3C定义为：
标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。
section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成...但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。
通常不推荐为那些没有标题的内容使用；我们可以使用HTML5轮廓工具来检查我们的页面中是否有不包含标题部分的容器。
我们可以看到，虽然文章有正式的h1与h2，但是在中，仍然可以为这个内容部分使用h1来作为标题。
2011-11-21
HTML5 对各个标签的定义与规定：nav
对nav标签的定义与规定
HTML5中的新元素标签<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。
一直以来，我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到<nav>标签中
根据W3C的定义规范：
nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放
2011-11-21
HTML5 对各个标签的定义与规定：meta
一般放在head标签或head标签的noscript标签中。
为空元素（没有内容）。
除了全局属性之外，还有 name、http-equiv、content、charset
DOM接口
interface HTMLMetaElement : HTMLElement {
attribute DOMString name;
attribute DOMString httpEquiv;
attribute DOMString content;
};
2011-11-21
HTML5 对各个标签的定义与规定：header
<header>标签定义文档的页面组合，通常是一些引导和导航信息（DOM接口、可设置属性）。
<header>标签定义文档的页眉（介绍信息）。
Header 区的例子包含了页面标题和副标题，<header>标签被用来创建页面的Header区的内容。除了网页本身之 外，<header>标签还可以包含关于<section>和&article>的公开信息。这里创建的网页有该 页面的一个Header区，这在高层设计中有给出，以及一个位于Article和Section区内部的Header区。清单1提供了一 个<header>标签标记的例子。
1 <!--<header>标签的例子-->
2011-11-21
HTML5 对各个标签的定义与规定：aside
对aside标签的定义与规定
<aside> 用来装载非正文类的内容。（DOM接口、可设置属性）。
例如广告，成组的链接，侧边栏等等。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5论坛 www.htmlv.cn aside标签示例</title>
</head>
2011-11-21
HTML5 对各个标签的定义与规定：article
<article> 标签装载显示一个独立的文章内容。
例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等
artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。
例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
示例代码：
代码: 全选 运行
<!DOCTYPE html>
2011-11-21
HTML5 对各个标签的定义与规定：script
script 标签用于定义客户端脚本，比如 JavaScript。
除全局属性之外有如下属性
src 定义指向包含脚本的文件的 URL（这样您就可以引用某个包含脚本的文件，而不是直接把脚本插入您的 HTML 文档中）
async 定义脚本是否异步执行。
defer 指示脚本不会生成任何文档内容。浏览器可继续解析并绘制页面。
type 指定MIME类型 默认text/javascript
charset 定义脚本中使用的字符编码。
2011-11-18
技术大牛谈HTML 5设计原理
Jeremy Keith在 Fronteers 2010 上的主题演讲
下载PPT(PDF) http://adactio.com/extras/slides/designofhtml5.pdf
观看视频 http://fronteers.nl/congres/2010/sessions/the-design-of-html5-jeremy-keith
51CTO推荐专题：HTML5 下一代Web开发标准详解
今天我想跟大家谈一谈HTML5的设计。主要分两个方面：一方面，当然了，就是HTML5。我可以站在这儿只讲HTML 5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范。
2011-11-18
HTML5 对各个标签的定义与解释：noscript
如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 &script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！
实例代码
<body>
2011-11-18
HTML5 对各个标签的定义与规定：body
body元素就是就是html文档的主内容标签。
可设置属性
onafterprint 在打印文档之后运行脚本
onbeforeprint 在文档打印之前运行脚本
onbeforeonload 在文档加载之前运行脚本
onblur 当窗口失去焦点时运行脚本
onerror 当错误发生时运行脚本
onfocus 当窗口获得焦点时运行脚本
onhaschange 当文档改变时运行脚本
onload 当文档加载时运行脚本
2011-11-18
你必须知道的28个HTML5特征、窍门和技术
摘要: 前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。更多html5信息请关注:http://www.html5cn.org
2011-11-17
HTML5中对contenteditable属性的解释与规定
contenteditable是一个枚举类型的属性，可供选择的值有 空字符串、 true、false 或 inherit（默认）。
当为空字符串时，效果和true一致。
当一个元素的contenteditable状态为ture（contenteditable属性为空字符串，或为true，或为inherit且其父元素状态为true）时，意味着该元素是可编辑的。
否则，该元素不可编辑。
更多html5相关信息请关注：http://www.html5cn.org
2011-11-17
HTML5 对各个标签的定义与规定：link
所有全局属性
href
rel
media
hreflang
type
sizes
title（title属性对于link标签有特殊的含义）
alternate：设置替换文档
archives：历史归档
author：文档作者
first：与当前文档同系列的第一个文档。
2011-11-17
HTML5 对各个标签的定义与规定：base
base标签除了全局的属性之外，还有 href、target两个属性。
没有内容值。
interface HTMLBaseElement : HTMLElement {
attribute DOMString href;
attribute DOMString target;
};
base标签用于定义HTML文档中的相对url地址的基准URL，和接下来链接的浏览器打开方式。
2011-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人