当初新浪微博的通知框是不会动的，你滚到下面了就看不到通知了，想提个意见，来不及提就出现了现在它这样的效果。虽然不是什么新鲜事了，估计人家也弄过这样的了，我就蛋疼蛋疼玩一下吧，为整年没玩过的东西开个头。

演示（或许）稍后跟进，好困，纯属扯蛋。//at 16:35

CSS:

#sina_notice{padding:5px;background:#FDFFEA;border:1px solid #CCCCCC;position:absolute;top:0;right:200px;z-index:99}
#sina_notice a{color:#399FD6}
#sina_notice img{margin-left:5px}

HTML:

<div id="sina_notice">
	1条新通知，<a href="#">查看通知</a>
	<a href="#" onclick="javascript:turnoff('sina_notice')">
		<img src="http://pic.yupoo.com/ygs924_v/BcG6x1FR/VkhqY.png" alt="关闭" />
	</a>
</div>

关闭按钮JAVASCRIPT:

<script type="text/javascript">
  function turnoff(obj){
    document.getElementById(obj).style.display="none";
  }
</script>

滚动jQuery:

$(function() {
    var $sidebar   = $("#sina_notice"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

因为说可以百度Google打电话问朋友，更因为没有使用过inline-block，所以很快我找到了这篇“跨浏览器的inline-block”，呵呵，代码都没测试就发过去了，比较杯具。后来对方问我产生着问题的原因，当然我是不知道的，我问他，原来是这样子……

原来的代码有换行，如下：

<ul>
<li></li>
<li></li>
<li></li>
</ul>

去掉换行，如下：

<ul>
<li></li><li></li><li></li>
</ul>

啊……啊……

我说IE6除外只是因为此框框在IE6表现正常，并没受浮动影响，至于真相是什么，还有待考究。

HTML结构

<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>

解决方法
1.添加额外标签
在容器末尾添加<div style=”clear:both”></div>从而将容器撑开，但这样会添加额外的标签。
Demo

2.浮动容器
将容器#container添加float:left，虽然这样能产生想要的效果，但是下一个元素会受到这个浮动元素的影响。
Demo

3.使用overflow属性
应用值为hidden或auto的overflow属性有一个有用的副作用，会自动地清理包含的任何浮动元素。
Demo

4.使用:after伪类(IE6无效)
使用:after在容器末尾添加新的内容并清除内容浮动。

#container{
	display: inline-block; /*ie for mac*/
}
#container:after{
	content:".";  /*额外的东西越小越好，此处添加一个点*/
	display:block; /*这是必须的*/
	clear:both; /*这是必须的*/
	visibility:hidden; /*隐藏所添加的内容*/
	height:0; /*不占用空间*/
}

Demo

5.其他
IE6在有些情况下使用以上方法并没有清除浮动，而IE很多奇怪的渲染问题可以通过赋予其“layout”得到解决，或者说触发IE的layout属性，例如添加CSS zoom:1，_height:1%，至于什么是“layout”，我也不太懂，可以搜索一下。

欢迎探讨~

HTML代码如下：

<div class="type-file-box">
<form id="form1" method="post">
<input id="fileField" name="fileField" size="28" type="file" />
</form>
</div>

这是一个基本的 input type=”file” 。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。

注意：size=”28″ 是在 firefox下input type=”file” 的宽高是不能通过样式来定义的，所以用了 size 属性来控制 input type=”file” 的宽度。

CSS代码如下：

.type-file-box{ position:relative;width:260px}
input{ vertical-align:middle; margin:0; padding:0}
.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}
.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

注意：这里的 filter:alpha(opacity:0);opacity: 0 是让 input type=”file” 全透明，这样用户看不到 input type=”file” 。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的 input type=”file” 。

JS代码如下：

$(function(){
var textButton="<input id="textfield" class="type-file-text" name="textfield" type="text" />  <input id="button" class="type-file-button" name="button" type="submit" value="浏览…" />"
$(textButton).insertBefore("#fileField")；
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);

这里用了JQuery，当input type=”file”的值在onchange的时侯，将文本框的值设置成input type=”file”的值，OK了。

演示地址:http://www.css88.com/demo/input-file/

正则表达式系统教程.rar
PHP5.3_参考手册.rar
MySQL5.1参考手册.rar
jQuery_1.4.1_参考文档.rar
JavaScript使用手册.rar
HTML5_参考手册.rar
HTML4_参考手册.rar
CSS_3.3_参考手册.rar
CSS_2.0_中文手册.rar

如果你正准备为你的网站制作一个移动设备版本，那这篇文章将会对你相当有用，在本文中，将探索移动Web网页编码设计的各种技巧和注意事项：

• 为了移动设备上的用户体验可以被接受，代码得怎么设计。
• “Mobile Web”与普通网站的不同之处？
• 可以让网站成功运行在移动设备和桌面浏览器上的基本技巧
• 一些Mobile Web设计中的建议和禁忌、以及大量资源

Mobile Web和普通网站到底有何不同呢？

这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。

在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循 Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。

移动领域的竞争环境并不平衡

在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、firefox（以及其他Gecko内核浏览器）或者Safari（以及其他 Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。 但是，移动设备领域在这方面却是不同寻常的：

• 你拥有能为“Full Web”提供支持的浏览器，像iphone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。
• 你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像 Chtml或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。
• 最后，你拥有OperaMini， 以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会 把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90% 左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对 ajax/javascript某些方面将支持的不是很好 – 在这儿有更详细的解释。

注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。

我们可以看到，在移动设备的跨浏览器兼容方面，你要思考的问题有很多。但是不要怕 – 我随后的建议会给你指引一个正确的方向；并且随着时间的推移，移动浏览器对标准的支持将会得到改善，届时我们前端开发者真的再也不需要为它们操心了。你问 我这一切什么时候会实现？Who knows！

移动浏览器的其它限制还有那些？

当然，在移动设备上开发网站时，除了浏览器对标准的支持外，还会遇到其它更多的限制因素。设备自身的限制因素，你也不得不考虑。例如：

• 有限的控制 – 不要只假设你的用户会使用鼠标来控制页面中的一切，你也要提供键盘的选择。一些手机用户可能没有类似鼠标这样的东东，所以类似这样的结构 :hover 以及 onClick 对 他们来说是没有用的（这对可用性方面也是非常重要的 – 一些残障用户可能在用手方面会有些缺陷）。为用户提供的表单设计也同样重要 – 你可能已经感受到，用手机来填写那些又臭又长的必填表单有多么不爽。为了解决这个问题，试着去把那一坨内容用下拉菜单的方式展现出来，这比等着用户一个字 一个字手动输入来的更靠谱（译者注：目前国内有某些山寨机浏览器对下拉菜单的支持可能有不同程度的问题。例如基于MTK系统的联想i61，默认情况下会显示所有选项，而在某些情况下会产生变形和“漂移”，使用时需要谨慎些）。另外，给表单设置一个最有可能的初始值，也是一个好主意。
• 有限的屏幕尺寸 – 想象一下你那美妙的1024×768的设计在240×320屏幕下，或者更小的屏幕下，它的可用性会是什么样子……有一些方法可以应对这个情况 – 你可以故意把页面设计的很简洁流畅，或者你可以通过采取功能检测或媒体类型检测（诸如此类）的手段，为移动设备提供不同的页面。另外对于屏幕尺寸，有些手 机可能不需要这么麻烦，它们可能会提供“缩放模式”这样的机制，但是你却不能保证这一点。
• 有限的内存和带宽 – 移动设备所提供的可用内存明显比台式机少得多。因此，在你设计站点时，需要特别小心的考虑那些超大容量的相册图片，以及交互式流媒体视频的应用程序。此外，一些移动浏览器提供了关闭图像显示的选项，但是你也同样不能确定这一点。
• 有限的排版 – 我靠，你对台式机上那些排版非常痴情？你没有看到移动设备上的表现！虽然这条规则有很多例外情况，但大多数移动设备对字体的选择非常有限，只有一两种（like 1 or 2）。这个限制是由系统或浏览器决定的。
• 有限的颜色 – 一些移动设备在颜色方面的支持也非常有限。考虑你有多少页面的体验需要依赖于颜色，并确认那些对比色在移动设备上仍然支持。

这些限制因素，就是导致Mobile Web的体验与PC Web的体验不同之处的真正原因。千万别欺骗自己，觉得自己的网站在移动设备上的用户体验与台式机上会保持一致 – 这纯属YY。当然，你抛开浏览器，千方百计去确认用户体验这一点仍然值得肯定。

真正的办法，去确保你的网站为移动用户提供一个良好的体验，是测试，测试，再测试！一些Web设计师们已经认识到，除了他们自己的手机、台式机以及游戏机浏览器外，还需要有一大堆移动设备需要准备在手头。

解决问题的不同方法

人们普遍意识到，有三种办法可以解决移动开发的问题（已经被Cameron Moll证实了 – 找他的书看看）。可能的话，我建议你试试这三种方式 – 如前所述，在Opera，我们坚持相信One Web的理念 – 但是刚才我也说过，有些情况下这是很难实现的，或者也是没有必要的。下面是这三种方法：

1. 务必坚持遵循Web标准
2. 创建一个完全独立的移动网站
3. 只创建一个站点(One Web)，但是根据浏览它的设备和浏览器情况，添加优化代码。

现在，让我们开始对这些点逐个讲解。

一个好网站的基础，是要有一个好的HTML结构，以及美妙的CSS（表现）和JavaScript（行为）。如果你认真地遵循Web标准，大多数移动浏览器至少会很好地解析并至少会基本可用，这是非常有可能的。例如：

• 一个网站，有良好的HTML结构顺序并在HTML中没有装饰性图片，在移动浏览器的单列模式或移动模式中，会呈现得很有逻辑性。
• 如果你的表单元素中含有“label”元素，浏览器将把它渲染得更有表单区域的感觉。
• 如果你给CSS和JavaScript使用了优雅降级/渐进增强技术，浏览器如果不支持、简化、忽略某些属性，这时站点的可用性几率会大大增加。

如果你花费时间精力去研究的话，在提升移动用户体验方面，还有更多事情可以去做。如果你的目标受众包括大量使用非HTML浏览器（例如支持WAP或CHTML的某些日本浏览器）用户，那么你可能不得不检测设备并提供适当的内容。

提供一个完全独立的移动网

如前所述，我认为如果可能的话应该尽量避免使用这种方式。你可以做设备检测并自动重定向来避免给用户使用带来麻烦，但是这意味着你不得不维护两套网站。最主要的方法是通过UA嗅探来识别浏览器，或在服务端进行设备功能检测，然后再给用户提供相应的站点。在dev.opera.com，有很多优秀的文章来讲述如何实现 – 查看最后的资源部分。

但也有例外，对于完全独立的网站来讲 – 你不得不始终考虑用户体验情况。某些类型的浏览设备可能不兼容于特定的网站或者特定的功能。例如，有一个大学校园网，带有部门电话号码的搜索功能，但同时 也包含了一大堆校园历史的网页。如果你想去与某人会面却找不到他们部门时，你大概会想在移动设备上使用搜索功能，但你在外出的时候也不太可能想坐下来阅读 那么多的文字。

在这种情况下，你可以使用下面提到的一些技巧，来为移动设备提供网站中某个功能的一部分，或者干脆为移动设备创建一套完全独立的网站。你只需检测用 户使用的设备类型并自动提供给他相应的站点，并把这个过程完全公开给用户，但是很多很多人并不愿意这个功能把他们完全限制住，所以如果你要这么做的话，就 需要给用户提供一个指向完整站点的链接，用户可以自行选择是否用它来访问完整站点。

一句话警告 – 设备检测很容易被滥用。你可能经常看到一个网站的桌面版本非常牛B，而它的移动站点却非常的垃圾。因为开发者只是将移动站点放在一个非常低标准的位置上。 事实上，目标受众的设备水平并不均衡，现在很多的移动浏览器都具有处理完整Web页面的能力了！你应该尽可能地让设备发挥他们最高的处理能力，并且要发挥 移动设备的特别优势，比如基于位置的服务（LBS），还有 tel: 协议 – 在超链接点击时它可以让设备拨打一个电话号码。

只提供一个网站(One Web)

进行到这里时，就开始变得有趣了。你可以再次依靠服务端功能检测，但这次是在单一网站的基础上进行优化，而不是重定向到另一个独立网站。有一些手机所支持功能的数据库可以参考，例如WURFL。它是以XML文件的形式开放的，你可以在设计优化内容之前，先通过它来查询设备所支持的功能。你还可以查询移动设备的UA字符串，找出这些设备的其他细节参数，例如是否有摄像头，屏幕尺寸是多少，以及它的语言种类等信息。

在客户端，你已经得到了为移动设备而优化内容所需的两个条件 – 媒体类型（media types）和媒体查询（media queries）。

媒体类型(media types)

就像你知道的那样，你可以指定不同的CSS来实现不同的用途，例如：

<link href="main.css" type="text/css" media="screen" rel="stylesheet">
<link href="print.css" type="text/css" media="print" rel="stylesheet">
<link href="mobile.css" type="text/css" media="handheld" rel="stylesheet">

手持类的媒体类型允许你针对移动设备使用优化版的样式（例如精简的布局和排版等）。这是一个被支持得很好的机制，实现起来也很简单，但它确实有它的 缺陷。就像之前所说，它经常被开发者滥用，来给网站提供一个蹩脚的最低标准布局。事实上，OperaMini最近改变了默认类型，把默认使用手持型样式表 （handheld stylesheet）改为屏幕型样式表（screen stylesheet）。OperaMini可以处理大多数完整网站，因此它并不真正需要使用手持型样式表（handheld stylesheet）。如果你乐意，你可以在OperaMini的浏览器选项中手动设置回移动视图。

媒体查询(media queries)

媒体查询是CSS3的一个构想，它的用途跟条件注释非常相似 – 你可以把一大堆CSS规则封装嵌入到一个媒体查询中，然后把它应用到你的标记结构中，这一切取决于一个条件，类似“屏幕尺寸是否小于480px？”然后把代码放进去，代码类似这样：

img {
margin: 0 0 10px 10px;
float: right;
}

@media all and (max-width: 480px) {
img {
margin: 10px auto;
float: none;
display: block;
}
}

你甚至可以使用多个媒体查询，像下面这样：

body {
max-width:800px;
font-family:georgia, serif;
}

img {
margin:0 0 10px 10px;
float:right;
}

.info {
position:absolute;
left:8000px;
}

@media all and (max-width: 480px) {
img {
margin:10px auto;
float:none;
display:block;
}
}

@media all and (max-width: 240px) {
img {
display:none;
}
.info {
position:static;
}
}

OK，在这个例子中（源代码点击这里查看），浏览器中的图片在屏幕大于480px时会向右浮动，文本会环绕图片并通过外边距留出一点儿舒服的距离（另有一个信息隐藏在 p 元素中，并命名了一个 class叫 info - 看看HTML代码）。文本流在一些小屏幕中看起来可能会有些蹩脚，因为那里没有足够的空间来让图片和定量的文本放置在同一行中，所以当屏幕小于480px时，图片就需要改变一下，让文本不再围绕在它旁边，而是用 display:block 让它们显示在不同行中。等等 – 还有更精彩的！如果屏幕非常小以至于不能有效地展示图片，那就让它们消失，然后让隐藏信息显示在图片那儿，替代那些图片显示文本描述 – 这是一种将信息传达给读者的一种另类技巧，利用它也可以为那些使用屏幕阅读器的盲人用户提供原始文本，以便他们顺利浏览网站。图1展示了三个不同的浏览视 图，这是在那些支持媒体查询的浏览器中（例如Opera 9.5）表现出的不同形式。

图1：例子中三个不同的浏览模式

听起来挺好，但是有没有不足呢？好吧，目前浏览器对媒体查询的支持程度非常有限。Opera浏览器支持它们，Safari 3也可以（以及其它基于Webkit内核的现代浏览器），但是Firefox 3之前的版本并不支持，IE或其他浏览器也不支持。解决问题的方法之一，是使用媒体类型和媒体查询的组合。这种方法在我的这篇文章中做过解释。这是一种变通方案，但肯定不够理想。这点在将来应该会有所改善。

摘要总结

目前就是如此而已。我希望我的移动开发世界之旅会对各位有所帮助。我在这只是抛砖引玉，要想深入学习的话，可以查看下面这些资源。

资源

• Mobile web design book, by Cameron Moll
• Designing and developing mobile web sites in the real world — 一个实例研究 by Brian Suda
• Server-side capability detection for mobile devices by Brian Suda (包含WURFL, UA字符串等信息)
• Ajax/JavaScript support in Opera Mini 4, by me
• Kristian von Streng Hæhre’s Opera Mini request header reference
• How to serve the right content to mobile browsers, 同样by牛B的me — 包含媒体类型和媒体查询
• Creating safe media queries that work cross browser
• Web design with Opera Mobile in mind, 再一次 by me
• The WURFL homepage
• The Opera Mobile homepage
• The Opera Mini homepage

现在的 HTML5 就像当年崭露头角时的 Ajax，有人在做，但不知道叫它什么。最近，苹果在 HTML5 上大做文章，而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 Yahoo 的一名前端工程师，本文是他对 HTML5 应用现状与前景的思考。

开源模式带来转变

O’Reilly 创始人，Tim O’Reilly，一位开源的支持者，曾在《Open Source Paradigm Shift》中如是说：
“IBM 对个人电脑设计的商品化使利润从硬件转移到软件这一层面，而开源将带来新的财富”
价值在不同的层面转移，HTML5 将成为新的层面，商品的价值在下降，现时的浏览器已经成为商品，但这并没有问题，只要它们都遵守标准。人们说，我们可以将操作系统置入浏览器中，但这行不通，如果我们可以从过去的经历中学到些什么，那就是，不能简单照抄过去的模式，好比广播到电视的变迁，你不能简单地在一个播音员面前放台摄像机完事，将操作系统置入浏览器未必比 HTML5 离线应用本身更有价值。

发布渠道的重要
诸如 苹果应用商店，Android 应用商店一类的渠道将成为主导，另外，一些新的，象 Valve 游戏渠道，Netflix 电影渠道一类的东西将会出现，在”云“时代，这些发布渠道将像桌面时代的操作系统一样用来对用户进行组织和归类。

我们是如何到达现在这个阶段的?
有两个关键的因素。

感谢 Web 标准
尽管浏览器市场并不统一，但至少他们都运行 HTML，JavaScript 和 CSS。当我们希望通过 Web 推出一些东西的时候，我们知道，无论如何，用户都能看到，然而你能想象人们都自己定义 Web 时的情景吗，假如有人不使用 HTTP协议，或者不使用 HTML，那才是世界的末日。W3C 一类的组织让各个浏览器厂家都保持同一个方向。

还好，我们并没有很多渲染引擎
浏览器并不好做，数十亿的网页，参差不齐的代码，这些东西让独立开发者没有机会单独设计浏览器，因此，有能力设计浏览器的始终是那么一小撮厂商，事实上，时至今日，我们只有四种主要的浏览器渲染引擎，Trident (IE), Gecko (Mozilla, Firefox), WebKit (Chrome, Safari), 以及 Presto (Opera)，而众多浏览器都是建立在这些渲染引擎之上的。这意味着，不管在什么样的设备上，我们不用太担心它使用什么样的浏览器，不管什么设备，只要它有一个浏览器，就有一个可以运行 HTML5 的环境。

标准何日面世？
关于 HTML5 成为标准的时间，Ian Hixie 的说法最受认可:

“根据估计，HTML5 直到 2022 年才会形成 W3C 推荐标准“

然而，虽然标准的形成尚待时日，但浏览器厂商已经在实现各种 HTML5 功能。

功能探测 vs 浏览器探测
如果你是开发者，你可以使用那些高级功能，但需要进行功能探测并提供渐进式设计。坊间有大量的功能探测库，如 Modernizer ，另外，Mark Pilgrim 有一个清单，它可以让你探测任何功能。

离线 API
离线 API 是一切 HTML5 应用的基础，不单单是离线数据的事，对开发者来说，拥有本地存储（localStorage）自然很好，但如何让程序完全离线运行？Application Cache 是答案。如果不能离线保存源文件和数据，我们就无法实现离线的 HTML5 应用。

我们目前有几种离线存储机制，简单的如 localStorage 和 SQL 存储引擎，已经有一些浏览器在支持了，而最新的明星是 Indexed Database，它得到了所有主流浏览器支持。这些离线保存应用和数据的能力，是 HTML5 的基础，目前，Webkit，Firefox 已经可以实现，而 IE9 也即将实现。即时 IE9 的支持还需要等待，想一下，最需要离线应用的场合是哪里，自然是智能手机和上网本，智能手机多数都是用 Webkit。

W3C Web 应用工作组：HTML5 应用的下一步
W3C WebApps 标准已经做了大量工作，包括 API 及 HTML5 Web 程序细则。

HTML5 应用的打包部署

HTML5 apps – QuirksBlog 博客文章中说，”对于本地/离线 HTML5 应用，W3C Widget packaging and configuration 是首选机制，并将成为事实标准，很多厂商已经开始对之进行实现。W3C Widgets 支持任意平台的 Vodafone S60 和 Samsung 手机, Opera 桌面与移动浏览器，Bolt 浏览器 以及 Windows Mobile 6.5。BlackBerry 也支持，不过需要特殊的 Java 包。“

这些都是标准，本质上讲，如果你有一个 HTML5 应用，它就会包含 HTML, CSS, 以及 JS，这些标准只不过偶是帮助开发者将他们的程序打包发行，如果你熟悉 PEAR, 它们是很相似的概念。你可能需要一些元数据，告诉系统你的程序是如何打包在一起的，在支持这些标准的平台上，你就可以保证你的用户可以顺利运行这些程序。

其它
HTML5 还有更多 API 可以帮助开发者创建应用，这些 API 可以让你的程序访问诸如本地文件，摄像头，SOCKET 通信服务，以及硬件动画加速等。这些 API 仅仅是开端，这样的 API 后期会越来越多。

HTML5 程序可以应用在哪里？
当然是浏览器，如果一个设备拥有一个浏览器或渲染引擎，而且这个引擎是现代引擎，它就可以运行 HTML5 程序。HTML5 程序会应用在以下几种场合。

桌面
如果你拥有一个符合 Web 标准的浏览器，就可以运行 HTML5 应用。桌面仍然很重要。

指定站点浏览器
诸如 Gmail 一类的站点可以看做一个应用，使用专门的浏览器运行，这样的浏览器没有地址栏，是专门用来运行指定站点应用的，甚至可以制作一个安装包来分发。以下资源值得一看，Prism, Fluid/Fluidium 以及 NativeHost。

移动领域
这是 HTML5 最热门的运行场所。iPhone 可以和很多程序集成，将你的程序显示在它的今日桌面（这里有一个教程），Android 也支持需要的 HTML5 API，但集成不够好。未来几年，支持 HTML5 的移动浏览器将如雨后春笋，将你的应用向 HTML5 迁移是很明智的，因为 HTML5 将很好地运行在这些设备上。

跨界领域
已经有公司即将发布电视平台，Google TV 以及 Apple TV，Google 表示，他们的 TV 平台将支持 HTML5，我们不知道苹果的 TV 平台将支持什么，鉴于他们最近对 HTML5 的一系列炒作，很有可能也支持。另外一些电视盒厂商，如 Boxee 业已开始支持 HTML5，如果你想为 Boxee 开发应用，与其专门为它开发，不如直接使用 HTML5。

跨界领域拥有大量的平台，那些可以连接电脑的电视的数量在不断增长，我们已经可以在电视上全屏观看 YouTube，而备受欢迎的 Wii 则内置了 Opera。所有这些，都将借助 HTML，CSS 与 JavaScript。

HTML5 应用商店
Eric Meyer 讲到了 HTML5 应用程序问题，他将 HTML5 应用成为 Web Stack Apps， HTML5 要获得更多关注，可以建立 HTML5 应用商店。Chrome 正在这样做，而 Palm 已经有了一个这样的东西。

应用商店是很好的东西，开发者可以直接得到报酬，而无需像现在这样靠广告维持，同时，用户也将有一个地方去为他们的设备寻找程序。

HTML5 市场前景
HTML5 在快速成长，值得所有人密切关注，最近的一两年，会有很多公司进入这个领域，我们或许会在 Chrome 应用商店看到一些重量级厂商，我们也有希望在 Google TV 和 Apple TV 领域看到一些应用商店的出现。HTML5 会像传统的 Flash，Flex，Silverlight，Objective-C 那样，形成自己的生态系统。HTML5 将比 Flash, Flex, Silverlight 以及 Objective-C 更容易出现在任何设备。

对于年轻一代开发者，HTML5 应当是他们首选技能，HTML5 会形成很大的市场，很有很多公司需要这方面的人才。
延伸阅读

• HTML5 到底是什么？

1. LOGO大要好看

当 一个logo大大的出现在户外看板上，它必须清楚的让所有人都一目了然，这是logo具有清楚辨识度的基本原则。

2. LOGO小要好看

当logo出现在明片上，比一个拇指还 小，因此设计一个logo，请用直径两公分的大小试试看，是不是缩小也一样好看。

3. LOGO黑白要好看

当你传真公司文件，logo颜色会变成 黑白，你的logo因该像Nike、Mac，在经过最糟糕的复制影印方式后看起来一样清楚。

4. LOGO可以有各种颜色

Nike的标准色是红色，但你也可 以看到蓝色、绿色或是黑白各种色彩。同样拥有篮球、棒球、高尔夫球、网球甚至F-1方程式赛车系列等产品，都具有独特性，这些色彩纷陈的广告却不会让你对 于Nike的品牌有任何混淆。因为一个品牌精神不是单靠—颜色建立的。

5. LOGO可以轻易的画出来

拿起比来，你可以很轻易的画出Nike的弯勾、麦当劳的M，可 以随手画出来表示你的LOGO也很容易被记住。

6. LOGO在CMYK与RGB都很好看

印刷用CMYK，电视或电脑萤幕用RGB，你的logo会经常出现在杂志、电 视或电脑萤幕上，在没有特别色的情况下，LOGO要再这些寻常的媒体上一样好看。(就是要你别用特别色啦！例如萤光色。)

7. LOGO能够做成动画

你不能忽略网路的广告行销盛 行，LOGO具备容易转换成动画的条件，在网站上的活泼多变更容易吸引注意。

8. LOGO具有国际画质感

选择一个放诸四海皆宜的图案，像是POLO的马就不会有任何文化 代沟，要让全世界都看得懂的LOGO是最基本的。

9.LOGO代表的是企业精神

Nike的弯勾不代表一双鞋子，这是取自希腊神话中女神的翅膀，许多企业跨足不同的领域； 房地产、保险到食品都隶属同一集团，所以LOGO表现企业精神，而不是画出企业的所有营业项目。

10.LOGO具有广泛的应用性

GUCCI的logo具有多种的 应用性，它可以放在牛皮、金属、陶瓷、铁鍊、塑胶等各种不同材质上。为了你公司生产的产品週边商品方便，LOGO必须具有容易复制在特别材质的特性。

11.想让人穿在身上

一个好logo最重要的判断标准，是印在 衣服上会想要穿在身上PRADA、Nike、CHANEL，都会想要迫不及待想要穿出去？

(但老实说，其实 我自己是不认同第11点的，因为就算我喜欢麦当劳或是7-11的LOGO，我也不会把它穿在身上，除非我很想要成为麦当劳的员工！！！ )。

以上原文: http://yyoyya-deer.blogspot.com/2007/09/logo.html

12. 不要在设计LOGO之前太在意你LOGO要包含什么寓意

补充一条个人的看法：很多客户和设计师都喜欢在设计LOGO之前，想着要让LOGO传达什么寓意什么精神什么文化。其实大多数时候，你不必去为这个事儿瞎操心，你可以把流程倒过来：等LOGO出来后，再把你的LOGO和你想要的寓意、精神、文化扯在一块儿。你会发现，乳沟是挤出来的，故事是编出来的，传说是扯出来的！

以上原文:http://paranimage.com/12-guides-for-logo/