如果看不明白，请移步参考淘宝搜索结果页面中的“信用”、“价格”两个排序按钮。http://s.taobao.com/search?q=%CC%D4%B1%A6

以三个横排并列的按钮为例：

<span class="grid">
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
</span>

这个问题的关键在于合并相邻两个容器的边框，视觉上就像表格边框的合并那样，芒果选择使用负 margin 来隐藏右侧边框。鼠标 hover 时如何才能使当前按钮边框呈现出来？其实也很简单，只要给 a:hover 伪类加上 position:relative;z-index:1; 即可。另外，为了修复 IE6 下的定位问题，建议给每一个 a 元素添加 position:relative; 属性。样式代码如下：

.grid{display:inline-block;}
.grid a{float:left;border:5px solid #cdcdcd;margin-right:-5px;position:relative;width:50px;height:50px;line-height:50px;text-align:center;}
.grid a:hover{border:5px solid #31b1fc;position:relative;z-index:1;}

最终效果如下。因为子节点浮动，外层最好能清除浮动，清浮动的方法请猛击此处查看：http://www.mangguo.org/mangguo-teach-you-clear-float

另外，芒果还想到一种形如九宫格的 CSS 实现，代码也很简洁。

详情参考这份 DEMO 稿：http://www.mangguo.org/example/border_collapse_hover.html

推荐阅读

• CSS 左右两栏自适应布局 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• CSS 中文字体 Unicode 编码方案 (3)
• CSS3 Media Queries，媒介设备查询 (6)

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

一、术语

首先说说 HTML5 应用中的几个定义。

HTML5

HTML5 最好的定义来自 Mark Pilgrim 的 Dive Into HTML5：

“HTML5 是继 HTML4.01，XHTML 1.0/1.1 之后的下一代 HTML“

值得一提的是，我们或许能看到 HTML6，然而按 Pilgrim 在 WHATWG 博客中 的说法，下一代 HTML 很可能去掉版本号这一概念。

应用

来自 Wikipedia 的解释：

“应用程序是计算机用来执行特定任务的软件“

HTML5 应用

从用户的角度，HTML5 应用和其它的计算机应用程序还不完全一样，但已经很接近。从开发者的角度，HTML5 应用是一些基于 HTML，JavaScript，CSS 的程序，它们使用开放技术，可以离线使用，可以取代诸如 Silverlight 及 Flash 等专用平台的部分工作。或者说，多年来，你用来创建 Web 页面的东西，现在可以用来创建类似桌面和智能手机程序的应用。

二、开源模式带来转变

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 会形成很大的市场，很有很多公司需要这方面的人才。

英文原稿：The State of HTML5 Apps | Six Revisions
翻译整理：关于 HTML5 应用现状与前景的思考 | 锐商企业 CMS

推荐阅读

• HTML5 File API，文件拖放上传功能 (2)
• 必需知道的 HTML5 基本知识 (6)
• CSS 边框重叠鼠标悬停效果 (17)
• 40+ 启发灵感的博客设计 (4)
• 第 1 期 WordPress 插件集锦 (3)
• CSS 左右两栏自适应布局 (0)
• 41+ 大自然主题的漂亮网页设计 (1)
• 30+ 漂亮的现代网站页脚设计 (6)

场景一：文字围绕

这种情况比较普遍，无论左侧容器是否定宽，只需对左侧设置左浮动即可实现文字围绕效果：

float:left;

场景二：右侧往下撑开

如果右侧需要往下撑开，仅仅左侧浮动是不够的，右侧容器需要设置溢出自动：

overflow:auto;

但 IE6 下无效，当然首先想到的是触发 hasLayout，那就简单加个 zoom 属性吧：

zoom:1;

可以发现，左右容器均无预设宽度，这样做的好处是实现了两栏内容的自适应。好了，多说无益，就这样吧。

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• CSS 中文字体 Unicode 编码方案 (3)
• CSS3 Media Queries，媒介设备查询 (6)

标准并不是一项技术，标准只是一种规范与提议。

既然如此，我们尚且撇开 Web 标准不谈，着眼于应用，无需 JavaScript 的掺和，marquee 标签对滚动效果的实现方便简练。

代码示例：

<marquee>这是一个滚动示例</marquee>

属性参数：
direction
表示滚动的方向，值可以是 left，right，up，down，默认为 left
behavior
表示滚动的方式，值可以是 scroll（连续滚动）slide（滑动一次）alternate（来回滚动）
loop
表示循环的次数，值是正整数，默认为无限循环
scrollamount
表示运动速度，值是正整数，默认为 6
scrolldelay
表示停顿时间，值是正整数，默认为 0，单位是毫秒
valign
表示元素的垂直对齐方式，值可以是 top，middle，bottom，默认为 middle
align
表示元素的水平对齐方式，值可以是 left，center，right，默认为 left
bgcolor
表示运动区域的背景色，值是 16 进制的 RGB 颜色，默认为白色
height、width
表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认 width=100%，height为标签内元素的高度
hspace、vspace
表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素
onmouseover=this.stop() onmouseout=this.start()
表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动

出于用户体验的考虑，当鼠标移入暂停滚动的效果可以使用 JavaScript 独立出来。

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• 关于 HTML5 应用现状与前景的思考 (3)
• CSS 左右两栏自适应布局 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• HTML5 File API，文件拖放上传功能 (2)
• 模块化之 HTML CSS 以及图片 (4)

然而，这份代码不兼容 Internet Explorer 或现有的许多旧版本浏览器。它只能在支持 CSS 变换属性的 Google Chrome，Safari 和 Firefox 3.5+ 浏览器下正常工作。

必备条件：支持 CSS 变换属性的浏览器
演示地址：http://joncom.be/code/css-clocks/

英文原稿：Pure HTML Clocks using Javascript & CSS Rotation | WebAppers
翻译整理：使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 | 芒果

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• Minify，合并压缩 JavaScript 和 CSS 文件 (10)
• CSS 左右两栏自适应布局 (0)
• 13+ 模拟 JavaScript 交互效果的纯 CSS 技术 (2)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• Closure Compiler，压缩！还是压缩！ (5)
• YUICompressor，强大的前端代码压缩工具 (1)

浏览器支持

Mozilla Firefox/Opera/Safari/Google Chrome/Internet Explorer 8

注：IE8 对 Data URI 的支持仅限于 img 标签和 CSS 背景，且数据必须小于 32k

格式

data:[<MIME-type>][;charset="<encoding>"][;base64],<data>

MIME-type: 指定数据的 MIME^[1] 类型
;charset=”<encoding>”: 指定数据的字符集
;base64: 指定数据的编码方案

默认编码方案由 ;base64 指定，如果缺省，数据必须使用 URL Encoding^[2] 转换为有效 ASCII 格式。如果 <MIME-type> 缺省，默认参数为 text/plain 类型，字符集为 US-ASCII 方案。

示例

HTML:

<img src="Data URI" alt="" />

CSS:

selector{background:url(Data URI);}

优势

1. 减少 HTTP 请求，节约带宽
2. 避免频繁建立 TCP 连接，加快载入速度
3. 使用 HTTPS 时，可减少开销
4. 避免浏览器并发连接数的限制
5. 防止非法的外部引用

缺陷

1. 不被单独缓存，父文件重新载入时必须重新加载
2. 内容变更时必须重新编码和嵌入
3. 缺乏 IE6 和 IE7 的支持
4. IE8 限制数据大小为 32k
5. base64 编码会增加 1/3 数据量

自动化

来自 Nicholas C. Zakas 的 DataURI 自动化工具，命令行格式：

java -jar datauri-x.y.z.jar -o <output filename> <input filename>

兼容 IE6 & IE7

通过 CSS Hacks 结合 MHTML^[3] 方案解决 IE6 和 IE7 不支持 DataURI 的情况。

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:<identifier>
Content-Transfer-Encoding:base64

<data>
*/
selector{*background:url(mhtml:<stylesheet>!<identifier>);}

_: 指定分隔符 (任意字符串)
identifier: 指定内容位置标识符
stylesheet: 指定样式表绝对路径

[1] MIME: http://zh.wikipedia.org/wiki/MIME
[2] URL Encoding: http://www.w3schools.com/TAGS/ref_urlencode.asp
[3] MHTML: http://en.wikipedia.org/wiki/Mhtml

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• CSS 左右两栏自适应布局 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• 细线表格的浏览器兼容写法 (1)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• CSS 中文字体 Unicode 编码方案 (3)
• CSS3 Media Queries，媒介设备查询 (6)

Markup:

<table>
    <tr>
        <th>table head (row1, col1)</th>
        <th>table head (row1, col2)</th>
        <th>table head (row1, col3)</th>
    </tr>
    <tr>
        <td>table data (row1, col1)</td>
        <td>table data (row1, col2)</td>
        <td>table data (row1, col3)</td>
    </tr>
    <tr>
        <td>table data (row2, col1)</td>
        <td>table data (row2, col2)</td>
        <td>table data (row2, col3)</td>
    </tr>
</table>

CSS:

table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• CSS 左右两栏自适应布局 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 模块化之 HTML CSS 以及图片 (4)
• Web 开发与设计师速查手册大全（上） (2)
• CSS 中文字体 Unicode 编码方案 (3)
• CSS3 Media Queries，媒介设备查询 (6)

该 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 应用现状与前景的思考 (3)
• 必需知道的 HTML5 基本知识 (6)
• CSS 边框重叠鼠标悬停效果 (17)
• 第 1 期 WordPress 插件集锦 (3)
• CSS 左右两栏自适应布局 (0)
• 15+ 有用的 HTML5 教程和参考手册 (6)
• Marquee，用正确的标签做正确的事 (1)
• 快速技巧：可退回到 Flash 的 HTML5 视频方案 (0)

页面模块化的实施思路是高度耦合的页面片段封装，模块布局作为公开接口，高度耦合的页面进行封装，使用独立的 CSS 文件，高度耦合的图片进行封装，给某类相关性强的图片建立文件夹。

页面模块化的目的是，实现多人协同开发页面，提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发，维护难度体现在减少版本的混乱，根据模块区分版本降低版本间代码冲突和文件错误覆盖。

拆分页面模块，从小到大的分解

1. 拆分页面模块
一个页面有很多个小单元模块组成，他来自有原始需求文档，比如 logo，导航，内容 1，内容 2，内容 3，内容 4，尾部导航，版权信息等等。根据他们就可以拆分出基本的模块。

2. 拆分网站模块
将整个网站安排频道或者分类进行拆分，比如首页，内容页，文字列表页，图片列表页，频道 1 页面，频道 2 页面，分类 1 页面，分类 2 页面，后台管理页面，等等。

3. 每个网站作为一个模块。
比如商城站，支付站，论坛，三个站独立为三个大模块。

模块化实现

1. 高度耦合提取为一个模块，将模块代码作用域进行控制

代码一：非继承模块，通过后台选择符方式控制作用域

<div>
	<h3>title</h3>
	<div>
		con
	</div>
	<a>more</a>
</div>

.mode {}
.mode .title {}
.mode .con {}
.mode .more {}

<div>
	<ul>
	 <li><a href="" title="">关于</a></li>
	 <li><a href="" title="">合作</a></li>
	 <li><a href="" title="">招聘</a></li>
	</ul>
	<p>Copyright © 2009 某公司 版权所有</p>
</div>

.footer {}
.footer ul {}
.footer p {}

代码二：继承模块，提取众多模块中公共部分，具体模块通过优先级进行处理。继承模块方面整站某些模块的批量修改处理，也提高复用性降低代码重复。

.mode .title {}
.mode .con {}
.mode .more {}

<div>
	<h3>title</h3>
	<div>
		con
	</div>
	<a>more</a>
</div>

2. 页面模块

页面模块代码作用域的控制通过 CSS 文件来控制。某类具有高度耦合的页面使用自身的 CSS 文件。

3. 模块间的公开接口

上面是模块的封装，公开的接口在页面中表现为什么？

首先是 reset，base，可继承模块，这些代码是开放接口，必须根据这些代码进行页面代码开发，也就是你的页面代码必须在以上代码基础上开发。

其次是 CSS 文件，CSS 文件名称和他作用于那些页面。

再次是布局、模块 class，id 命名，模块在页面的哪个位置。在 CSS 中的表现就是定位，布局，和部分盒模型。float、position、width、height 等等。布局通常使用 CSS 作为接口实现，如果布局具有高度的逻辑性，完全可以通过 HTML 和 CSS 组合进行，比如 960 Grid System，或者采用 YUI grid.css。模块 class 和 id 的命名用于区分模块，不能在一个页面的所有 CSS 中出现不同模块同用一个 class 和 id 名。

规划整站模块

上文提到的基本的原理，真正实施起来还是存在很多问题，模块粒度问题，公共模块与普通模块的区分，继承模块是否值得继承等等，页面模块如何划分。

首先，了解你的项目，通过画网站树状图了解你网站的总体结构和页面模块；

其次，理清结构逻辑和视觉逻辑，结构逻辑就是看你的页面由那些模块组成，视觉逻辑了解可继承模块，布局逻辑（网格布局或者非网格布局）。

转载自 模块化之 HTML CSS IMG | GreenGnn.ORG

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• CSS 左右两栏自适应布局 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• Web 开发与设计师速查手册大全（上） (2)
• CSS 中文字体 Unicode 编码方案 (3)
• CSS3 Media Queries，媒介设备查询 (6)

目前使用的 HTML 是第四次修订版本，即所谓的 HTML 4.01 版本。而下一次修订，称为 HTML 5.0 版本，将完全改变 Web 开发领域的现状。

以下是一些 HTML5 的主要改变：

1. 新元素将更加符合现代 Web 设计实践。新标签包括：<header>，<nav>，<aside> 和 <footer>；
2. 文档类型 (DOCTYPE) 简化为 <!DOCTYPE html>；
3. 直接在 HTML 代码中嵌入音频和视频，无需任何外部插件支持。这两个新的元素是 <audio> 和 <video>；
4. 包含全新的 API（应用程序接口），这将使开发人员轻松实现拖放、文件编辑、绘图等功能；

虽然这些功能很酷，但遗憾的是，目前还不能肯定 HTML5 是否将获得广泛采用。第一份 HTML5 公开规范草案出版于 2008 年 1 月。最后一次更新公布于今年的 8 月份，详情阅读 W3.org 网站。

主流浏览器正在逐步纳入 HTML5 规范，但可能需要一段时间过渡，以实现对 HTML5 的完全兼容。如果你想测试 HTML5，Firefox 3.1 和 Safari 3.1 已经支持部分功能。请访问 http://youtube.com/html5（貌似已经被墙），查看使用 HTML5 构建的演示页面。

英文原稿：1What You Need to Know About HTML 5 | DailyBlogTips
翻译整理：必需知道的 HTML5 基本知识 | 芒果

推荐阅读

• 关于 HTML5 应用现状与前景的思考 (3)
• HTML5 File API，文件拖放上传功能 (2)
• CSS 边框重叠鼠标悬停效果 (17)
• 第 1 期 WordPress 插件集锦 (3)
• CSS 左右两栏自适应布局 (0)
• 15+ 有用的 HTML5 教程和参考手册 (6)
• Marquee，用正确的标签做正确的事 (1)
• 快速技巧：可退回到 Flash 的 HTML5 视频方案 (0)

HTML, XHTML, CSS2

CSS2 Cheat Sheet
不仅是一份完整的 CSS2 速查手册，还让你了解每个属性该怎么用。预览 | 下载 (PDF)

Gosquared CSS help sheets
设计和结构都很整齐，漂亮。下载 (PDF)

addedbytes CSS2 Cheat Sheet
该速查手册只有一页纸，包含 CSS 2.1 全部选择器和属性，还包含一个盒子模型示例。下载 (PDF | PNG)

Core css
将 CSS 的核心知识分成3部分，包含了 CSS 的方方面面。下载（需免费注册）

CSS Shorthand Cheat Sheet
一些不容易记住的 CSS 元素。下载 (PDF)

CSS2 – Quick Reference Guide – PDF 下载 (PDF)

XHTML 1.1 Cheat Sheet
XHTML 1.1 细则中涉及到的所有元素与属性。预览 | 下载

Gosquared html help sheets
设计漂亮，结构精良的 HTML 速查。下载 (PDF)

HTML Cheat Sheet
一份 A4 纸大小的单页 HTML 速查表。下载 (PDF | PNG)

HTML5 Canvas Cheat Sheet
HTML5 Canvas 对象的速查手册，直接编译自 WHATWG specs 细则，只是更容易阅读一些。下载 (PDF | PNG)

HTML Character Entities Cheat Sheet
HTML 字符标识速查。下载 (PDF | PNG)

HTML Character Entities Cheat Sheet
该表包含 HTML 4 字符标识，包括 ISO8859-1 (Latin-1) 中的字符。预览 | 下载

HTML Colors Cheat Sheet
该 HTML 颜色表包含 1050 种颜色，按色度区分，每个色度包含 25 中不同饱和度与亮度。还包含 216 种 Web 安全色。预览 | 下载 (PDF)

RGB Hex Colour Chart
RGB 16 进制颜色表。包含 216 种 Web 安全色。下载 (PNG | PDF)

Scripting 速查手册

JavaScript Cheat Sheet
包含 JavaScript 的 的方法与函数，正则表单时，以及 XMLHttpRequest 对象。下载 (PNG | PDF)

JavaScript DOM Cheatsheet
JavaScript DOM 结构速查手册。下载 (PDF)

jQuery 1.3 Cheat Sheet
jQuery 1.3 速查表。预览 | 下载 (PDF)

jQuery Cheat Sheet 1.2
jQuery 1.2 速查手册。下载 (PDF)

mootools 1.2 cheat sheet
另一个 JavaScript 库 MooTools 1.2 速查手册。下载 (PDF)

prototype 1.5.0
JavaScript 库 Prototype 1.5 速查手册。下载 (PDF)

Prototype 1.6.0.2 Cheat Sheet
JavaScript 库 Prototype 1.6.0.2 速查手册。下载 (PDF)

Addison-Wesley’s JavaScript Reference Card
JavaScript 参考手册。下载 (PDF)

jQuery selectors
对 jQuery 开发者来说，该速查手册不可或缺，详细列举了 jQuery 所有选择器。下载（需免费注册）

服务器端编程

PHP Cheat Sheet (V2)
单页 PHP 参考手册，包含日期格式，正则表达式以及常用函数。下载 (PDF | PNG)

visibone
该站包含 2 页基本 PHP 速查手册，以及 8 页高级速查手册。非免费。

Php 4 Reference Card
PHP4 参考速查手册。下载 (PDF)

PHP Cheat Sheet
PHP 比较操作速查手册。下载

Core C# and .NET Quick Reference
C# 与 .NET 速查参考手册。下载 (PDF)

ASP.net
ASP.NET 速查参考手册。下载

MS ASP
古老的 ASP 与 VB Script 速查手册。下载 (PNG | PDF)

msnet formatting strings
微软 .NET 字符串格式化速查。下载 (PDF)

SQL (Structured Query Language) in one page
SQL 语言速查。直接访问

MySQL Cheat Sheet
MySQL 速查。下载 (PNG | PDF)

XML (eXtensible Markup Language) in one page
XML 单页速查手册。直接访问

XML Syntax Quick Reference
XML 语法参考。下载 (PDF)

SEO 速查手册

The Web Developer’s SEO Cheat Sheet
出自 SEO MOZ 的 SEO 速查手册，包括重要的 SEO HTML 标签，搜索引擎索引的限制，Title 标签语法建议等。下载 (PDF)

转载自 Web 开发与设计师速查手册大全（上）| COMSHARP CMS

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• CSS 左右两栏自适应布局 (0)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• 模块化之 HTML CSS 以及图片 (4)
• 有利于 SEO 的背景 Logo 代码 (1)
• CSS 中文字体 Unicode 编码方案 (3)

查看网易首页可知，其页面链接均为新窗口打开，但并未对所有 <a> 标记设定 target=”_blank” 属性。仅在页面头部使用一句代码：

<base target="_blank" />

在 HTML 中，<base> 标记提供两种基本属性：

1. href 属性
规定页面链接的基准 URL。代码示例：

<base href="http://www.mangguo.org" />

若有以下链接代码：

<a href="/about">关于芒果</a>

当页面应用 <base> 标记之后，链接地址变为 “http://www.mangguo.org/about”。无论 <a> 标记，还是 <form>、<img>、<link> 等标记，基准 URL 均由 <base> 标记指定。

2. target 属性
规定链接的页面打开方式。代码示例：

<base target="_self" />

应用以上代码后，全局上均原窗口打开链接。

根据实际需要，可选新窗口 (_blank)、原窗口 (_self)、父窗口 (_parent)、最外层窗口 (_top) 四种打开方式。

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• 关于 HTML5 应用现状与前景的思考 (3)
• CSS 左右两栏自适应布局 (0)
• Marquee，用正确的标签做正确的事 (1)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• HTML5 File API，文件拖放上传功能 (2)

PDFonFly 是一款在线 HTML 到 PDF 格式转换工具。只要提交需保存为 PDF 文档的网页，即可实现一键转换。

主要优点：
1. 将 HTML/XHTML 网页连同 CSS 转换为 PDF 文档；
2. 将图像文件 (JPG/JPEG/GIF/PNG) 及文本文件 (txt/rdf) 转换为 PDF 文档；
3. 非常易于使用，无需支付任何费用；
4. 全面支持动态网页 (PHP/ASP/ASPX/JSP/CFM) 和静态网页；

该工具页面有广告，但并不影响使用，对简体中文支持良好。

官方主页：www.pdfonfly.com

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• 关于 HTML5 应用现状与前景的思考 (3)
• CSS 左右两栏自适应布局 (0)
• Marquee，用正确的标签做正确的事 (1)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• Data URI 初探及其自动化 (0)
• 细线表格的浏览器兼容写法 (1)
• PDFmyURL，将网页保存为 PDF 文档 (0)

首先，在网页中插入以下 JavaScript 代码：

<script type="text/javascript">
function Preview()
{
  var TestWin=open('');
  TestWin.document.write(code.value);
}
</script>

此处使用 Preview 函数来打开新窗口并执行代码。接下来需要构造一个代码框：

<textarea id=code cols=50 rows=10></textarea>
<button onclick=Preview() >运行代码</button>

此处对 textarea 设定 id=code 以向 JavaScript 传值。<button> 标签的 onclick 事件则调用了 Preview 函数。

推荐阅读

• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)
• CSS 边框重叠鼠标悬停效果 (17)
• Minify，合并压缩 JavaScript 和 CSS 文件 (10)
• 关于 HTML5 应用现状与前景的思考 (3)
• CSS 左右两栏自适应布局 (0)
• 13+ 模拟 JavaScript 交互效果的纯 CSS 技术 (2)
• 使用 jQuery 操作 DOM：10+ 有用的代码片段 (3)
• Marquee，用正确的标签做正确的事 (1)

1. 只允许 IE 解释执行
IE 5 之后版本加入了对条件注释的支持，所以 IE 5 以上方可使用注释。

<!--[if IE]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

以上代码当浏览器为 IE 时，加载样式表 style.css，当然代码可以为 CSS、HTML、JavaScript 等多种。

2. 只允许特定版本 IE 解释执行
可以通过注释，只允许 IE 5、IE 6、IE 7、IE 8 中某个版本能解释，方便与对某一版本进行独立控制。

<!--[if IE 7]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

以上代码当浏览器版本为 IE 7 时，加载 style.css 样式表。

3. 只允许非特定版本 IE 解释执行
通过注释排除 IE 5、IE 6、IE 7、IE 8 中某个版本的执行，方便与对非特定版本的 IE 进行独立控制。

<!--[if !IE 7]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

以上代码当浏览器版本不是 IE 7 时，加载 style.css 样式表。

4. 只允许高于或低于特定版本 IE 解释执行
限定高于或低于某个版本的 IE 方可执行，控制的灵活性较大。

<!--[if gt IE 7]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

以上代码当浏览器版本高于 IE 7 时，加载 style.css 样式表。其中在代码 “<!–[if gt IE 7]>” 中，”gt” 表示高于，如果换成 “lt”，则表示小于，相应的，”gte” 表示大于等于，”lte” 表示小于等于。

推荐阅读

• CSS 边框重叠鼠标悬停效果 (17)
• Firebug Lite，IE 下调试网页兼容性 (4)
• 关于 HTML5 应用现状与前景的思考 (3)
• CSS 左右两栏自适应布局 (0)
• CSS Hacks for IE，IE 也可以很完美 (4)
• Internet Explorer Collection 免安装批处理版 (6)
• Marquee，用正确的标签做正确的事 (1)
• 使用 JavaScript 和 CSS Rotation 的纯 HTML 时钟 (1)

<html><head><title></title></head><body></body></html>

的时候，发布文章后不能正常显示。

而在可视化编辑器模式下，输入 HTML 代码确是正常显示的，经过对可视化模式和 HTML 模式的代码分析得出，如果 HTML 模式下输入 “<” “>” 是会被 WordPress 解释执行的。

因为芒果的代码显示用的是帕兰的方法，以标签对

<pre><code></code></pre>

来控制文章中的代码显示。那么如果需要插入代码，只需在 HTML 编辑器模式下，将 “<” “>” 分别用 “&lt;” “&gt;” 代替。

推荐阅读

• 芒果“某某对某某说”的评论回应功能 (0)
• 独立博客圈到底怎么了？ (16)
• CSS 边框重叠鼠标悬停效果 (17)
• 芒果升级到 WordPress 3.0.1 简体中文版 (5)
• WordPress 小贴士，关闭所有日志引用通告 (4)
• 第 2 期 WordPress 主题集锦 (6)
• 在 WordPress 摘要中显示阅读更多链接 (6)
• 第 1 期 WordPress 插件集锦 (3)