HTML | 酷壳 - CoolShell

两个教程：Socket和HTML5

2010年08月23日陈皓评论 12 条评论 10,328 人阅读

给大家介绍两个教程，一个是关于Socket编程的，一个是关于HTML5的。

关于Socket，相信大家都知道这个是用来做TCP/IP网络编程的，其由FreeBSD引入，现在，只要你相做网络编程，你必然会使用到它。这里有一个叫 Beej’s Guide to Network Programming 的网站 ，非常不错的一个教程。在其主页上显示有中译版，不过很可惜，打不开。好像网络有很多转载，你可以 Google一下。

另一个是关于HTML5的众多标签，大家可以访问这个叫做“ HTML5 Peeks, Pokes and Pointers ”的网站，其就像一个速查手册一样，你可要查阅HTML5的那些BT的tag，比如：多媒体，画布，地理，表单，等等。

希望大家喜欢，不妨你也说说你知道的相关的一些教程。

( 11 人打了分，平均分： 2.45 )

HTML5 和 Flash 之争

2010年07月27日 jnj 评论 11 条评论 14,474 人阅读

文章来源

二者之间的竞争会演变成为一场“战争”吗？（现在甚至出现了可以把Flash转成Javascript/HTML5 的工具）

首先需要弄清楚二者之间最主要的区别，HTML 是一种语言（超文本标记语言 – HyperText Markup Language），而 Flash 是 Adobe（其收购了Macromedia）公司的一个浏览器插件（Plugin）。HTML5 目前还是 W3.org 规范中一个草案，这意味着其还没有最终定案，希望到 2012 年这项工作能够完成。

以下是二者各自的一些特点：

HTML5

这个新的技术更为易学和易用，比较 .FLA 和 .SWF 文件更容易编辑。并且基本上过去所有由 Flash 才能制作的动画效果都能够使用 JS + HTML5 + CSS 3 来完成，不过工作量可能会更大一些，不仅文件尺寸会增大，性能方面也会有影响。

以前为 Web 表单设定风格我们一定需要使用到 JavaScript，但是 HTML5 中的 contenteditable 属性让我们可以做得更多。一些新的输入类型（Types of Inputs）也被加入到 HTML5 中，如：电子邮件，数字，值范围等等。

用户不仅仅需要一个支持 HTML5 的浏览器，还需要 CCS 3 和新的 JavaScript 引擎的支持。

免费（不包括第三方字体和音频视频等等）

更好地移动设备支持（HTML5 正在被运用于 iPhone，iPod，iPad 和 Android 应用的开发）

拖拽，事实上这不是 HTML5 的一部分，但是在新版本的 GMail 中，从桌面拖拽文件到浏览器能够用 HTML5 很好地实现。对于 Flash 我不知道这是否可以实现？

…

阅读全文 Read More

( 12 人打了分，平均分： 3.50 )

Web版的VNC

2010年07月11日陈皓评论 12 条评论 17,234 人阅读

想在Web上远程控制远端的电脑吗？ Guacamole 开源项目提供了这样的解决方案，其主要使用了HTML5和Ajax。下面是一个载图。如果你能够访问Youtube的话，你可以看看这个视频。

是啊，HTML5强大了，什么都能干了，连Flash也要取代了。现如今，什么事都在往Web上移植了，Chrome也OS了。可以预见在HTML5出来后，未来这样的事情会越来越多，以后的一些移动和掌上设备真的只需要一个Web Browsers.

( 8 人打了分，平均分： 2.50 )

几个Web的资源

2010年06月24日陈皓评论 7 条评论 7,120 人阅读

首先一个先给大家介绍一个HTML5的资源网站： http://www.html5rocks.com/ ，在这个网站上，有三个子站：

HTML5的幻灯片： http://slides.html5rocks.com/ ，虽然是英文的，但相信我，这个幻灯片做得很好，你应该能看得懂。
HTML5的操练场： http://playground.html5rocks.com/ ，这个页面上有很多HTML5的源码，你可以就直接在上面修改，并查看修改结果。
HTML5的教程： http://www.html5rocks.com/tutorials/ ，这个页上有一些Steps by Steps的教程，很不错。

第二个，给大家推荐一个Javascript库，叫—— DragDealer 。这个JS主要是处理Web上的各种拖动效果，脚本很小，在没有压缩的情况下也只有12K，而且没有任何的dependence，使用起来也比较方便。

第三个，是Apple的Showcase，我们都知道，iPhone不支持flash，但支持HTML5，大家可以点下面这些链接看看Apple公司自己做的HTML5的一些效果。当然，有一些需要safari浏览器。

…

阅读全文 Read More

( 7 人打了分，平均分： 3.14 )

SmokeScreen 是这样一个开源软件，它可以把Flash的swf文件转成Javascript/HTML5，它的口号是：Flash without plugin。为什么要这样做呢？它说主要是因主Apple的iPhone/iPod/iPad不支持flash，而且看似Steve Jobs也不愿意在以后支持flash。所以，他们搞了这样一个玩意。目前，这个开源软件还在开发阶段，在其主页上，你可以看到一些 Demo ，在Chrome上看上去很不错，虽然还有一些小问题，不过已经很不错了。

HTML5几乎颠覆了原来的HTML，其可以让你用HTML不单单只是做网页布局，而且还让你可以开发更强的东西，比如： WebSockets ，使用这项技术，已经有人在搞Web版的Quake 2了（ http://code.google.com/p/quake2-gwt-port/ ），还有 Google的3D Javascript API ，所以，把swf完美地转成Javscript/HTML5可能也只是一个时间问题。

虽然，HTML5还在 draft阶段，而且很多东西都和flash重复了。所以，加上iPhone的推波助澜，发生这样的事情也不奇怪，不知道adobe会怎么想？也许adobe目前对其AIR或是Actionscript还抱有希望，虽然有这样一篇文章力挺Flash，但未来真的不好说，adobe会使用HTML5/Javascript来作为其flash的引擎吗？如果不这样的话，我相信总有一天，会有人开发出HTML5/Javascript的IDE。而且，有理由相信，一旦在未来所有的浏览全面支持HTML5，那么我们可以想像，这个世界可能几乎所有的桌面应用都会被Web所取代，这个进程可能会越来越快。让我们拭目以待。

( 11 人打了分，平均分： 3.45 )

HTML 安全列表

2010年05月12日陈皓评论 11 条评论 13,128 人阅读

下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了。

http://heideri.ch/jso/

下面罗列几个：

1）<table background=”javascript:alert(1)”>

IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法。

2）<meta charset=”mac-farsi”>¼script¾alert(1)¼/script¾

这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击

3）<script>&#x61;l&#x65;rt&#40;1)</script>

在<script>和<style>的TAG间，根据标据，其可以使用这样的字符来运行脚本。这在所有版本的Firefox, Opera, 和 Chrome中都会有问题。

…

阅读全文 Read More

( 9 人打了分，平均分： 3.67 )

写HTML和CSS的新方法

2010年05月11日陈皓评论 20 条评论 11,772 人阅读

Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML，很像CSS语法。下面是一个例子：

div#page>div.logo+ul#navigation>li*5>a

展开后会成为下面这个样子：

<div id="page">
        <div></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

可以看出来，#代表ID，>代表下一层。

…

阅读全文 Read More

( 6 人打了分，平均分： 3.00 )

Web程序的最佳测试数据

2009年12月15日陈皓评论 1 条评论 6,857 人阅读

这里有一篇Matthias写的关于转义字符文章-“The art of escaping” ，这篇文章告诉你有一些比较特殊的字符需要你去认真的处理，不然，你的网站程序轻则出错，重则被人黑了。这些物殊的字符是[ <"@%'&_\?/:;,>কী € ] ，你可以使用这个字符串到任意一个可以输入的Web程序上去做测试。

下面这个表格告诉你为什么这些字符很特殊。这个列表不会是完整的，而且也永远不会完整。

相关领域	转义字符
HTML	< , > , &
JSON	“
SQL in mySql	字符串 “, ‘, 通配符 %, _
rfc 1738 for URL-parameter	;, /, ?, :, “, @, =, & 空格

把这些转义字符放在一起，然后再整些 utf-8 的一些特殊字符。这些utf-8的字符你可以参看本站的 Unicode字符预览表一文，并从中获取。另外，你还可以使用下面的这些工具来对你的程序进行调试或检查：

一个高级Web调试插件： firebug
标准的请求/响应插件： Live HTTP headers
一些抓包程序： HTTPfox or tamper data
IE的开发者可以试试这个： Fiddler.com

如果上面的工具都不能帮助你的话，你可能需要打调试日志，或是使用一个透明的代理服务器：如： Charles Web Debugging Proxy （Windows）

（全文完）

( 9 人打了分，平均分： 3.33 )

Web中的省略号

2009年12月15日陈皓评论 8 条评论 10,038 人阅读

在Web开发中，对于一种情况很常见。那就是，文本太长，而放置文本的容器不够长，而我们又不想让文本换行，所以，我们想使用省略号来解决这个问题。但是，在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事，在IE，Safari，Chrome，Opera中都可以。但在Firefox中却不行，但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

…

阅读全文 Read More

( 7 人打了分，平均分： 2.86 )

9个最常见IE的Bug及其fix

2009年11月17日陈皓评论 22 条评论 12,297 人阅读

9个最常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。下面是一个教程，告诉你9个IE上最常见的BUG以及如何解决它们。

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置，可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个 margin: auto; ，然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

下面是我们所期望的输出：

…

阅读全文 Read More

( 17 人打了分，平均分： 4.29 )

酷壳 – CoolShell

享受编程和技术所带来的快乐 – R.I.P 一路走好

Browsed by
标签： HTML

两个教程：Socket和HTML5

2010年08月23日陈皓评论 12 条评论 10,328 人阅读

HTML5 和 Flash 之争

2010年07月27日 jnj 评论 11 条评论 14,474 人阅读

HTML5

Web版的VNC

2010年07月11日陈皓评论 12 条评论 17,234 人阅读

几个Web的资源

2010年06月24日陈皓评论 7 条评论 7,120 人阅读

把Flash转成Javascript/HTML5

2010年06月03日陈皓评论 15 条评论 13,016 人阅读

HTML 安全列表

2010年05月12日陈皓评论 11 条评论 13,128 人阅读

写HTML和CSS的新方法

2010年05月11日陈皓评论 20 条评论 11,772 人阅读

Web程序的最佳测试数据

2009年12月15日陈皓评论 1 条评论 6,857 人阅读

Web中的省略号

2009年12月15日陈皓评论 8 条评论 10,038 人阅读

9个最常见IE的Bug及其fix

2009年11月17日陈皓评论 22 条评论 12,297 人阅读

1. 居中布局