帕兰映像 » HTML http://paranimage.com PARANDROID＝PARANOID+ANDROID Thu, 18 Mar 2010 04:03:04 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 HTML5 File API：文件拖放上传功能 http://paranimage.com/html5-file-api-file-drag-and-drop-upload-feature/ http://paranimage.com/html5-file-api-file-drag-and-drop-upload-feature/#comments Fri, 22 Jan 2010 10:12:36 +0000 帕兰 http://paranimage.com/?p=11574 即将到来的 html5 规范有几个特性，以致使 HTML 远远超出其本身作为一种标记语言的能力，并为 Web 开发者提供了一些强大的脚本工具。负责监督 HTML5 发展进程的 W3C 组织，刚刚出版了一份强有力的规格草案 – HTML5 File API 接口功能。

该 API 的设计初衷，是改善基于浏览器的 Web 应用程序处理文件上传的方式，使文件直接拖放上传成为可能。草案定义了新的输入选项 <input type=”file”> 来处理文件上传。

更为惊喜的是，该 API 为开发者提供了一个关联上传数据，并显示上传进度和其他信息的方法。

不过，目前除了 firefox 3.6 之外，良好支持该 API 的浏览器品牌为数不多。如果你已经安装最新的 Firefox 3.6 版本，可以在以下演示地址体验文件拖放式上传功能。

演示：Firefox 3.6 文件拖放上传功能

尽管如此，一旦新功能得到广泛支持，HTML5 File API 就能实现类似桌面的文件拖放效果，并且有能力同步处理多个上传并显示上传进度，不再需要借助 Flash 技术或其他外部工具。

欲了解更多关于 HTML5 File API 草案的细节，以及结合 javascript 的开发应用，请详细参考 W3C publish first working draft of File API 这篇文章。

英文原稿：HTML5 File API Brings Drag-and-Drop File Uploads to the Web | Webmonkey
翻译整理：HTML5 File API，文件拖放上传功能 | 芒果

转载请注明: 来源于 HTML5 File API：文件拖放上传功能
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/html5-file-api-file-drag-and-drop-upload-feature/feed/ 5 HTML5Gallery: 专门收集HTML5网站设计 http://paranimage.com/html5gallery/ http://paranimage.com/html5gallery/#comments Wed, 23 Sep 2009 06:46:46 +0000 帕兰 http://paranimage.com/html5gallery-web-site-design-specializing-in-collecting-html5/ Gallery网站越来越细分化，html5Gallery就是发此，它专门收集使用HTML标记创建的网站设计。如果你正准备学习HTML5，可以从这些网站里面查看各种实例，提高你对HTML的认知和使用。

html5gallery HTML5Gallery: 专门收集HTML5网站设计

转载请注明: 来源于 HTML5Gallery: 专门收集HTML5网站设计
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/html5gallery/feed/ 5 30条HTML代码编写指南 for入门者 http://paranimage.com/30-html-guidelines-for-beginners/ http://paranimage.com/30-html-guidelines-for-beginners/#comments Sun, 23 Aug 2009 08:45:43 +0000 帕兰 http://paranimage.com/?p=10386 本文总结了30条html代码编写指南，只要在编写HTML代码的过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。

1. 一定要闭合HTML标签

在以往的页面源代码里，经常看到这样的语句：


<li>Some text here.
<li>Some new text here.
<li>You get the idea.

也许过去我们可以容忍这样的非闭合HTML标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的。一定要注意闭合你的HTML标签，否则将无法通过验证，并且容易出现一些难以预见的问题。

最好使用这样的形式：


<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

2. 声明正确的文档类型( DocType )

笔者早先曾加入过许多CSS论坛，在那里，如果有用户遇到问题，我们会建议他首先做两件事：

  • 1. 验证CSS文件，解决所有可见的错误
  • 2. 加上文档类型 Doctype

DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合出现，这样浏览器才能正确的解析标记。

通常有四种文档类型可供选择：


1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。

3. 不要使用嵌入式CSS样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点嵌入式css代码，就象这样：


<p style="color: red;">帕兰映像</p>

这样看起来即方便又没有问题，但是它会在你得代码中产生问题。

在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。

这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier

更好的做法是，把这个P的样式定义在样式表文件里：


someElement > p {
color: red;
}

4. 在页面head标签中引入所有的样式表文件

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，
因为这样可以使页面逐步渲染。 —— ySlow团队


<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5. 在页面底部引入javascript文件

要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入。所以会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

举例：


<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. 不要使用嵌入式JavaScript，这都21世纪了！

许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在 标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入时间侦听器。或者使用jquery等框架，之需要使用其“clock”方法。(...)
继续阅读 30条HTML代码编写指南 for入门者

转载请注明: 来源于 30条HTML代码编写指南 for入门者
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/30-html-guidelines-for-beginners/feed/ 16 14个RSS、CSS和HTML验证工具 http://paranimage.com/14-css-and-html-validatior/ http://paranimage.com/14-css-and-html-validatior/#comments Sun, 23 Aug 2009 04:16:48 +0000 帕兰 http://paranimage.com/?p=10395 不管是CSS验证，html验证还是RSS验证工具，我们都不应该为了验证而验证。验证工具更主要的目的是为了发现错误并修正它们。本文为你介绍14款免费的RSS、CSS和HTML验证工具。

firefox插件

CSS 验证器

提供到W3C CSS验证器的易用链接，你可以通过右键的上下文菜单或者工具菜单来进行访问。

Firebug

Firebug是 一个功能齐全的调试器和编辑器，使用它你可以开发单页面的HTML，javascript，CSS，DOM等等。你也可以使用其插件来实时监控 JavaScript，CSS和XML，找到其中可能出现的错误，并学会如何修正它们。作为每个设计师工具仓库中的重要一员，Firebug越来越通用， 甚至开始有了自己的插件（如SitePoint的CodeBurner参考工具）。

HTML验证器

基于Tidy和OpenSP，HTML Validator对你访问的页面进行验证并给出简单的图标提示（icon notification)。工具可以给你提供更多信息，当你查看页面的源代码时，验证错误将被高亮显示。更棒的是，如果你不能找到错误所在，插件会给你 一些提示。

Page 验证工具

通过打开右键上下文菜单，或者从工具菜单中选择“Validate Page”，Page Validator会开启一个新的Tab页面，显示W3C在线验证工具的验证结果。(...)
继续阅读 14个RSS、CSS和HTML验证工具

转载请注明: 来源于 14个RSS、CSS和HTML验证工具
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: , , , 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/14-css-and-html-validatior/feed/ 2 3个你可能从未用过的HTML标签 http://paranimage.com/3-html-tags-you-may-have-never-used/ http://paranimage.com/3-html-tags-you-may-have-never-used/#comments Sat, 22 Aug 2009 13:50:58 +0000 帕兰 http://paranimage.com/3-you-may-have-never-used-html-tags/ html标签众多，在HTML手册里你可以都查到。但有的HTML标签你可能从未使用过。不是因为你欠缺学习精神，而是它们确实用处不大。如果你有探索精神，那就接着往下看吧。

第一个：<abbr> 或 <acronym>

这两个标识是一回事，主要是用于一些英语的缩写，当你把鼠标移上去的时候，你会发现会出现一个小提示来提示缩写的全称，前提是你给标签添加了title属性。但<acronym>在HTML 5中将废效这个标签了，也好，这么难记的单词。下面是一个示例：

  1. HTML
  2. IEEE
  3. RTFSC
<ABBR title="HyperText Markup Language">HTML </ABBR>
<ABBR title="电气电子工程师协会(Institute of Electrical and Electronics Engineers)"> IEEE </ABBR>
<ABBR title="Read the Fucking Source Code">RTFSC</ABBR>
第二个：<q>

这个标识主要就是把引用的文字加上双引号，比较长的引用我们用<bloackquote>，比较短的就可以用<q>。下面是个示例：

这个是一句引言

<Q>这个是一句引言</Q>
第三个，<bdo>

这个标识很有意思，可以把从左到右的字序全部反转过来。比如：May I help you sir ? 如果加上了这个标识后，就是下面这个样子：

    May I help you sir ?
    什么事可以为你效劳啊？
<BDO dir=rtl>May I help you sir ?</BDO>
<BDO dir=rtl>什么事可以为你效劳啊？</BDO>

我们很久之前还介绍过一个让文字倒序的字符。

via zdnet

转载请注明: 来源于 3个你可能从未用过的HTML标签
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/3-html-tags-you-may-have-never-used/feed/ 6 15个基于Web的HTML编辑器 http://paranimage.com/15-web-based-html-editor/ http://paranimage.com/15-web-based-html-editor/#comments Fri, 21 Aug 2009 08:36:35 +0000 帕兰 http://paranimage.com/?p=10375 基于Web的html编辑器，可视化编辑器，或者是富文本编辑器，是让用户在浏览器中输入富文本的一个Web组件。大多数时候 ，这些HTML编 辑器都 使用于CMS管理系统 中，让管理理或作者可以在后台轻松的创建文章内容 。

不多废话了，让我们来看一下这些强大的HTML编辑器。

1. FCKeditor

FCKeditor最著名的在线HTML编辑之一，它把桌面编辑器的强大功能带到了Web里在， 它可以方便的集成到 ASP, ASP.NET, PHP, Java, Perl, Phyton等等. 它支持皮肤，拼写检查，轻量级，快速和拥有一堆很酷的功能 。

FCKeditor

2. NicEdit

NicEdit 是一个轻量级，跨平台，内联的内容编辑器。能够使你很容易地浏览器上实时的编辑站点内容。NicEdit javascript 能够快速地整合到任一站点中并使得任一元素/DIV变的可以编辑或将标准文本区域转变成富文本形式来进行编辑。

NicEdit

3. TinyMCE

TinyMCE 是一个面向Web平台的基于Javascript 开发的即见即所得（WYSIWYG）的HTML 编辑器。它可以将Textarea 或其他HTML 标记转换为编辑器界面，使用起来非常方便。

TinyMCE

4. jwysiwyg

jwysiwyg是一个基于jquery的WYSIWYG插件，它的体积仅7KB。它的使用非常简单，但却拥有不少实用的功能 。
jwysiwyg - jQuery WYSIWYG plugin

5. Yahoo! UI Library: Rich Text Editor

这个富文本编辑器是Yahoo YUI library的一部份。用户可以通过创建插件来增 强它的功能。非常适合那些已经对YUI比较熟悉的朋友 。

Yahoo! UI Library: Rich Text Editor

6. Xinha

Xinha是一个功能强大的WYSIWYG HTML编辑器，支持所有基于Mozilla的浏览器和MS IE。它具有易于扩展，功能模块丰富等特性。

xinha 15个基于Web的HTML编辑器

7. Openwysiwyg

openWYSIWYG是一个跨浏览器，纯JavaScript开发，强大开源的WYSIWYG编辑器。支持多种Web编言言：PHP，ASP，ASP.net，Perl，Java，ColdFusion。(...)
继续阅读 15个基于Web的HTML编辑器

转载请注明: 来源于 15个基于Web的HTML编辑器
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: , , 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/15-web-based-html-editor/feed/ 6 HTML 5的<canvas>元素教程和实例 http://paranimage.com/html-5-canvas-tutorials-and-examples/ http://paranimage.com/html-5-canvas-tutorials-and-examples/#comments Thu, 20 Aug 2009 08:02:05 +0000 帕兰 http://paranimage.com/elements-of-html-5-tutorials-and-examples/ 在HTML5一览中，我们提到html 5被冠以很多高帽，其中最高的一顶、备受争议的就是”Flash杀手“。IT评论界老喜欢用这个词了，杀手无处不在。不管是不是杀手，HTML 5引进的一些新特性确实让人兴奋不已。最令人期待的之一就是 canvas元素。

作为HTML5标准的一部分，Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形。

大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，firefox 也可以通过插件形式支持 3D canvas 。我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。 参见：http://excanvas.sourceforge.net/。

如果你对Canvas元素感兴趣，本文就为你送上一些HTML 5的<canvas>元素的入门教程和实例。

HTML 5的<canvas>元素教程

HTML 5 canvas —— 基本语法

Opera中国发布的一份canvas基本语法教程，主要介绍 2D canvas基础以及如何使用基本 canvas 函数，如线条、形状、图像和文字等。为了理解此文章，你最好了解 JavaScript 基础知识。

HTML5 Canvas 起步

一网友写的一个系列Canvas入门教程，很认真详细。共有三篇: 基本概念，路径和颜色与渐变。

中文Canvas教程

Mozilla发布的一份Canvans教程。教程里的一句话可能会让提起来精神来: 用元素<canvas>并不难，只要你具有HTML和 JavaScript的基础知识。

HTML 5的<canvas>元素实例

看完了上面的那些教程，你可能已经会Canvas的基础使用方法了。但如何利用Canvas来创建可媲美Flash的应用呢？研究一些实例吧。

HTML5 Canvas实验

几位开发者为了测试Canvas元素在浏览器中的表现性能所做的一个实验: 载入100个与HTML5相关的tweets，用一个基于javascript的粒子引擎将他们展示出来。结果是: 与Flash相比还有相当大的差距。帕兰这边查看DEMO，一直LOADING….(...)
继续阅读 HTML 5的<canvas>元素教程和实例

转载请注明: 来源于 HTML 5的<canvas>元素教程和实例
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: , , 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/html-5-canvas-tutorials-and-examples/feed/ 7 性感的HTML标签入门指南 http://paranimage.com/html-tags-sexy-getting-started-guide/ http://paranimage.com/html-tags-sexy-getting-started-guide/#comments Wed, 19 Aug 2009 14:35:00 +0000 帕兰 http://paranimage.com/html-tags-sexy-getting-started-guide/ 如果你想学HTML，但又觉得代码太枯躁无聊，可以尝试一下Exey Panteleev拍摄的这组性感的HTML标签入门指南。除了html标签，还有一些设计开发相关的术语照片。

sexy html tips 性感的HTML标签入门指南

只是，看这样的指南时，眼球还有时间看图片下面的说明文字吗? :grin:

PS：建议各所大学可以请一些比基尼美女去当老师，教授一些蝴蝶效应、六度分割和上帝保佑吃饱了馒头的人之类的科学或哲学理论。

转载请注明: 来源于 性感的HTML标签入门指南
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: , , 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/html-tags-sexy-getting-started-guide/feed/ 13 8份HTML手册 http://paranimage.com/8-html-cheat-sheets/ http://paranimage.com/8-html-cheat-sheets/#comments Wed, 19 Aug 2009 10:42:46 +0000 帕兰 http://paranimage.com/?p=10351 html做为一门基础的前端开发技术，简单易学。但元素属性过多，也记不过那么多来，比如我就一直记不得常用HTML实体字符的代码。本文收集整理一些HTML手册，包含HTML实体字符手册，HTML标签手册，XHTML手册和HTML5手册等等。

HTML 4.01 / XHTML 1.0 参考手册（HTML）

W3CShool提供。按字母顺序列出的HTML 4.01/XHTML 1.0在线标签手册，以及显示每个标签在哪种DTD中是被允许的，点击每个标签都有详细的注解。

w3school.stylesheet 8份HTML手册

HTML颜色速查表(PDF)

8份HTML手册

HTML5 Canvas速查手册

8份HTML手册

HTML 字符实体手册（PNG+PDF)(...)
继续阅读 8份HTML手册

转载请注明: 来源于 8份HTML手册
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: , , 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/8-html-cheat-sheets/feed/ 3 HTML 5一览 http://paranimage.com/list-of-html-5/ http://paranimage.com/list-of-html-5/#comments Wed, 19 Aug 2009 08:15:55 +0000 帕兰 http://paranimage.com/?p=10342 html 5最近被讨论的越来越多，越来越烈。尽管HTML5离我们其实还挺远的， 我们绝对犯不着浪费时间现在就去学习HTML5的特性和应用 — 那是Google这等走在技术前沿有实力有干劲的家伙才干的事儿。但任何一个设计开发爱好者都不能忽视它，至少应该有个大概的了解。

HTML 5可谓集万千宠爱于一身，各种高帽戴的不亦乐乎。当然，只要是值得讨论的事情，总有不同的声音。也有一些人并不看好他，或者至少对HTML5没那么兴奋。

本文就收集整理一些有关HTML5的相关知识、热门评论和新闻动态，帮助你进一步的了解HTML。

什么是HTML 5？

HTML 5 的历史背景

HTML 5

HTML 5

HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。[1]WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。wikipedia

WHATWG，这个HTML5背后的组织，用下面的话描述自己：“2004年由Apple，Mozilla基金会，Opera软件中的人员创建，他们的矛头直指W3C直属的XHTML，认为HTML缺少乐趣，对现实世界的需求置之不理。这些组织中的有识之士决心改变这一切，所以超文本应用技术工作小组 (WHATWG的英文全称)应运而生”。HTML5预计在2012年正式登上W3C候选标准的舞台。但是这并不意味着你到那时才能使用。一些技术已经成熟，一些部分已经足够稳定，一些功能实现已经接近尾声，所以我们现在就可以体验它们的新特性了。 当前，市场正一步一步加速WHATWG项目的进程。via

注: W3C 日前宣布将从2009年底起终止同 XHTML 2 工作组的合约。

HTML 5的新标记

关于HTML5中对元素和标记的更新，我把它们划分为三部份:

  1. HTML5结构元素: 新增了更具语义化的标签，比如<header>表示页面的头部，<footer>表示底部，<nav>表示一个链接导航集合等。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
  2. HTML5 交互元素: 我们上面说过，HTML5的前身名是Web Applications 1.0。所以HTML5当然不只是随便加几个标签，让代码结构更具语义化这么无聊。另外一些新增的元素，诸如<details>, <datagrid>等，可以实现控制数据和内容展示等交互能力。input元素的新属性：日期和时间，email, url，可以轻松制造一个Webforms 2.0。
  3. 删除的HTML4元素: HTML5删除了HTML4中纯粹用来显示效果的一些标记，比如<font>和<center>，因为它们已经被CSS取代。

看着上面的这些HTML5特性，就不禁让人想到XHTML，XHTML到底做了些什么呢？为什么近几年来，我们老爱跟HTML4划清界线，钟爱XHTML？这有篇文章说的很好：XHTML 鼓励良好的代码习惯，所有标签都需要完整，严谨，XHTML 可以产生比 HTML 4 更干净的代码。也就是说，XHTML相对HTML4，就起到了一个更严格的约束作用，但事实上，用HTML4也可以写出很干净的代码，用XHTML也有人把代码写得一团糟。

当然，我等鼠辈都是墙头草，还特喜欢落井下石。HTML5没热腾起来的时候，也没谁寒碜XHTML，更多的却是讨论要用Transitional还是Strict。废话少，如果你想具体了解HTML新增的元素和属性标记，可以查看下面这些文章:

HTML的新API

除了原先的DOM接口，HTML5增加了更多样化的API。包含了设计师们需要的很多东西，本地的音频，视频支持，多栏布局工具，离线数据库，本地的矢量图支持等等。

HTML 5的试验

HTML 5的标准还八字才有一撇呢，后面一撇还得慢慢描。但已经有诸多的先锋部队开始拥抱它了。很多主流浏览器的最新版本都已经开始支持HTML5中的部份特性，除了IE。

如果你确实很迫不及待的也想做下技术先驱，下面的一些实例和资源可能会对你有用：(...)
继续阅读 HTML 5一览

转载请注明: 来源于 HTML 5一览
原订阅地址即将失效，请大家更换到新的订阅地址: http://feed.paranimage.com/

© 帕兰 for 帕兰映像, 2010 | 添加到 del.icio.us

通过这些关键词: , , 找到更多你可能喜欢的内容

帕兰头像 第5工作室 - 付费设计:　自定义个性化网页设计, 承接付费WordPress主题定制, PSD转XHTML等设计业务.
第7网赚室 - 在线赚钱:　向你推荐最热门最真实的在线赚钱途径, 让你在写博同时, 轻松赚取美元!
第9主机室 - 国外主机:　低于5美元/每月, 支持PayPal付款的美国虚拟主机, 直观图析评测导购, 帮您做出明智的选择.

]]> http://paranimage.com/list-of-html-5/feed/ 7