HTML5是革命还是鸡肋?!(新增元素及属性汇总) - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Aug 8

HTML5是革命还是鸡肋?!(新增元素及属性汇总) 不指定

HTML5是革命还是鸡肋?!(新增元素及属性汇总)
Highslide JS
HTML5相对于Html4以及之前的版本新增加的元素及属性汇总
1. <a>标签:
(1)media属性 规定目标URL的媒介类型,默认值:all
(2)ping属性 由空格分隔的URL列表,当用户点击该超链接时,这些URL会获得通知
2. <area>标签
    (1)ping属性:由空格分隔的URL列表,当用户点击时,这些URL获得通知
(2)type属性:规定目标URL的MIME类型
3. <article>HTML5新特性,属性有class,draggable,id,ref
4. <aside>HTML5新特性,属性有class,id,draggable,id,ref,title
5. <audio>HTML5新特性,例如<audio src="test.wav">,属性有autoplay:true or false
   controls:true 显示控件 end:numeric value定义何处停止播放。 loopend:循环播放停止的位置
   loopstart:循环播放的起始位置,playconunt:播放的次数 src:音频的Url start:播放开始的位置
6. <button> 属性:autofocus:true表示界面加载时获得焦点
7. <canvas> HTML5的新特性。 属性:height,width,class,ref,draggable,title
8. <command> HTML5新特性,定义命令按钮,如单选、复选或按钮。
   属性:checked:true or false; default:true or false; disabled:true or false
   hidden:true or false; icon:url,lable:command name; radiogroup:单选组的名称,定义该属性,需要将类型设为radio
   type:checkbox,command,radio

9. <datagrid>HTML5新特性,属性:disableed; multiple true:则可以再datagrid中选择一个以上的项目
10. <datalist>HTML5新特性,属性:data 供自动插入数据
11. <datatemplate>定义数据模板的一个容器,该元素必须有定义模板的子元素<rule>
12. <detail>HTML5新特性,定义元素细节,用户可以查看,或通过点击进行隐藏
    属性:open true:可见,默认为false
13. <dialog>定义标签的对话,HTML5新特性,对话中每个句子必须属于<dt>标签所定义的部分
如:<dialog>
  <dt>老师</dt>
  <dd>2+2 等于?</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了!</dd>
</dialog>
<!DOCTYPE>在html4中有3个不同文档类型,在HTML5中只有一个:<!DOCTYPE HTML>
14. <embed> HTML5新特性,定义嵌入的内容,如插件。属性:height:嵌入的高度、
  src:嵌入的Url、type:嵌入的内容类型 width:嵌入的内容高度
15. <event-source>定义由服务器发送的事件来源,属性Src 其内容为"application/x-dom-event-stream"的源的Url
16. <fieldset>元素可将表单内的相关元素分组,属性disabled true:定义fieldset是否可见 form:TRUE定义该fieldset所属的一个或多个表单
17. <figure>用于对元素进行组合
18. <footer> HTML5新特性,定义section或document的页脚,典型地包括创作者姓名,时间等
18. <form>新属性:data:提供自动插入数据;replace:定义表单提交时所作的事情
19. <header>定义section或document的页眉
20. <html>新属性:manifest 为脱机使用缓存信息
21. <input>新增属性:autocomplete,inputmode:定义预期的输入类型,list:引用datalist元素,如果定义则下拉列表可用于输入字段传入值
max:输入字段最大值,min:最小值,replace:定义当表单提交时如何处理该字段,required:是否必须输入
22. <m>定义带有记号的文本,在需要突出显示文本时使用<m>
23. <meter>定义度量单位,仅用于已知最大和最小的度量
24. <nav>定义导航链接的部分
25. <nest>标签在数据模板中为子元素定义嵌套点,与<datatemplate>和<rule>元素一同使用
26. <output>定义不同类型的输出,如脚本的输出
27. <rule>定义更新数据模板的规则,与<datatemplate>和<nest>元素一起使用
属性:condition 定义将更新哪个元素,mode:数据模板拥有的模式
28. <section>定义文档中的节,如章节,页眉页脚
29. <select> 新属性:autofocus:true在页面加载时这个select字段获得焦点
data:供自动插入数据
30. <source>标签为媒介元素如<video>和<audio>定义媒介资源
属性:media:定义媒介资源类型,供浏览器是否下载,src:媒介的Url type:定义开始播放的位置
31. <time>定义时间或日期,或者两者 属性:datetime定义元素的日期和时间
32. <video>定义视频,如电影片段等,属性类似音频



HTML的发展历程
超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布(并非标准).   
HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时   
HTML 3.2——1996年1月14日,W3C推荐标准   
HTML 4.0——1997年12月18日,W3C推荐标准   
HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准   ISO/IEC 15445:2000(“ISO HTML”)——2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准   XHTML 1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。   
XHTML 1.1, 于2001年5月31日发布   (XHTML 2.0, W3C工作草案)   
HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版,这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始,最初是被设计成为“HTML的一个超集”。第一个正式规范在为了和当时的各种HTML标准区分开来,使用了2.0作为其版本号。HTML+的发展继续下去,但是它从未成为标准。   
HTML3.0规范是由当时刚成立的W3C于1995年3月提出,提供了很多新的特性,例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的,但是实现这个标准的工作在当时过于复杂,在草案于1995年9月过期时,标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出,而下一个被提出的版本是开发代号为Wilbur的HTML 3.2,去掉了大部分3.0中的新特性,但是加入了很多特定浏览器,例如Netscape和Mosaic的元素和属性。HTML对数学公式的支持最后成为另外一个标准MathML。   HTML 4.0同样也加入了很多特定浏览器的元素和属性,但是同时也开始“清理”这个标准,把一些元素和属性标记为过时的,建议不再使用它们。HTML的未来和CSS结合会更好。   
HTML4.01的新突破   1997年 HTML 3.2版已经极大丰富了HTML功能。   
1997年12月推出HTML 4.0版将HTML语言推向一个新高度,该版本倡导了两个理念。   
(1)将文档结构和显示样式分离;   
(2)更广泛的文档兼容性。   由于同期CSS层叠样式表的配套推出,更使得HTML和CSS对于网页制作的能力达到前所未有的高度。   1999年12月,W3C网络标准化组织推出改进版的HTML4.01,该语言相当成熟可靠,一直沿用至今。   
HTML4.01相比先前的版本在国际化设置,提高兼容性,样式表支持,以及脚本,打印方面都有所提高。   
HTML 5 的改进   2007年HTML 5草案被W3C接纳,并成立了新的HTML工作团队。   
2008年1月22日第一份正式HTML 5草案发布。   
HTML 5增加了更多样化的API,提供了嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 <header>, <section>, <footer>, 以及 <figure>。   
HTML 5 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则,改进了互操作性,并减少了开发成本。一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一个含义,例如<nav>(网站导航块)和<footer>。这种标签将有利於搜索引擎的索引整理、小萤幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准介面,如<audio>和<video>标记。   一些过时的HTML 4标记将取消。其中包括纯粹显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。


30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语言。以下30多个资源可帮你开始学习HTML5。

1.Blowing up HTML5 video and mapping it into 3D space(将HTML5视频吹散并组成3D效果)最近我研究了HTML 5中的Canvas 和Video 标签,并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。
2.Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下兼容的网页)HTML5更加语义化,使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag,比如 navigations 和 footers 使代码更有意义也更接近自然语言。
3.Coding A HTML 5 Layout From Scratch(HTML 5 布局)这篇文章将教你  
◦用原有技术将元素放置在特定位置
◦最新的技术潮流
◦Microformats与HTML5协同使用
◦介绍HTML5与CSS3的新特性
4.Coding a CSS3 and HTML5 One Page Website Template(制作CSS3和 HTML5 一页式站点模板)这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中,你也可以选择性的下载XHTML版。
5.Comprehensive video tutorial on HTML5(全面的HTML5视频指南)这 是一个叫Brad Neuberg的工程师制作的HTML5教学视频。
6.Create modern Web sites using HTML5 and CSS3(用HTML5与CSS3打造时尚站点)这篇文章介绍了许多HTML5的功能和语法及API,还有CSS3的新的选择器,效果和特性。最 后, 还将教你如何利用这些新特性开发一个网页。当你读完这篇文章,你就能用HTML5和CSS3开发一个自己的站点啦。
7.Designing a blog with html5(用html5设计博客)许多HTML5 特性要结合JavaScript API一起使用,以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些,我们来看怎样建立一个博客。
8.Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices(为未来设计:HTML 5 和 CSS3 指南与最佳案例)这篇文章将介绍用 HTML5和CSS3搭建的几个最佳站点。
9.Design and Code a Cool iPhone App Website in HTML5(用HTML5设计和实现一个超酷 iPhone App 网站)
10.Have a Field Day with HTML5 Forms(建立HTML 5表格)这篇文站将教你 如果用HTML 5 和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。
11.How To Create A Nice Blog Design Touching The Future(不用photoshop,完成网页设计)
12.How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6(怎样让所有浏览器都渲染HTML5标记——即使是IE6)这篇文章将教你如何用JavaScript和CSS,使 HTML5页面向下兼容,即使是IE6也不例外。
13.How to Make an HTML5 iPhone App(制作HTML5 iPhone 应用)这是 一篇针对iPhone的指导,但是许多技术也可用在兼容HTML5的手机浏览器上。
14.HTML 5 and CSS 3: The Techniques You’ll Soon Be Using(HTML 5 和CSS 3:你将用到的技术)这篇文章使用HTML 5和CSS 3 搭建博客页面。如果你已经熟悉html 和CSS,将很容易跟上。
15.HTML5 for Beginners. Use it now, its easy!(HTML 5初学指南)给 所有具有基础HTML知识的初学者的HTML 5 入门指南
16.HTML5 Presentation这篇文章介绍了HTML5 的发展历史和它的基本特性
17.HTML5 Tutorial – Getting Started(HTML 5 入门指导)
18.How to Build Web Pages With HTML 5(怎样建立HTML 5网页)
19.Simple Website Layout Tutorial Using HTML 5 and CSS 3(HTML5和CSS3布局指南)HTML5 最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>,同时它还包括画图,线下存储数据,拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面,用CSS3 设置样式。最终结果如下
20.Structural Tags in HTML5(HTML 5 结构标签)HTML5 有许多标签帮助网页结构化,这能省去以网页中许多div
21.HTML5 Boilerplates(HTML 5模板)此文介绍了一些你能拿来就用的HTML5 模板文件
22.HTML 5 canvas – the basics(HTML 5 基础——Canvas)对HTML 5 Canvas使用方法的全面指导
23.HTML 5 Tutorials(HTML 5 指南)
24.Implementing HTML5 Drag and Drop: New Premium Tutorial(HTML 5 拖放)HTML5 的一个新特性就是拖放,不过IE早在5.5时代就支持拖放了,而HTML 5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。
25.Preview of HTML 5这是一篇比较老的文章,介绍了HTML5的特性和优点。
26.The HTML 5 Canvas For Flash Developers : Drawing(HTML 5 Canvas 的画图功能)
27.The Power of HTML 5 and CSS 3介绍了HTML 5 与CSS3能创造的各种效果。
28.View Source Tutorial: Sticky Notes With HTML5 and CSS3(HTML5 和CSS3 打造便利贴效果)
29.webOS HTML5 Database Storage Tutorial(webOS HTML5 数据存储指南)HTML5 的本地存储功能将使数据存储十分简便。
30.Yes, You Can Use HTML 5 Today!本文介绍了一些现已被支持的HTML 5 特性,对初学者十分有用。

更多阅读:
HTML介绍:http://baike.baidu.com/view/692.htm?fr=ala0_1
HTML4介绍:http://baike.baidu.com/view/1187297.htm?fr=ala0_1
HTML5介绍:http://baike.baidu.com/view/951383.htm?fr=ala0_1
http://www.javaeye.com/wiki/topic/722276

▲返回顶部
Last modified by tommyhu on2010/08/08 15:32

Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot