所属分类：计算机网络 > 程序设计 > html xml >
html5和css3代表着web开发的未来，虽然相关规范还未最终敲定，但最新版浏览器和移动设备都已支持html5和css3。本书将带你领略现今可用的html5元素和css3特性，并提供了对旧浏览器的向下兼容解决方案，使开发人员避免因此丢失用户。
　　如果你还在为给按钮添加不同样式而大量添加标记，不妨拿起本书，学习一下html5和css3新特性吧。html5新标记可以呈现更好的结构和表单界面，编写出更为整洁易读的代码。
　　如 果不想使用flash，不妨看看本书是如何在页面中嵌入音频、视频和矢量图的。此外，书中关于websockets、客户端存储、离线缓存和跨文档消息机制的内容将为你免去不少web开发之苦。简单的css3亦将丰富页面区域的样式。如果你作为web设计师担心旧浏览器的兼容问题，本书中相应的解决方案将为你排忧解难。
　　未来已在眼前，前进吧！
第1章 html5 和css3 概述　　

　　1.1 一个新的web 开发平台　　

　　1.1.1 更多的描述性标记　　

　　1.1.2 较少依赖于插件的多媒体支持　　

　　1.1.3 更强大的web 应用　　

　　1.1.4 跨文档消息通信　　

　　1.1.5 web sockets　　

　　1.1.6 客户端存储　　

　　1.1.7 更精美的界面　　

　　1.1.8 更强大的表单　　

　　1.1.9 提升可访问性　　

　　1.1.10 先进的选择器　　

　　1.1.11 视觉效果　　

　　1.2 向后兼容　　

　　1.3 未来之路崎岖不平　　

　　1.3.1 ie 　　

　　1.3.2 可访问性　　

　　1.3.3 废弃的标签　　

　　1.3.4 企业利益的竞争　　

　　1.3.5 html5 和css3 仍在改进　　

第一部分 改善用户界面

　第2章 新的结构标签和属性　　

　　2.1 实例1：用语义化标记重定义博客　　

　　2.1.1 以正确的文档类型声明为基础　　

　　2.1.2 头部　　

　　2.1.3 尾部　　

　　2.1.4 导航　　

　　2.1.5 区段和文章　　

　　2.1.6 文章　　

　　2.1.7 旁白和侧边栏　　

　　2.1.8 旁白绝非页面侧边栏　　

　　2.1.9 添加样式　　

　　2.1.10 回退　　

　　2.2 实例2：使用自定义数据属性创建弹出窗口　　

　　2.2.1 行为与内容的分离，或者说为什么设置onclick 不好　　

　　2.2.2 提升可访问性　　

　　2.2.3 废弃onclick 　　

　　2.2.4 自定义数据属性来解围　　

　　2.2.5 回退　　

　　2.2.6 未来展望　　

　第3章 创建易用的web 表单　　

　　3.1 实例3：使用新的输入域描述数据　　

　　3.1.1 改进awesomeco 项目中的表单　　

　　3.1.2 创建基础表单　　

　　3.1.3 使用range 类型创建滑块　　

　　3.1.4 使用选值框处理数字　　

　　3.1.5 日期控件　　

　　3.1.6 email 类型　　

　　3.1.7 url 类型　　

　　3.1.8 color 类型　　

　　3.1.9 回退　　

　　3.1.10 替换颜色选择器　　

　　3.1.11 modernizr 　　

　　3.2 实例4：使用autofocus 属性定位第一个表单域元素　　

　　3.3 实例5：使用placeholder 属性进行提示　　

　　3.3.1 简单的注册表单　　

　　3.3.2 阻止自动完成　　

　　3.3.3 回退　　

　　3.4 实例6：基于contenteditable属性实现在位编辑　　

　　3.4.1 账户表单　　

　　3.4.2 持久化数据　　

　　3.4.3 回退　　

　　3.4.4 创批建编辑页面　　

　　3.4.5 未来展望　　

　第4章 用css3 打造更好的用户界面　　

　　4.1 实例7：使用伪类渲染表格　　

　　4.1.1 优化付款清单样式　　

　　4.1.2 使用:nth-of-type 条纹化表格的行　　

　　4.1.3 使用:nth-child 对齐列文本　　

　　4.1.4 使用:last-child 加粗最后一行　　

　　4.1.5 使用:nth-last-child 向前查找元素　　

　　4.1.6 回退　　

　　4.1.7 修改html 代码　　

　　4.1.8 使用javascript 　　

　　4.2 实例8：使用:after 和content支持打印页面上的链接　　

　　4.2.1 使用css 　　

　　4.2.2 回退　　

　　4.3 实例9：创建多列布局　　

　　4.3.1 分栏　　

　　4.3.2 回退　　

　　4.4 实例10：使用媒体查询构建移动设备界面　　

　　4.4.1 回退　　

　　4.4.2 未来展望　　

　第5章 增强可访问性　　

　　5.1 实例11：使用aria 角色提供导航提示　　

　　5.1.1 标志角色　　

　　5.1.2 文档结构角色　　

　　5.1.3 回退　　

　　5.2 实例12：创建可访问的可更新区域　　

　　5.2.1 创建页面　　

　　5.2.2 polite 和assertive 更新　　

　　5.2.3 atomic 更新　　

　　5.2.4 隐藏区域　　

　　5.2.5 回退　　

　　5.2.6 未来展望　　

第二部分 新的影音解决方案

　第6章 在canvas 上绘图　　

　　6.1 实例13：绘制logo　　

　　6.1.1 绘制logo 　　

　　6.1.2 添加文字　　

　　6.1.3 绘制线条　　

　　6.1.4 移动原点　　

　　6.1.5 添加颜色　　

　　6.1.6 回退　　

　　6.2 实例14：使用rgraph 绘制统计图　　

　　6.2.1 使用html 描述数据　　

　　6.2.2 将html 内容转换为条形图　　

　　6.2.3 显示备用内容　　

　　6.2.4 回退　　

　　6.2.5 未来展望　　

　第7章 嵌入音频和视频　　

　　7.1 发展历史　　

　　7.2 容器和编解码器　　

　　7.2.1 视频编解码器　　

　　7.2.2 音频编解码器　　

　　7.2.3 容器和编解码器协同工作　　

　　7.3 实例15：音频　　

　　7.3.1 建立基本列表　　

　　7.3.2 回退　　

　　7.4 实例16：嵌入视频　　

　　7.4.1 回退　　

　　7.4.2 html5 视频的限制　　

　　7.4.3 音频、视频和可访问性　　

　　7.4.4 未来展望　　

　第8章 柔化视觉体验　　

　　8.1 实例17：创建圆角　　

　　8.1.1 圆角化登录表单　　

　　8.1.2 特定于浏览器的选择器　　

　　8.1.3 回退　　

　　8.1.4 检测对圆角的支持　　

　　8.1.5 jquery corners 　　

　　8.1.6 自制表单圆角插件　　

　　8.1.7 生成圆角　　

　　8.1.8 微调　　

　　8.2 实例18：使用阴影、渐变和变换　　

　　8.2.1 基础结构　　

　　8.2.2 增加渐变　　

　　8.2.3 给标志加上阴影　　

　　8.2.4 旋转标志　　

　　8.2.5 调节背景的透明度　　

　　8.2.6 回退　　

　　8.2.7 旋转　　

　　8.2.8 渐变　　

　　8.2.9 透明度　　

　　8.2.10 整合　　

　　8.3 实例19：使用实用的字体　　

　　8.3.1 @font-face 　　

　　8.3.2 字体格式　　

　　8.3.3 改变字体　　

　　8.3.4 回退　　

　　8.3.5 未来展望　　

第三部分 html5 延伸

　第9章 客户端数据的使用　　

　　9.1 实例20：使用localstorage 保存参数设置　　

　　9.1.1 创建参数表单　　

　　9.1.2 保存和加载设置　　

　　9.1.3 应用设置　　

　　9.1.4 回退　　

　　9.2 实例21：在客户端关系数据库中保存数据　　

　　9.2.1 浏览器中的crud 　　

　　9.2.2 留言的前端展现　　

　　9.2.3 连接数据库　　

　　9.2.4 创建留言表　　

　　9.2.5 加载留言　　

　　9.2.6 获取指定记录　　

　　9.2.7 插入、更新和删除记录　　

　　9.2.8 包装　　

　　9.2.9 回退　　

　　9.3 实例22：离线运行　　

　　9.3.1 使用manifest 定义缓存　　

　　9.3.2 manifest 和缓存　　

　　9.3.3 未来展望　　

　第10章 使用其他api 锦上添花　　

　　10.1 实例23：维护历史记录　　

　　10.1.1 保存当前状态　　

　　10.1.2 获取先前状态　　

　　10.1.3 默认状态　　

　　10.1.4 回退　　

　　10.2 实例24：跨域对话　　

　　10.2.1 联系人列表　　

　　10.2.2 发送消息　　

　　10.2.3 支持页面　　

　　10.2.4 接收消息　　

　　10.2.5 回退　　

　　10.3 实例25：使用web sockets 进行即时通信　　

　　10.3.1 即时通信界面　　

　　10.3.2 与服务器交互　　

　　10.3.3 回退　　

　　10.3.4 什么是flash 套接字策略　　

　　10.3.5 服务器　　

　　10.4 实例26：geolocation 　　

　　10.4.1 定位awesomeness 　　

　　10.4.2 如何定位　　

　　10.4.3 回退　　

　　10.4.4 未来展望　　

　第11章 未来的发展方向　　

　　11.1 css3 变换　　

　　11.2 web workers 　　

　　11.3 原生拖放支持　　

　　11.3.1 拖放事件　　

　　11.3.2 释放元素　　

　　11.3.3 修改样式　　

　　11.3.4 拖动文件　　

　　11.3.5 并不完美　　

　　11.4 webgl 　　

　　11.5 indexed database api　　

　　11.6 客户端表单验证　　

　　11.7 前进！ 　　

附录a 功能快速索引　　

　a.1 新元素　　

　a.2 属性　　

　a.3 表单　　

　a.4 表单域属性　　

　a.5 可访问性　　

　a.6 多媒体　　

　a.7 css3 　　

　a.8 客户端存储　　

　a.9 其他api 　　

附录b jquery 入门　　

　b.1 加载jquery　　

　b.2 jquery 基础　　

　b.3 修改内容的方法　　

　　b.3.1 hide 和show　　

　　b.3.2 html、val 和attr　　

　　b.3.3 append、prepend 和wrap　　

　　b.3.4 css 和类　　

　　b.3.5 链　　

　b.4 创建元素　　

　b.5 事件　　

　　b.5.1 绑定　　

　　b.5.2 原始事件　　

　b.6 document.ready　　

附录c 音频和视频编码　　

　c.1 音频编码　　

　c.2 为web 进行视频编码　　

附录d 资源　　

附录e 参考书目
web和移动开发必读

　　掌握技术走向，自信应对未来

　　轻松实用、细致入微
html5和css3概述

　　html5 和css3
并非只是w3c（万维网联盟）及其下辖工作组提出的两项新标准。它们分别代表了下一代的html和css技术，开发人员可以在日常工作中使用它们来更好地构建时新的web应用。在深入探讨html5和css3之前，我们先讨论一下html5和css3的优势，以及应用过程中需要面对的难点。

　　1.1　一个新的web开发平台

　　html中的众多新功能都围绕着一个核心目标，即构建一套更强大的web应用开发平台。从更多的描述性标签、更好的跨站及跨窗口通信到动画及更强的多媒体支持，html5开发人员拥有大量新工具实现更好的用户体验。

　　1.1.1　更多的描述性标记

　　html的每个版本都会引入一些新标记，但之前没有哪个版本能像html5这样，引入如此多的直接用于描述内容的标记。在第2章，你将看到用于定义头部（header）、尾部（footer）、导航区段、侧边栏和正文的元素。此外，你还将了解到数值范围的表示、进度条的生成，以及如何使用可定制的数据属性来对数据进行标记。

　　1.1.2　较少依赖于插件的多媒体支持

　　现在，播放视频、音频以及浏览矢量图形可以不必使用flash或silverlight了。尽管基于flash的视频播放器简单易用，但苹果公司的移动设备并不支持flash。考虑到这一块市场的重要性，在设备不支持flash时，你需要为视频播放提供替代方案。在第7章，我们将讨论如何通过html5的audio标签和video标签实现有效应变。

　　1.1.3　更强大的web应用

　　为了让web应用内容更加丰富、交互性更强，开发人员曾绞尽脑汁，尝试了包括activex控件和flash在内的各种手段。html5提供了一些令人称奇的功能，在某些情况下，你甚至可以完全放弃使用第三方技术。

　　1.1.4　跨文档消息通信

　　web浏览器会阻止不同域间的脚本交互或影响。这种限制机制能够防范跨站脚本对那些毫无戒备的站点访问者的攻击，进而达到保护终端用户的目的。

　　但每枚硬币都有两面，浏览器会阻止所有跨站脚本的交互，即使是我们自己写的完全可信任的脚本也不行。为了解决这一问题，html5引入了一套安全且易于实现的应对方案。在10.2节，我们将详细讲解相关内容。

　　1.1.5　web sockets

　　html5提供了对web sockets的支持，通过web
sockets，开发人员能够实现与服务器间的持久连接。如果要获取进度更新，你不必再像以往那样轮询后端服务器，取而代之的方式是用网页订阅某个套接字，当有新数据到达时，后端服务器会主动向订阅用户推送通知。我们会在10.3节中简单介绍相关内容。

　　1.1.6　客户端存储

　　我们倾向于将html5看做一项web技术，但基于其提供的web storage和web sql database
api，我们在浏览器中构建的web应用能够完全在客户端持久化数据！在第9章，我们会展示如何使用这些api。

　　1.1.7　更精美的界面

　　用户界面是web应用的重要组成部分，为了让浏览器能够渲染出所期望的界面效果，我们每天都在极努力地工作。以前为了给表格添加样式或者绘制圆角，我们除了使用javascript库或添加大量冗余标记外别无他法。现在，html5和css3的出现让以往的做法成为了历史。

　　1.1.8　更强大的表单

　　html5提供了功能更为强大的用户界面控件。长期以来，我们只能使用javascript和css来构造滑块、日期选择器和颜色选择器，而在html5中，它们都被定义成了真正的元素，就像下拉列表、复选框和单选按钮一样。我们会在第3章详细描述如何使用它们。尽管不是每个浏览器都兼容这些新的表单控件，你仍然需要对它们保持关注，特别是在开发web应用的时候。除了不依赖javascript库就能提升可用性之外，html5还带来了可访问性的提升。屏幕阅读器和其他浏览程序会通过一些特殊方式实现html5中的表单控件，以方便残障人士使用。

　　1.1.9　提升可访问性

　　使用html5新元素清晰描述的内容更便于屏幕阅读器等程序使用。例如对于某网站的导航，它们更容易找到nav标签，而不是特定的div或无序列表。尾部、侧边栏等内容都能够被轻松地重新排序或整体跳过。一般的页面解析会变得更加容易，从而为那些依靠辅助技术浏览网页的人们带来更好的体验。另外，元素的新属性能够指明元素的角色，以便屏幕阅读器更容易处理这些元素。在第5章，你将了解到如何控制这些新属性来让现有的屏幕阅读器处理它们。

　　1.1.10　先进的选择器

　　利用css3选择器，你可以识别出表格的奇数行和偶数行、所有处于选中状态的复选框，甚至是文章中的最后一段。使用的代码和标记更少了，能完成的事情却更多了。此外，对于一些无法修改html的情况，css3选择器简化了我们的样式设定过程。我们会在第4章探讨如何有效利用这些选择器。

　　1.1.11　视觉效果

　　文本和图像上的阴影效果会让网页更具层次感，而渐变效果可以增加页面的维度。使用css3，你可以直接为元素添加阴影和渐变效果，而不需要借助背景图像或额外的标记。除了阴影和渐变效果，我们还可以使用css3中的变换（transformation）来制作圆角或旋转元素。本书第8章将详述以上内容。

　　1.2　向后兼容

　　今天，开发人员使用html5的最重要原因之一是它被大部分浏览器支持。现在，即使在ie6中，你也可使用html5来开发，逐步转换使用的标记。编写完成后的html代码甚至可以用w3c的验证服务来进行验证（当然，这是有条件的，因为标准也在演进中）。

　　如果你用过html或xml，一定遇到过文档类型声明（doctype
declaration）。它被用来通知验证器和编辑器哪些标签和属性是你可以使用的，以及文档应该以何种方式加以组织。此外，很多web浏览器会根据它来检测如何渲染网页。通常情况，有效的文档类型会使浏览器在“标准模式”下渲染网页。

　　比较一下，下面是许多网站用到的相当冗长的xhtml 1.0 transitional文档类型：

　　而html5 文档类型声明非常简单：

　　在文档顶端使用上面的这个文档类型声明后，你就可以使用html5了。

　　当然，你不能使用目标浏览器不支持的那些html5新元素，不过，这并不妨碍你的文档进行html5验证。

　　1.3　未来之路崎岖不平

　　html5和css3的普及道路上还有许多障碍，其中有些显而易见，有些则不那么明显。

　　小乔爱问……

　　 可是，我喜欢xhtml中的自闭合标签，在html5中我还能使用它们吗?

　　当然可以！许多开发人员喜欢xhtml，因为xhtml对标记的使用有着更严格的要求。xhtml文档要求属性值必须在引号中，内容标签必须自闭合，属性名称必须小写，以及只有格式良好的标记才可以发布到万维网上。改用html5后，你无需改变使用方式。若使用html5语法或xhtml语法，html5文档仍然有效，不过，你需要理解使用自闭合标签的含义。

　　多数web服务器在返回html网页时为其指定的是text/html
mime类型，因为ie无法正确处理与xhtml页面相关联的mime类型application/xml+xhtml。基于此，浏览器往往会去掉自闭合标签，因为自闭合标签在html5之前被视为无效的html。例如，如果你在div前面编写了自闭合script标签，如下所示：

　　浏览器会移去用于自闭合的斜杠，然后，渲染器会认为h2包含在永远都无法闭合的script标签内。这正是为什么编写script标签时都会对其添加一个结束的标签进行显式闭合的原因，尽管自闭合标签是有效的xhtml标记。

　　所以，如果在html5文档中使用自闭合标签，你需要知道这些细节，因为页面会以text /html
mime类型加以渲染。如果想了解更多此方面的知识，可以访问http://www.webdevout.
net/articles/beware-of-xhtml#myths。

　　蛋糕与糖霜

　　我喜欢蛋糕。我更喜欢派，不过，蛋糕也不错。我更喜欢洒满糖霜的蛋糕。

　　当你开发web应用时，必须时刻牢记漂亮的用户界面和绚丽的javascript效果就是洒在蛋糕上的糖霜。即便没有那些装饰，网站也可以相当不错，这就像一块蛋糕，以它为基础，你才能往上洒糖霜。

　　我遇到过一些不喜欢糖霜的人。他们会从蛋糕上将其刮掉。我还见过有些人，他们因为各种各样的原因使用没有javascript的web应用。

　　为这些人烘烤一块非凡的蛋糕吧，然后再撒上糖霜。

　　1.3.1　ie

　　ie是目前世界上应用最广的浏览器，ie8及其以前的版本对html5和css3的支持非常弱。ie9做了改进，但仍未广泛使用这些新技术。这并不是说我们在网站中完全不能用html5和css3。我们的网站可以在ie中正常运行，但它并不一定要像为chrome和firefox开发的版本那样运行。我们可以提供备用解决方案，这样即不会惹怒用户，也不会失去客户。

　　1.3.2　可访问性

　　用户需要与网站交互，无论他们是有视力障碍或听力障碍，还是使用旧的浏览器、连接慢的网络或者移动设备上网。html5引入了一些新元素，如audio、video和canvas。音频和视频一直都有可访问性问题，而canvas又提出了新的挑战。基于canvas元素，我们能够在html文档中使用javascript创建矢量图形。这不仅给会视力障碍的用户带来问题，也会给5%左右禁用了javascript的用户制造麻烦。

　　正像我们要考虑使用ie的人群一样，在使用新技术和为html5元素提供适当备用方案时，我们也应该考虑到可访问性。

　　1.3.3　废弃的标签

　　html5引入了许多新元素，但同时新规范也废弃了不少常见元素，你可能会在自己的页面中找到这些元素。如果能做到不使用它们，那就表明你进步了。

　　首先是删除了几个表现性元素。如果你在代码中发现了它们，马上清除它们！用语义正确的元素代替它们，并使用css来确保渲染后的效果。

　　……
brian p. hogan
1995年起便开始以自由职业者的身份开发专业网站并提供咨询服务，目前常使用ruby、jquery、html5和css3构建web应用。他乐于讲述并撰写与web设计和开发有关的内容，倡导为残障人士（特别是视觉障碍者）研发辅助功能。

纸张：胶版纸
字数：288000
版次：1
开本：16开
印次：1
包装：平装