HTML 5新增的元素

分类: web前端 | 没有评论 »
发布于 02月 21st, 2008 由 admin

 作者：Realazy

原文地址：http://realazy.org/blog/2007/08/10/new-elements-in-html-5/

在本人看来，HTML 5是一个妥协方案，虽不激进，但更能推动技术的继续进步。没有命名空间，元素也不要求闭合（当然这并不是优点），浏览器也可以宽大处理一些错误。一切沿袭上个世纪HTML 4的做法。对于HTML的渲染，浏览器一直停留在1999年的水平。为此，HTML 5是一个实用主义方案，这样不仅可以继续处理这么多年来散落在世界各个角落的HTML，也可以让浏览器厂商更容易添加新特性。这就叫degrade gracefully（优雅降级）。让我们来看看HTML 5增加的一些新元素。

结构元素

这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：

  • section: 这可以表达书本的一部分或一章，或者一章内的一节
  • header: 页面主体上的头部。并非head元素
  • footer: 页面的底部（页脚），可以是一封邮件签名的所在
  • nav: 到其他页面的链接集合
  • article: 诸如blog, 杂志，纲要等之中的一条独立记录。

举个例子，一个blog的首页，用HTML 5写的话，可以是这样（有省略）：

<<!DOCTYPE HTML> <HTML>   <head>     <title>realazy</title>   </head>   <body>     <header>     <h1>Realazy</h1>     </header>     <section>     <article>     <h2><a href=”http://realazy.org/blog” mce_href=”http://realazy.org/blog”>标题</a></h2>     <p>内容在此…（省略n字）</p>     </article>     <article>     <h2><a href=”http://realazy.org/blog” mce_href=”http://realazy.org/blog”>标题2</a></h2>     <p>内容2在此…（省略n字）</p>     </article>     …     </section>     <footer>     <nav>     <ul>       <li><a href=”http://realazy/blog” mce_href=”http://realazy/blog”>导航1</a></li>       <li><a href=”http://realazy/blog” mce_href=”http://realazy/blog”>导航2</a></li>       …     </ul>     </nav>     <p>© 2007 realazy</p>     </footer>   </body> </HTML>

块级block的语义元素

HTML还增加以下三个块级元素：

  • aside
  • figure/code>
  • dialog

aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

<aside>   <h3>最新文章</h3>   <ul>     <li><a href=”http://realazy.org/blog/” mce_href=”http://realazy.org/blog/”>文章标题</a></li>     …   </ul> </aside>

figure元素表示一个有说明的块级图片。比如：

<figure>   <legend>这是图片的说明</legend>   <img alt=”图片可替换文本” src=”/path/to/img.png” mce_src=”/path/to/img.png” /> </figure>

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

<dialog>   <dt>佛</dt>   <dd>色即是空</dd>   <dt>悟空</dt>   <dd>我现在需要点空……

行内（inline）的语义元素

m元素用来标记一些不是那么需要着重强调的文本。现在尚有争议，可能最终会改为mark.

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

<time datetime=”2008-08-08T20:08:08″>2008年8月8日晚上8时8分8秒</tiem>

meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

很遗憾地告诉你，我只有<meter>150cm</meter>

它还有6个特性来表达各方面的含义，比如：

<p>您的分数是：<meter value=”88.7″ min=”0″ max=”100″ low=”65″ high=”96″ optimum=”100″>B+</meter>.</p>

还有一个progress，也是义如其名，用以表达进度：

目标完成度：<progress value=”40″ max=”100″>40%</progress>

嵌入多媒体

新增video和audio元素。顾名思义，分别是用来插入视频和声音的。至于格式，交由浏览器实现，HTML再也不需要特别的代码去播放特定的格式。就像img一样，不管是png, jpg还是gif都可以显示。值得注意的是，它们可以包含内容。比如，可以把歌词放到某段歌曲中去：

<audio src=”谁人伴你睡.mp3″ mce_src=”谁人伴你睡.mp3″>   <p>泪枯干</p>   <p>难忍怎么委屈自已</p>   <p>曾经有一刻悲与喜</p>   … </audio>

交互性

HTML 5同时也叫Web Applications 1.0, 因此也进一步发展交互能力。这些标签就是为提高页面的交互体验而生：

  • details
  • datagrid
  • menu
  • command

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

一句话记录生活中的点点滴滴， <details>   <legend>更多</legend>   <p>交流与分享，拉近你和朋友，支持 MSN/GTalk/QQ、短信、手机 WAP</p> </details>

它可以有一个open的特性，用来显示细节与否。

datagrid用来控制数据，可以由用户或者脚本来更新。

menuHTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。

参考：New elements in HTML 5

标签 :

70个流行的AJAX应用的演示和源码下载

分类: web前端 | 没有评论 »
发布于 09月 30th, 2006 由 qing
  1. Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell
  2. AJAX - microlink pattern tutorial : A microlink is a link that opens up content below it.
  3. Ajax BBC News RSS Reader : demo by Nigel Crawley
  4. AJAX Chat in Python with Dojo : at AquaAjax
  5. Ajax Chess : multiplayer chess
  6. Ajax examples at BackBase : examples demonstrating several aspects of the Backbase technology.
  7. Ajax examples at Rico : Inner HTML, JavaScript updater etc.
  8. Ajax examples using ColdFusionMX, SQLServer, SOAP : Contact Manager, NOAA 7 Day Forecast code and demos.
  9. Ajax Feed TV : News feed
  10. Ajax inline dictionary : Highlight any text on this site then right click. A tooltip containing the definition of the selected word should show up.
  11. Ajaxload : Ajax loading gif generator.
  12. Ajax Login Demo : Creating a secure login system using XMLHttpRequest
  13. Ajax Newsletter Signup : A newsletter signup form that shows Thank You on the same page. 感兴趣？阅读全文 »

标签 :

IE常见问题

分类: web前端 | 没有评论 »
发布于 08月 1st, 2006 由 qing

1.发送错误报告

　　【故障现象】在使用IE浏览网页的过程中，出现“Microsoft Internet Explorer遇到问题需要关闭……”的信息提示。此时，如果单击“发送错误报告”按钮，则会创建错误报告，单击“关闭”按钮之后会引起当前IE窗口关闭；如果单击“不发送”按钮，则会关闭所有IE窗口。

　　【故障点评】这是IE为了解用户在使用中的错误而设计的一个小程序，不过我可不想当微软的“免费测试员”，更何况每天它都会面对成千上万的报告，谁知道有没有在意我的报告问题呢？！

　　【故障解决】

　　针对不同情况，可分别用以下方法关闭IE发送错误报告功能:

　　①对IE 5.x用户，执行“控制面板→添加或删除程序”，在列表中选择“Internet Explorer Error Reporting”选项，然后单击“更改/删除”按钮，将其从系统中删除。

　　②对Windows 9x/Me/NT/2000下的IE 6.0用户，则可打开“注册表编辑器”，找到[HKEY_LOCAL_MACHINE＼Software ＼Microsoft＼Internet Explorer＼Main]，在右侧窗格创建名为IEWatsonEnabled的DWORD双字节值，并将其赋值为0。

　　③对Windows XP的IE 6.0用户，执行“控制面板→系统”，切换到“高级”选项卡，单击“错误报告”按钮，选中“禁用错误报告”选项，并选中“但在发生严重错误时通知我”，最后单击“确定”按钮。

　　2.IE发生内部错误，窗口被关闭

　　【故障现象】在使用IE浏览一些网页时，出现错误提示对话框:“该程序执行了非法操作，即将关闭……”，单击“确定”按钮后又弹出一个对话框，提示“发生内部错误……”。单击“确定”按钮后，所有打开的IE窗口都被关闭。

　　【故障点评】该错误产生原因多种多样，内存资源占用过多、IE安全级别设置与浏览的网站不匹配、与其他软件发生冲突、浏览网站本身含有错误代码……这些情况都有可能，需要耐心加以解决。

　　【故障解决】

　　①关闭过多的IE窗口。如果在运行需占大量内存的程序，建议IE窗口打开数不要超过5个。

　　②降低IE安全级别。执行“工具→Internet选项”菜单，选择“安全”选项卡，单击“默认级别”按钮，拖动滑块降低默认的安全级别。

　　③将IE升级到最新版本。IE 6.0 SP1

　　可使用以IE为核心的浏览器，如MyIE2。它占用系统资源相对要少，而且当浏览器发生故障关闭时，下次启动它，会有“是否打开上次发生错误时的页面”的提示，尽可能地帮你挽回损失。

　　3.出现运行错误

　　【故障现象】用IE浏览网页时弹出“出现运行错误，是否纠正错误”对话框，单击“否”按钮后，可以继续上网浏览。

　　【故障点评】可能是所浏览网站本身的问题，也可能是由于IE对某些脚本不支持。

　　【故障解决】

　　①启动IE，执行“工具→Internet选项”菜单，选择“高级”选项卡，选中“禁止脚本调试”复选框，最后单击“确定”按钮即可。

　　②将IE浏览器升级到最新版本。

　　4.IE窗口始终最小化的问题

　　【故障现象】每次打开的新窗口都是最小化窗口，即便单击“最大化”按钮后，下次启动IE后新窗口仍旧是最小化的。

　　【故障点评】IE具有“自动记忆功能”，它能保存上一次关闭窗口后的状态参数，IE本身没有提供相关设置选项，不过可以借助修改注册表来实现。

　　【故障解决】

　　①打开“注册表编辑器”，找到[HKEY_ CURRENT_USER＼Software＼Microsoft＼Internet Explorer＼Desktop＼Old WorkAreas]，然后选中窗口右侧的“OldWorkAreaRects”，将其删除。

　　②同样在“注册表编辑器”中找到[HKEY_CURRENT_USER＼Software ＼Microsoft＼Internet Explorer＼Main]，选择窗口右侧的“Window_Placement”，将其删除。

　　③退出“注册表编辑器”，重启电脑，然后打开IE，将其窗口最大化，并单击“往下还原”按钮将窗口还原，接着再次单击“最大化”按钮，最后关闭IE窗口。以后重新打开IE时，窗口就正常了！

　　5.IE无法打开新窗口

　　【故障现象】在浏览网页过程中，单击超级链接无任何反应。

　　【故障点评】多半是因为IE新建窗口模块被破坏所致。

　　【故障解决】单击“开始→运行”，依次运行“regsvr32 actxprxy.dll”和“regsvr32 shdocvw.dll”将这两个DLL文件注册，然后重启系统。如果还不行，则可以将mshtml.dll、urlmon.dll、msjava.dll、browseui.dll、oleaut32.dll、shell32.dll也注册一下。

　　6.脱机却无法浏览本机上的网页

　　【故障现象】通过IE的“脱机浏览”功能，我们差不多能浏览所有已经下载到本地硬盘的网页内容，这对拨号上网的用户来说更是省钱的一大法宝。但有时，目标网页虽然在硬盘上，但是却提示“无法浏览”。

　　【故障点评】这多半是由于你修改了系统时间，引起了IE历史记录的错乱。

　　【故障解决】

　　①可用直接在“临时文件夹”中搜索的方法来激活它。按下Win+F，在“包含文字”处输入部分记忆中的关键字，在“搜索”处按“浏览”按钮选择IE临时文件夹的地址，如“C:＼WINDOWS＼Temporary Internet Files”，单击“开始查找”，在结果列表里双击目标页打开。

　　②可以尝试用腾讯的TE等浏览器来脱机浏览。

　　7.联网状态下，浏览器无法打开某些站点

　　【故障现象】上网后，在浏览某些站点时遇到各种不同的连接错误。

　　【故障点评】这种错误一般是由于网站发生故障或者你没有浏览权限所引起。

　　【故障解决】针对不同的连接错误，IE会给出不同的错误信息提示，比较常见的有以下几个:

　　①提示信息:404 NOT FOUND这是最为常见的IE错误信息。主要是因为IE不能找到你所要求的网页文件，该文件可能根本不存在或者已经被转移到了其他地方。

　　②提示信息:403 FORBIDDEN常见于需要注册的网站。一般情况下，可以通过在网上即时注册来解决该问题，但有一些完全
　　“封闭”的网站还是不能访问的。

　　③提示信息:500 SERVER ERROR通常由于所访问的网页程序设计错误或者数据库错误而引起，你只有等待对方网页纠正错误后再浏览了:-(。

　　8.IE无法重新安装
　　
　　【故障现象】IE不能正常使用，在重装时却提示“发现系统中有该版本的IE”而拒绝安装；“添加或删除程序”中又没有卸载选项。

　　【故障点评】“重装”是解决IE故障的“终极大法”，也是初级用户的法宝。

　　【故障解决】

　　①对IE 5.0的重装可按以下步骤进行:

　　第一步:打开“注册表编辑器”，找到[HKEY_LOCAL_ MACHINE＼Software＼Microsoft＼Internet Explorer]，单击其下的Version Vector键。

　　第二步:在右侧窗格中双击IE子键，将原来的“5.0002”改为“4.0”，单击“确定”后退出“注册表编辑器”。

　　第三步:重启后，就可以重装IE 5.0了。

　　②IE 6.0的重装有两种方法:

　　方法1:打开“注册表编辑器”，找到[HKEY_LOCAL_ MACHINE＼SOFTWARE＼Microsoft＼Active Setup＼Installed Components＼{89820200-ECBD-11cf-8B85-00AA005B4383}]，将IsInstalled的DWORD值改为0就可以了。

　　方法2:放入Windows XP安装盘，在“开始→运行”窗口键入“rundll32.exe setupapi,InstallHinfSection DefaultInstall 132 %windir%＼Inf＼ie.inf”。
IE 目前仍然是大多数网友的必备工具，相信没有人不会用吧，不过普通的使用谁都会，下面我为大家介绍三则IE实现技巧，让你的使用方法与众不同。

　　不要你看到我的地址记录

　　上网时在地址栏内输入网址，系统会记录下来，虽然有时会方便你使用，但在公用的机器上使用时，显然会暴露你的隐私，让别人知道你曾经去过哪些网站。虽然我们可以在IE属性对话框中选择清除历史记录，但这种方法一般无法适用于网吧机器上，因为你没有更改系统设置的权限。其实使用“Ctrl+O”命令(字母O)在弹出“打开”对话框中输入网址，就不用担心网址被IE记录下来了。

　　加快IE的搜索速度

　　许多人使用搜索引擎，都习惯于进入网站后再输入关键词搜索，这样却大大降低了搜索的效率。实际上，IE支持直接从地址栏中进行快速高效地搜索，也支持通过“转到/搜索”或“编辑/查找”菜单进行搜索，你只须键入一些简单的文字或在地址栏前面加上“go”、“find”或“?”，IE就可直接从缺省设置的9个搜索引擎中查找关键词并自动找到与您要搜索的内容最匹配的结果，同时还可列出其它类似的站点供你选择。

　　保存“每日提示”所有内容

　　启动IE后，系统会在屏幕下面开一个小方框，显示“每日提示”的内容，如果没有显示这一小方框，单击“帮助”菜单，选择“每日提示”，在小方框内每单击一次“下一提示”按钮，系统会显示一新的提示。如果想一次看到“每日提示”的所有内容，可以用下面的方法将全部内容保存到文件中。在小方框内单击，按下“Ctrl＋A”组合键选择全部内容，再按下“Ctrl＋C”组合键拷贝到剪贴板中，打开写字板，按下“Ctrl＋V”组合键将内容拷贝下来，然后保存文件即可。