书名：超越平凡的Web设计——HTML5+CSS3专业应用之道
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
Hardboiled Web Design
Andy Clarke
Copyright ©2015. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing from Smashing Media GmbH. CHINESE SIMPLIFIED language edition published by POSTS & TELECOM PRESS.
本书中文简体版由Smashing Magazine公司授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。版权所有，侵权必究。
本书是Web设计畅销书《超越CSS》作者的最新力作，结合当前移动互联网下的硬件变化情况，以一个资深Web设计开发者的视角，将老的工作方法与最新技术相结合，通过丰富的案例为读者展示了如何设计高效、充满创意的Web页面和应用，并通过挖掘高级布局方式、无障碍页面、语义化标签、高级CSS技巧等内容，快速提升读者的视野与设计开发水平。
此外，腾讯FERD团队（前端研发中心）在翻译本书的过程中，不仅严谨精准地表达出了作者的观点，又兼顾了国内行业的实际情况，帮助读者更加自然地理解原文的要义。
本书结构清晰合理、内容深入浅出，无论您是有一定经验的前端开发工程师，还是Web设计与开发的爱好者，本书都值得您仔细品味，反复吸收。
感谢Smashing Magazine出版社的Vitaly Friedman、Markus Seyfferth，以及所有帮助本书付梓，并帮我打造了这个分享想法平台的诸位朋友们。
感谢编辑Owen Gregory在我写作与出版过程中给予的帮助。
感谢Natalie Smith和Elliot Jay Stocks为本书设计工作的热情付出。
感谢Trent Walton 和 Jeffrey Feldman为本书作序。
感谢Marc Thiele为我拍摄了照片。
感谢Rachel Andrew、Shane Hudson、Mandy Michael、Sara Soueidnn等编辑精心打磨本书初稿。
再次感谢我的好朋友Rachel Andrew、Vitaly Friedman、Owen Gregor、Jeffrey Zeldman，以及Paul Boag、Petra Gregorova、Jon Hicks、Leigh Hicks, Drew McLellan、David Roessli、Jared Spool等在本书的关键时刻给予的帮助和照顾。
感谢我的公司（Stuff & Nonsense）的客户们，感谢他们愿意为我暂停手中的项目，并且理解我在写作时经常性地漏掉他们的电话和邮件。
感谢Sue Davie、Steven Grant 、Joe Spurling容忍我写作时候的坏脾气。
最后还要感谢我的家庭，无论做什么，你们才是我人生中最重要的部分。
Andy Clarke自从15年前开始从事前端体验设计工作以来，就被打上了很多的标签，比如“CSS布道者”“行业先知”“开发鼓励师”，等等，但是他最为自豪的是被Jeffrey Zeldman称为“天才混蛋”。
Andy在英国创立了一家名为Stuff & Nonsense的Web设计公司，这家公司专注于网站与APP的视觉设计和前端开发。开业17年间，为世界各地的客户提供服务，本书中的一些精彩案例便是他的杰作。同时Andy也是广受欢迎的前端体验会议讲师和作家，他还在世界各地人气爆棚的研讨会上，向专业Web设计和开发者们传授丰富的Web设计技巧和开发技术。
在2006年，Andy出版了畅销书《超越CSS——Web设计艺术精髓》，在2010年又出版了本书（即Hardboild Web Design，当时并没有中文版）的第1版。此外，他经常在博客和播客上讲述Web设计、前端体验设计，以及行业相关的知识，你也可以在twitter关注他的社交账号@malarkey。
Andy Clarke 并不太像一个传统的不修边幅的码农，他干净利索打扮得体，而且永远充满了想法。对于如何创造好的前端体验，他总是充满热情，并且能提出丰富的见解。
一直以来，Andy贪婪地探索着CSS，并从中获得了极佳的灵感，您现在阅读的这本书，也许正是他过往的创意沉淀。通过本书你可以了解到：在日常工作中为什么要使用HTML5以及CSS3；如何以及何时使用这一前瞻性的Web技术。让我们从现在就开始，学习并使用起些酷炫的东西吧。
每一位Web设计师和前端工程师都应该拥有这本书，但需要注意的是，本书不适合羞于尝试的人。如果你对实现多浏览器的CSS圆角不寒而栗，如果你对实现一个CSS阴影就心满意足，那么这本书的确不适合你，现在就合上书页，回到你传统守旧而又安全的过往经验中去吧。
但是，如果你对自己的技术现状心怀不安，渴望拥抱Web设计的未来，并且坚信不能执着于过去的经验，那么，这本书就是特意为如此努力的你准备的。
对于已经提了千百次的Jeffrey该怎么介绍呢？是的，他是Web标准的奠基人之一，他通过博客、发表文章、组织会议以及出版畅销书而广为人知。
他不仅提出了Web标准，还是前端体验类畅销书作者。他同样是我的灵感源泉，我的精神导师和良友，得友如此，夫复何求？
如果五年前你告诉我说，命令行会成为Web设计与开发工作流中的一部分，我肯定会认为你疯了。同样，像CSS预编译，以及用其他方式代替浮动布局这样的事，在那个时候似乎都不敢想象。
作为一个前端工程师，我们生活在一个不断被各种新技术和尝试侵蚀的世界。然而无论Web技术如何演进，基本的理念应该是保持不变的。单一方案解决单一问题的时代一去不复返，在发展如此迅速的行业里，动辄沿用老办法对待新问题是十分危险的行为。而如此大的变化，使得我们心生畏惧又精疲力尽，那么我们该如何让自己跟上行业变化的节奏？
互联网作为我们的主要工作平台，承载了所有的人类知识，互联网的无限性，也使得保持内容历久弥新成为至关重要的事情。而作为互联网从业者也需要花费大量的时间，在网上浏览我们所需的内容。基于网络知识的庞杂和无系统性的增长，导致在这个平台上学习，像在黑夜里抓东西一样困难。
也许，深入理解每一个问题发生的机制与环境、知晓每一个解决方案背后的逻辑和原理，远远不像网上搜索式学习那样，可以快捷、方便地解决眼前的问题。你是想通过关键词搜索到ChrisCoyier的flexbox布局指南？还是真正摸透fexlbox？我想答案不言而喻吧。
搜索式学习，也许很适合在繁重的工作环境里的人。然而，万变不离其宗，像学习任何一门学科一样，我们都要挤出一定的时间来深入理解我们使用的技术和工具，以保证我们对于这些东西背后原理的认知和巩固，方便我们在未来轻松应对更多的难题。
作为一个发展中的行业，我们需要这样的书籍，来帮我们梳理今天Web设计与开发中各种激动人心的最佳实践。而原版的《硬派Web设计》在短短五年后就升级了它的内容，也是它和作者对推动行业发展所做贡献的最好证明。感谢Andy的卓越研究，让我们可以继续完善我们的技术栈，向着新的Web设计开发方式前进。
Trent Walton和他的三个朋友在德州奥斯汀创办了一家名为Paravel的Web设计工作室。其中，他主要负责超炫的响应式设计，微软就是他的客户之一。此外，他还是一个高产的作家，编写响应式设计方面的图书。Trent Walton为人谦虚，是我心目中最值得尊敬的开拓者。
如果你在Web设计和开发的岗位做得时间足够长，那么你的书架和电子书价上应该已经塞满了关于HTML和CSS方面的书籍，甚至也许已经买过我之前出版的《超越CSS——Web设计艺术精髓》。那么，为什么你还需要这本书？
这是一本面向那些富有创造力、渴望理解WHEN（何时）、HOW（如何）和WHY（为什么），以及积极实践HTML和CSS新特性的Web设计师和前端工程师的书。拥抱新技术，就从现在就开始，不是明天或者下周。这本书不会教你如何书写基本的HTML标签或者CSS样式，而是会传授对于学习新知如饥似渴的你，如何正确使用这些新特性与技术，让你的网站更有创造力和想象力，更加适应不同的设备与环境。
如果你非常在乎标签的使用与清晰的表达，那么在本书中，你将会学习到如何使用富语义化的HTML标签来构建网页。内容将会从微格式涵盖到WAI-ARIR无障碍访问。了解这些内容，会帮助你减少对那些非语义化标签的依赖，从而使你的网站性能更加卓越。
如果你是一位设计师，希望了解最新的CSS技术以及了解它能带来什么样的创意灵感，那么本书将会教你，如何在支持这些特性的浏览器中更好地使用它们，以及如何更加优雅地兼容那些老的、且支持效果不好的浏览器。
我们在2010年出版了本书的第1版，至今尽管只有短短的五年时间（本书最新英文版于2015年出版），但是就在我创作新书期间，无数Web设计理念与技术都已发生了改变。在2010年本书第1版出版前的数周，苹果公司发布了iPad，随后它改变了人们与网站的互动方式；在第1版出版前的5个月，Ethan Marcotte发表了他的“响应式设计”一文，这一思想不可避免地造成了Web访问的变化，这一全新理念冲击了当时的Web设计和开发行业；在2010年的那个时间节点，设计师与工程师们还在为迁就那些老旧桌面浏览器的缺陷而殚精竭虑，鲜有人去展望未来。现今，人们更多都是在使用智能手机来访问互联网。
这些年，那些拖后腿的老旧浏览器已经逐渐退出历史舞台。我们不必再为那些不支持圆角、阴影、透明度甚至是RGB色值的浏览器去写一些hack的方法。来自苹果、火狐、谷歌、Opera甚至是微软的现代浏览器，都对CSS有很高的支持度，但是它们依然是对一些仅自己支持的特性更加友好。
对于大多数老板和客户，他们的焦点目前都放在了设计数字化产品上，而不是网站。不管我们如何去做，只设计静态网页视觉稿的传统方式，已经被组件化的设计所取代。如今，我们在设计环节使用HTML和CSS做原型设计，在随后的迭代中通过代码来不断完善产品，而不是设计更多的视觉稿。事实上，我们的客户早已习惯于这样的流程，并且很多人还满怀期待。因为他们可以很快地在自己的智能手机或平板电脑上亲眼看到我们的响应式设计理念。
五年的时间会改变很多事，但是我们对于设计和开发的心态却从未改变。以前我们可能困扰于类似border-radius这样的CSS属性的兼容情况，现在同样对于使用flexbox心存担忧。在各种各样的CSS研讨会上，我常常惊诧于如此之多的人到现在还拒绝使用类似border-image、background-blend-mode、filter等等这样的属性，即便现代浏览器已经支持这些特性了。
Web技术在不断进步，但万变不离其宗，这也是为什么本书所阐述的方法依然有效的原因，甚至这些经验在移动端显得更加重要。现在针对多设备的响应式设计，要比本书第1版出版的时候多了太多。你准备好开始这趟Web设计的奇幻之旅了吗？系紧安全带，加大油门，出发吧！
这是一本关于最新的CSS和HTML技术的书，我们假定读者都是设计师或前端工程师，且熟知如何书写结构良好的页面，也就是说，你是使用HTML标签与CSS来完成设计的。阅读本书是否需要知晓全部的CSS知识？不需要，不过如果你能理解选择器以及当前层这样的技术概念，将会对阅读大有裨益。如果你刚接触CSS，我希望本书可以给予你启发和鼓舞，并且能够让你了解到“硬派”的意义。
你需要准备一台Mac或者PC电脑，上面安装几个现代浏览器和它们的开发者工具插件，如果有智能手机或者平板电脑更佳。你可以使用自己的设备，来访问'Get Hardboiled'网站上的案例，体验在不同的屏幕分辨率，不同设备上的浏览感受。我强烈建议您安装如下浏览器：
在Mac上打开Safari，点击Safari的Preferences按钮，点击"高级"选项卡，然后选择"Show Develop menu in menu bar " 这将会开启Safari的开发者工具。Safari是OSX下的默认浏览器，使用的是iOS渲染引擎。
鉴于Safari浏览器使用了WebKit的渲染引擎，于是谷歌旗下的Chrome改用了自己研发的Blink引擎，Chrome浏览器拥有非常好的扩展工具，可以帮助我们在设计和开发网站的时候，十分方便地在浏览器中调试。
安装最新版的Firefox以及最近可用的beta版。火狐浏览器以其丰富的扩展而闻名，目前它仍是广受用户欢迎的浏览器。
Edge是微软最新款的浏览器，它的logo很容易让人追忆起IE浏览器，但是它抛弃了前辈过往的包袱。Edge目前只支持Win10操作系统的PC、智能手机、平板电脑以及Xbox的命令行。对于旧的操作系统，暂时不提供支持。
旧版Opera浏览器使用的是自家研发的Presto渲染引擎，目前最新的版本已经改为和Chrome一样的Blink内核了。
你无须特意准备任何写代码的软件，找个你喜欢的文本编辑工具即可，我用的仍然是Espresso。
在本书中，我为读者建立了一个名为“Get Hardboiled”的网站，并通过每一章节的案例，帮助读者理解本书的内容。这些案例使用了最新Web技术，展现了精彩绝伦的体验。看过之后，你会忘记那些在老掉牙浏览器中做Web设计的痛苦。
你可以在GitHub上找到这些代码。
“Get Hardboiled”上的大量案例可以激发你的灵感，同时帮助你更快更好地使用最新的HTML和CSS特性。
《红色收获》 Dashiell Hammett，1929
《马耳他之鹰》 Dashiell Hammett，1930
《邮差总是按两次铃》 James M.Cain，1934
《双重赔偿》 James M.Cain，1943
《大眠》 Raymond Chandler，1939
随着智能手机等移动设备的广泛使用，网页的设计和开发产生了深刻的变革，但是我们向老板和客户设计呈现网页设计的方式，以及我们对于HTML和CSS的认知，并没有发生太大改变。
在这一部分，你将会重新审视渐进增强和优雅降级等概念；你将会了解Web标准是如何制定的；你将会懂得如何去创建一种独立于响应式布局的设计风格；你还会学习到如何向老板和客户展示设计。尤为重要的是，你将会明白，响应式网页设计是实现创造性工作的绝佳机会，应该紧紧抓住。
在孩提时代，我就对侦探小说很着迷。是的，侦探小说。既不是乡间别墅谋杀案，也不是密室推理小说，这些类型的小说从来都不是我喜欢的风格。我所指的是雷蒙德·钱德勒（Raymond Chandler）、达希尔·哈米特(Dashiell Hammett)，以及我个人最喜欢的米奇·斯皮兰（Mickey Spillane）等作家所创作的那种坚韧有力的小说。
现在回到本书的最开始，读一读那段引言，那可不是我在参加客户会议或W3C CSS工作组会议时所做的笔记，尽管直接使用笔记的内容很容易。那段话摘自我最喜欢的一部侦探小说——米奇·斯皮兰（Mickey Spillane）所著的经典“硬汉”侦探小说《My Gun Is Quick》。
即便不是侦探小说迷，你应该也听说过或者看过一些“硬汉”电影。你或许熟悉亨弗莱·鲍嘉（Humphrey Bogart）刻画的私人侦探 Sam Spade。这部电影改编自达希尔·哈米特于1941年出版的小说《马耳他之鹰》。这是历史上非常精彩的一部侦探电影，仅次于那部《谁陷害了兔子罗杰》。
演员斯塔西·基齐（Stacey Keach）的表现如何呢？20世纪80年代，他在Spillane的电视剧《Mike Hammer》中的表演算不上硬气，然而总比没得看强。
没错，就是下面这个家伙。
你对这类小说感兴趣吗？我真希望你立马就去读一读，可以从那些经典的小说开始，越老越好，比如小说家达希尔·哈米特的《马耳他之鹰》或雷蒙德·钱德勒的《大眠》。对怪咖侦探、贵妇与警察内鬼的故事感兴趣吗？Mickey Spillane的小说是我的最爱。你可以从《My Gun Is Quick》和《复仇在我》开始。
从20世纪20年代开始，硬汉派侦探小说就充斥着暴力、犯罪场面。罪犯虽然凶狠，但英雄也充满了个性，他们从不掩饰真相，从不耍小聪明。作为读者，我们需要知道真相，不管事实是多么腐败不堪。
各种硬汉派侦探小说里的这些主角让我着了迷，比如Hammett描写的Sam Spade，Chandler笔下的Philip Marlowe，特别是Spillane小说里所描写的Mike Hammer。
身为侦探的主角们每天的工作，就是用枪指着别人的太阳穴，或者一拳揍烂坏蛋的五脏六腑。别人搞不定的事情，只要主角出马准能办成。他们不需要规则，那是为胆小鬼和无能警察准备的东西。
硬汉侦探有时会和警察一起破案，但硬汉总是深入险境，因为在必要的时候，他们从不受条条框框的限制，从来都是按照自己的规则来破案。当然，法律、法规和惯例很重要，但有时只有通过伸张正义才能获得实现这些规则。当人们不能做那些他们认为正确的事情时，人们就需要这些不畏险境的英雄出手相救。
这些英雄们特别擅长做警察和其他人搞不定的事情，因为他们的行动并不受规则及惯例的限制。我们为他们加油打气，并全力支持，不管这些人多么不羁和残酷，因为我们需要他们。作为前端工程师，我们可以从这些硬汉身上学到很多东西，本书的灵感变来源于此。
为了创造最好的设计体验而永不妥协，才称得上够硬派。推翻限制、打破或创造新的规则，毫不畏惧，这才是我们的本色，并且要让网站在任何可能的情况下都具有更强的适应性。在这个套路里，需要毫不犹豫地充分利用新技术。
说起来简单，做起来并不容易，但如果你已经准备好挑战自己，深呼吸，稳住神，准备迎接一个漫长的夜晚吧。
无论是在现实生活中和还是在虚拟网络中，我们需要规则、约定和标准。但是，我们应该利用它，而不是定义它，更不是限制它。虽然网络已经有25年的历史（当我在写这段的时候），我们已经提出了它的标准，例如W3C标准组织，充当了所谓的Web标准技术，如HTML、CSS和JavaScript的监护人的角色。
我们还建立了一系列最佳实践，比如移动优先、渐进增强和响应式Web设计等，指导人们使用这些技术来构建极富可用性——跨浏览器兼容、方便残障人士、视觉上更吸引人、搜索引擎优化——的网站。
但是，世界还远远不完美，这些标准和最佳实践至今都也只是“建议”，W3C甚至使用这个词来形容他们维护的规范。
除了迫于同行的压力和常识之外，并没有法人实体或者其他机构可以强制浏览器厂商和互联网专业人员采用这些标准并做出最佳实践。如果这本书是为他们写的，这将是一个完全不同的书。
当我五年前第一次写这本书的时候，Web设计的标准做法是，创建一个在所有浏览器中看起来和用起来都相同的网站，而不去管它们的性能如何。要做到这一点意味着要委曲求全，例如需要避免使用某些技术，因为有些浏览器不支持不支持此项技术。
这就让你心满意足了么？
当然不行！这个套路无法让你建立出色的网站，并且这种过时的做法阻碍了我们的进步，让我们不思进取。作为互联网的守护者，我们所做的最糟糕的事，莫过于不思进取的老旧观点无动于衷。
“我们必须做我们的老板和客户想做的事儿！我们要做他们所期望的事情！”
在这方面我算是个老手了。我深知，在帮助客户实现想法的时候，完全可以使用最新的Web特性，充分展示我们的创造力。这才是硬派的Web设计。
在寻找超越习以为常的方法之前，让我们扪心自问，为什么我们对待全新的Web技术会如此谨慎？
当我的第一本书《超越CSS》在2006年出版的时候，支持CSS3新特性的浏览器还非常少。只有Firefox支持CSS3多栏布局，只有Safari浏览器支持多背景图片。《超越CSS》中由于提及这两个高级CSS属性而在业界广受赞誉。
等我五年后写了本书的第一版的时候，情况已经完全不一样了。早期独领风骚的IE桌面浏览器，其市场份额不断萎缩，其竞争对手的浏览器此时已经取得优势，移动端浏览器也在快速发展。
彼时我们有一系列很棒的CSS属性，并且大部分已经得到了浏览器的支持，包括IE9。此外，还有很棒的CSS工具任由我们使用。你可能会想，我们可以利用这些条件来做些伟大的事情。
事实上呢？并非如此。我们中的大多数人总是盯着做不到的事情，而不是我们能做的。很多人抱怨局限性，而不是拥抱可能性。大多数人不停地埋怨，而不是感到兴奋。
使用基于Web标准的HTML、CSS和JavaScript，能创作出令人怦然心动的作品，例如Bryan James创作的的“30个CSS碎片拼图，30种濒危灭绝动物”（http://species-in-pieces.com/，中文地址：http://www.Webhek.com/misc-res/species-in-pieces/）。
网页设计和开发变革的速度前所未有。HTML、CSS和JavaScript等技术已经发展成熟。
使用智能手机和平板电脑来访问网站和APP的人数呈井喷式增长，且已经超过了PC端的访问数量。响应式Web设计已经不再仅仅是一个概念，而是一个被广泛接受的网站设计方法。
Web设计和开发的方式正在发生巨大的变化，针对响应式设计的要求，许多设计师抛弃了以往从设计页面开始的方式，转变为从设计组件化系统着手。我们已经彻底改造了HTML和CSS样式指南，把它们变成了成熟的模板库，它们就是你的设计工具，而不再是简单的文档。
为了管理大型网站的样式表，开发人员使用Sass为CSS添加了继承、混入和变量，他们还为HTML和CSS引入了命名方法，包括BEM（块、元素，修饰符），这使得HTML元素和CSS样式之间的关系更加清晰。
最后，我们不再需要说服老板使用响应式Web设计——因为是他们要求这样做的。
在接下来的几章，针对如何使用新兴技术这一话题，我会挑战一些早已被普遍认同的想法。然后，我会制定一个计划，即如何在创造性地推进工作的同时，满足所有人的需求。
我热衷于使用最先进和最新的工具来做出最好的设计，因此我可能会有话直说，所以别指望我会轻声细语地告诉你。
渐进增强一直是现代Web开发的基础之一，我第一次接触到这个概念是在Dave Shea的博客上,当时他介绍了所谓的MOSe——Mozilla、Opera和Safari增强。你应该对Dave有所耳闻，就是他创造了CSS禅意花园。
Dave是这样解释MOSe方法的：
“在IE浏览器上创建一个基本的功能页面，你可以在拥有高级选择器的现代浏览器里添加额外的功能，等等，这是我们可以在未来几年持续前进的唯一方法，让我们拥抱它吧。”
Dave建议我们应该首先为低级浏览器创建一个最低可用页面，尤其针对IE的早期版本，然后在支持CSS的子选择器、兄弟选择器和属性选择器的现代浏览器里应用更多的样式。你会注意到，Dave讨论页面应该如何工作，而不是应该如何设计。
同年早些时候，Steve Champeon 开始推广渐进增强概念。他同Jeffrey Zeldman一样，是Web标准的创建人之一。
“与其优雅降级，不如渐进增强。首先为最新的、不同功能的设备构建文档，通过单独的逻辑继续增强这些文档表现。不要让基准设备承担过多的责任，而应该让使用现代浏览器的用户拥有更加丰富的体验。“
许多人将渐进增强概念视为设计开发网站的理想方法。从对Web特性支持较少的浏览器上开始，设计一个仅能提供最基本体验的网页，然后再在高级和现代浏览器上，根据其所支持的特性，实现不同细节的分层设计。
这意味着在实际操作时，优先使用老旧浏览器支持较为成熟的CSS选择器和属性，而对于较新的属性则谨慎使用。理论上这种渐进增强的方法是行得通的，但是在实践中，我们又该如何选择不同的增强方案，才能发挥这种设计原则的最大潜力？尽管Steve在文章中使用了术语“包容性的网页设计”，但我确信，他从未打算让我们与功能差劲的浏览器纠缠，限制我们的渐进增强创作思路。就算他提过这样的想法，你能猜猜他和Dave的那些文章是什么时候的吗？2003年！
2003年，巨大的30GB容量的iPod可算是个潮物，在那一年，如果你的工作是设计、开发网页或者仅仅是浏览网页，你肯定使用过下面这些软件。
随着时间的流逝，我们会不断升级软件，然而在实践渐进增强方面，我们总是固执地坚守着以前的常识。
这并不是说渐进增强不值得称赞，事实恰恰相反。
我们在开发时遵循这些原则，页面的可用性或可访问从来不依赖CSS或者JavaScript。当我们使用有意义的HTML标签时，它将变得更轻量、更具有适应能力。CSS使得在各种尺寸和类型的屏幕上的排版更容易。
渐进增强的理念不止如此，然而我们必须小心谨慎，不要因为坚持其原则或应用其理念而限制了自己的创造力，特别是在视觉设计方面。我们必须不断地重新评估如何应用这些原则，从而避免我们的作品变得平庸。
Zoe Gillenwater在她的演讲“使用弹性布局提高响应能力”中提到了CSS中弹性盒子（Flexbox）布局的应用，她提倡使用弹性布局在设计中实现渐进增强。但问题是，在渐进增强实践中，往往会为了迁就还在使用老旧浏览器和过时设备的用户，而放弃使用先进的CSS属性，甚至放弃使用Flexbox这样强大的工具。
增强或改善，往往意味着从底部开始。仅仅针对各种浏览器普遍支持的特性进行Web设计是远远不够的，这也是造成当今许多网页如此平庸的原因。我们使用新的CSS特性作为一种工具时，需要为使用新浏览器和设备的用户设计更多、更好的体验，就如Dan Cederholm所说“为新版浏览器用户提供增强的文档，以便让他们获得更加丰富的体验。”
在过去的几年里，Zoe提出了很多非常有指导意义的Flexbox实战案例：zomigi.com/publications/#pub-fwd
因为我们首先开始为老旧的浏览器设计，所以离最终的卓越设计还差着十万八千里。
我们绝不能被那些老旧的浏览器与过时的设备限制了创造力。相反，我们应该利用新技术，为每一位用户的每一次浏览，设计出最好的体验。这样我们可以充分利用一切能力更强的浏览器和新兴技术，实现更高和更优的设计。
我猜你现在肯定在想优雅降级的事儿？
渐进增强的另一面——优雅降级——确保当样式和脚本不可用或无法被浏览器解析时，用户依然可以访问网页的内容。采用优雅降级方法，意味着网站的功能永远都是可用的，尽管一定程度上也许是低保真的设计，好在它的内容仍然可以访问。
在老旧的或功能较弱的浏览器中，考虑可用性是我们能做的最基本，也是最重要的部分。但是优雅降级这个术语，意味着我们应该妥协。
去xx的优雅。
硬派的方法，是进一步推进优雅降级，并发挥我们的创造天赋去设计，不仅只针对设备的屏幕大小，而且也要考量其浏览器的功能。我们需要重新理解优雅降级，并面对今天这个领域所遇到的挑战。
如果要创建令人期待且鼓舞人心的网站，我们必须打破过往渐进增强和优雅降级的经验藩篱。只是鼓励人们去使用高性能或者对Web特性支持良好的浏览器，是远远不够的。
相反，我们应该充分利用新的技术，并且精心设计每一次用户体验，以便于充分发挥用户使用的浏览器的潜力。这可能意味着最终页面跟设计稿有很大不同，有时在不同的浏览器或设备上差异更大。
对于一些人来说，这种方法似乎太激进，甚至有些偏执。但这种方法更好地利用了当今的技术，充分释放创造性，令用户体验和设计达到更高水平，并让我们开发出更鼓舞人心和富有想象力的网站与APP。
在渐进增强和优雅降级的概念刚提出时，网络是一个与今日完全不同的环境。在浏览器新特性支持领域，两款竞争的浏览器间鲜有差异。而今天一切都改变了，优秀的现代浏览器支持各种Web特性，而老旧的浏览器的支持性很差，二者之间的鸿沟越来越大。下面是一些最新的CSS选择器和属性，在现代浏览器中有着稳定和良好的表现。
id跟class属性。opacity属性和CSS滤镜。当前桌面浏览器对CSS属性的支持情况
CSS作为高自由度的创作工具，帮助我们实现了很多惊艳的Web体验。如果在创作中不充分利用它们，是多么短视和愚蠢啊。如今，在掌握这些技术的前提下，我们为什么不去使用这些属性呢，哪怕只用其中的一个。
那么到底是什么在阻止我们?
只不过是几个陈旧的想法罢了。
渐进增强和优雅降级，都不应该被教条或不经大脑地应用在我们的Web设计中。相反，它们提供了一个新的起点，而现在，我们要重新定义响应式设计的原则，以适应不断变化的网络。
人们经常误认为W3C是用来创造新技术的，但其实它是一个标准化机构，而不是创新机构，它的工作是将现有技术标准化。CSS工作组规范作家Elika Etemad总结道该组的作用：
“这个工作组是为规范化而存在的。如果没有人对实现某些东西感兴趣，那么我们制定这些标准就是在浪费时间。另外，如果只有一个实施者来做这些事，我们就不可能提出跨平台的标准”。
很长一段时间以来，我都认为W3C的CSS工作组是先创新，然后发布草案和建议。例如W3C提出建议，浏览器厂商来采用它们（或者不采用），现实却是，当标准达成共识的时候才会去采用。
“如果CSS工作组有多个独立完整和互操作性的实现方案被广泛采用，那么它的工作就被认为是成功的。”
假设我们在意标准，并且希望我们的作品符合这些标准。那如果我们在使用某些新技术时，它的标准还没制定完成怎么办？如果我们硬要按照标准来设计，那么我们将会错过许多的创作机会。
因此，我们不必等待HTML或CSS模块成为W3C的议案，现在我们可以使用大多数新兴的标准。
与CSS的早期版本相比，CSS3不是一套单一独立的规则，它被划分为了多个模块。CSS工作组根据优先级分别开发每个模块：
“CSS2以后，W3C Recommendation Track单独地提出了一系列开发中的模块，其中包括语法模块、级联和继承，当然还包括打印、页面布局和呈现等许多方面。”
CSS3的模块化是件好事，这样浏览器厂商可以按照他们的时间表，逐步发布新的功能；这对我们来说也是件好事，因为这允许我们逐步地熟悉和使用每个模块，而不是等待完整的大而全的规范。
CSS工作组的章程上显示了目前正在开发的模块，这不是一个详尽的清单，我选择了与我们最相关的10个模块。
CSS动画 | w3.org/TR/css3-animations
使用关键帧，随着时间的推移改变css属性值来实现动画。这些关键帧动画的行为可以通过指定时间、重复的次数、重复的行为来控制。
CSS背景和边框 | w3.org/TR/css3-background
使我们能够控制背景图片的大小、重复一个合适的背景图、在盒模型的边框和圆角上使用背景图。
合成和混合 | w3.org/TR/compositing 混合模式允许我们使用若干个元素来做混合背景，你可以在Adobe Photoshop里找到类似的工具。
滤镜效果 | w3.org/TR/filter-effects 使用CSS来为元素添加滤镜效果，像Adobe Photoshop里的滤镜工具一样。
CSS弹性布局 | w3.org/TR/css3-flexbox CSS布局中一个重要的新工具，弹性布局使我们能过轻松实现水平和垂直两个方向上元素的排列。
CSS栅格布局 | w3.org/TR/css3-grid-layout 一种将可用空间划分成列和行的新标准，我们这本书不详细介绍CSS栅格布局。
CSS多列布局 | w3.org/TR/css3-multicol 无需额外标记来生成伪列，并控制它的数量和宽度，以及列间距和分配器。
CSS形状 | w3.org/TR/css-shapes-1 使我们能够在CSS文本流周围设置形状。形状可以是几何图形、多边形或者长方形，也可以通过alpha通道图像来创建。
CSS 转换 | w3.org/TR/css3-transforms 匹配许多SVG提供的控件，CSS通过这个模块去控制元素的移动、旋转、缩放和倾斜。
CSS 过渡 | w3.org/TR/css3-transitions 和动画不同，CSS过渡使一个属性使用css来代替脚本，在两种状态间平滑过渡，例如在正常和划过之间改变超链接的颜色。
我在后面的章节展示CSS，你很快就会发现一个反复出现的主题——并不是所有的浏览器都支持用同一种方式来使用相同的属性，例如，Edge和Safari在Mac OS X和iOS上原生支持多列布局。
.content {
columns : 10rem;
}
但是，在其他浏览器上使用多列布局，需要使用厂商特定的前缀。例如，针对Chrome、Opera和安卓浏览器，需要使用-Webkit-前缀，Firefox需要-moz-前缀。因此，要实现跨浏览器的多列布局，意味着你要先写几遍带厂商前缀的属性，然后才是W3C约定的没有前缀的语法。
.content {
-moz-columns : 10rem;
-Webkit-columns : 10rem;
columns : 10rem;
}
如果你觉得写多个厂商前缀的属性太繁琐，Autoprefixer是一个方便的工具，它从浏览器普及率以及可用的CSS属性支持数据来解析CSS，然后添加厂商的前缀。
你也可以使用Lea Verou的-prefix-free，只要在页面的任何一个地方引入这个脚本，它就会在需要的地方，为每一个外链或内嵌的样式表，添加那些厂商的特定前缀。
你可以根据自己的开发环境，以多种方式使用Autoprefixer。那我呢？我把Autoprefixer集成到CodeKit中，然后每天用这个工具把Sass编译成CSS。
标准产生之前，编写带厂商前缀的属性列表是一件很麻烦的事。因此，2010年彼得·保罗·科赫（PPK）呼吁浏览器厂商停止使用它们。
“厂商前缀让开发人员的样式表变得累赘。为什么我们非得用好几个声明才获得一个单一的效果呢？兄弟们，让我们停止厂商前缀这个无稽之谈吧。真是够了。”
对此我持不同的意见。如果新属性没有厂商前缀，而在每个浏览器的显示效果各不相同，那么PPK又该抱怨了。
难道多写几个厂商前缀属性要花很多时间吗？什么？你以为做一个专业的开发人员很容易？那么我有一个妙计：我们不写盒模型hack，但事实上，没有任何人能做到。
厂商前缀起初只是浏览器厂商和CSS2规范用来警告我们的，而不是让我们真地去使用它们。
在现实中，厂商前缀通常还是必要的，它使得我们今天可以使用新的属性。在考虑到快速变化的网络前提下，建议还是使用厂商特定的前缀，以便安全地使用这些新属性。
“我们不建议您在实际应用中使用这些扩展，那些未实现的CSS属性最好是用来做测试或者尝试。”
但是，网络现在最需要的不是安全，它需要我们充分利用新的标准的技术，这样我们就可以创造一些神奇的事情。
在标准的制定过程中，属性保留通过破折号（-）或者下划线（_）来为特定的厂商添加前缀。使用这些在样式表本身技术上是无效的，但无效的样式表相对于我们现在使用CSS标准来说，代价很小。
毫无疑问，一般情况下我们是受益于厂商特定前缀的，因为在W3C将新的CSS属性确立标准之前很早的时候，它们就允许我们在测试，甚至是正式的代码中使用这些新的CSS属性。
正如任何实验性技术一样，当浏览器厂商认为某个CSS属性不会再改变时，你就可以不再加特定前缀了。
然而，我们常常在样式表中保留过时的前缀，即使在多年后它们已经不再必要。比如，我们仍然会在很多网站、创作工具和框架里看到border-radius这个已经过时的前缀。
在Chrome里，仍然支持属性前缀-Webkit-。谷歌实现了一个系统的标记，用户必须在自己的浏览器中启用这些实验性属性。这些标记可以让你尝试新的CSS属性，同时厂商还正在不断完善它。CSS形状就是这样一个例子，并没有厂商前缀来支持形状，用户必须启用实验性网络平台功能，以便看到它们。 
想在Chrome里看CSS形状或者其他实验性的特性的话，在Chrome的地址栏里输入chrome://flags/，然后在实验性平台商搜索并启用实验功能。
在我看来，让用户了解标记的存在这是非常罕见的。使得我们无法在生产代码中使用实验性的属性，虽然这有时在短期内造成了不便，但从长远来看，我们和我们的用户都将受益于这个实验性功能沙盒。
CSS3包含一系列独立的模块，这会让我们产生“等某个属性规范提出后再去使用这个属性”的想法。相反，通过使用厂商前缀，我们现在就可以使用这些属性，没必要等待。然而即使越来越多的新CSS属性被浏览器支持，浏览器和设备能力之间也会有一些差异。我们不能总是在用小技巧来消除这些差异，我们应该学会接受它们。
长久以来，人们先入为主地认为网站在不同浏览器中的显示效果应该是一致的，而这恰恰阻碍了技术的发展。
Dan Cederholm 说道：” 网站在不同浏览器上的呈现效果必须是一样的吗？“ “不！”他很肯定。当然，他是对的。
当我们使用Safari 这种表现能力强的浏览器的时候，我们能看到@font-face属性很好地呈现出来。
当我们使用Opera mini 这种表现度不够好的浏览器的时候，web font的属性是表现不出来的。不过无所谓，反正用户也不知道真实情况
那么关于体验呢？Dan 最爱的域名也回答了这个问题，“做网站需要在每个浏览器中都有相同的体验吗？（dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com）
当然不需要。
在这个网站上移动鼠标，实际的体验会根据你使用的浏览器而有所区别。
Dan 也许在挑选域名上很有天分，但他不是第一个提出这个问题的人。
“如果要在所有的平台上做到展现一致，我们将陷入无止尽的挣扎中。我们不可能让网站在PDA和 21 寸的显示器上看起来是一样的。也不可能让它和盲文描述是一致的。尽管这些都在变化，但仍然存在浏览器厂商对W3C标准的支持不一致的情况。不去管这些，就让他们看起来不一致吧。”
Rachel Andrew 在 2002 年的时候就写道：为何直到今天，咱们仍然为同样的问题而纠结争论，特别是在屏幕如此多样化的一个时代，从电视到手机、平板、甚至是高分辨率PC。当然有些人仍然认为当我们访问某个网站的时候，在每个浏览器上呈现出来的就应当是一样的，不过他们过一段时间就会分裂成两个阵营。
网站在每个浏览器上呈现不同的效果，这并不是一个新出现的观点，早在2000年，John Allsopp就开创性地提出了这个观点。
“每一个设计师都知道的打印媒介控件， 在Web 媒介中也同样需要，这是一个控制打印页的功能函数。我们应该拥抱变化，Web设计应该保持灵活性，不要那么多限制。 首先，我们应该接受老事物的衰退。”
在这本书第1版面世发行的几个月之前，Ethan Marcotte 很巧妙地提出了几个已经存在的方法和技术，包括流式删格、弹性媒体和媒体查询，详见《移动优先与响应式Web设计》 （http://www.epubit.com.cn/book/details/1649）。
五年后，响应式Web设计已经逐步成为网页设计的标准方法，这也是网页设计的标志性改变。它帮助设计者应对不断变化的局面，响应式设计也说服我们的老板和客户们：因为它能够解决浏览器和设备多样性带来的问题。
许多组织保留着哪些浏览器支持他们的网站的数据矩阵。如今，众多浏览器和设备厂商激烈斗争，他们中的大厂重新定义了支持的含义（像英国政府数字化服务描述的那样）：内容正确显示，关键功能良好运行。
对于英国政府数字化服务而言，人民群众对在 GOV.UK 上获取内容和信息吐槽不断，所以他们测试了使用率在2%以上的每一款浏览器。 不像其他组织有专门的质量管控团队，或者市场部门专注于他们的网站细节，使得在每个浏览器上的每一个像素都是完美的。所以他们明白了：
“不是所有的浏览器对网页都按照同样的方式渲染，它们在使用CSS、HTML和JavaScript 方面有不一样的地方。”
接受“并不是所有浏览器对网站的渲染方式都是一样的“这个观念，将会让我们能够抛弃像素级设计还原，专注于为每个浏览器提供恰当的体验。
BBC也认同像素级完美渲染的优先级，不能凌驾于内容可读性之上。 它的浏览器支持分为三个级别 。
他们接受在这些支持级别间小的变化，甚至接受使用新兴的技术，只要他们在用户访问基本内容或功能上不妥协。
“使用新技术去支持新的浏览器特性，这并没有错，但是必须保证用户能访问你的基本内容。”
BBC 并没有定义新技术和新的原则。 他们没有考虑一系列的浏览器支持问题，而是思考做出什么样的设计能够影响他们的用户。
考虑到这些特性可以开发出一个个的小功能，这带给我的感受要比浏览器分级要好得多。啰嗦一句，当被客户问起我们支持哪些浏览器时，我想改一下问题：因为我们要么不支持浏览器，要么不支持他们。
当浏览器没有实现一个新兴的特性的时候，不要完全地对它进行分级或者排斥。相同的浏览器对不同的新特性会有非常棒的支持。例如，safari 已经完全实现了弹性布局，但是只部分支持多列布局。我们应该根据具体情况来选择使用新特性，而不是直接给浏览器分级。
caniuse.com并不是唯一的浏览器特性支持程度的查询工具，包括像 Autoprefixer 这样的编译工具，一样可以帮助我们来完成这样的工作。
有些时候，设计元素很重要，我们需要让每个人看到的或体验到的是一致的。 一个好的例子就是：一个公司的标志logo， 这是客户想让所有人看到的，logo的颜色，logo的字形。 当然还有很多没那么重要的设计元素，需要区别对待。
考虑到特殊属性的影响，那么问题的关键就是如何保证设计的保真度。在实践中，当我们把一个元素添加到设计中时，我们考虑的是如何让更多的人，超越一系列的浏览器，所见或所感是一致的。
例如，Web 字体有多重要？ 在某些场景下，字体的选择对公司标志的重要性，与内容的可读性是一样的。
多列布局怎么样？用CSS渲染？ 它们重要到需要每个人都得看到？或者我们可以允许它们优雅降级？或者更牛的，设计一个替代品出来？现在来考虑一下圆角、渐变和透明度，它们对你的设计保真度到底有多重要？
在我从事Web工作之前，我曾在使用广角摄像机方面受过专业的训练，这些电影摄像机的特点是利用摇摆和倾斜运动，在图像中创造一个清晰的画面。
在摄影中，即使是最好的镜头也不能把光线聚在一个点上。取而代之的是，镜片将光线聚于一个点或者圆上。尽管这些圆很小，但它们仍有尺寸，这就是“弥散圆”。
弥散圆越大，照出来的照片会越不清晰，反之亦然。这些是高级摄影技术的基础，没有照片有完美的聚光，也无法做到真正的锐利，相反，照片只能是尽可能清晰。
虽然模块化和原子化设计被很多人采用，有时候客户还是希望我们能用Photoshop来演示如何完成网站或者应用程序的外观设计。
这些图像将包括每一个设计元素：品牌、颜色、各种形式的排版、背景图、边框和渐变。我们可以认为这就是高保真、清晰的设计。
但这些元素对设计完整性有多重要？一个特殊的字体对于一个品牌的用户体验是否至关重要？背景混合有多重要？列是真的需要吗？
这些决定将确定元素应该怎样跨浏览器和设备，具备不同的功能。我们致力于在他们之间达成一致，为了帮助做出这些决定，我们可以从弥散圆的原则中学习。
字体的选择对于设计的完整性有多重要？左侧：使用具有设计特色的Web字体，右侧：使用系统字体。
用三个同心圆来表示比较直观。
最里面的环应该包含设计元素，这是最核心的。如果布局和排版必须保持一致，将它们放在这个圆中。
在中间的圆中，放置重要的元素，但不是至关重要的，这是个人的设计经验之谈。举个文本的例子，文本被放置在CSS创建的列中，对于支持多列布局的浏览器，浏览器自动渲染列，对于不支持的浏览器，我们需要调整字体来适应没有列这种情况。
一些公司有质量管控团队，他们确保品牌的每个像素都是完美的，浏览器的差异化体现对他们来说有损于品牌形象，这被认为不完善的。
这些团队的品牌价值理念，不应该还停留在跨浏览器的完美表现和保持各种设备的功能完整性。这些现在或许没改变，但迟早会到来的。
我们应该向老板保证，差异化会提升我们的品牌，因为我们能精确地调整用户体验。差异化为我们创造了机会，我们应该接受它。
在Stuff & Nonsense工作很幸运， 我们的客户很懂技术，他们很尊重我们的工作，他们认为我们的时间和他们的钱应该花在创造性的响应式设计上，而不是浪费在高保真还原上。 但并不是世界上所有的客户都像他们这样。
一些人对改变浏览器和设备的适应性知之甚少，我们怎么样让他们理解“不必让每个浏览器的呈现效果必须一样？ ”我经常听说，那是前端工程师应该考虑的事情。对此，我非常反对。 我们的工作不是教育用户，而是设计、创造不可思议的网站。
如果客户提出一些棘手的问题怎么办，比如“为什么网站在不同的浏览器或者不同的设备上呈现的不一样？”你要向他解释： 这和裁缝做衣服一样，根据不同浏览器对属性的支持程度以及设备不同的尺寸，量体裁衣，这样才能合身。这样会对客户产生积极的影响，而不是让他们以为这是缺陷。
如果你和一个传统厂商合作，比如大商业公司、政府部门或者学校，你怎么样向他们表达你的观念：你们公司的网站是可接受的，反应良好的，甚至是专业的呢？
解释这些问题，远比五年前的时候简单多了。那时候，绝大部分人还使用PC，不同浏览器的差别非常难以理解。现在的情况好多了，大家使用的设备的多样性也比PC 时代多多了。
移动端浏览器使用情况，2015年2月至6月。
现实是，互联网已经改变了，我们的工作、我们的客户必须改变观念，打破以往的“一个尺寸适配所有”的方式。 没有两个浏览器是完全相同，我们应该致力于开创新技术，摒弃“一个网站在所有的地方看起来都一样”的观念。
固执坚守以前的这种想法，将会持续地浪费我们、客户和老板的时间与金钱。这也将阻止我们拥抱新变化。为了使这种改变成为可能，我们应该解释道，这种变化不是缺陷，而是一种新的可能，通过响应式设计将提升品牌体验。
在过去的五年里，可以很明显地看到Web的巨大变化以及我们所做的努力。随着响应式Web设计的发展，我们的设计流程也发生了根本的变化。虽然我们的设计方法并不适合每一个人，但它已经被证明是成功的，因此在本章中，我将解释我们的流程。
我做Web工作之前，一直被各个公司的风格指南和品牌呈现方式所吸引。我喜欢看到多种多样的相似组件的外观，尤其是喜欢看排版定稿文档。有时候，虽然在工作中我会收到公司的品牌风格指南，但我仍然会想办法在指导原则的范围内加入自己的想法。
传统的风格指南覆盖了各种各样的媒体，包括包装、印刷和网络，然而这对Web设计师来说并不总是有益的。例如，我曾经参与的汇丰银行的项目。此项目全面的指南规定了产品名称——比如预收账款、高级账户和私人银行等——的字号永远不应该比银行名称更大。这条规定使得当产品被挤进只有80像素的网站横幅广告中时，名称可读性将变得很差。
Houden手袋品牌风格指南。
多年来，我并没有满足于向客户展示静态设计稿。这些使用Photoshop或Sketch软件制作出的静态视觉，无法证明网站中设计的重要性。客户会期望最终的网站是冻结的图像的副本，事情显然不会是样。最重要的是，他们在谈话中对于设计手段所知甚少，而且很少能够对具体问题进行专注的、富有成效的讨论。
客户在看静态视觉时，往往容易分心。我可能需要讨论关于排版的问题，但客户却希望logo再大些；我可能想要谈论一下搜索将如何发挥作用，但他们却纠结于一张过时的产品照片。客户没有抓住重点，因为我们所讨论的静态视觉也没有重点。
houden手袋的关键网页设计。
过去我给客户展示静态视觉的时候，他们有时会说：“我不确定这个设计的效果。”这令人非常沮丧，尤其是我们花了几个小时对他们的设计进行了详细的再现。当我想得更深一些的时候，我发现他们所评论的往往不是重要的设计细节，不是我们选择的字体或排版方式，也不是我们使用的色彩、线条、边框或底纹。
当我们进一步询问客户，他们可能会说：“侧边栏应该是在左边，不是在右边。”换句话说，他们在谈论布局，但却站在整体设计的角度来表达他们的批评。为什么我感到惊讶？我期望什么？毕竟，我已经向他们展示了把各个重要部分混合在一起的设计稿。
我知道必须有一个更有效的方法来展示设计，并让客户专注于我需要讨论的方面。随着时间的推移，我的工作室已经建立了一种方式来做这件事情。最重要的是，我们开始展示我所说的设计风格，然后设计从布局分离出来的元组件。
查看“atmosphere”这个单词，字典会告诉你它代表“弥漫的色调、一个地方、情况的氛围，或创造性的工作”。在响应式网页设计的背景下，我觉得设计风格与布局截然不同，包括颜色、字体和纹理。我们要打破传统。
我们用色彩来营造风格，并唤起一个人在使用网站或APP时的情绪。作为交互的一部分，我们还要突出交互的行为；例如“我能点击吗？”“我已经点击了什么？”“点击之后有什么潜在危险？”
设计的个性化相当一部分取决于我们选择的字体，以及如何把行高、字号、粗细和周围的空白结合起来使用。
纹理可以是像纸张、石头或木头的拟物化纹理，但也并不一定是这样。在设计风格里，纹理指的是细节，包括边框样式、阴影以及盒子模型或其他元素的形状。
让我们看一个设计感十足的网站：2015年的dConstruct会议网站。你认为是什么让它的视觉风格如此有特色？
此网页由Paddy Donnelly 设计，由Graham Smith建立，会议组织者为Clearleft。
当然，你可能第一眼就被本次会议主题“设计未来”（VISION OF THE FUTURE）中的特色插图所吸引，但也有其他方面让这个设计看起来个性十足。
为什么我要强调2015年dConstruct会议呢？在不同尺寸的任何设备上访问这个网站，看起来都是一样的。当然，页面的排版会随着设备的尺寸变化，但是网页的整体设计风格应该保持一致，不论是在手机、平板电脑还是在PC上访问。
自2005年以来，dConstruct主办方在保持会议网站、回顾十年的设计工作以及如何确定一个网站的设计风格方面做了出色的工作。
2014年，dConstruct设计风格完全不同，它采用了扁平化设计和简单的配色。选择的字体是PT Sans，无衬线字体。与当年的主题“生活与网络”文字框周围的鲜明线条非常匹配。
2013年和之前的dConstruct网页设计都有着完全不同的设计风格，但是每年的设计也有共同之处。
当你仔细观察它们的颜色、字体和纹理时，设计的每一个部分都有着独一无二的个性，设计风格被跨终端地呈现出来。
如果说自适应设计已经告诉了我们什么，那就是我们应该承认，配色、纹理背景、边框和排版设计应该跨越屏幕尺寸保持自己的特点。换言之，设计风格不应该受布局的限制。
我们注意到，当我们开始用令人着迷的风格指南去设计并呈现我们的作品时，我们与客户的沟通效率将得到很大的改善。尽管风格风格指南几经迭代，当一个新形式的Web风格指南流行流行起来的时候，我们仍然饶有兴致。
人们在媒体上维护一个组织的品牌，需要风格指南或品牌准则来保持品牌资产、安置和处理方法的一致性。这些指南通常从描述品牌的个性和价值观开始。Jamie Oliver是这样描述他的Fresh Retail Ventures品牌个性的。
“诚实并具有挑战性——直接、豁达、坦率；充满激情和鼓舞——对食物充满兴趣和爱，健康的生活方式；平易近人和乐趣——朴实无华、方便、充满乐趣，鼓励大家一展身手。”
大多数风格指南提供了一些logo使用或禁用示例，它们也给出了字体的使用规则，并应该让你对如何使用颜色和如何处理图像不会心存疑惑。Jamie Oliver的风格指南甚至说明了“Jamie期望所有的照片中都是新鲜的熟食，并且是在自然光线下拍摄的。”
Fresh Retail Ventures有一套严格的品牌设计规范，涵盖了广泛的品牌原则，例如包装设计，甚至语气。
可惜的是，我常常发现，品牌标识指南很少恰当地应用到Web设计上。有些指南会强迫我使用在色卡上看起来很棒、但在屏幕上看起来很不舒服的颜色。还有些情况下，特定字体不能作为网页字体，如果把它们用在网页上，会让人阅读起来很不舒适。经验告诉我，我们再做Web设计时，品牌设计规范只能作为参考，而不是标准。我们需要的是可以具体应用到网上的风格指南。
要清楚地说明这个问题，我认为最好举个例子。英国有个伦敦国王学院医院NHS（National Health Service，英国医疗服务体系）信托基金会，作为英国国民健康服务的一部分，意味着信托基金会的出版物必须参考NHS的品牌设计规范。
由于国王学院医院是一个独立的组织，其网站不必严格遵守NHS品牌设计规范。我们为其做了一个设计，体现出了基金会的价值，而不是NHS的价值。尽管NHS品牌设计规范给了我们一个起点，但是我们还需要一个适用于国王学院医院网站的风格指南。
品牌标识指南往往以PDF格式提供，但响应式的HTML、CSS和JavaScript，是更佳的Web设计风格指南媒介。相较风格指南文档，我们的Web设计风格指南，已经成为了一个工具，而不是纯粹记录设计风格的地方。
NHS品牌设计规范是一套全面的设计规则，涵盖了logo、字体（包括FRUTIGER的几个权重）的使用，以及如何使用照片和插图。在国王学院医院的项目中，某人设计了一套综合性的Web风格指南。
组件是我们开发的模板中的块元素，我们可以通过调整这些模板来制作页面。我们的设计风格，就是伴随着设计这些独的组件，并将它们建设成为模式库而发展的。
在过去的几年里，有些人创建了组件库。其中一些组件库已经被广泛引用，包括BBC、英国政府、MailChimp和星巴克的组件库。
英国政府服务设计手册，可以帮助他们的设计师和开发人员，实现GOV.UK网站的各个部分，并保持外观一致。
Brad Frost提出的原子化设计已经成为了响应式设计的代名词。Brad第一次讨论原子化设计是在2013年，他写道：
“最近，我一直对接口的组成，以及如何通过更有条理的方式来构造设计系统很感兴趣。”
Brad将原子化设计描述为“用于构建网页设计系统的方法。”这个方法由工具和模式库来创建原子化设计系统。
Brad接着描述了他的原子设计系统，是如何由原子、分子、组件、模板和页面组成的。
然而，并不是每个人都认同原子化的设计方式。Mark Boulton就写出了他的顾虑，我不得不同意他的说法。
“一致性和效率是要付出代价的。这个代价就是设计，是人类对从无到有创造作品的感觉。我描述的不是设计过程。它就像一个制造蛋糕的机器，生产出大量相同的蛋糕。虽然裹着不同的糖衣，但它们的味道都是一样的。”
当你单独地设计各个部分，那么往往很难知道它们是否能够融为一体。
做得好，组件库可能会成为非常有用的资源。Salesforce的闪电设计系统是最好的资源之一（Salesforce成立于1999年3月，是一家客户关系管理(CRM) 软件服务提供商） 。
如果人们不能一眼全览设计的全部，人们很容易感觉到设计不连贯，缺乏连通性。而且想要摆脱组件库提供的默认样式也将变得更加困难。你只需要看看基于Bootstrap和Foundation的成千上万相似网页就能够意识到了。
基于组件的方法使得设计初期的工作更高效。我们能够更快地原型化组件，与使用Photoshop和Sketch软件设计一套完整的页面相比，我们可以用更少的时间将它变成响应式模板。我们的项目会运行得更平稳，也将可以进行更专注的沟通，并且能够减少与客户的误会。
我们已经意识到，开发组件仅仅是工作的一部分，我们需要一套工具，包括一些也许很令人惊讶的静态视觉效果，以及一个灵活的工作环境。
我们发现，当使用基于组件的方法构建网页时，为了保证设计的原创性，我们需要保持设计过程轻快而简约。在设计模式库或风格指南时，很容易做得过头儿，所以我们用最简单的HTML、CSS和JavaScript建立自己的Web设计风格指南工具包。
为了避免复杂性，我们把设计风格和组件具化到一个页面，这让我们在通过Photoshop和Sketch验证想法时，可以尽可能地自由。
我们已经做了初步的风格指南，并可以在Github上访问。我们希望大家可以使用它，以及贡献想法来改进它。
为了保证Web设计风格指南的易用性，我们把风格分为以下几种。
我们这里只列出了启动项目所需的样式指南，如果有需要，你也可以轻松地为新组件添加样式。
建立一个能用于多个项目的风格指南工具包，这通常很诱人，因为其中的许多组件（如手风琴效果、按钮或选项卡）可能会在某天派上用场。我们应该警惕：当我们把并不需要的组件增加进来时时，工具包很快就会变得臃肿。
目前有数十种模式库和框架可供我们选择，它们提供了大量的组件。例如，Bourbon，这个Sass库包含了Bitters和Refills这两个实用的HTML、CSS和JavaScript模式。这些组件对于实现快速原型设计非常有用，但在你把所有的这些都一股脑地推到Web设计风格指南里之前，请三思而行。每增加一个额外的组件，就意味着更复杂，以及需要维护更多的代码，所以设计风格指南里应该只包括你需要的那些，对于项目中并不需要的部分要毅然丢掉。
像Bootstrap和Foundation这种前端框架，可能非常适合那些需要现成的栅格和主题化的系统的人。但开发者的需求与那些用HTML和CSS工作的设计师不同。Bootstrap和Foundation功能很强大，但是设计师根本不需要它们，哪怕只是一小部分。
我们将通过使用自己需要的部分，来建立Web设计风格指南。如果有需要，再在这个基础上进行扩展，而不是依靠框架。我们将从颜色开始，添加排版，然后是通用组件，包括字体。在将一切融合在一起创造组件之前，我们将包括常见的HTML元素。
我们必须时刻谨记让事情变得简单，记住我们正在做的是一个创造性的工具，而不是开发环境。这并不意味着我们不能在合适的时候，去充分使用开发者工具，所以，如果我们习惯于把样式表样式表拆分为Sass片段，尽管放手去做吧。只要记住，最重要的是我们在做的设计，而不是工具的复杂性。
并不是每个设计师都会编写代码，有些设计师专注于平面设计、排版和配色，而且做得很棒。尽管我觉得掌握HTML和CSS对于Web设计师非常重要，但设计师并不需要知道如何写HTML或CSS代码，哪怕一行。
也就是说，设计师应了解HTML和CSS这些广泛应用的现代Web设计工具。我认为，甚至让设计师参与设计这些工具更加重要。这样，他们就会知道如何使用这些工具，而不需要太多的技术知识。
制作工具，是一个让设计师和开发人员一起工作的好机会。毕竟，这些工具的目的是使协作更加容易。做得好的话，他们也可以减少摩擦、消除误解。
我们花时间打造的Web设计风格指南，不仅是一款实用的内部工具，还可以用于为客户做演示。
我们发现，Web设计风格指南不仅仅在提高设计师和开发者协同工作方面发挥了作用，它还帮助我们与客户更紧密地合作。我们意识到，客户使用我们的工具包来向别人演示工作，所以我们在工具包中加入了客户的VI和专案信息，以令它更真实。此外，我们还是用真实内容片段代替了千篇一律的占位符。
由于Web设计风格指南简明易懂，客户也喜欢在公司中分享它。人们通常会在多种设备上来查看我们的工作成果，这意味着我们会得到更好的反馈。我相信，我们的工作会因此而改善。
在过去的五年里，我们的工作、流程和工具都发生了翻天覆地的变化。我们已经学会了如何去应对响应式Web设计的需求，还学会了利用Web设计风格指南来设计网页风格和元素。在下一章，我们将从排版开始，构建一个新的网页设计风格指南。
当你走进房间，两个人正在为一件事争论，而你恰好知道答案，那么就会产生一种不好的氛围。一场精彩的音乐会或者足球比赛中，也会有令人难以置信的气氛。这往往很难描述，难以确定。这就是你感受到的。在设计中，气氛包括从布局中分离出来的颜色、字体和纹理。在本章中，我们将探讨气氛的概念以及学习如何设计它。
当人们看一个设计稿时，经常把焦点放在色彩鲜艳的图形和照片上，但是一个好的设计可能是因为选择了一款个性的字体。这就是为什么我们需要制定Web设计风格指南，我们在客户说一些很外行的话的时候就会用到它。我们首先关注排版元素：标题、段落、各种列表、引用、表单和表格文本，以及其他元素。
当我们设计版式时，通常会平衡个性和可读性。偶尔，我们会发现这两个属性融合于一个字体上，而有时需要组合使用两种字体才行。一种字体作为主要字体，而另一种字体则体现个性的一面。在工作中，我们为选择合适的字体花了大量的时间。
这种HTML字体元素集合的形式并不罕见，Jeremy Keith的Pattern Primer和Bourbin Bitter也和我们的很类似，你还会发现很多框架都采用这种方法。
在SETM Learning的设计项目中，我们采用了高度灵活的Bliss字体。在整个网站中，我们使用了它的多种风格和粗细。
在国王学院医院的项目中，我们使用了Aktiv Grotest和Lexia这两种字体，它们都来自字体设计公司Dalton Maag。
选择字体只是排版过程中的一部分，在响应式Web设计时，我们需要让版式在诸多不同类型的屏幕上都清晰且可读。这不仅意味着要兼顾不同的屏幕尺寸，同时还要确保排版在低分辨率和高分辨率上显示得一样好。
在过去，我们花了大量的时间和心血使用Photoshop或者Sketch来打磨版式细节。今天，要想实现一个渲染准确的响应式版式，不能再依赖一款图像处理工具了。我们需要使用CSS来设计版面，然后使用HTML在不同设备的浏览器上测试。
我们把这种方法叫做活字校样。这些HTML和CSS文件只包含标题和段落元素。
活字校样不仅简单，而且易用。它们帮助我们和客户更好地协同工作，来设计出最好的排版。在协作设计过程中，我们仔细考虑适当的字号，并请客户在他们携带的设备上进行测试，同时鼓励他们邀请其他同事一起参与。
这里有一个案例：在国王学院医院的项目中，我们担心国家卫生服务的标注字体（Frutiger 45)在小屏幕上以较小字号显示时可能会令不易识别。因此，我们寻找了很多与Frutiger 45外观相近的开源字体，并测试了几种备选方案，最后确定使用Dalton Maag的Aktiv Grotest字体。
我们采用了两种活字校样，它们帮助我们在字体间做决定。第一个包含Frutiger 45,另一个是Aktiv Grotest。在我们客户使用的几个设备上并排显示来测试了两者的可读性，这帮助我们迅速做出判断，而且可能比我们看静态视觉效果更加准确。
就几分钟，国王学院医院的团队就能选择Frutiger（左边）或Aktiv Grotest（右）作为他们新设计的字体。
无论面对什么项目，遇到的第一个挑战就是为特定类型的设备选择合适的字号。我们使用活字校样来帮助决定不同尺寸屏幕上的最小或最大字号。使用什么具体的设备并不重要，确切的尺寸、型号或操作系统也不重要，它们的比例和特征才是最重要的。我们的基本字号由这些设备类型来决定。
显然，我们喜欢Apple产品，但如果你拥有其他相似类型的智能手机、平板电脑和个人电脑，使用活字校样也会很有效。
我们先看小屏幕上的段落，把能看得舒服的最小字号设置为最小字体。12px看起来太小，是因为我们的脸没有贴近设备屏幕？，那么13px或14px看起来会舒服一些吗？
相对于em或rem单位，客户更容易理解px，即像素， 因此我们以px为单位来设置文本字号。当然，在这个过程中，我们会把字体转换为弹性元素。
然后，将同样大小的文字段落放到大屏幕上来看。这时观看距离会对效果有所影响，我们的眼睛通常会离大屏幕远一些，所以需要看一下字号是否仍然适合，如果不适合，我们还要增大字号来适应更远的观看距离。通过这种方式，我们可以快速为各种类型的设备选择最合适的字号。
活字校样是一种简单的方法，它能够帮助我们为每种类型的设备的标题设置最大的字号。
使用相同的方法，还可以为标题和其他元素确定合适的字号。大标题使设计看起来更引人注目，然而它们更加适合大屏幕；小屏幕上的空间有限，每行只能显示几个词，因此需要谨慎地设置字号，不然看起来很不舒服。我们首先为小屏幕选定合适的标题字号，然后在不同的设备类型上测试。注意观察变化，一直到我们所能测试的最大屏幕。
对于按钮上的小文字、导航和页脚，使用相同的方法，都是先从最小的屏幕开始。
现在活字校样能让我们快速的确定段落排版最合适的字号，但在以前，我们可能需要打开Photoshop或Sketch。在将样式添加到网页设计风格指南之前，通过我们会通过CSS媒体查询来匹配我们的设备尺寸，这种方式经常帮助测试我们研究的结果。
我们先使用媒体查询测试了排版，下一步在与客户合作的过程中，我们会展开非正式的讨论。首先把活字校样放到不同类型的设备上，然后让客户来确认排版。我们发现，让客户参与决策有几个好处，他们更容易确认字号，因为我们鼓励客户携带自己的设备，这样我们就可以在自己手头没有的设备上测试这些排版。
印刷颜色不是指文本的颜色，而是页面上的文本块的密度。选择合适的密度不仅对设计外观很重要，同时对可读性也很重要，尤其是在响应式Web设计中，它特别有用。
有多种因素会影响印刷颜色：字体、字母间的间隔（在CSS中，我们称之为字母间距letter-spacing，在其他设计领域称为tracking），以及文本行之间的空间（在样式表里，我们称之为行高line-height，但在其他领域是指一些非常相似的行距)。
下面看看这三种因素在小屏幕上的截图 。
仔细观察这个例子，你应该能看到中间的图会显得比较暗，即使它使用了与其他设备一样的尺寸和颜色。因为我们选择了某种字体，这种字体使设计看起来更黑。
再次使用这个例子，为了让印刷颜色变得更加明亮，我增加了行高line-height。这样就直接影响了排版的外观。
这就是告诉我们，设置响应式断点的时候，需要密切关注行高line-height是如何影响排版颜色和可读性的，这和我们关注的字号一样重要。
根据经验，当文本的宽度变长时，我们应该增加行高line-height，如在不同尺寸的设备上显示，或者在相同设备的竖屏和横屏旋转。然而，通常设计师只对body元素设置一次行高line-height，而忽略调整屏幕宽度和文本长度增加的情况。我们应该不断调整行高line-height，在响应式断点和活字校样时就开始，在更宽的列和更大的屏幕上，增加文本的行高line-height。
我将跨响应式断点调整行高的过程称为比例优先（proportional leading）。我在2010年7月时第一次提出了这个概念。
随着时间的推移，高分辨率Retina屏幕变得越来越大，从iPhone 4，到iPad，然后是MacBook，最后到iMac。可是，不是每个人都那么幸运地拥有一块高分辨率显示屏。因此，设计师和开发者必须考虑在低分辨率或高分辨下，网页如何渲染。
活字较样再次成为检查字体跨屏幕分辨率的一种好方式。选择并使用一款时髦的细字体之后，必须确保它以低分辨率或高分辨率渲染时都能很好地呈现。
当以低分辨率渲染较细的文字时（左），我们可以通过给同一款字体加粗来修正它（右）。
在Web设计风格指南里，颜色是设计规范的另一个方面。用户访问网站或使用APP时，颜色可以塑造氛围，唤起用户的情绪反应。我们可以使用颜色来向用户传达交互意图，比如用户可以做、不可以做或者不应该做的事情。下面总结一下网站或APP的交互元素。
active、hover和visited状态。disabled、active和hover状态。我们可以用色彩来强调特定类型的内容，例如给这些内容添加背景和边框。
在设计时，颜色可以让我们通过设计来向用户传达信息，例如“可以点击什么？不能点击什么？已经点击什么？应该谨慎地点击什么?”
依靠Web设计风格指南，就可以恰到好处地选择这些颜色。与静态视觉方案相比，使用风格指南能让我们更加系统地考虑如何使用颜色。这对网站或APP用户非常重要，,因为他们会发现我们的设计非常简单易用。
一些客户在一个项目里带来自己的颜色集合，通常是品牌设计规范方案的形式。其他时候他们可能只有那个使用在他们logo上的单一的颜色，我们的工作就是创建一个调色板的颜色来搭配它。我希望每一个设计师都有自己的神奇的方法来创建颜色调色板。在我的工作室,我们一直在到处寻找色彩的灵感。我们已经开发了一些流程,它们帮助我们选择颜色,这些灵感来自于我们的客户，他们告诉我们有关他们的组织和他们的品牌的颜色。
优秀的设计并不需要一系列复杂的颜色，相反，相对简单的配色更容易将设计感体现出来。在我们的项目中，大部分设计只包括四种颜色甚至更少。我们把选择的颜色归类以下几种。
在国王学院医院的项目中，使用的主要颜色就来源于它现有品牌的颜色，这同时也能够反过来影响NHS的品牌设计规范。
再次强调，依靠Web设计风格指南，就可以恰到好处地选择这些颜色。它给参与项目的设计师和开发人员提供了一个参考，并可以帮助客户向公司的其他同事解释为何选择某种颜色。
Adobe Color CC(color.adobe.com)是一款非常有用的工具，可以用来创建调色板。在国王学院医院项目中，我们用它来定义次要色和强调色，然后在调色板中添加了两种中性颜色，而不是一种。
在几乎每一个项目的开始，我们都会问客户是如何看待他们自己的品牌的。我们称之为品牌个性采访,我们会这样问我们的客户：
“假设你的品牌是一个人。这个人可以是今天真实存在的，也可以是一个历史人物，还可以是某本书或某部电影中的虚构角色。事实上,他不一定是一个真实存在的人。”
这不是开玩笑，每次我都会拿摩根·弗里曼举例子。接下来我们问：
“你觉得品牌的哪个部分吸引你，以及这些特征和你想要如何表达你的品牌。”
人们常说，摩根·弗里曼迷人的地方在于他的可靠而且值得信赖。最后，我们要求人们描述出最能体现品牌的六个特征。与此同时，我们也会询问客户不想让品牌呈现出哪些特征。下面有一些特征是我们在访谈中使用的例子。
我们使用这些问题的答案来在图片库中寻求合适的颜色。当我们第一次与别人合作时，可以通过安排研讨会来解决这些品牌个性的问题。如果是为一个小团队（六人）服务，我们会与每个人讨论上述问题；对于更大的团队，最好让他们分成三人或四人小组分别讨论，在会议结束时，我们把大家聚在一起对比大家的想法。
2004年5月，我在博客上的第一篇文章里描述了一项技术——从一组核心颜色着手，创建拥有更多颜色的调色板。也就是我在前一节中介绍的，如主要色、次要色、中性色和强调色。
自2004年以来发生了很多变化，令人难以置信，但我仍然在使用这项技术，几乎在每一个项目中都会用到。它非常简单。
在STEM Learning公司的品牌设计规范中，四种颜色分别代表科学（Science）、技术（Technology）、工程（Engineering）和数学（Math）。在品牌设计规范下，我们设计了新网站，并提炼出了一个很酷的调色板，中性色和鲜艳色形成了很美的对比。
STEM Learning品牌设计规范中的四个生动的颜色不能满足我们的需要，所以我们使用可靠的技术来丰富调色板，增加更多微妙的颜色。这种技术可能比较老旧，但事实证明，我们创造的调色板恰到好处。*
事实上，许多设计师直到项目的后期才做颜色对比和可访问性测试， 这让我很为难。对我来说，色彩对比和可访问性不应该是测试工作，而是设计任务。所以我们需要在设计过程中关注它们。使用Web设计风格指南最大的好处是，我们更早地关注可访问性，然后花更多时间纠正潜在的问题。
当测试颜色的可访问性时，需要确保元素的背景色有足够的对比，并且里面有一些文本。我们可以改变对比度或选择互补颜色作为背景色和前景色。
在国王学院医院项目的早期，背景色和前景色的对比度不足。
幸运的是，我们在把颜色调色板交给客户之前，就测试了对比度，并调整了设计。
有一些很棒的工具可以帮助我们检查颜色组合的对比度，我个人最喜欢的是Lea Verou对比度检查器。这款工具简单便捷，适合所有人使用。
当我们创建设计风格指南时，纹理指的是修饰方面，有助于让设计富有个性。纹理包括边界样式、阴影和容器的形状。当然，纹理有时也可以包括拟物设计纹理。所以当你需要时，可以制作人造革和撕纸边缘的效果。
边框和间隔决定着纹理。我相信所有的网站设计中都包含了边框，它们可以是solid、double或者dashed形式。如果要设计一个复古的外观，我们甚至可以使用早起的CSS属性，如groove和ridge、inset和outset。
再进一步，我们还需要决定边框的宽度，以及这些边框的宽度是否统一。对于一个设计，我们可能希望所有边框一样宽；或者，我们可能会采用不同的宽度来体现立体感。
另一个问题是，如何使用各种分界线样式来创建层次结构。在文章内部的元素article之间，我们可以使用虚线边界；在文章之间，可以使用实线；紧密的双边框可以表达一个层次结构。
背景也会影响纹理。如何给内容区域阴影使用背景？我们会使用纯色？还是渐变？或者图案？
盒子的设计可以使用纹理。我们把盒子做成圆角还是直角？如果是圆角，那么四个角的半径都是相等的？或者将其中一个角设计得更圆，创造出不寻常的形状?
按钮的外观关乎纹理。我们想让按钮在屏幕上看起来像个真实的物理按键吗？如果想要实现这种拟物化效果，按钮的光影应该是怎样添加？渐变会使按钮看起来很光滑？使用阴影能够将按钮从背景中突出出来吗？我们要不要给它们使用背景或使它们透明？我们会跟随时尚，并添加细的轮廓和大写按钮文本吗？
我们如何对待内联图像？给它们添加细边框？添加白色粗边框来模拟宝丽来相片？图标采用什么风格？使用图形或手绘?
这些有关纹理的设计决策，能让你的设计独一无二，它或有趣、或敏感、或严肃、或专业，但对用户总是友好的。
为设计确定风格对于响应式Web设计是个优势，但它也有缺点。当我们分别关注风格和组件时，有时很难把它们形成一个统一的整体。
由于这个原因，设计很容易脱节，缺乏连通性。因此，我们需要基于一点来审视设计的方方面面，以防止上述情况的发生。
在浏览器里讨论设计和静态视觉效果，很容易使人陷入争论。事实上，代码和视觉效果缺一不可。HTML和CSS编辑器和图形工具是最有效的，我们应该使用它们。几乎在每个项目开始时，我们都会在纸上画草图，因为在早期表达想法，铅笔和纸绝对是最好的工具。
当确定了一个方向后，我们开始敲代码，在浏览器里尝试版式布局、原型交互元素和测试早期的设计。毫无疑问，HTML和CSS是这个阶段最好的工具。
在设计排版、色彩和纹理的过程中， 我们几乎完全在浏览器中使用HTML和CSS,因为我们知道它给我们最真实的结果。在设计方向之间转换时我们使用代码快速迭代,。当需要敏捷灵活时，我们发现代码和浏览器是目前为止最好的工具,。
我们喜欢在浏览器中使用HTML和CSS进行设计，但对于某些环节，Photoshop或Sketch工具更好用。说出来可能吓着你，我们经常创建静态视觉效果，有时甚至是完整的Web页面，因为我们希望看到设计的整体，而它可能只是一个标题。
我们会制作关键页面的视觉效果，也许是文章列表或一系列产品、博客或新闻条目，有时甚至是一个主页。因为我们发现，设计关键视觉效果，会让设计更加连贯。
与过去不同的是，我们不会制作出所有页面的视觉效果，那样做没有什么收获，甚至是白费功夫；此外，我们也不会设计小屏或中屏版本，而仅制作台式机版本，因为静态图像从来就不是用来解决响应式设计问题的工具。
当要添加一些额外的设计细节时，使用静态版本的设计依然有效。并且，如果想尝试添加微妙的轮廓、阴影或底纹时，无论你的代码功夫有娴熟，还是应该使用Photoshop或Sketch，它们是不可替代的。
这些小细节会带来很大的改变，可以很容易地将一个普通的设计变得更有趣。现在你可能会问：“哪些方面不能在浏览器中做呢?“事实上，答案是没有。然而图形化工具环境可以让我们远离HTML和CSS代码实现中的实际问题，有助于我们更清晰地关注视觉细节。
过去五年中，网站和APP设计规范发生了巨大的变化。就像我们设计的响应式网站，设计风格、开发组件已经成为一种越来越普遍的设计实践。我们设计色彩、字体和纹理，开发Web设计风格指南和样式库，并把它们制作成工具, 而不仅仅是一纸文档，这帮助我们更清楚地关注响应式断点的设计。
恰当、简洁的HTML能让用户获得绝佳的体验，但问题是，我们很难写出最优的页面代码。div、class、id这些都是HTML中非常规范的标签 ，那么问题到底出在哪里？除非你是一个代码洁癖患者，否则你的页面代码很容易变得乱糟糟的。不过别担心，我这就给你指明一条光明大道。
在这一部分，你将学习最新的语义化元素；探索革命性的微格式2；了解WAI-ARIA规则。所有这些，都会让你大幅减少对非语义元素和属性的依赖。做好准备，是时候修炼你的HTML功夫了。
每天早晨，我都例行公事般地喝咖啡、收邮件和刷Twitter。我在Instagram上浏览照片，查看屏幕截图，然后上传到Dribbble。我还使用DiggReader来阅读RSS订阅，然后在Swarm上看看附近的小伙伴。这些站点都与传统意义上的网站不同，它们更像是桌面软件，而不是Web应用。
Web应用已经变得越来越强大和复杂，但是标记语言与早期相比没什么变化。HTML以及后来更严格的XML、XHTML，这些是用来构建网页的工具，而不是构建应用的工具。所以HTML5应运而生——我们先来介绍一点历史知识。
在HTML4.0发布之后，W3C关闭了HTML工作组。HTML结束了。他们认为未来是属于XML的，而不是HTML。在2004年的时候，W3C举办了一场研讨会，几个浏览器大厂都参加了。他们考虑设计一款文档语言用来开发Web应用。
Mozilla和Opera给出了自己的建议，但是W3C忽略了他们......
目前W3C不打算为HTML和CSS的Web应用投入任何资源。
但在真实世界中，浏览器厂商才有决定权，而不是W3C这样的标准组织。因此，当W3C拒绝了厂商提出的建议后，这些厂商自己组建了一个WHATWG工作组。这是一个松散、非官方且开放的协作式工作组，其成员包括苹果、Google、Mozilla和Opera。微软最初没有加入这个组织。WHATWG称其规范为WebApplications1.0。
与此同时，W3C的工作也在继续，他们把重心放在了文档语言XHTML2上面。虽然他们雄心勃勃，然而没有这些浏览器大厂的支持，他们的命运是注定的。正如MarkPilgrim所说“赢家是顺应潮流的人。”
在Web标准的制定上，浏览器厂商握有重要的牌。各厂商都在不遗余力地支持HTML5，快速开发制定规范，结果呢？HTML不仅被广泛采用，而且成为了标准，即使W3C到2022年也不认可它。
我们是要等到那时才能使用HTML5？幸好我们没那么做，如果选择了等待，那我们就创造不出令人激动的网站和应用了。
有人肯定会问“如果规范变了，我是不是还得修改我的HTML？”是的。无论怎样我们都要改变。
HTML不会冰封，改写HTML5标记是其进化过程中的一部分。
HTML5建立在已有的标记之上，它不是一门新语言，而是在原有的基础之上加了一些强大的特性。学习HTML5不是很难，我们现在就开始吧。
从最简单的开始吧。首先用简短的HTML写一个文档类型的声明。
<!DOCTYPE html>没有版本号、没有语言、没有URI，只是一个普通的HTML。
文档类型doctype是不区分大小写的，所以也可以写为： <!doctypehtml>、<!DOCTYPEhtml>或者<!DoctypeHTML>。
你知道吗，最新版本的HTML甚至不需要写doctype，你甚至可以不声明它，页面仍然有效。但不建议这样做。
不仅doctype变短了，字符编码也变短了。下面是一个写在HTML里面的meta元素。
<meta charset="UTF-8">我们不需要指定每一个link上面的每个stylesheet值，我们可以简写成这样：
<link rel="stylesheet" href="Hardboiled.css">因为浏览器不需要知道，我们不必要包含text/javascript，我们可以简写成这样：
<script src="modernizr.js"></script>HTML不计较我们怎么写标记。是否大小写，是否大小写混用，是否忘记闭合标签，HTML都不介意。浏览器也不介意，所以按照自己的喜好来写吧。
HTML5引入了一组新的元素，提高了页面的构建能力。你的文档可能仍然充满了div——HTML4.01规范中描述其为“附加结构机制”——对相关内容进行语义分组。
<div class="branding"> […] </div>
<div class="nav"> […] </div>
<div class="content">
<div class="content_ _main"> […] </div>
<div class="content_ _sub"> […] </div>
</div>
<div class="footer"> […] </div>以上标签中的任何一个属性语义都是比较隐晦的，也不是机器可读的。在实践中，爬虫会认为you-dumb-mug和content__main毫无区别。
将来，添加id和class属性将只是简单地描述可视化布局，而不会承担语义化的任务。
我们可以替换一些语义更精确的结构元素来帮助减少对可视化的依赖。结果是，我们的可视化布局将会变得更简单。
2005年，Google调查了30亿的网页，从中找出设计师最常用的id和class属性。这些发现后来成为了HTML5的基本元素。
sectionarticleasideheaderfooternav这个列表并不全面，因为本书并不是一本HTML参考书。参考书我推荐Jeremy Keith的《HTML5+CSS3网页设计入门必读》。
挑选一个典型的Web页面的结构，我们就会发现div。这些元素组织起相关内容，帮助我们建立CSS布局。我们看一下一个老手构建的页面。
<div class="banner"> […] </div>
<div class="navigation"> […] </div>
<div class="content">
<div class="content_ _uk"> […] </div>
<div class="content_ _usa"> […] </div>
<div class="content_ _world"> […] </div>
</div>
<div class="footer"> […] </div>这样垒代码是非常有效的。然而，虽然我们能理解每个div代表了页面上的一小块，浏览器却无法将它们和任何匿名块级元素区分开。
相反，section元素将内容组织到精确的语义块而不是通用容器中。把它们当做文档中独立且清晰存在的一部分。在下一个例子中，sections将包含不同国家地区的新闻报道，每一篇报道与国家地区都是相关的。请注意，每一个部分都是独立的，所以我们将在每个部分中加入描述性标题。
如果有必要，我们可以添加id属性，以便通过片段标识符寻址。
http://hardboiledwebdesign.com#content_ _uk:如果你多年来关注我的作品，你会发现我一直痴迷于HTML的命名规则和尽量少写class。编写最简洁的HTML是我的信仰。
过去，我尽可能使用较短的class命名，比如我会像下面这样，使用CSS的属性选择器来替代class的显示声明。
a[title="Get Hardboiled"] {
border-bottom : 5px solid #ebf4f6; }我使用子选择器（配合>使用）直接定义元素子集的样式，在这个例子中，ul无序列表就是header元素的子集。
header > ul {
list-style-type : none;
display : flex; }当然，我使用了很多相邻兄弟选择器。这种选择器可能已不再安全，它会把样式规则作用在近邻指定元素后方的元素上。比如下面的例子会对H1一级标题后的header元素增加一个蓝色的边框。
h1 + header {
border-bottom : 5px solid #ebf4f6; }甚至有一次，我制作了一个完全没有包含任何类属性的页面，什么都没有。每每想到这里，就很同情那些不得不靠很多class来构建页面的开发人员。
在过去的几年里，我们公司参与了几个大项目，这让我意识到，良好的代码结构、HTML和CSS元素之间的关系，对于项目交付是很重要的。BEM语法或者命名公约的作用就在于此。
仔细看之前例子，你就会注意到，许多元素的属性值都有两条下划线或者俩个连字符。这些连字符和下划线是BEM系统的一部分，它们经常像下面这样使用。
.block用作高阶元素，包含了其他的内容和风格。例如在本书第一部分里，一个具有container的class里面将包含一些子元素，包含一些主内容和互补内容。这个container就是典型的BEM区块。
.block__element代表这个元素是我们的子容器。主内容和互补内容边界就是很好的例子。用两个带下划线的元素就能描述它们的边界：.container__main和.container__complementary。子元素或者特定的段落（如.container__lead）也可包含标题（如.container__heading）。
.block--modifier描述了对一个区块元素的改变。在本书网站的主页中，主容器是一个浅色背景，然而，一些属性改变了，它就编程了深色背景。我们可以通过有两个连字符的属性来做到，比如container--dark。
使用这个约定可以帮助精确定义不同元素之间的关系。开发人员可以通过检查HTML结构或者通过阅读我的样式表来理解。.container__main显然是容器的子元素。容器标题就是container__heading。开发人员不需要理解.container__dark的目的，因为BEM语法告诉他们，这是.container的一个标准替代。
使用BEM已经改变了我的工作，尽管我仍然追求简洁的HTML代码，但我可以为此牺牲一部分严谨的代码风格。
<section id="content_ _uk">
<h1>Stories from the UK</h1>
</section>
<section id="content_ _usa">
<h1>Stories from the USA</h1>
</section>
<section id="content_ _world">
<h1>Stories from around the world</h1>
</section>让我们继续增加一些文章来构建文档。
当我们为博客、在线杂志或新闻网站写稿时，我们就是在发布文章。在HTML中，每篇文章都是一个独立的故事，就算没有网页中的上下文，它也应该能被人们理解。这听起来类似于section，但有很大的差别。article代表了一个故事，可以独立存在，而section是页面中完整的一部分，它包含多个相关文章。
检查article标记是否运用得当的方法是：看其内容本身是否有意义。例如，将之导入iPad的Pocket应用里，看它是否还具备完整的意义。
如果你有iPad，使用Pocket是阅读文章的好方式。在Pocket里，内容是独立的，并且没有广告和导航等。Mac OSX和iOS中的Safari也提供类似的功能。
如果你仍然对section和article的区别有所困惑，Doctor BruceLawson的文章"HTML5 articles and sections: what's the difference?"可以供你参考。
让我们给本书归档页的大纲的每个部分各自添加一段文章。
<section id=“content_ _uk">
<h1>Stories from the UK</h1>
<article> […] </article>
<article> […] </article>
<article> […] </article>
</section>
<section id="content_ _usa">
<h1>Stories from the UK</h1>
<article> […] </article>
<article> […] </article>
<article> […] </article>
</section>
<section id="content_ _world">
<h1>Stories from around the world</h1>
<article> […] </article>
<article> […] </article>
<article> […] </article>
</section>section可以包含article，article也可以包含section。你想轻轻松松地学习新的HTML元素？不可能吧？
我来帮你梳理一下对article和section的困惑，那不是你的问题，在以下例子中，article元素中分为三个部分，每个都对应一个知名作家。
<article>
<sectionid="chandler">[...]</section>
<sectionid="hammett">[...]</section>
<sectionid="spillane">[...]</section>
</article>页面的标志区域或报头可以用header元素来描述，通常这些标题放在页面的顶端，当然也可以放在底部或者其他地方。我们用一个更合适的header元素来替换经典的banner。
<header>
<h1>It's Hardboiled</h1>
</header>我们可以在section或者article里面添加header元素，而且在页面里面可以有多个header。这意味着我们有多种使用header的方式：作为整页的标志；作为介绍section和article区域的引言，或者二者混合使用。
下面我们试试在article中加上“本书作者”的header描述。
<article>
<header>
<h1>Hardboiled authors</h1>
</header>
<section id="chandler">
<header>
<h1>Raymond Chandler</h1>
</header>
</section>
<section id="dashiell-hammett">
<header>
<h1>Dashiell Hammett</h1>
</header>
</section>
<section id="mickey-spillane">
<header>
<h1>Mickey Spillane</h1>
</header>
</section>
</article>这个规范将header元素描述成“导航辅助或组引导的容器”。让我们可以自由地包含搜索表单、时间日历组件。页面或者段落都将以此开始。
我在2004年对一些元素的使用情况进行过调研，Google也做过类似的调研，我们都发现：大多数设计师都会标注页脚，通常包含联系人和版权信息——这就是页脚。
在典型的HTML4.01和XHTML1.0文档中，页脚通常会是一个div并带有一个值为footer的class属性。
<div class="footer"> […] </div>我们甚至可以使用footer元素来替换蹩脚的div布局。
<footer>
<h3>It's Hardboiled</h3>
<small>Creative Commons Attribution-ShareAlike 4.0
International License.</small>
</footer>虽然它的名字叫做页脚，但我们没必要将它放在页面、section或者article的底部。事实上，在任何一个容器元素中都可以放一个。就像header一样，我们可以使用footer来定义任何section或article中的meta信息。在article内部，页脚应该包含作者信息或者发布时间。而section的页脚应该包含文章的更新时间或新文章的添加时间等相关信息。
<section id="spillane">
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarke on 20th Nov. 2015</small>
</footer>
</section>Mickey Spillane是一名多产的小说家，如果我们要写一篇关于他工作生活的传记，我们应该在传记里包含相关的信息，比如他的小说《My Gun Is Quick》。反而言之，如果我们要写这本书的书评，那我们应该捎带上作者简介。HTML5使用 aside 来定义这种类似的关系。
我们可以用aside来描述和文章相关，但对于理解文章又不是非常重要的内容。下面让我们写一段Mickey Spillane的简介，其中header包含了标题，footer包含作者名字，以及article的发布日期。
<article>
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarke on 20th Nov. 2015</small>
</footer>
<p>Frank Morrison Spillane, better known as Mickey Spillane,
was an author of crime novels…</p>
</article>像我喝的咖啡一样顺滑流畅，现在我们来添加一些aside，来包含《My Gun Is Quick》的信息。
<article>
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarke on 20th Nov. 2015</small>
</footer>
<p>Frank Morrison Spillane, better known as Mickey Spillane,
was an author of crime novels…</p>
<aside>
<h2>My Gun Is Quick</h2>
<p>Mickey Spillane’s second novel featuring private
investigator Mike Hammer.</p>
</aside>
</article>也许我们的页面包含其他小说作家的信息。对于我们的作者简介来说，这个容器内容不是特别相关，所以我们应该把aside置于文章之外。在这种情况下，我们也应该在section元素包裹article和aside、使其申明这两个是相关的。
<section>
<article>
<header>
<h1>Mickey Spillane</h1>
</header>
<footer>
<small>Published by Andy Clarkeon 20th Nov. 2015</small>
</footer>
<p>Frank Morrison Spillane，better known as Mickey Spillane，was an author of crime novels...</p>
<aside>
<h2>My Gun Is Quick</h2>
<p>Mickey Spillane's second novel featuring private
investigator Mike Hammer.</p>
</aside>
</article>
<aside>
<h2>Other crime fiction writers</h2>
<ul>
<li>Raymond Chandler</li>
<li>Dashiell Hammett</li>
<li>Jonathan Latimer</li>
</ul>
</aside>
</section>有了导航，浏览网站变得更加简单。当我们构建页面时，导航通常看起来是这样的。
<div class="nav—-main">
<ul>
<li><a href="about.html">What’s Hardboiled?</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="authors.html">Hardboiled Authors</a></li>
<li><a href="store.html">Classic Hardboiled</a></li>
</ul>
</div>我们已经习惯了使用列表标记导航，但我们还使用列表标记其他事情。那么问题来了，浏览器如何区分不同的列表？
好在我们现在有了nav元素，来实现页面上的一个或多个“主要导航块”。不是所有的链接或者链接区块都是页面主导航，所以我们应该保留nav元素，以便帮助人们快速区分出哪里才是页面导航
导航可能会包含跳转最重要页面的链接列表，它可能在header中，可能在侧边栏，也可能在footer中。接下来，我们将使用充满语义的nav元素，取代以前的div布局。
<nav>
<ul>
<li><a href="about.html">What’s Hardboiled?</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="authors.html">Hardboiled Authors</a></li>
<li><a href="store.html">Classic Hardboiled</a></li>
</ul>
</nav>当访客通过搜索来寻找内容时，我们在nav中添加一个搜索表单。如果我们包含跳转链接，这些也可以作为无障碍技术的主要导航区域。
我通常会在印刷品、图片、图表、简图中配上一些说明文字。与其纠结使用什么样的元素来做图注，不如直接使用figure和figcaption元素，就像下面这样。
<figure>
<img src="jury.jpg" alt="I, The Jury">
<figcaption>I, The Jury by Mickey Spillane</figcaption>
</figure>当我们需要注释一组元素时，我们可以嵌套多个图片、图表示意图，然后用一个figcaption来标记。
<figure>
<img src="jury.jpg" alt="I, The Jury">
<img src="gun.jpg" alt="My Gun is Quick">
<img src="vengeance.jpg" alt="Vengeance Is Mine!">
<figcaption>Books by Mickey Spillane</figcaption>
</figure>你可以想象，在HTML里写日期如此简单。
<footer>
<small>Published by Andy Clarke on 06/05/2015</small>
</footer>但问题是，软件很难知道这串数字是一个日期。另一方面，人们对相同的数字可能会有不同的解读，如果你来自英国，这些数字代表2015年5月6日，但如果你生活在美国，你可能认为它表示6月5日，2015年。
为了解决这个问题，time元素必须对人是可读的——不管是6may2015,还是May6th,2015——这些参数必须格式化。
<time>May 6th 2015</time>time元素是由两个版本的日期或日期/时间属性构成的。首先是一个人类可读的、自然语言的日期；第二个是名为datetime的机器可读属性，它遵从ISO标准日期格式：YYYY-MM-DDThh:mm:ss。年月日后跟着的是小时、分钟和秒（如果我们需要精确的话）。
<time datetime="2015-05-06">May 6th 2015</time>time元素有一段曲折的历史。在2011年首次引入HTML5中的时候，它曾遭HTML规范的抛弃，被一个更通用、且在我看来缺乏语义的data元素替代。好在当年晚些时候time元素又被加入到规范中，并增加了一些有用的额外功能。比如此前的datetime格式要求精确，而新支持的ISO标准格式则允许使用模糊日期。
<time datetime=”2015”> means the year 2015
<time datetime=”2015-05”> means May 2015
<time datetime=”05-06”> means 6th May (in any year)
<time datetime=”2015-W1”> means week 1 of 2015当需要描述一个事件持续多长时间时，可以使用datetime属性和前缀P。添加后缀D表示天、H表示小时、M表示分钟、S表示秒。如果你想标记为了买火车票排了一天队的话，像下面这样写就好了。
<time datetime="P 1 D">下一个事件持续了1天6小时10分钟30秒。发现了吗？额外的T（时间）前缀表示一个更为精确的时间。
<time datetime="PT 1D 6H 10M 30S">通过结合精确、结构化的日期格式，日期和时间得以借助自然语言来设定，同时实现了一个对于人类和机器都可读的通用格式。
哪种网站或APP将由一两个表单构成？无论你喜不喜欢，如果网站中没有表单，那着实让人难以接受。HTML5引入十多个input类型和属性，这令实现复杂的控制和功能——如滑块、日期选择器和客户端验证——变得更加简单。这些元素包括email、url、tel和search。不要担心老旧的浏览器，因为当浏览器无法理解这些input类型的时候，会自动降级为文本框。
email很多场景下都需要填写电邮地址，比如联系人表单、评论表单、注册、登记表单等。选择email的input类型，来表述这些email地址。
我们已经习惯了使用软键盘处理手头工作，如上图所示，iPad键盘已经包含了一个可以便捷输入email的设置键。
<input type="email">现在你可以使用各种各样的有趣的功能，比如检查电邮地址的有效性，以及是否包含@符号等。在一个email类型输入框中输入时，Safari会自动调出虚拟键盘，@符号很直观地出现在键盘下方。
url当我们使用URL类型的输入框时——为了帮助用户专注和精准的输入网址url——iOS软键盘会为此类型输入框提供斜杠/、句点以及.com这样的按键。
<input type="url">提升网站表单的体验，有助于让人们愿意完成输入。当使用url时，iPhone的键盘会自动在下方调取出.com按钮。
tel如果我们使用tel输入框，iOS会自动调出数字键盘。
<input type="tel">iOS做了很多细致且卓越的工作，以使键盘输入更加便捷。
search如果网站内容太多，我们就得使用搜索框来找到所需的内容。刚好有一个输入框表单类型可以用于搜索。
<input type="search">在iOS系统的Safari浏览器上，search输入框的边角更加圆润；而在Mac OS X系统的Safari浏览器上（在别的桌面浏览器上也同样），search和普通文本框的外观别无二致，直到我们与之交互。在Chrome、Safari和Opera这些浏览器上，搜索查询体验会更加便捷，它们会自动在搜索框内增加一个图标，当用户点击这个图标时，就会清除已经在搜索框内输入的内容。
通过添加一些小的额外属性，可以让你定制的输入框更有范儿。比如添加autosave属性，为其添加一个唯一值，在我们的例子中，我们写上"gethardboiled"，然后在Safari中奇迹出现了，搜索框中不仅会添加一个放大镜图标，而且在点击它的时候，会出现一个列表，其中是近期搜索过的关键词。无论页面是否刷新，这个列表都会保存。此外，可以使用results属性来控制记录多少个最近搜索的关键词，在下例中，我们的表单将保存最近搜索的10个关键词。
<input type="search" results="10" autosave="getHardboiled">search输入框在样式处理上简直是臭名昭著，而其结果列表的样式在不同浏览器下也是千差万别。所以我的建议是，把这些交给浏览器来处理，不必太过渲染输入框。
number如果我们使用number输入类型，iOS会自动调出一个只有数字的键盘。但在大多数桌面浏览器中，更有趣的事情发生了。Chrome，Firefox、Opera和Safari，在number输入框右侧增加了输入箭头或旋钮。按下这些箭头，或使用键盘上的方向键，或者使用鼠标滚轮向上或向下滚动，即可调整输入的号码。
<input type="number" steps="10">如果你并不需要这些箭头，你可以在Chrome、Firefox、Opera以及Safari中，使用一段非标准，但是却非常好用的CSS代码。
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance : textfield;
margin: 0; }这样一来，number的功能保持不变，人们仍然可以使用键盘的方向键或鼠标滚轮来调整数字。
当人们在航空公司、租车服务或酒店网站上选择日期的时候，总是要耗费极大的精力和时间。HTML的原生日期选择器将会让我们不再那么痛苦。
placeholder表单标签总会给人带来各种麻烦。我总想为没有标签文本的表单元素制作一个可视化提示。placeholder属性，会将提示信息添加到任何为空且失去焦点的input中；而不支持这个属性的浏览器会忽略这个提示文本。
<input type="search" title="Search this site"
placeholder="Search this site">label并不是必需的，当表单内容很简单的时候，它可以被标题或者明确的标题按钮所替代。
autofocus像大多数人一样，当我使用Google搜索的时候，光标会自动聚焦在搜索框内；而与很多普通人不同，作为设计师，我会注意这些小的体验改进。在过去，我们必须使用脚本才能达到这样的效果，但现在完全可以使用autofocus属性，来以原生的方式让浏览器帮助我们实现。不支持autofocus属性的浏览器将会自动忽略它:
<input type="search" autofocus>autocomplete使用autocomplete属性，可以以原生的方式实现自动补充的效果。
<input type="text" name="name" autocomplete="on">使用autocomplete的时候需要注意安全性，尤其在某些场景下最好不要使用，比如涉及到信用卡或其他财务信息的时候。
<input type="text" name="credit-card" autocomplete="off">list和数据列表datalist通常，帮助访客完成表单输入的最好方式，就是让他们回答问题、给出建议，或做出选择。我们来看下list属性，它包含一个datalist，在一个文本输入框上复合了一个select框，这样可以方便快捷地选择输入内容。
想象一下，当我们在表单中问访客最喜欢的侦探是谁时，为了帮助用户快速做出选择，可以在datalist里提供一些侦探的名字，然后给一个text类型的input添加一个list属性，并通过给紧邻的datalist设置相同的id，将二者联动起来。 。
<input type="text" list="detectives">
<datalist id="detectives">
<option value="Mike Hammer">Mike Hammer</option>
<option value="Sam Spade">Sam Spade</option>
<option value="Philip Marlowe">Philip Marlowe</option>
</datalist>
访客既可以自己输入，也可以从datalist中选择可用的选项。如果浏览器不支持此属性，则忽略它们，只显示出普通文本输入框。
min和最大max在某些电商网站，购物数量被设定为一个最小值；而有的则需要设置为更大的值。添加min和max属性，就可以对数据的上下限进行控制。
<input type="number" id="book" min="1">
<input type="number" id="course" max="6">值得注意的是，不管在哪个浏览器中，min和max属性不能和required属性同时使用。事实上，我们不能把required属性和数字输入框一起用。
编写表单验证脚本是我最不喜欢的工作之一。如果可能，我宁可花钱雇人干这个脏活儿。虽然JavaScript库让这样的工作轻松了一些，但我敢打赌，即使最铁杆的JavaScript程序员，也不喜欢去开发这些脚本。如果浏览器能处理表单验证岂不更好。这不仅让开发者更轻松，还可以让那些绕过表单里的通过JS验证输入是否合法的人无从下手（因单纯为使用JS验证输入是否合法，是可以被用户人为绕过的，比如禁止掉浏览器的JS功能） （要绕过JavaScript验证，其实只需关闭浏览器的JavaScript即可）。好消息是，在新的HTML标准中，已经包括了这些看起来很简单的特性，使客户端表单验证成为轻而易举之事。
requiredHTML5添加required属性后，将阻止表单提交，直到所有的属性都已正确输入。
<input type="email" required>novalidate如果你不喜欢添加浏览器验证，简单地加一个novalidate标签就可以了。
<form action="search" method="get" novalidate>HTML5把标记带入了Web应用的时代，而实际情况远比本书所介绍的更多。例如，可以使用很多方式脱离浏览器插件来支持播放音视频文件，甚至可以离线交互等。你能走多远，取决于你的工作和人们的需求。但有一点是很明确的，HTML就在那里，如果我们想在互联网浪潮中保持领先，那就应该尽可能地利用这一开放的新技术。
如果你关心每个HTML元素和属性的制订，并且你想让它们更加语义化，那么我希望微格式2能使你兴奋起来。基于HTML模式，然后提高标记特定类型的信息的语义，比如联系人详情、事件、评论和内容，使它们可以被机器解析，同时对人类也是可读的，这是我们正在持续努力的方向。我认为Brian Suda对于微格式的解释是最经典的：
“微格式就是Web页面里所有代表语义信息的编码，这种利用信息的方式可能是厂商从来没有设想过的。”
微格式是在现有标准（在元素上添加属性来描述内容）上发展来的。所以我们唯一需要知道的，就是如何开始使用它们编写HTML，微格式2也是如此。事实上，它们非常简单，和经典的微格式相比，它们只需要更少的额外HTML元素，因为它们本身就意味着某种特定内容。但是，究竟为什么经典微格式以及微格式2更是如此厉害呢？
在任何网站上查看源代码，我们都会看到大量的id和class，它们被用来将CSS样式绑定到元素上。我希望你选择的id或class值能够附带描述内容，例如使用像‘tagline’这样语义化的值，而不是使用像‘bold-heading’这种描述表现的值。
即便如此，通常我们选择的值对内容和访客都没有真正的价值，这些稀奇古怪的名字和命名约定会花费我们大量的时间，并且时间一长就会变得难以维护。
当遵循微格式的模式时，我们可以很大程度上给id和class属性赋一个有具体意义的值。微格式2带来了更多的class属性，因此使用微格式2将有助于使你的HTML更精简、更合理，减少设计或布局。简而言之，就是更加犀利，我们接下来会分析对比一些最常用的经典微格式和微格式2。
如果你对在HTML文档的头部head引用外部链接很熟悉，那么你可以看出这是一个外链的CSS样式表。
<link rel="stylesheet" href="screen.css" media="screen">这个属性定义了HTML文档和链接目标之间的关系，关联样式表是其中之一。我们采用类似的方法来连接RSS提要。
<link rel="alternate" type="application/rss+xml" href="articles.rss">我们还可以为关联到收藏或者关联到苹果图标（apple-touch-icon）做个定义，这是专门为iOS设备设计的：
<link rel="shortcut icon" href="favicon.jpg" type="image/gif">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="ios.png">所有基于链接的微格式，都是用这种方式来描述文档之间的关系。
最常见的基于链接的微格式的用途之一，就是链接到版权。当使用rel-licence时，目的十分明确，就是链接一个许可证。
<a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
Creative Commons Attribution-ShareAlike 4.0 International License</a>你可能会认为任何人都会使用微格式链接到版权，没错，毕竟微格式的原则之一就是降低使用门槛。虽然门槛很低，但是它带来的好处却是巨大的，尤其是随着谷歌在高级搜索里添加了一个使用权选项。
想要搜索可以自由使用，共享和修改，甚至商业化的东西？可以使用隐藏在谷歌高级搜索选项里的使用权过滤器。
那么作为工程师的我们，该如何设计rel-license? 也许我们想要通过添加一个小图标来让许可链接和页面上的其他链接看起来不同。我们可以为这个链接添加个class:
<a href="http://creativecommons.org/licenses/by-sa/4.0/"
rel="license" class="license">Creative Commons Attribution-
ShareAlike 4.0 International License</a>其实我们并不需要这个额外的class，因为我们可以通过CSS属性选择器来达到同样的效果。
a[rel="license"] {
padding-left : 20px;
background : transparent url(cc.png) no-repeat 0 0; }通过使用微格式，可以使我们的HTML更加犀利，而且这种方式能为我们及用户提供更多的价值。
HTML5引入了更多的链接关系，使我们能够定义指向到其他页面的链接的意义。这里罗列一些对我最有用的。
尽管微格式和无障碍提供了一些重叠的HTML链接关系，但这并不影响你使用它们，因为它们拥有更深层的语义，并且为我们提供了使用CSS样式的钩子。
当我们在网上找到一个人的联系方式，可以通过双击将它添加到地址簿，是不是很酷？你猜怎么着？如果他们使用h-card格式发布这些信息，我们就可以做到。仔细阅读以下这段：
Andy Clarke（Malarkey）是一位想要成为侦探的英国Web设计师，他经营着一家叫Stuff & Nonsense的小公司，平时会写写书，并且会在一些会议上分享经验。如果你想聘请他，可以给dropadime@hardboiledWebdesign.com发电子邮件，或者致电01745 851 848找到他。
这段描述包含了各种信息，你可以很容易地发现我的全名、小名、公司、电子邮件地址和电话号码。
除了意识到这段文字本身，我们的大脑还可以辨别出这些信息的存在。到目前为止，机器还做不到这一点。
标记语言词汇量有限，不能充分表达所有内容的含义。标题和段落、章节和文章，这些都没有问题。但是该如何描述一个人的信息呢？对于一个人或公司的联系信息的缺乏对应的元素标记，h-card能补充这种缺失。
苹果公司的联系人应用程序里的名片信息有一个结构化的数据。
在Mac和iOS设备上的联系人管理应用程序中，有一个使用开放标准的电子名片，在里面可以看到熟悉的结构化信息。你可以使用文本编辑器打开电子名片查看其中的细节，包括名字（FN格式名称）、公司（ORG）、地址（ADR）、电话（TEL）、电子邮件地址（EMAIL）,还有一些其他信息（中文版与英文版有所不同）。
学习h-card最好的方式就是制作一张名片，你可以去使用微格式的网站看看，再对比其他大量使用div和span的网站，就会理解什么是超越平凡的硬派做法。
<div class="h-card">
<span class="p-name">Andy Clarke</span>
<a class="u-email" href="mailto:dropadime@HardboiledWebdesign.com">
dropadime@HardboiledWebdesign.com</a>
<span class="p-country-name">United Kingdom</span>
<span class="p-tel">01745 851848</span>
</div>第一眼看上去，这些属性似乎有点使用过度了。但是这些属性却很重要，因为它们使内容更容易被其他应用程序提取和使用。记住这一点，然后我们来复习前面的内容。我们将从应用的顶层元素开始添加值为h-card的class属性，它使其他细节信息更有意义，因为它是这种格式的根元素。
<p class="h-card"><span class="p-name">Andy Clarke</span> (<span
class="p-Nickname">Malarkey</span>) is a <span class="p-job-title">
Web designer</a> and wannabe detective based in the <span
class="p-country-name">United Kingdom</span>. He runs a small
agency called <span class="p-org">Stuff & Nonsense</span>, writes
books and speaks at conferences. If you’d like to hire Andy,
you can e-mail him at <a class="u-email" href="mailto:dropadime@
HardboiledWebdesign.com">dropadime@HardboiledWebdesign.com</a> or
call him on <span class="p-tel">01745 851848</span>.</p>还记得HTML文档的根元素是html吗？微格式也需要自己的根元素，来告诉应用程序这是一个微格式。对于h-card来说，这真的如同添加一个值为h-card的class一样简单。
现在我们深入的看一下组成h-card的各个值，以及它们是怎么构建的。我先从构建人名的两种方法开始介绍。
经典微格式和微格式2之间有一个明显的变化就是， 新版本有个帮助添加样式的前缀，五个前缀如下。
h-* 根元素的标识，用来表示某个元素是微格式，如h-card。
dt-* 把一个元素解释成日期或时间。
e-* 把HTML包括进一个元素。
p-* 表示一个纯文本元素，如<span class="p-name">Andy Clarke</span>。
u-* 表示一个URL元素，包括电子邮件或者网站。
像BEM这样的属性命名系统，用来帮助在HTML元素之间建立沟通。开发者Harry Roberts一直在寻求将这些原则进行扩展，包括用来描述属性作用的命名空间，如组件、对象、工具和主题。遗憾的是，它的u-utility值和微格式2的URL值冲突了。
当我们要把一个人的名字呈现在名片或者办公室的门上时，我们会用到这些值，包括前缀、第一个名字、中间名、姓氏和后缀。要做到这一点，我们只需要用一个p-name就可以完成。
<span class="p-name">Nick Jefferies</span>当我们构造一个名字时，会把名字分成多个部分，第一个是名字Nick，第二个是他的姓氏Jefferies.
<span class="p-given-name">Nick</span>
<span class="p-family-name">Jefferies</span>如果Nick Jefferies的名片上有一个尊称的前缀（先生、女士、长官、教授等），甚至是他的绰号（Sawbuck），我们也可以包括进来。
<span class="p-honorific-prefix">Mr.</span>
<span class="p-Nickname">Sawbuck</span>Mr Nick （Sawbuck）Jefferies的结构化名称里的所有单独的组件，现在看起来应该是这样的。
<span class="p-honorific-prefix">Mr.</span>
<span class="p-given-name">Nick</span>
<span class="p-Nickname">Sawbuck</span>
<span class="p-family-name">Jefferies</span>然后我们所要做的就是把Nick的结构化名字放在一个最合适的HTML根元素里。一般情况下是列表、段落、section、article或者footer。哪个更合适，就把h-card赋值到它的class上就好了。
<div class="h-card">
<span class="p-honorific-prefix">Mr.</span>
<span class="p-given-name">Nick</span>
<span class="p-Nickname">Sawbuck</span>
<span class="p-family-name">Jefferies</span>
</div>现在的联系人信息里通常都包含了网址，所以当你在h-card里发现网址时也不应该感到惊讶。在h-card里添加URL最明显的方式是这样的。
<a href="http://HardboiledWebdesign.com" class="u-url">
http://HardboiledWebdesign.com</a>为了展示h-card的嵌套功能，我们虚构一个公司或者组织里的某个人。首先，我们将为一个名为Cole Henley的人创建一个h-card，Cole的名片里只包含他的名字和网址。
<div class="h-card">
<a href="http://HardboiledWebdesign.com" class="p-name
u-url">Cole Henley</a>
</div>现在我们将把Cole工作的公司嵌套进来，并用p-org属性来描述它。因为该公司是个独立的实体，我们给它自己添加h-card，并嵌套在Cole的h-card里：
<div class="h-card">
<a href="http://HardboiledWebdesign.com" class="p-name
u-url">Cole Henley</a>
<span class="p-org h-card">The No. 1 Detective Agency</span>
</div>当需要显示公司的标志时，我们可以在h-card里使用名为u-logo的class来嵌入一张图片。
微格式2比之前的版本更简单，因为它的一些属性附带了其他的的含义。例如，我们可以使用p-name来标记某人的完整名字，使用u-url来标记他们的网站地址。
<div class="h-card">
<a href="http://stuffandnonsense.co.uk" class="p-name u-url">
Andy Clarke</a>
</div>然而，微格式2可以去除额外的元素，让整个模式更简单、代码更干净。我们可以直接在链接上使用h-card，并删除p-name和u-url，因为h-card里已经附带了这些属性。
<a href=http://stuffandnonsense.co.uk class="h-card">Andy Clarke</a>想在信息里添加地址，我们可以在h-card里添加的值有这些：p-street-address、p-locality、p-region 和p-postal-code。
<span class="p-street-address">221b Baker Street</span>,
<span class="p-locality">London</span>,
<span class="p-postal-code">NW1 6XE</span>,
<span class="p-country-name">United Kingdom</span>在这一点上，你可能会想“为什么不使用HTML里的address元素？”不管你怎么理解这个元素，其实address元素应该只用来为一个特定页面或者内容的作者标记联系信息。令人费解的是，到目前为止还没有一个专门描述物理地址的元素。如果你怀疑我的观点，那么请看下面这段出自WHATWG（网页超文本应用技术工作小组）的描述。
“address元素表示最近的文章或者父元素的联系信息。[…] address不能用来表示任何物理地址（如邮政地址），除非这些地址是和实际内容相关的联系信息。”
如果有人有不止一个地址呢？除非你像我一样在家里办公，否则你会有家庭和工作两个地址。别担心，我们可以把两个地址都包括在h-card里，并保证它们清晰可辨。我们把h-card里的p-street-address、p-locality、p-region 和p-postal-code 组合到一起，来形成独立的h-adr元素。
<div class="h-adr">
<span class="p-street-address">221b Baker Street</span>,
<span class="p-locality">London</span>,
<span class="p-postal-code">NW1 6XE</span>,
<span class="p-country-name">United Kingdom</span>
</div>
<div class="h-adr">
<span class="p-street-address">8-10 Broadway</span>,
<span class="p-locality">London</span>,
<span class="p-postal-code">SW1H 0BG</span>,
<span class="p-country-name">United Kingdom</span>
</div>我还是喜欢通过电话交谈，可能这样已经过时了。幸运的是，在h-card里包含一个电话号码（两个或者三个）是小菜一碟，使用p-tel就可以搞定。
<div class="p-tel">01745 851848</div>大多数人通常都有多个电话号码：家里的、办公室的，还有手机号码。我们可以使用相同的格式来添加这些电话号码。
我们通过在h-card里使用u-email来添加电子邮件：
<a href="mailto:dropadime@HardboiledWebdesign.com"
class="u-email">Drop me a dime</a>h-card是一种理想的格式，可以帮助一个人或者组织创建结构化的信息。当然有些人或者公司可能不只需要名字、地址、联系方式这些信息。所以h-card里还包括了很多的可选项。这里罗列一些我认为最有用的：
理解h-card各个属性之间细微差别的最好的方法就是使用它们。我们将为‘Get Hardboiled’构建一系列的h-cards。每个侦探的名片使用稍微不同的属性值。
回想一下你每天在网上看到的一些事件信息，你会发现一些关于会议、体育赛事、音乐会或者电影里的细节。事件信息有时出现在组织中，有时出现在自然语言中。例如，我可能会在我的博客中写道，“今年11月份，我在曼彻斯特的艾伯特大厅看了Kacey Musgraves的演唱会”。
你不必去网上找一些很难找的事件信息，网站与网站之间使用HTML来标记事件信息的差别很大。这是Kacey Musgraves演唱会在Ticketmaster上的标记：
<tr>
<td class="event">
<div class="summary"> </div>
<div class="ratingContainer" title="4.8 out of 5 stars"></div>
</td>
<td class="location">Albert Hall Manchester, GB</td>
<td class="date">Mon 16/11/15 19:00</td>
</tr>Seetickets使用不同的HTML发布了相同的事件：
<div class="browse-width result-text">
<h3>Kacey Musgraves</a></h3>
<p>Albert Hall, Manchester</p>
<p>at 7:00 PM</p>
</div>人们可以很容易理解它包含一个事件，但是这种HTML没法帮助机器去理解。这使得微格式成了完美的解决方案。
一个日历事件很可能包含：
我们将构建一个单独的事件，用h-event属性值来指定根元素，然后在一个元素上使用p-name，甚至是u-url来表示，以保证我们的事件足够简单。
<div class="h-event>The Maltese Falcon</div>我们需要更多有用的信息来展示《The Maltese Falcon》，然而，我们通过在article嵌入一个使用p-name属性值的主标题来区分开：
<article class="h-event">
<h1 class="p-name">The Maltese Falcon</h1>
</article>接下来，我们在一个适当的HTML元素上使用属性值p-summary，来添加一个简短的摘要，这里，我们使用了一个段落：
<article class="h-event">
<h1 class="p-name">The Maltese Falcon</h1>
<p class="p-summary">A special showing of the remastered
mystery that kicked off the film noir genre of the 1940s…</p>
</article>如果我们的摘要包含多个段落，那么我们可以把标题、段落、列表或者任何其他元素放到一个section中划分出来做摘要。而不要在一个h-event里包含多个段落的摘要，否则，这将是一个无效的事件。
让人们知道事件在哪发生，只需要在一个元素上应用属性值p-location，在这个例子里， 场馆名字用span包起来：
<p>Showing at <span class="p-location">
The Scala Cinema and Art Centre</span></p>我们应该需要提供更多关于地点的信息，比如地址，我们应该为场地创建一个h-adr元素，并把它嵌入到h-event里面。h-adr里包含相同的地址，这跟我们使用h-card时一样。
<div class="p-location h-adr">
<span class="p-street-address">47 High Street</span>
<span class="p-locality">Prestatyn</span>
<span class="p-region">Denbighshire</span>
<span class="p-country-name">Wales</span>
</div>如果这个事件中有个网站，那么我们将会使用和构建h-card时一样的u-url属性值：
<a href="http://scalaPrestatyn.co.uk" class="u-url">The Scala
Cinema Website</a>我们构建的h-event微格式几乎要完整了，但是还缺少了开始日期和到场时间。首先，我们使用time元素，并为它添加属性值datetime来标记开始时间：
<time datetime="2015-11-20 T19:30">Nov. 20th, 2015 at 7:30pm</time>显而易见，这是一个开始日期，我们还需要给time元素添加一个dt-start属性值：
<time datetime="2015-11-20 T19:30" class="dt-start">
November 20th, 2015 at 7:30pm</time>这个事件是从傍晚持续到晚上10点。所以我们可以把这个时间也添加到我们的datetime属性里：
<time datetime="2015-11-20 T19:30 P 150M" class="dt-start">
November 20th, 2015 at 7:30pm</time>微格式按模块化、可嵌入来设计的，因此我们可以很容易把一个人的h-card嵌入到一个h-event里。
还记得之前我们为The Maltese Falcon标记位置信息吗？我们为场馆名添加了属性值p-location:
<p>Showing at <span class="p-location">
The Scala Cinema and Art Centre</span></p>现在需要为事件添加更精确的位置信息，所以我们要创建一个h-card，嵌入到我们的h-event里。
<div class="p-location h-card">
<span class="p-name">The Scala Cinema and Art Centre</span>
<span class="p-street-address">47 High Street</span>
<span class="p-locality">Prestatyn</span>
<span class="p-region">Denbighshire</span>
<span class="p-country-name">Wales</span>
</div>到目前为止，我希望你很享受之前所读到的内容，并且写一篇热情洋溢的评论，因为接下来我们将会讲到h-review。
不论是谈话还是阅读，人们经常会表达自己的意见或者看法。我们的大脑随时都会产生评论：
上周我租了一本DVD，1994年的由Humphrey Bogart饰演Sam Spade的《The Maltese Falcon starring》，它仍然是我最喜欢的电影，给它一个赞”
“电影: 《The Maltese Falcon. Rating》: 评分：10/10”
“我对《Who Framed Roger Rabbit》预期很低，但我还是给了5颗星”
电脑不能识别语言的细微差别，对它来说，这些评论信息只不过是一串字符。它是建立在我们学习过的微格式h-card和h-event之上，通过h-review提供的内容识别模式来解析这些内容的。
和我们学过的其他微格式一样，h-review也是用根元素来包含其他元素。它的根元素属性值是h-review，我们可以把它应用到任何恰当的HTML元素上，下面的例子我们用到了article元素上：
<article class="h-review">
<h1>The best detective film ever made</h1>
</article>编写一个h-review用不了多少时间，因为h-review复用了一些值，这些值你在学习h-card和h-event时已经学过了。首先，像其他微格式一样，我们用p-name来命名评论，但值得注意的是，我们的h-review里的评论项的名字不一定非要一样。
<article class="h-review">
<h1 class="p-name">The best detective film ever made</h1>
</article>现在我们开始定义我们评论的项目，p-item元素里的内容不一定是企业、人物、地方或者产品，我们可以创新，只要是和项目相关的其他信息。
<p class="p-item">Who Framed Roger Rabbit, starring the late Bob
Hoskins as private investigator Eddie Valiant.</p>关于这个项目，我们需要更详细的信息，这无关评论。当评论一个人的时候，我们可以嵌入h-card，描述一个企业或者场地的位置时使用h-adr，产品评论使用h-product,其他类型的项目使用h-item来表示。这是一个特定项目的微格式结构信息。当我们正在评论一部电影，而不是一个业务或者产品，我们会选择h-item，并把它添加到我们的p-item元素上。
<p class="p-item h-item">Who Framed Roger Rabbit, starring the
late Bob Hoskins as private investigator Eddie Valiant.</p>如果没有意见，一条评论是不会有多大用处的，因此我们将使用e-description。如果评论很简短，那么把这个属性值添加到列表或者是其他元素上，这个例子中，我们使用了段落：
<p class="e-description">How much do I know about show business?
Only that there is no business like it, no business I know.</p>如果描述包含多个段落或者包含其他HTML元素，那么应该用一个元素把它们包起来，再把e-description赋值给这个包裹元素。如果我们的评论是我说的这种情况，那么使用最适当的方法是使用一个引用：
<blockquote class="e-description">
<p>How much do I know about show business? Only that there is no
business like it, no business I know.</p>
<p>A Classic film has to work on several different levels and animated
action movie Who Framed Roger Rabbit scores on all of them.
It’s a fantastic children’s film with characters like Roger, the
Weasels and Benny the Cab for them to enjoy. It also plays perfectly
as a detective story for adults. And who will ever forget
Jessica Rabbit?</p>
</blockquote>你应该能猜到我们如何在评论里包含一个URL，之前在h-card和h-event里已经看到过了。就是u-url属性值：
<a href="HardboiledWebdesign.com”class="u-url">Canonical Permalink</a>星评级是一个用来表明肯定或否定的非常流行的评论方式。它帮助人们一眼就能看出来一个项目是好是坏。在很多评论和购物网站，我们都能看到它们。我们将按照惯例，用星星来创建一个从0（最坏）到5（最好）的评级范围。
用五颗星来评价《Who Framed Roger Rabbit》，我们将使用HTML5的data元素。如果你之前还没有用过datayuansu .那么很简单，data是处理人类可读的、可见的元素部分。在我们的星星评级的例子中，使用了能提供同样信息的value属性，这是一种机器可读的形式：
<data class="p-rating" value="5">★★★★★</data>如果我们们需要更具体的，而不是一个平均的评价等级，那么我么可以分别使用p-best和p-worst来表示：
<data class="p-best" value="5">★★★★★</data>
<data class="p-worst" value="0"></data>当然，我们还应该加上一个日期，这将帮助人们判断我们的评价。这对于酒店和餐馆尤为重要。我们将简单的复用h-event中的time元素，并为它加上datetime属性，然后再为它加上dt-reviewed的class名:
<time datetime="2015-11-20 T19:30" class="dt-reviewed">
November 20th, 2015 at 7:30pm</time>因为没必要知道是谁写的评论，所以h-review并没要求我们包含一个名字。但我们可以选择添加一个。因为一个人的身份可以大大提高一个评论的可信度。只要我们想要，就可以使用h-card来包裹很多信息。但在这里，我们只使用p-reviewer和h-card来添加评论者的名字：
<a class="p-reviewer h-card"
href="http://stuffandnonsense.co.uk">Andy Clarke</a>接下来，你将了解h-entry,它是为出版联合内容，如新闻、博客和播客而设计的微格式。h-entry表示单个条目，我们可以和其他条目组合使用，我们来写一个h-entry博客。
微格式社区建议，我们应该用“最精确语义的HTML构建块对象等”。
这是我们最初的HTML，开始用一个标题，后面跟一个段落：
<h1>The Maltese Falcon</h1>
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>现在我们知道如何像这样单独的使用article元素，我们将在那篇文章里组合使用这些元素：
<article>
<h1>The Maltese Falcon</h1>
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>
</article>把一篇文章转换成h-entry，我们将在每个单独条目的根元素上添加h-entry属性值：
<article class="h-entry">
<h1>The Maltese Falcon</h1>
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>
</article>h-entry里包括文章、博客和播客的标题在内的一些属性是隐藏的，但是每个属性是可选的，像发布日期和作者姓名之类的最好是在每个条目里显式的添加，这些属性你应该已经比较熟悉。我们先为主标题标记p-name属性：
<h1 class="p-name">The Maltese Falcon</h1>这里需要说清一点，日期或者时间指的是一篇文章的发布日期，我们用h-entry的dt-pulished属性值：
<time datetime="2015-11-20 T19:30" class="dt-published">
November 20th, 2015 at 7:30pm</time>如果h-entry的发布日期出现更新，我们应该把dt-published值更改为dt-updated:
<time datetime="2015-11-20 T21:30" class="dt-updated">
November 20th, 2015 at 9:30pm</time>最后我们添加一个作者到h-entry里，你应该已经很熟悉h-cards,这里我们将结合使用h-card里的p-author属性值。
<address class="h-card p-author">
<a href="http://stuffandnonsense.co.uk">Andy Clarke</a>
</address>不需要使用p-name或者u-url属性值，h-card里都隐含了这些。
但是，这里为什会用address元素？
前面表述过，address元素并不用来描述物理地址，但用来描述作者的联系信息绝对是恰当的。因为我们添加了一个指向作者网站的链接，所以我们需要用HTML链接来表达那个网站和作者的关系：
<address class="h-card p-author">
<a href="http://stuffandnonsense.co.uk" rel="author">Andy Clarke</a>
</address>有些作者往往喜欢把博客分割成多页；比如，我们会主页或者存档里使用摘要，然后在文章详细页展示完整的内容。h-entry可以使用p-summary定义一个小段落当做文章的摘要：
我们的例子里，我们使用第一段：
<p class="p-summary">The film stars Humphrey Bogart as private investigator
Sam Spade and Mary Astor as his femme fatale client.</p>用一个属性值为p-summary的section父元素将几个元素组合包裹起来，这样就形成了一个长摘要：
<section class="p-summary">
<p>The film stars Humphrey Bogart as private investigator Sam
Spade and Mary Astor as his femme fatale client.</p>
<p>The story follows a San Francisco private detective and his
dealings with three unscrupulous adventurers, all of whom are
competing to obtain a jewel-encrusted falcon statuette.</p>
</section>p-summary里包含一个永久的全文链接，并出现在多个页面时，就很重要了。需要用rel属性，并赋值为bookmark，来明确p-summary的链接指向：
<a href="http://HardboiledWebdesign.com" rel="bookmark">
Permalink</a>现在人们通常在几个渠道发布自己的内容。例如，你可能会在自己的博客上发布一条。也可能在其他媒介上发布，用来获得更多的受众。如果你添加了一个指向其它地方的入口链接，那么使用u-syndication来标识那个链接为联合内容就尤为重要：
<a href="http://medium.com" class="u-syndication">
Also published on Medium</a>到目前位置，我们已经可以让单个h-entry工作起来。但是很多网站首页或者存档页有相关文章列表。这些条目的组合做称作h-feed。我们需要一个合适的父元素来组合一个feed，，这里我们使用了section元素。结合上下文的意思，我们会给它一个描述性的标题:
<section class="h-feed">
<h1>Hardboiled archives</h1>
<article class="h-entry"> […] </article>
<article class="h-entry"> […] </article>
<article class="h-entry"> […] </article>
</section>微格式增强了HTML的语义，并补充了一些迫切需要的结构。对于Web设计人员和开发人员来说，微格式给我们提供了摆脱过去编写HTML那种表象的方式，并使我们的页面更灵活，适应性更强，也更硬派。
现在，你已经学会了如何使用HTML元素和微格式为Web应用程序添加标记，但你可能没有听说过，还有一个与它们目标不同但互相补充的规范。它就是WAI-ARIA——无障碍网页应用技术。
WAI-ARIA的目的，是让网页内容对残障人士更友好，它包括以下内容。
这一切听起来很棒。除了为依靠辅助技术的用户提供有价值的帮助之外，Web设计师和开发人员还可以使用WAI-ARIA技术，来减少我们对表现型的id和class属性的依赖。那么，当我们能用CSS属性选择器来给WAI-ARIA元素绑定样式的时候，为什么还要仅仅为了样式为HTML元素添加class名呢？
WAI-ARIA包括一组导航特性，帮助残障人士识别网页和Web应用程序的公共区域，并使用辅助技术为他们导航。这些特性可以结合HTML元素使用，从而最大限度地发挥其语义。
我们将介绍几个具体的WAI-ARIA特性，它们可以依赖很少的class和id来包装HTML，从而让HTML和CSS更加炫酷。这些WAI-ARIA特性包括banner、complementary、contentinfo、main、navigation和search。要使用WAI-ARIA的特性，只需要在任何适当的元素上添加role属性。例如，当我们想在某个区域展示品牌或横幅广告，应用banner特性即可。
在HTML中，header元素可以用于展示品牌或横幅广告，它通常出现在页面的顶部。WAI-ARIA的banner特性可以帮助使用辅助技术的用户辨识出这个特殊的header区域，以和页面中的其他区域区分。
<header role="banner">
<h1>It’s Hardboiled</h1>
</header>需要区分的是，普通header元素可以根据需要在section和article元素中使用多次，而带有值为banner的role属性的header元素只能使用一次。
WAI-ARIA的complementary特性在功能上与HTML的aside元素类似。虽然它不必包含任何内容，或者直观地链接到该内容区域，但它是用来描述与页面相关的内容，并对其他内容提供支持。例如，假设我们写一篇关于作家Mickey Spillane的文章，我们可以在有关他的名著《My Gun Is Quick》的aside元素上应用complementary特性。
<aside role="complementary">
<h2>My Gun Is Quick</h2>
<p>Mickey Spillane's second novel featuring private
investigator Mike Hammer.</p>
</aside>WAI-ARIA将contentinfo特性定义为“包含有关父文档信息的可感知区域”，是不是听起来很像HTML的footer元素？ 我也这么认为。让我们为主页面的footer元素添加contentinfo特性，继续构建'Get Hardboiled'存档页。
<footer role="contentinfo">
<h3>It's Hardboiled</h3>
<p>Hardboiled Web Design, designed by Andy Clarke.</p>
</footer>正如banner特性一样，与HTML中的普通footer元素不同，我们只能在页面中使用一次带有contentinfo属性的footer元素。
跳转到内容的链接是最常用的网络无障碍技术之一，旨在帮助依靠辅助技术的人跳过啰嗦的导航区域。WAI-ARIA的main特性的主要作用是消除对跳转链接的需求，因为它可以帮助依赖辅助技术的用户直接导航至某个页面的主要内容区域。
在哪里添加main特性完全取决于内容，在我们正在构建的'Get Hardboiled'存档页上，我们可以选择将它添加到包含最新、最重要的新闻的section元素上。
<section id="content_ _uk"> […] </section>
<section id="content_ _usa" role="main"> […] </section>
<section id="content_ _world"> […] </section>如果开发一个只包含单一主题的页面，我们应该把main属性添加article元素上。
<article role="main">
<header>
<h1>Mickey Spillane</h1>
</header>
<p>Frank Morrison Spillane, better known as Mickey Spillane,
was an author of crime novels, many featuring his detective character
Mike Hammer. More than 225 million copies of his books have
been sold internationally, including my personal favourite, ‘My
Gun Is Quick’.</p>
</article>WAI-ARIA的navigation特性在功能上类似HTML中的nav元素，它的作用是用来描述页面或Web应用程序中的主要导航模块。尽管navigation和nav元素的目的都是提供尽可能广泛的支持，但我们还是要使用navigation特性。
<nav role="navigation">
<ul>
<li><a href="about.html">What’s Hardboiled?</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="authors.html">Authors</a></li>
<li><a href="Classics.html">Classics</a></li>
</ul>
</nav>在许多网站上，搜索是人们定位内容的主要方式。因此在HTML中，在nav元素中嵌入搜索框是完全可以接受的做法，但对于添加了navigation属性的nav元素就不是这样了。
WAI-ARIA的search特性描述了一个完整的搜索界面——包括标签、输入框、按钮和其他HTML元素。过去，当我们想给搜索表单元素设置样式的时候，我们会给它一个唯一的id或者一个class属性。现在，我们可以不再添加表现型的属性，而是使用WAI-ARIA的search特性和CSS属性选择器来代替。
<form method="post" action="search.html" role="search">
<fieldset>
<input type="search" title="Search this site">
<button type="submit">Go</button>
</fieldset>
</form>可访问性不仅对那些依靠屏幕阅读器和其他辅助技术的用户很重要，对我们工作的完整性而言也同样重要。WAI-ARIA的特性只是我们提高网页可访问性的途径之一。
不仅如此。像微格式一样，HTML中的WAI-ARIA特性使我们能够减少对表现型元素和属性的依赖，把网页中的标记从单一的设计中解放出来。用WAI-ARIA特性来代替仅仅提供样式辅助的属性，并结合CSS样式，会使文档变得更加灵活，网页和应用在不同浏览器和设备中也可以获得更好的渲染。
