metro设计风格所定义的页面由网络系统(Grid)组成，其中所定义的每个单元的大小是20x20px。而每一个单位格中又以5x5px为单位定义更小单位的子单元。在一个标准的1366×768屏幕上，单元格数量为68.25×38.5
内容区域的上边距为7个单元格
页面顶部的高度为5个单元格
页面的左边距为6个单元格
紧凑的列表项目中的二个元素的间距为一个单元格
适中型列表中的元素间距每隔一个元素，对齐到下一单元格 (1.5个单元格)
宽松型列表中的元素，间距为每二个单元格
有XBOX的童鞋应该自动收到了今年的Metro UI更新。如果有兴趣可以下载我们团队开发了近半年的Syfy官方XBOX App。基于全新的XBOX Metro UI设计。这里是官方说明
当计划一个Metro应用的时候，尽可能的去思考你的应用给你的用户带来什么样的体验，而不是考虑这个应用会有什么样的功能。如果你还没准备了，你可以先阅读What are Metro style apps?
假设你正在创建一个照片相关应用。你会思考你的用户使用该应用的原因，如保存和分享，以及你会设想你的用户希望通过照片来回忆及与朋友交流，以及保证照片的安全性。这些正是你的应用的独到之处，你将这些想法作为你的用户体验的核心目标贯穿在整个设计过程中。
常用的技巧包括：脑力风暴、关系流程图及脑图。
你的应用到底是做什么的？从一个最广泛的问题开始，列出所有你设想的你希望用户使用你应用的原因。例如，你想创建一个帮助人们设计旅程行程的应用，当你设想这样一个应用的时候，你也许会产生下面这些想法：
你的应用程序好在哪里？再回去看看你的想法，看看这 些场景真的能让你的应用程序出色吗？挑战一下自己尝试去除一些场景，专注在唯一的一个真正重要的场景上。在整个过程中你可能会获得无数个想法，但一定要学会对这些想法说“NO”，才能帮助你获得最好的想法。
你会专注在单一的使用场景，来向人们介绍你的应用到底是什么样的，例如：
这便是所谓的“最棒”之处，来帮助你对你整个应用程序的设计和开发做出有用的决策。专注在用户的使用场景，小心别陷入了过份多的功能的设计。应当永远去考虑，你的用户在做什么，而不是你的应用在做什么。
流程指的是你的用户在使用你的应用达成目标的一组交互场景。每一个流程应当充分展现所谓的“最棒”之处。最好的应用程序应当是让用户简单学习并以最少的步骤完成目标。
技术：
用户能做什么？例如，你的旅行应用是关于“帮助我和我和朋友协同创建团队出游计划”。让我们列出会有什么样的情况发生：
这是有关于如何把应用最基础的事情做好。现在你已经知道你应用的最棒之处，以及你将提供什么样的流程，接下来可以开始思考一些基础。
应当如何组织你的UI内容？大部分应用内容可以以成组或是上下层级的方式来组织内容。你所决定的应用程序第一层应当完全与你所思考的应用程序最棒之处相吻合。最棒的内容最先让用户看到。
使用旅行应用举例，有多种方式来组织行程单。如果应用的专注点是有关发现有趣的目的地，那么你也许会按兴趣点来组织你的内容。如冒险、阳光行程或浪漫旅行。但，因为应用程序是针对于与好友一起制定行程，所以更好的思路也许是根据你的社交圈来组织，如家庭、同学或同事。
当选择了使用何种方式来组织内容的时候，也就是选择了有多少个页面或是视图来展现你的应用。在Microsoft Visual Studio 11 Express中提供的一些项目模板能帮助你使用一些通用的UI设计模式来设计你的应用。
你需要什么样的UI外观和操作？评估你之前的流程，针对每个流程画出用户在每个步骤中能进行的操作。
例如这个有关“分享行程给朋友，让他们follow”的流程。我们假设用户已经创建了行程。那么分享就需要以下的一些步骤：
通过这样的过程，你已经看到了你的UI将会如何呈现（就像给朋友写一个如何使用你应用的教程一样）。你同样可以继续减少一些步骤。也许用户在分享前根本不必看到行程详细。越简单越方便使用。
查看 Choosing the right UI surfaces 去了解如何使用不同的UI样式。
如何组织操作？描述出每个流程中的步骤来找到你需要设计哪些必要的操作。然后思考这些操作命令如何体验在你的应用程序中。
设计每个视图的界面。Windows Developer Preview支持横向、纵向、Snapped及fill view。用户应当能在任何时候使用这些视图，而你也会希望你的应用在任何一个视图下都能表现良好。这意味着你需要针对每个视图都精心设计UI元素及实现。当你做到这些后，你的应用程序在视图间的切换会非常平滑。
了解更多，查看 Supporting views, Choosing a layout, and Guidelines for snapped and fill views.
如何让应用脱颖而出？
你已经知道了如何设计符合你用户需求的应用，现在可以尝试看看在Windows平台上所提供的特有的功能，看看哪些可以被你的应用程序所使用。并确保每一个实施都符合相关的用户体验规范。
通用技术：
App contracts 你的应用程序可以通过app contracts功能来进行跨应用、跨功能的用户流程操作。
更多信息，访问 Windows application contracts or File Pickers.
针对不同设备的视图 Windows Developer Preview让用户能够充分使用你的应用。你也希望你的应用能够在任何设备、分辨率及设备方向上完美呈现。了解更多designing for different form factors.
触控优先 Windows Developer Preview提供了独特的触摸体验与鼠标控制能完好的结合。
例如，semantic zoom是专门针对大量内容的触摸操作进行优化的交互方式。用户可以平移或滚动来浏览内容，然后放大进入每个分类了解更多详情。你可以使用这种方式让你的信息呈现更视觉化而来替代传统的tab式导航。
当然，你可以使用更多触控的手势来完成更多的操作，如rotate, pan, swipe, cross-slide等，了解更多有关touch features.
新鲜的体验 在使用标准体验的情况下，让用户感觉到新鲜感：
个性化
最大化设备能力 保证你的应用能够使用当下设备的最大性能。
Explore the Developing Metro style apps and Differentiating Metro style apps sections for more ideas.
设想一下当用户第一次打开你的应用程序时所获得的信息。回到我们所谓的“最棒之处”。即时你没有办法在第一时间就能让用户体验到最棒之处，但仍然可以尽力做到一些：
Tile & 开始画面 tile是应用程序的脸面。试想在众多应用程序的tile中，为什么用户想要运行你的应用？确定你能够品牌化你的应用。确保tile能及时刷新，让用户一次又一次的返回并使用你的应用。
开始画面 开始画面是最好的展现应用品牌的地方。
首次启动 当用户注册和登录你的服务的时候还能看到什么？尝试展现你的应用程序的特性和信息。考虑展现一些样例内容让用户能够理解你应用的意图。
首页 首页是每次用户都将来到应用的入口。内容应当简明，专注以及第一时间告之用户你的应用所能达成的意图。让这个页面专注在最棒的一件事情之上，相信用户能够继续深入探索你的内部。尝试在首页解决过于混乱的问题，而不是解决内容可发现性的问题。
在你进入实现开发之前，你应当校验你的设计或是原型以避免未来不必要的重复工作。每一个功能都有相关的用户体验规范来帮助你进行优化。另外商店中的一些需求也来帮助你更好的在Windows Store中销售你的应用。你可以使用Windows App Certification Kit来进行技术测试。
使用 Checklist for design 来帮助你专注在最重要的特性上。
Metro风格的应用是针对你的用户需求而设计的全屏幕应用程序。他针对其所运行的设备所设计，针对触摸屏幕及Windows用户界面优化。Windows帮助你与你的用户进行交互，从而使用户与你的应用产生互动。本文将帮助你了解Metro风格的应用设计以及一些基本的开发技巧。
当用户使用Metro应用时，他应该能体验到：
沉浸式：你的Metro应用应该是全屏幕的，让用户沉浸在你所创建的体验之中。在这种全屏体验中，用户能极力享受到他所喜爱的内容。为了充分展示你的内容，我们移除了不是必须的操作系统的边框。你的应用程序就是Windows的核心体验。请充分利用屏幕的空间来设计你的应用程序，但不要让他过于杂乱。让用户专注于他需要专注的任务之中。
增进与活跃：你的Metro应用能帮助用户找到他们关注的信息。Live titles的更新帮助用户在第一时间找到有用的兴趣，并引导用户进入你的应用程序。
开始画面帮助展示你应用最好的一面。App tiles上呈载了实时的状态与更新，来鼓励用户进入你的应用。当我们设计tiles，我们应当：
有关更多的设计app tile的信息，请查看 Guidelines and checklist for tiles 以及 Guidelines and checklist for notifications.
保持连接：你的用户能够分享内容到他的社交网络或设备上。了解更多有关Searching, sharing, and connecting (JavaScript).
交互性与触控优先：你的应用应当为触控以及自然操作方式而设计，Windows会自动针对键盘、鼠标及图像缩放进行处理。了解更多，请访问Designing for touch 以及 Responding to user interaction.
自动适应性视图：应用中的控件应当支持流式布局，这样内容会自然的根据不同的设备进行适应性排版。相应的平台上提供了自动缩放功能能帮助我们处理多分辨率以及屏幕方向问题。了解更多Designing for different form factors.
可信赖的应用：用户可以安全的下载、安全、使用及更新，而不会影响到其它应用。
为多任务而设计
当应用程序全屏幕运行时，Windows同时也能支持多任务操作。
开发者同样能受益：
选择你钟爱的开发语言：你能够使用JavaScript加HTML5以及CS3，或C++/C#/VB加XAML。
新的布署方法：你的用户可以安全和简单的安装和删除应用。你无需过多的考虑系统性能。
新的UI与触控输入：你可以直接按你用户所能接受操作方式来设计你的应用，所有的UI控件都直接支持这些操作方式。
本地化：你可以开发一次即可布署应用到不同的区域和语言。不仅如此，Windows Developer Preview提供的API能让你的应用响应用户的语言和文件设定——如日期、时间及货币格式，只需要简单的开发。最终的结果能让你开发国际化的应用程序。了解Globalizing your app.
开发工具：Microsoft Expression Blend与Microsoft Visual Studio 11 Express的预览版目前免费提供，你将获得完整的开发环境和模板来设计、开发、打包、调试及布署你的应用。
本文介绍面向对象的CSS(object oriented CSS)以及如何使用种技术提高性能以及可维护性。
与其它面向对象编程的方法一样，OOCSS的目标在于提高代码的复用性，最终，更快以及更高效的进行开发，更方便的添加样式及维护样式。
在OOCSS GitHub的维基上, OOCSS简述为二条重要原则。
将结构从样式(Skin)中分离
在大部分网页设计中，可视的元素往往会重复使用，如颜色、渐变、边框样式。同时也有一些不可视的元素（如“结构”）也同样在重复的使用着。当我们抽象这些元素的时候，这些元素往往可以能更多的重复使用，在下面的代码中我们将做一些 解释。
以下是一套典型未应用任何OOCSS原则的样式代码：
#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#box {
width: 400px;
overflow: hidden;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
三个不同的页面组件使用不可复用的ID进行区分，但同时他们之间的确存在一些可以共用的样式代码。
如果经过简单的思考的话，我们可以将共用的代码部分抽象出来，如下所示：
.button {
width: 200px;
height: 50px;
}
.box {
width: 400px;
overflow: hidden;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
现在所有元素使用class定义，同时可复用的部分我们定义为”skin”，这样代码中就没有重复的部分。我们只需要给所有元素都加上skin的class即可。这便是简单的抽象的例子，但还未能做到“更少代码，更多的可能复用”的层次。
内容与容器的分离
以下为原始代码：
#sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
代码指定所有的sidebar下的h3的样式。但如果我们要对另一个元素下的所有h3样式也使用同样的代码该如何处理？而且如果在另一个元素下，我们还需要有一些不同的字号大小和文字阴影效果的例外 情况呢？
以下是我们可能会修改后的代码：
#sidebar h3, #footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
#footer h3 {
font-size: 1.5em;
text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
或者我们会改成这样子（更糟）：
#sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}
/* other styles here.... */
#footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}
我们在不经意间造成了大量的代码重复。如果基于OOCSS思想，我们需要有更多的超前思维去抽象公用的元素，并将这些元素分离到不同的模块或对象中，然后不停的重用。
上面的代码被指派到了特定的对象中，如sidebar或footer。这使得重用极为困难。我们应该保证我们的样式不应当基于任何明确的元素存在，这样我们才可以在文档中随处使用。
先看看原始代码：
.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
只有少数样式只针对header，在部分可以重用给其它元素，因此我们抽象后的样式结构如下：
.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
<p>.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}
globalwidth这个类的样式将被用于其它可复用的区域，如下代码所示：
<header> <div class="header-inside globalwidth"> </div> </header> <div class="main globalwidth"> </div> <header> <div class="footer-inside globalwidth"> </div> </footer>
有些人可能认为这样使得html的标记变得混乱，违备了把标记(markup)从表现(presentation)中分离的原则。但不可否认的是这样能更快的去使用和修改公用的样式。
一位有关OOCSS的先行者Nicole Sullivan。她创建了一个称为media object 的开源代码, 如她的博文中所说, 这套代码可以帮你节省上百行的代码.
Media object是一个很好的OOCSS的例子，他使得任何需要做图片在做，内容在右的这种类型的容器排版的问题。
更快的载入
更多可复用的代码意味着更少的文件尺寸，使得加快网页的载入速度。
的确会造成HTML中的标记增加。但相对来说是一种值得使用的代价。
可维护的样式
以模块的形式去维护内容，而不是不停的增加样式
如果想得够全面的话，在构建新页面的时候更快捷
可以继续使用ID
OOCSS的原则只是尽量不要使用ID来做为选择符，其它情况下应该继续使用
小型项目也许不需要使用OOCSS
小项目使用OOCSS也许没有太大必要，必尽速度为王
作者网站Nicole Sullivan.
基它一些作者之前有关OOCSS的演讲内容和资料
原文出处：an introduction to object oriented css – OOCSS
简要翻译：Experience10.com
这里整理出了2011年与UX有关的大全，包括软件，免费或收费的。可下载的资源，还有T恤书籍等内容，有兴趣的可以下载。而且在原贴中还能找到10，09，08等其它过往年份整理的UX资源：
http://www.nickfinck.com/blog/entry/gifts_for_user_experience_geeks_2011/
在Web UI之前，印刷设计师们使用一种称之为缩略草图(thumbnail sketching)的方法来尝试表达及完善创意。这种方法在现在的PC工具时代似乎已经失传。
这里我们将简要介绍什么是缩略草图，以及一些技巧来帮助把这门技术应用到你的工作之中。
线框图(wireframing)的话题由来已久。不需要回避这个话题，许多设计师以及UI/UX专家们认为线框图是一个最基本以及整个项目中第一个步骤，让我们能专注在基础的架构上而不是多余的设计风格上的干扰。
另一种定义说的是线框图帮助我们关注于页面如何在最基本的层面上被构建。实际上，我经常在想为什么大家没有讨论比线框图更久远和成熟的一门兄弟方法：缩略草图。
缩略草图是类似于线框图的方法，只是他比线框图的所谓基础上，更加基础。让我们看看什么是缩略草图。
名字听起来比较有趣，但你仔细去想的话，你会知道缩略(Thumbnail)是完全不搭的一个概念。例如当我提到缩略图相像(Thumbnail Gallery)的时候，你会自然想到这是一个有很多小图片组成的一个相册的概览页，点击之后能看到各种大图。
正是这种含义，你可能能猜到缩略草图可能是一种小尺寸的手绘图。缩略草图的意义正是通过很短的时间在纸上创作大量的创意。简单说他是一种视觉化的脑力风暴的方法，当你不需要担心各种困扰和细节调整的时候，创作尽可能多的可能性。在某种形式上，他很接近线框图，只是更小，更快速一些。一般来说设计师可以创作很多小草图，然后再选择几个最好的继续跟进线框图。
开始创作的话，只需要拿起一个铅笔先画几个简单的空方块代表你的浏览器外框、页面边框或任何你需要工作的东西。你甚至可以找到一些可以打印的模板来帮助你快速开始。
现在起 ，你可以开始你的创意了。这并不需要你专注于你的手头画功，相反你需要专注在如何生成创意。缩略草图是一个快速的甚至可以说是偷懒的作法。使用最基本的形状，不要在单一图形上花太多时间，只要你找到了你想要的基本构图或创意是什么样子，就可以停止继续下一步。
你能从纸上的小草图中获得什么呢？你可能会吃惊，作为设计师，我们很容易陷入到狭窄的认知中，在使用电脑创作的过程中，我们太容易创作一个接近完成的事物。
问题在于当你花费时间在一个创意上的时候，你会不自觉的在心理上保护你的创意。不幸的是，你的第一个创意通常来说并不是你最好的。
当你已经把你的主意开始付出实现的时候，放弃他再从事一个新的创意就变得更加困难。你继续在旧的创意上发展因为你的大脑已经卡住了。就算你没有这样的问题，你还是会花很多时间去发展新的创意。
这种方法的缺点是你并没有将发展创意作为一个重要的思考。“重要的思考”是指真正有价值以及逻辑上合理。相反的，你可能只是有三个创意，然后在这三个里面选择。你可能有办法想出10个更好的主意，甚至有机会比这三个更好，但你没有时间去完成。
使用缩略草图方法，你有可能真正发挥你大脑的作用，并强迫你自己开始真正意义上的创意工作，创作更多更丰富的选项。使用这种方法你可以找到更多的创意并仔细评估哪种方法更合适，并继续推进。
有些人可能认为按预定的设计时间表和节奏，已经足够完成最终的设计工作，不需要再花费额外的时间！但如果能成功的实施缩略草图的，学有可能在未来节约更多的时间。
首先，你不需要花一整天做这个工作。有时候生成创意可能只需要花十分钟，二十分钟，三十分钟，这完全取决于你。更重要的是，这个步骤的工作让你有机会在设计最终开始创作前能够审视和评估。你会发现你后面的设计更加快速因为你已经想得足够，而且知道哪个是最好的主意。
一般来说，当我提到缩略草图的时候，可能指的是有关排版方面的创意，其实这种方法可以作用于任何类型的设计。例如，LOGO的草图设计在开始可能就是一种很粗略的草图设计方式。
拿起铅笔，开始创作上百种创意似乎是非常自然的一种LOGO设计的方式，所以为什么不这种技术到其它的设计领略呢？
招贴、网页设计、手册、名片、应用程序界面、字体设计，所有这些类型的设计都可以从几分钟的缩略草图开始。
现在你知道了什么是缩略草图以及如何应用他到你的工作流之中，让我们用一些技巧来帮助你更好的开展。
我们中的一些人非常善于绘画。但有一部分人却非常惧怕铅笔因为无法表达绘制出完整的草图。
但在我们现在的例子中，这些不善于绘画的人也许更有优势。如果你不能画，太好了，你非常适合创作缩略草图。那些非常善于绘画的人们可能会花更多的时间去创作缩略草图因为他们太追求每一条直线是否平直，以及圆是否更圆。
我们只需要知道的是，应用这种技术的关键在于量而不是质。我并不是反对完美的草图，事实上，我非常喜欢看那些顶级艺术家的草稿，但你只需要确定你的目标是将这些创意从你的脑子中转到纸上即可。例如，你只需要画一个长方块，事后你记得这个代表着这上标题文字就好了，而不需要再去逐字字句的写上文字。
另一事需要记住的是避免花太多时间去打磨一个创意。如果你画下了一个创意然后你觉得并不喜欢它，千万不要擦掉再重新开始。简单的放在一边继续你的下一个创意。也许几小时后你再回头看的时候会发现这个创意也许不错。
当你绘制创意时，不要在5到6个的时候就停止。你是创意专家，你应该有更多的方向。我知道设计专业的教授有时候会让学生每次为同一个项目创作25个或更多的草图。这样的数量会更加激励创作。
当我们开始创作更多的草图的时候，你的第一直觉可能会使得你大部分创意看上去都差不多。这种情况非常常见。努力去让大脑发挥 他的作用，去创作更多的独特和不同方向的概念。记住现在这个阶段只是脑力风暴阶段，所有的一切都不一定是不好的创意。更疯狂，出格一些。
如果可以，尽量把这些画下的草图留下来供以后参考。当你更深入的进入到项目中的时候，你也许会回头再看看之前的创作。你也许已经失去了专注点你需要看看这些开始的主意来帮你找回来，你的客户也有可能不喜欢你的创意你可以再回到草图中寻寻宝。
我常干的一些事情是找一支压感笔在我的iPad上使用像Adobe Ideas或iDraw一类的软件创作一些草图。使用数字产品记录我的草图对我来说非常有帮助，因为可以帮我留存这些记录。然后再导入到Illustrator或Photoshop中进行下一步的处理。
让你最终的想法画成缩略草图也许在一开始比较烦恼，但是一代你这么去做了，你会发现你会非常享受这个过程。对我来说，一个项目中最美妙的阶段就是开始的时候，在我开始为细节烦恼前，去创作无数的可能性。
也许缩略草图并不适用于每一个人。如果你不觉得这个有帮助，那就不用浪费时间。但是，我推荐你在一些项目中做一些尝试。看看你是否能够真正开动脑子发现一些更棒的创意。
如果你使用这个方法，不妨留下链接让我们看看你画的这些草图！
照片版权：Dan Lurie, Tobias Soft (1)(2), nunile, Jeremy Keith, Shawn Campbelland CannedTuna.
原文链接：Design shack
除了使用HTML5 Boilerplate作为项目的默认模板。同时在这组模板中提供了些有用的技巧来帮助我们更方便的开发。
CSS:visuallyhidden
在默认的style.css中，提供了一个visuallyhidden的class，用于帮助我们将一个元素在视觉上完全隐藏不可见，不会让它对其它元素造成任何视觉渲染上的影响。但逻辑树上继续存在。
CSS:clearfix
这个就不用多说了帮助我们进行float clear操作
CSS:no-js
在默认情况下html标记中标识了class=”no-js”，这行在最终执行时，如果被Moderinizer检测到浏览器支持JS，便会替换掉。因此对于没有JS的支持下，我们可以在CSS中，针对这个class进行一些特殊的样式处理。如.no-js h1 {display:none;} ，在没有jS支持的情况下，所有的h1都将隐藏。
而进一步需要了解的是，在no-js被Moderinizer检测的时候，还会被替换成其它语法，如如果用户使用桌面上的IE浏览器，这里会被替换为class=”js no-flexbox canvas canvastext no-touch”等一系列class，表示了此浏览器所支持的部分特性，我们可以根据浏览器的特性来作相应的css或脚本编写。
jQuery CDN加载
在HTML之中，默认编写了从CDN加载jQuery的标签。但是同时可见如下代码
<script type="text/javascript">// <![CDATA[
window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")
// ]]></script>
这句脚本保证了如果从CDN加载失败，再从本地的服务器上加载jQuery库
什么是HTML5 Boilerplate?
HTML 5 Boilerplate 是一个由业界众多大拿发起的一个开源开发模板，来帮助大家快速使用HTML5技术开发网站，同时兼容老式浏览。HTML5 Boilerplate并不是一套框架，他仅仅是一套模板。大家可以把他当作自己的新项目模板，在此基础上建立自己的项目。
如何什么HTML5 Boilerplate?
HTML5 Boilerplate志在建立一套简单的模板帮助大家快速的进行开发，一般来说下载了这套模板后，便可以在其上进行修改，但以下一些内容会有助于帮助你理解如何更规范的使用这套模板：