细谈HTML 5新增的元素
对于HTML的渲染,浏览器一直停留在1999年的水平。为此,HTML 5是一个实用主义方案,这样不仅可以继续处理这么多年来散落在世界各个角落的HTML,也可以让浏览器厂商更容易添加新特性。这就叫degrade gracefully(优雅降级)。让我们来看看HTML 5增加的一些新元素。
HTML 5结构元素
这真是大快人心。目前,我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部,底部或者侧栏等。有了它们,代码编写者不再需要为id的命名费尽心思,对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构:
随机字符变换效果的jQuery插件开发教程
在这篇快速的jQuery插件开发教程中,我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果,可以用在标题,logo及其幻灯效果中。
HTML4和HTML5之间的10个主要不同
HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处。
事实上,HTML5并没有对HTML4做什么重大的修改,它们很多东西都是相似的。
可是,其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同之处(并不是全部,全部列出来是不可能的):
1. HTML5标准还在制定中
这头一个不同之处显而易见,但非常重要,我需要先从它开始。也许你已经注意到了关于HTML5很酷的言论到处都是,但是事实情况是,HTML5是一个还未完成的标准。HTML4已经有10岁了,但它仍是当前正式的标准的事实没有改变。
HTML 5离线存储之Web SQL
本篇没有考虑异步,多线程及SQL注入
WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite),
且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别)
1,打开数据库
2,创建表
3,新增数据
4,更新数据
5,读取数据
6,删除数据
事实上,关键点在于如何拿到一个可执行SQL语句的上下文,
像创建表,删除表,CRUD操作等仅区别于SQL语句的写法.OK,貌似"SqlHelper"啊,换个名字,dataBaseOperator就它了
HTML 5基础之HTML 5 API的威力
本篇文章是一个由四个部分构成的系列的第三部分,该文章系列旨在寻找并突出说明HTML5中的变化。其开始先介绍新的标签和页面的组织,接着提供一些网页设计方面的高层面信息,然后是表单的创建,以及API的使用及其价值所在,最后是Canvas提供的一些颇具创意的可能做法。这一第三部分介绍了HTML5的API,使用一个例子页面来说明它们的功能。
那么,什么是API呢?
应用编程接口(application program interface,API)是访问一个软件应用的编程指令和标准的集合。通过使用API,你就可以设计出由API提供的服务来驱动的产品。
HTML5拥有一些新的API,例如:
检测浏览器支持哪些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,不过它们不是用来表示特定元素的。
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对象是否拥有特定的属性。以检测画布特性为例。
HTML5标准最新技术预览
已经存在近十年的HTML4已经成为不断发展的Web开发领域的瓶颈;HTML5标准在此时显得尤为重要。每天都有新颖而创新的网站出现,全方位地拓展HTML的边界。Web开发者正在寻求新的技术,提供更强大的功能,那些因为脚本语言和浏览器的限制而被隐瞒了的功能。
为了实现更好的灵活性和更强的互动性,及创造令人兴奋而更具交互性的网站和应用程序,HTML5 引入和增强了更为广泛的特性,包括控制,APIs,多媒体,结构和语义等。
有关HTML5标准的工作,起于2004年,在W3C HTML WG和WHATWG的共同努力下,目前还在进行中。许多关键成员加入了W3G的工作,包括四大主流浏览器厂商代表:苹果,Mozilla,Opera,和 微软;还有一些有着不同利益和专业知识的其他组织和个人。
HTML5标记省略 语法规则
HTML5的标记可以省略,在不影响页面布局的情况下,可以节省网页体积大小。减少代码量。
某些标记可以省略。
省略标记的开始标记并不意味着标记不存在,它是隐含的,但它仍然存在。一个HTML文件总是有一个根标记HTML,即使字符串没有出现在页面标记中的任何地方。
HTML标记的开始标记可以省略,如果HTML标记内的第一个标记不是注释。
HTML标记的结束标记可以省略如果HTML标记不是随后立即跟随着一条注释。
head标记的开始标记可以省略,如果该标记是空的,或者head内的标记首先是一个标记而不是注释。
head标记的结束标记可以省略,如果head标记后没有立即跟随空格字符或注释。
一个body标记的开始标记可以省略,如果该标记是空的,或者如果在body标记的第一个标记是不是一个空格字符或注释,但如果body内部标记的第一个标记是一个脚本或样式标记,则不可以省略body标记。
一个body标记的结束标记可以省略,如果body标记不是随后立即跟随注释。
解读 HTML5:建议、技巧和技术
现今我们能用 HTML5 吗,能用它做些什么呢,是否真的是 Flash 杀手?想必你也注意到了这些日渐增长且常被问起的类似问题,被讨论着,甚至被回答过。在我看来,你必须自己回答这些基本的问题。
初学者必知的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>标签
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)元素
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. 显示控件
22个HTML5 技巧二
22个HTML5 技巧二:上面一章讲到了HTML5的几个技巧,现在我们来学习新的技巧
8. 占位符
此前,我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适,但是只要用户删除了该文本,输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />
9. 本地存储
多 亏了HTML5的 local storage ,我们可以让高级浏览器"记住"我们输入的内容,就算后来浏览器关闭或者重新刷新也不受影响。尽管不是所有的浏览器都支持,但是最关键的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。
10. 语义性的Header和Footer
<div id=”header”>
HTML5中对title属性的定义与规定
注意,这里说的不是title标签(<title></title>),而是title属性(如 <a title=”…)
总结:
元素的title属性的值就是该元素的咨询信息,并有可能适当的以提示框的形式显示出来。
title属性是纯文本形式的。
例如:超级连接的(<a>标签)title属性可以设置成目标资源的简单描述
示例:
代码: 全选 运行
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属性。
HTML5设计原理
今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。
实际上,确实有人会谈到规范的内容。史蒂夫•福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗•艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。
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 本身没有任何变化。
HTML5表单新特征简介与举例
其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征、窍门和技术”一文中就有所介绍,不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看。得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个“空”。
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;
HTML 5之表单新功能解析
时光车轮滚滚碾来,前端之路永无止歇.对于这个前端这门精一多专的技术,任何一次技术革新,我们都必须第一时间去了解它学习它,比如Web世界里这簇美艳的花朵---HTML 5.虽然HTML 5发布之初,许多人(包括我)都觉得普及它还很遥远,但自发布以来,许多企业级网站对它的尝试应用(比如<!doctype html>应用,比如canvas的应用),使HTML 5的迈出了一大步,随之而来IE9的发布,无疑又让我们看到了HTML 5离我们不再遥远.
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后时代轰轰烈烈的进行着。
HTML 5标签、属性、事件及兼容性速查表
HTML 5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ,本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。
全方位了解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 应用的功能。具体如下:
扩展体验
HTML5中对id属性的定义与规定
此次课程主讲内容是ID元素
id是一个元素的唯一标识,需确保每个元素的id的独一性。
id至少由一个字符组成,且不能包含空字符。
具有不为空id属性的元素,可以在css或DOM的getElementById() 方法中方便调用。
不排除一个元素有多个id的可能。
id属性值必须反映该元素的内容。
更多详情可访问html5中国:http://www.html5cn.org
HTML5新增标签和属性简介
HTML5以进入实际应用,它的强大之处早有耳闻,下面来看一下html5中的新标签和属性。
HTML5中的新标签:
<article> :定义article
<aside>:定义页面内容之外的内容
<audio>:定义声音内容
<canvas>:定义图形
HTML5 对各个标签的定义与规定:section
标签是 HTML 5 中的新标签。
W3C定义为:
标签定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成...但section元素标签并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。
通常不推荐为那些没有标题的内容使用;我们可以使用HTML5轮廓工具来检查我们的页面中是否有不包含标题部分的容器。
我们可以看到,虽然文章有正式的h1与h2,但是在中,仍然可以为这个内容部分使用h1来作为标题。
HTML5 对各个标签的定义与规定:nav
对nav标签的定义与规定
HTML5中的新元素标签<nav>用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读器等设备的支持也更好。
一直以来,我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航;在HTML5中,我们可以直接将导航链接列表放到<nav>标签中
根据W3C的定义规范:
nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放
HTML5 对各个标签的定义与规定:meta
一般放在head标签或head标签的noscript标签中。
为空元素(没有内容)。
除了全局属性之外,还有 name、http-equiv、content、charset
DOM接口
interface HTMLMetaElement : HTMLElement {
attribute DOMString name;
attribute DOMString httpEquiv;
attribute DOMString content;
};
HTML5 对各个标签的定义与规定:header
<header>标签定义文档的页面组合,通常是一些引导和导航信息(DOM接口、可设置属性)。
<header>标签定义文档的页眉(介绍信息)。
Header 区的例子包含了页面标题和副标题,<header>标签被用来创建页面的Header区的内容。除了网页本身之 外,<header>标签还可以包含关于<section>和&article>的公开信息。这里创建的网页有该 页面的一个Header区,这在高层设计中有给出,以及一个位于Article和Section区内部的Header区。清单1提供了一 个<header>标签标记的例子。
1 <!--<header>标签的例子-->
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>
HTML5 对各个标签的定义与规定:article
<article> 标签装载显示一个独立的文章内容。
例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等
artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。
例如,一个博客文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。
示例代码:
代码: 全选 运行
<!DOCTYPE html>
HTML5 对各个标签的定义与规定:script
script 标签用于定义客户端脚本,比如 JavaScript。
除全局属性之外有如下属性
src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中)
async 定义脚本是否异步执行。
defer 指示脚本不会生成任何文档内容。浏览器可继续解析并绘制页面。
type 指定MIME类型 默认text/javascript
charset 定义脚本中使用的字符编码。
技术大牛谈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,可以看书,甚至可以看规范。
HTML5 对各个标签的定义与解释:noscript
如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。
无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别 &script> 标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中!
实例代码
<body>
HTML5 对各个标签的定义与规定:body
body元素就是就是html文档的主内容标签。
可设置属性
onafterprint 在打印文档之后运行脚本
onbeforeprint 在文档打印之前运行脚本
onbeforeonload 在文档加载之前运行脚本
onblur 当窗口失去焦点时运行脚本
onerror 当错误发生时运行脚本
onfocus 当窗口获得焦点时运行脚本
onhaschange 当文档改变时运行脚本
onload 当文档加载时运行脚本
你必须知道的28个HTML5特征、窍门和技术
摘要: 前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。更多html5信息请关注:http://www.html5cn.org
HTML5中对contenteditable属性的解释与规定
contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。
当为空字符串时,效果和true一致。
当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑的。
否则,该元素不可编辑。
更多html5相关信息请关注:http://www.html5cn.org
HTML5 对各个标签的定义与规定:link
所有全局属性
href
rel
media
hreflang
type
sizes
title(title属性对于link标签有特殊的含义)
alternate:设置替换文档
archives:历史归档
author:文档作者
first:与当前文档同系列的第一个文档。
HTML5 对各个标签的定义与规定:base
base标签除了全局的属性之外,还有 href、target两个属性。
没有内容值。
interface HTMLBaseElement : HTMLElement {
attribute DOMString href;
attribute DOMString target;
};
base标签用于定义HTML文档中的相对url地址的基准URL,和接下来链接的浏览器打开方式。