Internet

HTML5 简单的了解

  HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出,於2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案已公布,预计将在2010年9月正式向公众推荐。WHATWG表示该规范是目前正在进行的工作,仍须多年的努力。   HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。     一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。   新应用程序接口(API)   除了原先的DOM接口,HTML5增加了更多API,如:     1. 用于即时2D绘图的Canvas标签     2. 定时媒体回放     3. 离线数据库存储     4. 文档编辑     5. 拖拽控制     6. 浏览历史管理   与HTML 4的不同之处   新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput元素的新属性:日期和时间,email, url新的通用属性:ping, charset, async全域属性:id, tabindex, repeat移除元素:center, font, strike     HTML 5有两大特点:     首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。     其次,追加了本地数据库等Web应用的功能。   HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全的忽略掉新的HTML5代码。与HTML4.01相比,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 本身没有任何变化。    最近,它又复活了。三家重要的浏览器厂商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group(WhatWG)来开发传统 HTML 的新版本。最近,W3C 也注意到了这些活动,也启动了自己的新一代 HTML 项目,双方的成员有很多是相同的。这两个项目最终很可能合并。虽然很多细节还在争论之中,但下一版本 HTML 的大体轮廓已经清楚了。    Web 开发人员从 1999 年就一直期待 HTML 的新版本(通常称为 HTML 5,但是也称为 Web Applications 1.0),现在它终于发布了。它保持了 HTML 原来的特色:没有名称空间或模式。元素不必结束。浏览器会宽容地对待错误。p 仍然是 p,table 仍然是 table。    如果在 1999 年将一位 Web 开发人员冷冻起来,现在再解冻,那么他会遇到一些新的让人迷惑的元素。是的,他熟悉的元素(比如 div)仍然保留了;但是,HTML 现在还包含 section、header、footer 和 nav 等新元素。em、code 和 strong 仍然存在,但是增加了 meter、time 和 m。img 和 embed 仍然可用,但是还增加了 video 和 audio。但是,他仔细观察一下就会发现,这些元素实际上没什么区别。其中许多元素可能在 1999 年是开发人员需要而没有得到的。通过与他已经掌握的元素进行简单的类比,这些新元素都很容易理解。实际上,与 Ajax 或 CSS 相比,它们非常容易掌握。    最后,当他打开 300MHz 的笔记本(运行的是 Windows 98,也是在 1999 年冷冻起来的)时,他可能对 Netscape 4 和 Windows® Internet Explorer® 5 中显示的新页面效果很吃惊。当然,这些老式浏览器不认识新元素,会完全忽略它们,但是页面仍然会显示,内容仍然是完整的。    这并不是什么虚构的故事。HTML 5 的设计原则就是在不支持它的浏览器中能够平稳地退化。原因很简单:我们都是这样的 “原始人”。浏览器现在有选项卡、CSS 和 XmlHttpRequest,但是它们的 HTML 显示引擎仍然停留在 1999 年的水平。除了用户量大大增加之外,Web 其实在本质上没什么进步。HTML 5 考虑到了这一点。它目前为 Web 开发人员一些真正的好处,随着浏览器的缓慢升级,页面浏览者会逐渐享受到这些好处。   内嵌媒体   视频已经在 Web 上广泛流行了,但是其格式几乎都是专有的。YouTube 使用 Flash,Microsoft 使用 Windows Media®,Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此,WhatWG 提议引入一个新的 video 元素,用来嵌入任意视频格式。例如,可以用以下代码嵌入我的 QuickTime 电影 “a Sora in Prospect Park”:    <video src="http://www.cafeaulait.org/birds/sora.mov" />   对于以哪种格式和解码器作为首选,仍然有争议。可能会强力推荐或要求使用 Ogg Theora。还可以可选地支持 QuickTime 等专有格式和 MPEG-4 等受专利限制的格式。实际使用的格式很可能由市场决定,就像是 GIF、JPEG 和 PNG 格式那样(这些格式通过市场竞争压倒了 BMP、X-Bitmap 和 JPEG 2000 等竞争者,成为 img 元素的首选格式)。    还提议引入 audio 元素。例如,可以使用以下代码给 Web 页面加上背景音乐:   <audio src="spacemusic.mp3"   autoplay="autoplay" loop="20000" />   autoplay 属性指示浏览器在装载页面后立即开始播放,而不等待明确的用户请求。音频循环播放 20,000 次,然后停止(或者在用户关闭窗口或转到另一个页面时停止)。当然,浏览器可以(而且应该)允许用户关闭内嵌的媒体,不应该只按页面作者的要求去做。    浏览器必须支持 WAV 格式,还可以支持 MP3 等其他格式。    因为老式浏览器不支持这些元素,而且它们对于盲人和聋人用户来说没有意义,所以 audio 和 video 元素可以包含额外的标记,用来描述音频和视频的内容。这对搜索引擎也有帮助。在理想情况下,这些标记是音频和视频内容的完整文字版本。例如,代码8 显示 用 HTML 5 编写的 John F. Kennedy 的就职演说。    <audio src="kennedyinauguraladdrees.mp3">     <p>     Vice President Johnson, Mr. Speaker, Mr. Chief Justice,     President Eisenhower, Vice President Nixon, President Truman,     Reverend Clergy, fellow citizens:     </p>          <p>     We observe today not a victory of party, but a celebration of     freedom – symbolizing an end, as well as a beginning –     signifying renewal, as well as change. For I have sworn before     you and Almighty God the same solemn oath our forebears     prescribed nearly a century and three-quarters ago.     </p>          <p>     The world is very different now. For man holds in his mortal     hands the power to abolish all forms of human poverty and all     forms of human life. And yet the same revolutionary beliefs for     which our forebears fought are still at issue around the globe –      the belief that the rights of man come not from the     generosity of the state, but from the hand of God.     </p>          <p>     …     </p>          </audio>   HTML5教程——交互 HTML 5 也被称为 Web Applications 1.0。为了实现这个目标,增加了几个为 Web 页面提供交互体验的新元素:    details    datagrid    menu    command    这些元素都可以根据用户的操作和选择改变显示的内容,而不需要从服务器装载新页面。  details   details 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。   details 元素的用途之一是提供脚注和尾注。例如:    The bill of a Craveri's Murrelet is about 10% thinner  than the bill of a Xantus's Murrelet.  <details> <legend></legend> <p>Sibley, David Allen, The Sibley Guide to Birds,  (New York: Chanticleer Press, 2000) p. 247  </p> </details>   没有指定具体的显示方式。浏览器可以选用脚注、尾注和工具提示等方式。    每个 details 元素可以有一个 open 属性。如果设置了这个属性,那么详细信息在最初就显示出来。如果没有设置这个属性,那么会隐藏它们,直到用户要求显示它们。无论是哪种情况,用户都可以通过单击一个图标或其他控件来显示或隐藏详细信息。  datagrid   datagrid 元素提供一个网格控件。可以用它显示树、列表和表格,用户和脚本可以更新这些界面元素。与之相反,传统的表格主要用来显示静态数据。    datagrid 从它的内容(一个 table、select 或其他 HTML 元素)获得初始数据。例如,代码 9 中的 datagrid 包含一张成绩表。在这个示例中,datagrid 的数据来自一个 table。更简单的一维 datagrid 可以从 select 元素获得数据。如果使用其他 HTML 元素,那么每个子元素成为网格中的一行。   <datagrid>   <table>     <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>     <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>     <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>     <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>   </table> </datagrid>    这个元素与常规表格的区别在于,用户可以选择行、列和单元格;把行、列和单元格折叠起来;编辑单元格;删除行、列和单元格;对网格排序;以及在客户机浏览器中直接进行其他数据操作。可以用 JavaScript 代码监视更新。Document Object Model(DOM)中增加了 HTMLDataGridElement 接口以支持这个元素(代码 10 HTMLDataGridElement)。    interface HTMLDataGridElement : HTMLElement {            attribute DataGridDataProvider data;   readonly attribute DataGridSelection selection;            attribute boolean multiple;            attribute boolean disabled;   void updateEverything();   void updateRowsChanged(in RowSpecification row, in unsigned long count);   void updateRowsInserted(in RowSpecification row, in unsigned long count);   void updateRowsRemoved(in RowSpecification row, in unsigned long count);   void updateRowChanged(in RowSpecification row);   void updateColumnChanged(in unsigned long column);   void updateCellChanged(in RowSpecification row, in unsigned long column); };    还可以使用 DOM 在网格中动态地装载数据。也就是说,datagrid 可以不包含那些提供初始数据的子元素。可以用一个 DataGridDataProvider 对象设置它(代码 11 DataGridDataProvider)。这样就可以从数据库、XmlHttpRequest 或者 JavaScript 代码能够访问的任何资源装载数据。    interface DataGridDataProvider {   void initialize(in HTMLDataGridElement datagrid);   unsigned long getRowCount(in RowSpecification row);   unsigned long getChildAtPosition(in RowSpecification parentRow,        in unsigned long position);   unsigned long getColumnCount();   DOMString getCaptionText(in unsigned long column);   void getCaptionClasses(in unsigned long column, in DOMTokenList classes);   DOMString getRowImage(in RowSpecification row);   HTMLMenuElement getRowMenu(in RowSpecification row);   void getRowClasses(in RowSpecification row, in DOMTokenList classes);   DOMString getCellData(in RowSpecification row, in unsigned long column);   void getCellClasses(in RowSpecification row, in unsigned long column,        in DOMTokenList classes);   void toggleColumnSortState(in unsigned long column);   void setCellCheckedState(in RowSpecification row, in unsigned long column,        in long state);   void cycleCell(in RowSpecification row, in unsigned long column);   void editCell(in RowSpecification row, in unsigned long column, in DOMString data); };    menu 和 command   menu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它,但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中,menu 包含 command 元素,每个 command 元素引发一个操作。例如,代码 12 HTML 5 菜单 是一个弹出警告框的菜单。   <menu>     <command onclick="alert('first command')"  label="Do 1st Command"/>     <command onclick="alert('second command')" label="Do 2nd Command"/>     <command onclick="alert('third command')"  label="Do 3rd Command"/> </menu>    还可以用 checked="checked" 属性将命令转换为复选框。通过指定 radiogroup 属性,可以将复选框转换为单选按钮,这个属性的值是互相排斥的按钮的组名。    除了简单的命令列表之外,还可以使用 menu 元素创建工具栏或弹出式上下文菜单,这需要将 type 属性设置为 toolbar 或 popup。例如,代码 13. HTML 5 工具栏 显示一个与 WordPress 等 blog 编辑器相似的工具栏。它使用 icon 属性链接到按钮的图片。   <menu type="toolbar">     <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>     <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>     <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>     <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>     <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>     <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>     <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>     <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>     <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>     <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>     <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>     <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>     <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>     <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/> </menu>   label 属性提供菜单的标题。例如,代码14. HTML 5 Edit 菜单 显示一个 Edit 菜单。   <menu type="popup" label="edit">     <command onclick="undo()"   label="Undo"/>     <command onclick="redo()"   label="Redo"/>     <command onclick="cut()"    label="Cut"/>     <command onclick="copy()"   label="Copy"/>     <command onclick="paste()"  label="Paste"/>     <command onclick="delete()" label="Clear"/> </menu>   菜单可以嵌套在其他菜单中,形成层次化的菜单结构。    From:http://www.websbook.com
Read more »

Tags: ,
Posted in Internet | No Comments »

前微软员工曝网银不兼容原因 应改进网络标准

前微软员工曝网银不兼容原因 应改进网络标准

刚才无疑中在cnBeta上看到了“前微软员工曝网银不兼容原因 应改进网络标准”这片文章。讲了为什么大陆所有的网银都是IE。这个疑问我已经想了很久了,很多个为什么! 使用Safari/FireFox等非IE内核的人都知道,你是无法登陆使用网银的。这意味着无法完成一些在线支付/查账工作,对于现在的网民来说,是相当不愉快的。 我在使用Mac期间,为了使用网银和支付宝(淘宝网可以用Safari登陆,但是不支持FireFox),不得不在Mac上安装Win系统。Mac系统很好用(WIN全球占有率达到了94%多,汗),比起win来说简直是顺手方便快捷!但是你在大陆是逃不过使用网银的,这不得不安装2个系统或者买2台电脑! 下面是载录的文章: 前谷歌中国首席战略官、前微软IE团队成员郭去疾近日揭秘中国网银不兼容原因,并直言应立法促进网络标准。 郭去疾称,中国网银研发,始于2000世代初,那是浏览器世界最黑暗的日子,没有竞争与进步,一度微软总部IE研发团队只剩3人,其本人就是其中之一。“我们被告知IE永远不会再有单独新版本,将只跟随Windows发布。直到火狐出现才打破魔咒,促成了IE7的面世。”郭去疾指出,中国网银初起就没考虑支持其他浏览器,后面则只是惯性。 郭去疾指出:“中国网银很快被ActiveX这个微软独有的技术‘绑架’后,要改变格局就意味着要让很多网银系统推倒重来,这不是一件轻而易举的事。技术挟持,就是这样可怕。这就是为什么平台之争,标准之争总是如此惨烈。” 关于大多数中国网银不兼容非IE浏览器、不兼容非Windows 操作系统的问题,郭去疾指出微软在移动操作系统失利,而苹果、谷歌在移动平台方面的突破,移动电子商务会在今后几年突飞猛进,所以中国的支付与网银最终将因市场选择而支持非IE浏览器也只是时间问题。但这并不等于不该针对基础网络服务的反平台歧视立法,因为立法不是为反微软而是反垄断。 “我很同意一个说法:今天打破Windows和IE垄断的最后一道障碍是网银的支持。我觉得国家有必要通过立法促成所有政府服务网站,网银和获准的电子支付网站,以及其他社会基础服务网站(包括电信、邮政及快递、航空公司,未来的水电气和铁路票务)必须支持符合某标准的所有浏览器。” 郭去疾直言,“其他市场没有同样立法,不等于中国不可以有。今天的中国就是要有敢为天下先的气魄。我不抱怨微软,也不代表其他浏览器的利益,我只代表的一个普通消费者的诉求。” 据悉,正是在广大网友和非IE用户的呼声中,第三方支付平台“支付宝”从不支持非IE浏览器到全面支持跨平台的网络支付。而浦发银行也已支持火狐(Firefox)浏览器,近期国有四大行之一的建行也宣布支持火狐。 载录文章From:www.cnbeta.com
Read more »

Tags: ,
Posted in Internet | No Comments »