深入理解HTML5：语义、标准与样式

《深入理解HTML5：语义、标准与样式》由会员分享，可在线阅读，更多相关《深入理解HTML5：语义、标准与样式（12页珍藏版）》请在装配图网上搜索。

1、深入理解HTML5：语义、标准与样式(勇猛精进早登大师殿堂创最优品质交互)【美】布拉德福(Bradford,A.)【美】海涅(Haine,P.)著高京译ISBN978-7-121-20552-12013年6月出版定价：59.00元280页16开编辑推荐本书讲解循序渐进，包括详细的基础概念和最佳实践。然后覆盖了核心HTML5技术，带你学习多媒体、交互性和改进的语义。每一章都以简单的内容开始，之后进入逐步复杂的示例。在本书中，你会学习到：?用新的语义标签改善代码?不用插件在页面使用多媒体和交互性?用HTML5元素和客户端校验创建出色的表单?探索强大的配套API内容提要HTML5并不一定适用于所有网

2、站，而是面向未来的网站！本书面向的读者是致力于创建有更好的多媒体、交互性和语义的网站的开发者和设计师。本书介绍了HTML5里的新元素和它们的用法，包括不太常用的元素。书中也包含了巧妙的样式和脚本技巧，可以运用于你的网站。本书完全遵循技术标准和最新网站设计技术。目录关于作者xiv关于技术审阅人xv关于封面设计者xvi致谢xvii引言xix第1章起步：HTML5的演变11.1 HTML5=HTML?HTML511.1.1 HTML5出现之前11.1.2 为什么XHTML2.0消失了，而HTML5流行了21.1.3 WHATWG的理念21.1.4 HTML5的现状31.2 剖析HTML5文档41.3

3、 HTML术语和概念51.3.1 元素61.3.2 属性61.3.3 文档模型71.4 HTML5的新特性91.4.1 向后兼容91.4.2 错误处理91.4.3 简化的doctype101.4.4 简化的字符编码111.4.5 新的内容模型类别121.4.6 新元素131.4.7 微数据131.4.8 内嵌MathML和SVG131.4.9 API141.4.10 不再遵循SGML(又一次！)141.4.11 废弃的特性141.5 XHTML消失了吗171.5.1 MIME类型的问题181.6 在HTML和XHTML之间选择181.7 浏览器支持情况191.8 浏览器开发工具20小结21第2

4、章各司其职的标签222.1 全局属性232.1.1 可访问性242.1.2 元数据(metadata)252.1.3 唯一标识262.1.4 可编辑性282.1.5 拼写检查282.1.6 隐藏元素282.1.7 拖曳292.1.8 样式292.1.9 文字方向292.1.10 自定义数据302.2 内容模型类别302.3 根元素312.3.1 html元素的属性332.4 文档元数据和脚本元素332.4.1 网页信息：title和meta342.4.2 链接、样式和资源：base、link和style362.4.3 增加行为和后备内容：script和noscript382.5 文档区块元素4

5、02.5.1 语义区块元素402.6 内容分组元素412.6.1 无法避免的段落：p422.6.2打断内容：hr432.6.3保持格式：pre432.6.4引用文字：blockquote432.6.5列表432.6.6图表、照片、图示：figure和figcaption472.6.7创建分块：div472.7文本级语义元素482.8表格数据元素492.8.1表格基础502.8.2添加表头512.8.3增加说明：caption522.8.4增加结构：thead、tfoot和tbody522.8.5添加更多结构：colgroup和col542.9表单元素562.10内嵌内容元素572.11交互元素

6、592.11.1显示更多：summary和details602.11.2工具条：menu和command62小结62第3章认识语义633.1什么是语义，跟我有什么关系633.2 用大纲思考643.3 HTML5大纲算法653.4 用标题内容隐性地创建大纲663.5 用区块内容创建大纲673.5.1 提高大纲的语义683.6 头和尾703.6.1 使用hgroup713.6.2 格式化有地址的尾部713.6.3 确定头尾内容723.7 查看HTML5大纲733.8 div和span过时了吗743.9 案例学习：城市新闻报743.9.1 添加文本级语义763.10 其他文本级元素843.10.1

7、作品标题：cite853.10.2 格式化计算机输入/输出：code、var、samp、kbd3.10.3标记文本编辑：ins和del853.10.4处理外来脚本85小结87第4章精通表单8885884.1表单元素复习4.1.14.1.24.24.2.14.2.24.34.3.14.3.24.4分析表单元素89表单元素属性90获取输入91最初的输入类型93新输入类型98校验和提交表单102输入字段必填103用按钮和图片提交表单其他常用input元素属性1031054.4.14.4.24.4.34.4.44.54.5.14.5.24.5.34.5.44.5.54.5.64.64.74.7.14.

8、7.24.7.34.84.8.14.8.24.8.34.8.44.8.5小结提供占位符文字105字段只读106autocomplete和autofocus使用数据列表107其他表单控件108菜单108文本块111显示进度112显示度量112显示计算的输出114密钥生成器115用fieldset和label添加结构完整的表单117第一页：收集用户详情117第二页：收集评论121第三页：确认信息123表单可用性124各司其职的输入类型124保持简洁124rtrlr-T卜匚口TVrtrlryifcrrtrl7TP4-r106115别让我思考、别让我费力、别骗我记住互联网是全球的需要时提供后备方案12

9、6利相双125125第5章多媒体：视频、音频和内嵌媒体5.1 一切的开始：img1275.2 图像映射1305.3 嵌入其他媒体1325.3.1 embed元素1325.3.2 object元素1335.4 嵌入的HTML：iframe1355.4.1 处理iframe元素里的内容1365.4.2 新的iframe元素属性1375.4.3 指向iframe1385.5 视频1391251271.1.1 视频格式1391.1.2 版权问题1401.1.3 处理视频源1401.1.4 视频属性1445.6 音频1465.6.1 音频格式1475.7 文字轨1485.8 编码音频和视频1495.9

10、最后一个重要元素150小结150第6章CSS31516.1 当前状态：CSS2.11516.2 CSS3模块1526.3 使用CSS1536.3.1 附上样式表1536.3.2 CSS羊式规则1556.3.3 基本的CSS选择器语法1576.3.4 高级选择器1616.3.5 高效使用选择器1756.3.6 CSS盒模型1766.4 背景和边框1806.4.1 基本背景色和图片1806.4.2 多重背景1846.4.3 圆角1856.4.4 阴影1856.5 颜色1866.5.1 屏幕上的颜色1866.5.2 功能符语法1886.5.3 色调、饱和度、亮度1886.5.4 不透明度1896.6

11、 网页字体的编排设计1906.6.1 网页字体1906.6.2 多列1926.6.3 文字特效1926.6.4 字体的规则193小结194第7章用户交互和HTML5API1957.1 使用本章的JavaScript1957.1.1 操作DOM属性和方法1967.1.2 控制台日志1977.1.3 事件1997.2 历史API2007.2.1 非常简单的Ajax2017.2.2 基于历史的Ajax2037.3 构建自定义视频控制器2057.4 2DCanvasAPI编程2087.4.1画布绘图2117.4.2画布状态2157.4.3画布的交互2167.4.4画布动画2177.5拖曳操作2197.

12、5.1用拖曳排序列表225小结227第8章前方的路2288.1移动互联网的挑战2288.2响应式设计2298.2.1viewport2298.2.2媒体查询2318.3离线应用缓存2338.4其他HTML5技术曲2348.4.1微数据2348.4.2撤销管理器API2368.4.3即将到来的CSSfc236小结237附录A相关技术239索引251精彩节摘译者序互联网从诞生到繁荣的每个阶段，HTML这个简单而强大的标记语言都发挥着举足轻重的作用。从简单的新闻列表展示到复杂的在线表格应用，结合JavaScript、CSS前端工程师用这些简单的标记创建出一个个改变人们生活的应用。但遗憾的是，虽然应用

13、广泛，很久以来HTML的很多特性并没有被正确地运用，技术细节和最佳实践也没有得到足够重视。互联网上充斥着大量劣质编码的HTML页面。这很大程度上是因为即使未经专业的学习，也可以很快地写出简单的HTML页面。如果长此以往使用不规范甚至错误的编码方式，最终甚至会影响互联网的发展。和其他编程语言一样，HTML也需要扎实的基本功才能驾驭。本书作者深谙基础的重要，用了大量篇幅讲解一个个看似简单的概念，很多内容都给出了来龙去脉，有助于读者理解技术和标准产生的背景，并加入了翔实的参考引用。现在使用最广泛的HTML4.0.1标准已经十余年没有重要更新，对于构建复杂的网页应用也越来越显得力不从心。业界早已开始酝

14、酿下一个HTML版本。HTML5标准最早在2004年就由WHATWG提出，经过多年的演变以及各个浏览器阵营的磨合，主流浏览器制造商都已经实现了主要的HTML5核心。特别是近年来移动互联网的兴起，给HTML5的普及带来了更有利的设备环境和难得的商业契机。如果说几年前HTML5还是一个美好的愿望的话，那么现在她已经触手可及了。相信本书能帮助网页设计师和开发者打下一个HTML5的良好基础，但正如作者在最后一部分说的那样，虽然这里覆盖了很多必要的知识点，然而HTML5仍在不断发展中，现代浏览器也在飞速升级，移动互联网日新月异，只有紧跟这些变化，辅以扎实的基础，才是精通HTML5之道。献给我的父母Har

15、da和Stuart,是你们告诉我同样的暴风雨可能是由龙卷风，也可能是由疾风造成的。AnselmBradford作者简介关于作者AnselmBradford是新西兰奥克兰大学（AUT）的数字媒体讲师。他的研究领域是交互性媒体、网页媒体和视觉沟通。他从1996年开始从事互联网相关的开发工作，当时他手写了自己的第一个网站。他的Twitter账号是anselmbradford，偶尔也会在AnselmB发表博客文章。PaulHaine是一个在伦敦工作的网页设计师，他的个人博客是。关于技术审阅人JeffreySambells从事他喜爱的工作。他是个父亲、设计师、开发者、作家和企业家，还有更多其他的头衔。十

16、多年前他开始在互联网上发表各种想法，并且这成为他热爱的事情不断发现更多的可能性。他有创建流程用户体验的专业技能，总是站在技术（特别是移动设备）尖端。你可以在这里找到他的有趣作品：,或者在Twitteriamamused上发现他正在进行的秘密作品。关于封面设计者CornevanDooren设计了本书的封面。在离开ED的朋友，进彳FFoundation系列的新设计后，他从事结合技术和有机体形式的设计工作，本书的封面就是其成果。Corn6小时候在任何东西上画画，然后开始探索多媒体世界，他并不止步于此。他的信念是“多媒体的极限是人的想象力”，这也促使他不断进步。Corn6为很多国际客户工作，为多媒体杂

17、志编写评论，测试软件，从事多媒体研究，并且参与很多其他ED丛书的工作。可以通过他的网站联系他，或更多了解他：。媒体评论不要满足于一般的HTML。做个HTML5大师吧！本书将让你的标记语言更进一步。本书将帮助你成为熟练掌握最新标准方向的开发者。这里有巧妙的技巧，可以用于你的网站。书中介绍了HTML5的新元素，包括不常用的元素，告诉你使用它们的场合和方法。本书结合大量的实际建议和例子，提供让你成为HTML5大师所需的知识一一?HTML5立即上手?使用正确的标签?精通HTML5表单?控制HTML5的音频和视频?创建最佳品质的用户交互?结合CSSK口HTML5,掌握最新标准前言致谢就像生活中的所有事情

18、一样，这本书的准备工作在出版之前很久就开始了。回顾过去，我想我是从两条道路走向了这本书的写作。首先是知识的积累，然后是跟出版社沟通的过程到最终形成本书。在第一条道路上，我得益于自己生命历程中的很多人，他们让我可以发展自己的网页开发技能。虽然还可以追溯到更久以前，但是我对互联网的兴趣首先是在Vermont的少年时期开始的。1996年，我为RainbowOrganicFiberMill，在NorthBennington的一个由BryantRayngay创立的有机棉面料公司开发了一个网站。虽然一直没有上线，但这是我第一次从头手写一个网站，我的兴趣从此埋下了种子。在以后的几年里，我的技能得到了提高（特

19、别是在Atlantic大学的网络管理员SeanMurphy的帮助下）。我非常感谢Sean,他让我在大学期间有很多机会，并自由地作为网站http:/coa.edu的助理管理员学习和发展技能，并最终能够在很多年里负责设计和开发这个网站。还要感谢JaredVorkavich和TaeilKim,他们给了我在研究生阶段发展视觉设计、交互和网页开发技能的空间。还有更多直接和间接的人，为我创造了学习的道路，使我积累了今天的知识。通往这本书的另一条道路开始于我失去了一本书的技术编辑工作机会。我和我的朋友EricKramer都申请了这份工作，但他得到了这个职位。而当这个项目开始后，又需要另一名编辑，然后Eric

20、推荐我加入项目。这是RichShupe为OReillyMedia写的一本书，从那本书后，我又编辑了两本Rich的书，他要求我作为审阅者。感谢Eric和Rich,因为没有他们的话，我可能不会那么多地参与出版工作。通过仔细地审阅技术书籍和观察一本书的制作过程，我相信自己也可以写作。这些项目给我带来了PeachpitPress的书籍编辑工作，最后得到了对我很重要的Apress的工作机会。感谢ED的朋友BenRenow-Clarke,是他启动了这本书，还有JenniferBlackwell和其他Apress团队人员的耐心和对本书的指导。感谢我的技术审阅员JeffreySambells,你的查错能力给了

21、我惊喜。还要感谢PaulHaine的著作HTMLMastery为本书奠定了基础。感谢我在AUT大学的同事，他们为我创造了提高网页技术和写作的机会。特别感谢GudrunFrommherz帮我调整了课程表，使我有更多时间写作，还有AbhiKala,在我写作的很多夜晚都管理着数字媒体部门（也感谢Abhi为我拍了本书的作者照）。还要感谢WHATWGIRC频道的人员，感谢他们在我对HTML标准的一些内容产生疑惑时给予帮助。特别感谢WhitneyTraylor在我开始写书后忍受我分散的注意力和精力。最后感谢我的弟弟Orson,他总是对谈论和分享网页开发知识充满热情和兴趣。AnselmBradford引言除

22、非你一直离开这个数字时代外出度假，否则肯定听到过很多关于HTML5的议论。作为一个互联网从业人员，很显然理解HTML5已经不是加分技能，而是必备技能了。过去几年来互联网的课程从XHTML到HTML5发生了根本性的变化，这带来了新的概念需要学习，也要摒弃过时的编程实践。有时HTML5涵盖的内容可能看起来神秘又模糊，分解HTML5的定义可能会有很多方向。本书会详细地覆盖HTML5的状况，并让你在技术上打下一个坚实的基础。在深入细节之前会简要介绍基础概念，重点在于打下HTML的基础。例如在表单、多媒体和提升了的网站语义化方面有很多新元素和属性。同时也有很多元素和属性被废弃了，作为一个专业的开发者，你

23、应该绝对不再使用它们了（是吧？）。我们用清晰简单的摘要来展示当前HTML元素的正确用法。CS解口JavaScript这两个主题，会通过它们各自和HTML的关系来讨论和研究。另外，为了介绍更进一步的理论和实践知识，数字颜色值、媒体格式、响应式设计，甚至TF三角学这些内容都会介绍。虽然HTML5还要经过多年才能成熟，但你会发现它已经为很多下一代网页应用打下了基础一一可能就是你开发的网页应用呢！本书面向的读者本书面向任何熟悉HTML、CSSJavaScript,并有兴趣深入理解这些标准的读者。HTML5标准非常庞大。本书的介绍将带你快速入门，是你学习更高级HTML知识的“跳板”。虽然HTML、CSS

24、口JavaScript看似熟悉、简单，但是你一定会发现带来惊喜的新内容。学习这些细节知识对于掌握HTML5有莫大作用。读完本书后，你会拥有基础知识和能力去探索更加高级的现代网页开发技术。本书的结构本书首先讨论让HTML5变成今天最炙手可热的开发技术的出奇复杂的历史。针对新接触HTML的读者，在进入HTML5的亮点和自HTML4.0.1之后的变化之前，我们会先介绍HTML5的基本术语。在HTML5状况的概要之后，接下来的章节深入到具体的领域，详细地介绍HTML元素和相关技术。本书的前三分之一部分会帮你了解HTML5的特性，打下扎实的基础，有助你为今天的互联网组织、开发更好的网页。在第2章，你会学

25、到所有元素都拥有的全局属性和HTML5的新内容模型类别，它用于将HTML元素分为一系列重叠的分组。有两章内容用来深入讨论这些元素。语义化地构建页面给予了特别的关注。在广泛理解了所有HTML元素后，本书的第二个三分之一部分深入网页表单元素，在它之后是内嵌媒体。本书最后的三分之一部分包括跟HTML紧密结合使用但是跟HTML元素分离的概念。从第6章开始，讨论HTML和CSS3的关系。会介绍CSS勺基本概念，并通过实例展示CSS3的主要特性。之后介绍HTML5JavaScriptAPI的概念。我们会创建一个简单模板来研究JavaScript,并结合例子演示。本书以移动设备网页开发收尾，最后是正在发展的

26、HTML5技术的摘要。并且全书的最后是通常跟HTML5一起使用（比如地理位置API）,但并不属于HTML5的技术概要。本书可以从头到尾阅读，或者放在你的计算机旁作为元素和概念的参考手册。要充分利用本书，我推荐（WHATWG）HTML标准的要诀，在谈到应该怎样阅读文档才最有效时，是这样说的：“应该从头到尾读多遍。然后，至少从后往前读一遍。之后从目录随机选取，并按照交叉引用阅读。”最后，本书的网站上有相关信息和链接。本书的约定本书有一些约定值得注意：除非注明，否则HTML5和HTML指HTML语言最新的实现。现代浏览器指GoogleChrome11、MozillaFirefox4、Safari5、

27、Opera11、MicrosoftInternetExplorer9或者它们更新的版本。说到单独的HTML元素时，可以加上“元素”，也可以不加，例如pre和pre元素，都指HTML代码的pre。除非注明或暗指，否则假设本书所有的HTML例子都包含在合法HTML5文档的body里。除非注明或暗指，任何CSS和JavaScript代码都假设在一个外部样式表或脚本文件里。包含在更大的代码段里的片段可能会包括省略号（），代表在片段前后有未显示内容。例如：最后，需要注意的是JavaScript示例里创建的全局变量和函数是为了代码的简化和清晰。大部分情况下这是可行的，但是对于专业的最佳实践，JavaScript变量和函数的作用范围经常需要处于一个自定义对象里，以避免不同脚本间的命名冲突。结束了这些例行介绍，让我们开始HTML5之旅吧。