新書推薦：
《
揉碎浪漫（全两册）
》
售價：NT$
320.0
《
古籍善本
》
售價：NT$
2448.0
《
人民币国际化报告2024：可持续全球供应链体系与国际货币金融变革
》
售價：NT$
398.0
《
道德经新注 81幅作者亲绘哲理中国画，图文解读道德经
》
售價：NT$
653.0
《
清俗纪闻
》
售價：NT$
449.0
《
镜中的星期天
》
售價：NT$
347.0
《
世界前沿技术发展报告2024
》
售價：NT$
857.0
《
可转债——新手理财的极简工具
》
售價：NT$
296.0
|
| 編輯推薦： |
Web和移动开发必读
掌握技术走向，自信应对未来
轻松实用、细致入微
|
| 內容簡介： |
《HTML5和CSS3实例教程》共分3部分，集中讨论了HTML5和CSS3规范及其技术的使用方法。首先是规范概述，介绍了新的结构化标签、表单域及其功能包括自动聚焦功能和占位文本和CSS3的新选择器。接下来是HTML对视频和音频的支持，讲述了画布上的图形绘制及CSS阴影、渐变和变换的使用方法。最后介绍使用HTML5的客户端特性包括Web Storage、Web SQL Databases以及离线支持建立客户端应用，使用HTML5实现跨域消息和数据传送，以及操作浏览器历史等的方法。
《HTML5和CSS3实例教程》适合所有使用HTML和CSS的Web开发人员学习参考。
|
| 關於作者： |
|
Brian P. Hogan 1995年起便开始以自由职业者的身份开发专业网站并提供咨询服务，目前常使用Ruby、jQuery、HTML5和CSS3构建Web应用。他乐于讲述并撰写与Web设计和开发有关的内容，倡导为残障人士（特别是视觉障碍者）研发辅助功能。
|
| 目錄：
|
目 录
第1章 HTML5和CSS3概述 1
1.1 一个新的Web开发平台 1
1.1.1 更多的描述性标记 1
1.1.2 较少依赖于插件的多媒体支持 1
1.1.3 更强大的Web应用 2
1.1.4 跨文档消息通信 2
1.1.5 Web Sockets 2
1.1.6 客户端存储 2
1.1.7 更精美的界面 2
1.1.8 更强大的表单 2
1.1.9 提升可访问性 3
1.1.10 先进的选择器 3
1.1.11 视觉效果 3
1.2 向后兼容 3
1.3 未来之路崎岖不平 4
1.3.1 IE 5
1.3.2 可访问性 5
1.3.3 废弃的标签 6
1.3.4 企业利益的竞争 7
1.3.5 HTML5和CSS3仍在改进 8
第一部分 改善用户界面
第2章 新的结构标签和属性 10
2.1 实例1：用语义化标记重定义博客 11
2.1.1 以正确的文档类型声明为基础 13
2.1.2 头部 13
2.1.3 尾部 14
2.1.4 导航 14
2.1.5 区段和文章 15
2.1.6 文章 16
2.1.7 旁白和侧边栏 17
2.1.8 旁白绝非页面侧边栏 18
2.1.9 添加样式 19
2.1.10 回退 21
2.2 实例2：使用自定义数据属性创建弹出窗口 22
2.2.1 行为与内容的分离，或者说为什么设置onclick不好 22
2.2.2 提升可访问性 23
2.2.3 废弃onclick 23
2.2.4 自定义数据属性来解围 24
2.2.5 回退 25
2.2.6 未来展望 25
第3章 创建易用的Web表单 27
3.1 实例3：使用新的输入域描述数据 28
3.1.1 改进AwesomeCo项目中的表单 28
3.1.2 创建基础表单 29
3.1.3 使用range类型创建滑块 29
3.1.4 使用选值框处理数字 30
3.1.5 日期控件 30
3.1.6 email类型 31
3.1.7 url类型 31
3.1.8 color类型 32
3.1.9 回退 32
3.1.10 替换颜色选择器 33
3.1.11 Modernizr 34
3.2 实例4：使用autofocus属性定位第一个表单域元素 34
3.3 实例5：使用placeholder属性进行提示 35
3.3.1 简单的注册表单 36
3.3.2 阻止自动完成 37
3.3.3 回退 38
3.4 实例6：基于contenteditable属性实现在位编辑 42
3.4.1 账户表单 42
3.4.2 持久化数据 44
3.4.3 回退 44
3.4.4 创批建编辑页面 44
3.4.5 未来展望 47
第4章 用CSS3打造更好的用户界面 48
4.1 实例7：使用伪类渲染表格 49
4.1.1 优化付款清单样式 49
4.1.2 使用:nth-of-type条纹化表格的行 51
4.1.3 使用:nth-child对齐列文本 52
4.1.4 使用:last-child加粗最后一行 53
4.1.5 使用:nth-last-child向前查找元素 54
4.1.6 回退 55
4.1.7 修改html代码 55
4.1.8 使用JavaScript 56
4.2 实例8：使用:after和content支持打印页面上的链接 57
4.2.1 使用CSS 57
4.2.2 回退 58
4.3 实例9：创建多列布局 60
4.3.1 分栏 60
4.3.2 回退 63
4.4 实例10：使用媒体查询构建移动设备界面 65
4.4.1 回退 66
4.4.2 未来展望 66
第5章 增强可访问性 67
5.1 实例11：使用ARIA角色提供导航提示 68
5.1.1 标志角色 68
5.1.2 文档结构角色 70
5.1.3 回退 71
5.2 实例12：创建可访问的可更新区域 71
5.2.1 创建页面 72
5.2.2 polite和assertive更新 74
5.2.3 atomic更新 74
5.2.4 隐藏区域 74
5.2.5 回退 76
5.2.6 未来展望 76
第二部分 新的影音解决方案
第6章 在canvas上绘图 78
6.1 实例13：绘制logo 78
6.1.1 绘制logo 80
6.1.2 添加文字 81
6.1.3 绘制线条 81
6.1.4 移动原点 82
6.1.5 添加颜色 83
6.1.6 回退 84
6.2 实例14：使用RGraph绘制统计图 84
6.2.1 使用HTML描述数据 85
6.2.2 将HTML内容转换为条形图 86
6.2.3 显示备用内容 87
6.2.4 回退 88
6.2.5 未来展望 90
第7章 嵌入音频和视频 92
7.1 发展历史 92
7.2 容器和编解码器 93
7.2.1 视频编解码器 94
7.2.2 音频编解码器 95
7.2.3 容器和编解码器协同工作 96
7.3 实例15：音频 96
7.3.1 建立基本列表 97
7.3.2 回退 98
7.4 实例16：嵌入视频 99
7.4.1 回退 101
7.4.2 HTML5视频的限制 103
7.4.3 音频、视频和可访问性 104
7.4.4 未来展望 105
第8章 柔化视觉体验 106
8.1 实例17：创建圆角 106
8.1.1 圆角化登录表单 107
8.1.2 特定于浏览器的选择器 108
8.1.3 回退 109
8.1.4 检测对圆角的支持 109
8.1.5 jQuery Corners 110
8.1.6 自制表单圆角插件 111
8.1.7 生成圆角 111
8.1.8 微调 112
8.2 实例18：使用阴影、渐变和变换 113
8.2.1 基础结构 113
8.2.2 增加渐变 115
8.2.3 给标志加上阴影 115
8.2.4 旋转标志 116
8.2.5 调节背景的透明度 117
8.2.6 回退 118
8.2.7 旋转 119
8.2.8 渐变 119
8.2.9 透明度 120
8.2.10 整合 120
8.3 实例19：使用实用的字体 122
8.3.1 @font-face 122
8.3.2 字体格式 123
8.3.3 改变字体 124
8.3.4 回退 125
8.3.5 未来展望 126
第三部分 HTML5延伸
第9章 客户端数据的使用 128
9.1 实例20：使用localStorage保存参数设置 129
9.1.1 创建参数表单 130
9.1.2 保存和加载设置 131
9.1.3 应用设置 132
9.1.4 回退 132
9.2 实例21：在客户端关系数据库中保存数据 135
9.2.1 浏览器中的CRUD 135
9.2.2 留言的前端展现 136
9.2.3 连接数据库 138
9.2.4 创建留言表 139
9.2.5 加载留言 139
9.2.6 获取指定记录 140
9.2.7 插入、更新和删除记录 141
9.2.8 包装 143
9.2.9 回退 144
9.3 实例22：离线运行 145
9.3.1 使用manifest定义缓存 145
9.3.2 manifest和缓存 146
9.3.3 未来展望 147
第10章 使用其他API锦上添花 148
10.1 实例23：维护历史记录 148
10.1.1 保存当前状态 149
10.1.2 获取先前状态 149
10.1.3 默认状态 150
10.1.4 回退 150
10.2 实例24：跨域对话 151
10.2.1 联系人列表 152
10.2.2 发送消息 153
10.2.3 支持页面 153
10.2.4 接收消息 155
10.2.5 回退 156
10.3 实例25：使用Web Sockets进行即时通信 157
10.3.1 即时通信界面 157
10.3.2 与服务器交互 159
10.3.3 回退 160
10.3.4 什么是Flash套接字策略 161
10.3.5 服务器 162
10.4 实例26：Geolocation 162
10.4.1 定位Awesomeness 163
10.4.2 如何定位 163
10.4.3 回退 164
10.4.4 未来展望 166
第11章 未来的发展方向 167
11.1 CSS3变换 167
11.2 Web Workers 170
11.3 原生拖放支持 171
11.3.1 拖放事件 172
11.3.2 释放元素 173
11.3.3 修改样式 174
11.3.4 拖动文件 175
11.3.5 并不完美 175
11.4 WebGL 176
11.5 Indexed Database API 176
11.6 客户端表单验证 176
11.7 前进！ 177
附录A 功能快速索引 178
A.1 新元素 178
A.2 属性 178
A.3 表单 178
A.4 表单域属性 179
A.5 可访问性 179
A.6 多媒体 180
A.7 CSS3 180
A.8 客户端存储 181
A.9 其他API 181
附录B jQuery入门 183
B.1 加载jQuery 183
B.2 jQuery基础 183
B.3 修改内容的方法 184
B.3.1 hide和show 184
B.3.2 html、val和attr 184
B.3.3 append、prepend和wrap 185
B.3.4 CSS和类 185
B.3.5 链 186
B.4 创建元素 186
B.5 事件 187
B.5.1 绑定 187
B.5.2 原始事件 187
B.6 document.ready 188
附录C 音频和视频编码 189
C.1 音频编码 189
C.2 为Web进行视频编码 189
附录D 资源 191
附录E 参考书目 193
|
| 內容試閱：
|
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网页时为其指定的是texthtml
MIME类型，因为IE无法正确处理与XHTML页面相关联的MIME类型applicationxml+xhtml。基于此，浏览器往往会去掉自闭合标签，因为自闭合标签在HTML5之前被视为无效的HTML。例如，如果你在div前面编写了自闭合script标签，如下所示：
浏览器会移去用于自闭合的斜杠，然后，渲染器会认为h2包含在永远都无法闭合的script标签内。这正是为什么编写script标签时都会对其添加一个结束的标签进行显式闭合的原因，尽管自闭合标签是有效的XHTML标记。
所以，如果在HTML5文档中使用自闭合标签，你需要知道这些细节，因为页面会以text html
MIME类型加以渲染。如果想了解更多此方面的知识，可以访问http:www.webdevout.
netarticlesbeware-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来确保渲染后的效果。
……
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
