Xu Design » HTML http://xuui.net 专注和分享界面设计的点点滴滴. Mon, 21 May 2012 02:32:33 +0000 en hourly 1 http://wordpress.org/?v= HTML5 的网页代码示例 http://xuui.net/librarys/html5-web-page-code-sample.html http://xuui.net/librarys/html5-web-page-code-sample.html#comments Fri, 04 Nov 2011 09:04:45 +0000 Xu.hel http://xuui.net/?p=2326 了解更多]]>

一直找不到 HTML5 的代码示例就直接写了一个作为备用。

这是一个符合 W3C 标准的 HTML5 的页面基本代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 DEMO</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
    <header></header>
    <article>
        <section>
            <div></div>
        </section>
    </article>
    <aside></aside>
<footer></footer>
<script src="scripts/script .js"></script>
</body>
</html>

这篇文章也用来顺便测试一下集成的代码高亮插件。呵呵。现在本站字体改成 13px 的大小了。换算成 pt 单位也就是 9.75pt。

计划 iStudio 2.0 将会优先使用这个代码高亮的插件。

]]> http://xuui.net/librarys/html5-web-page-code-sample.html/feed 2 iOS 设备的网页兼容 http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html#comments Mon, 25 Jul 2011 08:54:09 +0000 Xu.hel http://xuui.net/?p=2098 了解更多]]>

这个结合了自己这两个多月的工作所以遇到的问题，以及HTML5 的一些新特性来做一些应用上的介绍。

给 iOS 设备定制页面

其实只要网页已经使用了 HTML5 的标准来构建的网页，只需为 iOS 准备CSS 样式表文件就可以解决这个问题了。就像这篇文章里面的效果一样。没有使用任何相关的插件来实现。

iOS 设备都有一个特性那就是支持重力感应，屏幕的内容会随着设备在手里面的方向状态进行屏幕分辨率的宽度自适应。SO，浏览器在 CSS 的解析上就有了横竖两种分辨率的判断。不过 iPad 和 iPhone 的支持上又是有点区别的。Android 的也支持这个，不过 Android 详细的情况，由于本人没有测试的机器就无法做说明了。

CSS 在用在移动设备上网页的 link 链接的代码上面要做一些修改，需要修改一下 media 属性。

由于 iPhone 的横竖屏的判断是通过最大宽度来判断的代码，那么 CSS 链接的媒体检测代码要做如下修改了，代码如下：

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:320px)” href=”iphone.css” />

<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:321px)” href=”iphone_landscape.css” />

max-width:320px 限制了屏幕的最大宽度为 320，也就是 iPhone 竖屏状态下的屏幕宽度。

min-width:321px 限制了屏幕的最小宽度为 321， 由于竖屏的时候屏幕宽度为 320 了。不可能变成 321，那么一旦屏幕检测的时候发现宽度大于 320 了，那就会自动判断为横屏状态。

不过，在实际的应用中发现 iPhone 4 在处理网页的时候竖屏分别率宽度是 320×480，而不是 640×960 的分别率。也就是说网页上iPhone 和 iPhone 1～3 代的分别率是一致的。所以在设计 iPhone 4 专用网页的使用只需按照竖屏 320×480 和横屏 480×320 的分别率设计就行了。

iPad 下做判断就方便很多了，iPad 没有使用屏幕分辨率来做检测，而是直接使用了媒体检测中的 orientation 属性，代码如下：

<link rel=”stylesheet” type=”text/css” media=”screen and (orientation:portrait)” href=”ipad.css” />

<link rel=”stylesheet” type=”text/css” media=”screen and (orientation:landscape)” href=”ipad_landscape.css” />

orientation 是用于屏幕方向检测的属性。直接使用就行了。orientation:portrait 表示竖屏，orientation:landscape 横屏。这样就没有什么好说的了。

不过貌似这两种方法 Android 都支持，无论固件是 2.3 的还是 3.0 的。

另外 media 属性里面的 screen 是指屏幕设备，也可以用 all 代替，all 指所以设备。不过不推荐这样用。

横竖屏的状态判断搞定了，那么接下来就是 CSS 样式的编写了。 由于 iOS 和 Android 使用的都是 WebKit 的内核，那么就可以放肆的使用 CSS 3.0 的属性来渲染页面了。

既然都是 WebKit 内核了，应该就没有什么差异存在了。但是还是要注意一个问题，那就是 position 属性了，代码如下：

position:fixed;

这个代码没什么问题啊。是的，看起来问题的。这是个会让定义了这个属性的元素以一种绝对的位置固定在屏幕上，不会被页面滚动影响的。但是这个在 iOS 下面失效了。

Why？ 我也不知道为什么。反正就是失效了。背景图片的 fixed 定位在 iOS 下也会失效，貌似只要是和 fixed 有关的都会失效。估计这个和 Safari Mobile 版有关系了。

要是横竖屏都各用两个 CSS 文件那么在切换的时候会出现一个闪屏的问题，其实这是浏览器在切换 css 是产生的渲染替换问题。解决这个问题的方法就是在编写横屏的 CSS 文件的时候，先引用竖屏的 CSS 文件然后在竖屏的 CSS 基础上做 CSS 样式覆盖的调制。比如宽度的调整。类似这样：

竖屏样式 (portrait.css) 内容：

div{width:768px;}

横屏样式 (landscape.css) 内容:

@import url(“portrait.css”);

div{width:1024px;}

这样横竖切换的时候感觉就流畅很多了。

网页 iOS 桌面图标

Safari Mobile 版有个挺有意思的功能就是可以把当前网页添加到 iOS 的桌面作为一个程序图标显示。界面如下：

也就是这个 “添加至主屏幕” 的功能，这个应该是叫 Web 剪辑吧。

添加至主屏幕过后就会在主屏幕上生成一个用网页微缩图作为图标的 APP 图标。点击后会打开添加的网页。其实可以利用这个功能做个网站的快捷方式了。也可以把网站模仿成一个 Web App 来使用了。

要模仿就要添加几个东西，一个是添加桌面图标、启动画面和隐藏 Safari 的工具条和地址栏。

添加桌面图标的方法就用 iOS 特有的代码了。代码如下：

<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />

图标的尺寸推荐 114px X 114px 的矩形 PNG 图片，圆角和高光效果是 iOS 自动添加上去的。

如果你不想要自动添加的圆角和高光效果，那么可以用下面的代码：

<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon.png” />

这样点击过后还是会出现一个和屏幕尺寸一样的网页的截图，那么就需要添加一个启动画面来替换了，代码是：

<link rel=”apple-touch-startup-image” href=”screen.png” />

这部分代码是从 iOS 的开发网站上找到的。不过貌似只支持竖屏的启动图片。 启动画面的图片规格要和 屏幕的尺寸一样，只是高度要减去 状态栏的高度也就是 显示电池信号那栏的高度。比如 iPhone 的启动画面的图标尺寸为 320×460， iPhone 1～3代和 iPad 的 状态栏高度为 20px。，而 iPhone 4 为 40px，那么启动画面 iPhone 4 的尺寸应该为 640×920。iPad 为 768×1004。这个也是 iOS App 启动画面的尺寸规格。

加上这两个图片和你就发现这个和一个原生的 APP 程序基本一样了。只是为什么打开的时候还是有地址栏和底部的工具栏呢？那就还需要添加这行代码，把快捷方式打开的页面全屏化。代码如下：

<meta name=”apple-mobile-web-app-capable” content=”yes” />

这个就是把网页作为 Web App 的 meta 属性了，同样还可以添加一个状态条的样式 meta 属性，让自己定义状态条样式。这个的代码如下：

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

apple-mobile-web-app-status-bar-style 的 content 值为 3个，分别为 default (默认)、black (黑色)、black-translucent (黑色透明)。和原生 iOS App 上面的定义一致。

有时候页面里面的一串数字会被浏览器自动判定为电话号码，点击后就可以直接呼叫出去。为了避免这个还需要加上下面的屏蔽代码：

<meta name=”format-detection” content=”telephone=no”>

这下这个网页通过添加至主屏幕后就像一个真正的 App 出现在 iOS 的主屏幕上面了。但是细心的还是会发现，为什么字体会被缩小很多呢。这个是 Safair Moblie 版的自动缩放适应特性了。没有了这个你就不能使用那个很酷的缩放手势来放大页面了。既然是要做一个移动设备上的网页那么就要干掉这个特性了。那就要禁用自动缩放了，还是要使用 meta 便签来搞定，代码在这里：

<meta name=”viewport” content=”minimum-scale=1.0,maximum-scale=1,width=device-width,user-scalable=no” />

viewport 里目前有四个可以设置的属性，它们各自的作用如下：

  • width：设置 viewport 的宽度，即 iOS 模拟 PC 浏览器的宽度，之后 iOS 会这个宽度展现的页面同比缩放到屏幕上。设置  width=device-width 后就不会再进行缩放了，因为宽度是指定使用设备的屏幕宽度。
  • minimum-scale 和 maximum-scale：是控制允许用户缩放操作的最大和最小缩放比例。
  • user-scalable：标识是否允许用户对页面进行缩放操作，取值有两个 yes 和 no。设置为 no 就不允许进行页面缩放操作。

这样就像一个 Web App 的网页了。不过要注意的是这里提道的 link 和 meta 标签都需要放在 <head></head> 里面。

如果你不喜欢这种上面提到的全屏模式，而是只想隐藏掉地址栏那么用这个JS代码就行了：

<script type=”application/x-javascript”>

addEventListener(‘load’,function(){setTimeout(scrollTo,0,0,1);},false);

</script>

注意 type 是 application/x-javascript 而不是 text/javascript。不过这段 JS 代码只在 iPhone 里面有效。

使用 HTML5 构建的页面还可以在浏览器启用 HTML5 的本地缓存列表来缓存一些资源文件在浏览器的本地缓存里面，这样可以达到加速浏览的目的。

Web App 用上了这个本地缓存列表，那么就可以在离线的状态下使用了。

PS:本站已经启用这个缓存列表来加速网站访问了。使用过程中发现本地缓存这东西还是有些问题，下次再说了。

]]> http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html/feed 12 使用 HTML5布局网页 http://xuui.net/librarys/page-layout-using-html5.html http://xuui.net/librarys/page-layout-using-html5.html#comments Fri, 28 Jan 2011 10:07:01 +0000 Xu.hel http://xuui.net/?p=2008 了解更多]]>

这是 DIV + CSS 时期的 HTML 代码布局模式，而且这个布局还是一个经典的两栏布局。不过这个模式的代码看起来不是那么清晰。而 HTML5 的语义化标签可以让这些代码看起来就很清晰了。下面的图片就是使用 HTML5 语义化标签的布局模式了。

不过要在 IE 下使用这些语义化的标签就需要这JS 来做兼容了，等到 IE9 发布后就不需要了。代码如下：

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

然后仍然需要对 IE 下的这部分标签重置CSS样式，CSS代码如下：

article,aside,canvas,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;}

这样就在 IE 下显示正常了。

这也是本站现在这个主题使用的布局模式。最后祝大家春节快乐！

]]> http://xuui.net/librarys/page-layout-using-html5.html/feed 4 Cataclysm http://xuui.net/librarys/cataclysm.html http://xuui.net/librarys/cataclysm.html#comments Fri, 29 Oct 2010 14:49:13 +0000 Xu.hel http://xuui.net/?p=1916

这是一个 HTML5 的Video 标签测试。 视频是 H264 编码的 MP4 格式的文件。请使用WebKit 内核的浏览器观看视频。

好期待狼人盗贼和狼人德鲁伊啊。可惜的是国服悲剧了。

]]> http://xuui.net/librarys/cataclysm.html/feed 8 [转]什么是重要的 http://xuui.net/ui-design/what-is-important.html http://xuui.net/ui-design/what-is-important.html#comments Thu, 09 Sep 2010 01:51:40 +0000 Xu.hel http://xuui.net/?p=1890 了解更多]]>

HTML5 很火，忍不住也阅读了一遍 HTML5 spec, 发现除了对记忆力是个考验之外，增加的内容很少：

首先是 markup, 增加了 header, footer, section, nav 等元素，本质上和 div + class 无啥区别，考验的是记忆力和小学语文的功底。

其次增加了一堆 new APIs: Canvas/Web Storage/Drag-and-drop/Web SQL Database/Geolocation/Web Socket/Server-Sent Event 等等，这些内容的使用并无什么技术难点，翻翻规范手册，都是半天就能“精通”的。

追寻这些新技术，很容易让人有种走在技术前沿很牛逼的虚荣感。但实际上，会用 header/footer, 并不代表你就懂得了语义。就如多学了几个成语，并不意味着你的作文水平就有提高。

Geolocation 等 API, 也是如此。淘宝 UED 有几位设计达人，用的是 Photoshop 7.0. 倒是我这种半桶水，会紧跟潮流，装个英文原版的 CS4. 比喻不是很贴切，但从技能的深度上讲，有去学 Web SQL Database 的精力，不如去温习遍数据库基础教程。玩 Canvas 前，不如先去学学计算机图形学。否则永远是蜻蜓点水，以为走在前沿，其实只是凑个热闹，迟早成为舞台下的观众。

关注是可以的。有时间（我觉得大部分人其实都没时间），去尝尝鲜也是有益的。但是对于大部分营养不良的前端，推荐还是脚踏实地老老实实的去学一门传 统编程语言，去把数据结构/基础算法/设计模式/数据库等等基础知识点给搞瓷实了再说。这样，等 HTML9 出来的时候，对你而言，无非就是淘汰了一些旧 API, 增加了一些新 API 而已。

对于武林高手，内功最重要。招式套路，只能街头赚个掌声。
对于程序员，真正的核心竞争力是基本功。
永远不要舍本逐末，否则你学的新东西越多，被淘汰的可能性反而越大。

(via)

]]> http://xuui.net/ui-design/what-is-important.html/feed 2 CSS 技巧收集1 http://xuui.net/librarys/css-techniques-to-collect-1.html http://xuui.net/librarys/css-techniques-to-collect-1.html#comments Tue, 03 Aug 2010 10:32:13 +0000 Xu.hel http://xuui.net/?p=1879 了解更多]]> IE6、IE7、Firefox兼容最简单的 CSS Hack。

具体写法很容易：

#someNode{
    position:fixed;
    #position:fixed;
    _position:fixed;
}

说明和解释：

  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看
  • 第三排给IE6以及更老的版本看

最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写：

#class{
    position:fixed;
    _position:absolute;
    right:15px;
    top:15px;
    _top:expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop+15 :
    document.body.scrollTop +
    (document.body.clientHeight - this.clientHeight));
}

CSS 的自动换行问题：

div,p{white-space:normal;word-break:break-all;word-wrap:break-word;}
table{table-layout:fixed;}
table th,table td{word-wrap:break-word;overflow:hidden;}
pre{white-space:pre-wrap;word-wrap:break-word;width:auto;}

pre 下面添加宽度自动的属性是为了防止在 IE7 里面的某些情况下宽度失效。

另外附赠 收集到的常见浏览器的默认 CSS 样式，下载在这里

]]> http://xuui.net/librarys/css-techniques-to-collect-1.html/feed 15 一些关于 Html5 和 Flash 的事 http://xuui.net/librarys/about-html5-and-flash.html http://xuui.net/librarys/about-html5-and-flash.html#comments Sat, 15 May 2010 15:55:40 +0000 Xu.hel http://xuui.net/?p=1503 了解更多]]>

最近网上流传着这样一个说法: Flash 会被 HTML5取代. 起源是由于 Apple 的 iPhone 和 iPad 不支持 Flash. 然后就是一些媒体的夸大和不实的宣传,大慨意思说是 Flash 的末日到了,人们该放弃 Flash 了. 我不认同这个, 但是 Flash 迟早是会被淘汰并逐步放弃的, 至少不再是主流的技术了. 这一点从国外网站的 Flash 应用上面来看已经在逐渐的用其他的技术手段来放弃 Flash 了.

熟悉网页制作的人都知道网页上面要使用 Flash 就必须插入 Flash 插件的调用代码, 这样浏览器才能通过网页来展示 Flash 的内容. 这就表明了 Flash 只是插件. 而不是一个浏览器直接支持的东西,要想用它就必须装插件. 那浏览器直接支持是什么呢? 那就是 HTML了.

HTML 是超文本置标语言（HyperText Markup Language)，简称为HTML. 是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义，由IETF用简化的SGML（标准通用置标语 言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。

既然浏览器直接支持 HTML, 应该说是原生支持HTML. 那么 HTML5 又是什么呢?

HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。 其中有些是技术上类似 <div> 和 <span> 标签，但有一定含义，例如 <nav>（网站导航块）和 <footer>。 这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如 <audio> 和 <video> 标记。

这就表明了 HTML5 的目的不是取代 Flash 而是减少浏览器对插件的依奈, 其实就是现有的 HTML 的升级版. 现在HTML 5 的标准还在制定中, 这就产生了一个问题: 比如上面提到的 <audio> 和 <video> 标记. 这两个标记是用来在 HTML 里面插入音频和视频的代码支持的文件格式的标准了. 拿 <video> 来说, <video>使用的 H.264 来作为默认的视频解码标准. H.264 目前 Windows 和 Mac OS X 还有Linux 都是支持了的.

下面是 <video> 的代码格式
<video class='sublime' height='255' poster='http://assets3.jilion.com/05072010142052/images/embed/sublime/video/poster.jpg?1273242047' width='600'>
<source src='' title='http://medias.jilion.com/sublimevideo/dartmoor.mov' type='video/mp4' />
<source src='' title='http://medias.jilion.com/sublimevideo/dartmoor.mp4' type='video/mp4' />
<source src='' title='http://medias.jilion.com/sublimevideo/dartmoor.ogv' type='video/ogg' />
</video>

从现在流出的这个实例代码里面就知道了 <video> 不支持 Flv 的视频的. flv 视频的播放需要通过 Flash Player 插件的支持, 然后调用 Flash 的播放器来播放. 不过可惜的是 Flash 不支持 64位.

当然这个不支持64位的原因还是被一些细心的家伙发现了.其实这个不能怪 Adobe, 要怪就怪 Macromedia 了. Macromedia 为了尽可能的减少 swf 文件的尺寸, 在一部分对象中采用非字节对齐的文件格式. 简单的说, 一部分对象不是以 int/short 这样存储的, 而是以 bit 位这样存储的. 详细的请看这里.

当时 Macromedia 在设计 swf 的时候, 隐含就是假设一个 int=32 位, 根本就没有考虑到会有 64 位的出现. 恐怕 Adobe 也是在收购 Macromedia 以后才发现, Macromedia 原来这么原始. 所以需要 Adobe 要重新编写 Flsah 解析和文件格式的代码的虚拟机才能顺利的拓展成 64 位. 但是从 flex 的 sdk 来看, 我觉得 Adobe 在这个上面还有很多的事情要做.

从 05年 Adobe 收购  Macromedia 开始到现在已经过去5年了 Flash 的版本升级了 3个版本. 64位支持的问题却一直没有解决. 其实 Adobe 在每次升级版本的时候都有一个机会来推出支持 64位的解析器和提供一个文件格式的转换工具的. Adobe 在这方面却没有任何的动作.

按照现在操作系统的发展来看 64 位必然会成为主流的. 128 位的以上的操作系统以后也会出现的. 在64位操作系统上运行 32位程序的效率会比运行 64位的程序还要慢很多. 难道等 128位的系统出来后还要在 128位的系统上面运行 32位的 Flash吗? 难怪 Jobs 要骂 Flash 的运行效率达不到 Apple 的需求了, 因为现在的 Mao OS X 都已经是 64 位的了.

现在 Adobe 却在宣传说 Adobe 爱 Apple. 还不如去做点实质性的动作. 现在我那 64 位的操作系统却要忍受着用 64位浏览器来观看只支持32位的 Flash 插件来播放 flv 视频带来的浏览器崩溃的困扰. 而且这个困扰还不知是 64 位的浏览器.

现在你知道了 HTML5 取代的只是 Flash 视频播放这块应用而已.而不是完全的取代 Flash 的. 不过在动画绘制方面 HTML5 也有威胁到 Flash 的东西,  那就是 HTML5 的 <canvas> .

<canvas> 相比 Flash 显然是有其优点的. 它不依赖于外部插件, 与浏览器渲染引擎紧密结合, 节约资源, 最重要的是极大的简化了图形和网页中其他元素的交互过程.

对于 Flash 来说, 使 Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源的, 另外在编程上也相当不方便.

而<canvas>本身就是 HTML5 的一个元素, 可以像操作普通 HTML 元素一样操作它. 开发人员可以将所有的代码整齐的写在一个文件里, 降低了维护与更新的难度.

然而<canvas>也有其缺点:

  1. 开发者不得不编程描绘每一个点和矢量曲线, 在旋转缩放时更需要和矩阵变换打交道, 这会增加描绘复杂图形的难度.
  2. 动画的实现存在缺憾.<canvas>虽然提供了不同于传统的通过 div 块实现动画的方法, 但这种方法仍然非常繁琐.
  3. 没有提供一套方便的事件体系. 开发者也许需要通过捕获鼠标在<canvas>中点击的坐标, 判断用户到底点击了什么图形元素.

由以上分析我们可以看出, HTML5 需要的几个非常重要的东西: 一个强大易用的图形库, 硬件加速的图形解析和重绘, 一个强大的编辑器(IDE).

目前已经出现了基于<canvas>实现的游戏引擎. 但是从效果上看仍然无法与 Flash 媲美.但 WebGL 的提出让我们看到了硬件加速的希望, 这将极大的改进图形显示的速度. 但是目前它只被少数开发版本的浏览器支持.

IDE 方面, 讽刺的是恰恰是 Adobe 为 Adobe Flash CS5 添加了一个将 Flash 转化为<canvas>的功能. 在 JavaScript 方面, 鉴于其为非强制类型的编程语言, 对其进行代码提示等非常困难, 提高编程效率较难.

如果以上三个问题不能被良好解决, 将会限制<canvas>所能实现的效果的丰富度, 增加开发的复杂度, 从而最终阻碍其普及.

不过对于 64位 <canvas> 是不会存在像 Flash 那样的问题的.

]]> http://xuui.net/librarys/about-html5-and-flash.html/feed 20 15个 HTML5 教程和参考手册 http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html#comments Mon, 10 May 2010 10:13:23 +0000 Xu.hel http://xuui.net/?p=1753 了解更多]]> 和以前的 HTML 版本不同，HTML5 带给网页设计师和开发人员更多幻想新事物的能力。使用符合语义结构的特定标记，使得现在的网页更符合语义化的需求。如内建的圆角视觉元素、以及对拖放式交 互的原生支持。尽管 HTML5 并没有完全得到主流浏览器的支持，但有些已经在尝试推进和试验新功能。为了鼓励对 HTML5 进行试验性的应用，也为将来更加丰富的应用做足准备，芒果整理收集了 15+ 有用的 HTML5 教程和参考手册。

教程

利用 HTML5 创建 iPhone 应用程序

html5 tutorial

使用 HTML5 和 CSS3 组合，编写向后兼容的代码

html5 tutorial

使用 HTML5 设计和编写超酷的 iPhone 应用程序网站

html5 tutorial

从零开始编写 HTML5 布局

html5 tutorial

HTML5 和 CSS3：即将使用的新技术

html5 tutorial

利用 HTML5 表单大做文章

html5 tutorial

使用 HTML5 设计博客

html5 tutorial

触摸未来：使用 HTML5 和 CSS3 创建一个优雅的网站

html5 tutorial

HTML5 的结构标签

html5 tutorial

编写基于 HTML5 和 CSS3 的单页面网站模板

html5 tutorial

如何使所有浏览器正确渲染 HTML5 – 甚至是 IE6

html5 tutorial

参考手册

HTML5 参考手册

cheat sheet

HTML5 视觉参考手册

cheat sheet

HTML5 图形参考手册

cheat sheet

HTML5 袖珍手册

html5 tutorial

英文原稿：15 Useful HTML5 Tutorials and Cheat Sheets | Web Designer Ledger
翻译整理：15+ 有用的 HTML5 教程和参考手册 | 芒果

]]> http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html/feed 4