第6章 SWT概述清华大学出版社.docx

上传人：b****1 文档编号：20998126 上传时间：2023-04-25 格式：DOCX 页数：21 大小：123.31KB

下载相关举报

第1页 / 共21页

第2页 / 共21页

第3页 / 共21页

第4页 / 共21页

第5页 / 共21页

点击查看更多>>

下载资源

资源描述

第6章 SWT概述清华大学出版社.docx

《第6章 SWT概述清华大学出版社.docx》由会员分享，可在线阅读，更多相关《第6章 SWT概述清华大学出版社.docx（21页珍藏版）》请在冰豆网上搜索。

第6章 SWT概述清华大学出版社.docx

第6章SWT概述清华大学出版社

第1章HTML5标准

HTML5是下一代HTML的标准，目前仍然处于发展阶段。

经过了Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。

今天，技术人员、设计者、互联网爱好者都在热议HTML5，HTML5俨然已经成为互联网领域最热门的词语。

与HTML4相比，HTML5的发展有着革命性的进步。

基于良好的设计理念，HTML5不但增加了很多新功能，而且对于涉及的每一个细节都有着明确的规定。

HTML5正在引领时代的潮流，必将开创互联网的新时代。

1.1HTML5介绍

在学习HTML5之前，我们先介绍一下HTML5的来龙去脉。

1.1.1HTML5的历史背景

HTML的出现由来已久。

1993年，HTML首次由因特网工程任务组（IETF）以因特网草案的形式发布。

接着，HTML的发展一路高歌：

1995年发布了2.0版，1996年发布了3.2版，1997年发布了4.0版，1999年12月发布了4.01版。

从第三个版本（3.2版）开始，W3C（万维网联盟）开始接手，并负责后续版本的制定工作。

在HTML4.01之后，W3C的认识发生了倒退，把发展HTML放在了次要地位，而把主要注意力转移到了XML和XHTML之上。

由于当时正值CSS崛起，设计者们对于XHTML的发展深信不疑。

但随着互联网的发展，HTML迫切需要增加一些新的功能，制定新的规范。

为了能继续深入发展HTML规范，在2004年，一些浏览器厂商联合成立了WHATWG（Web超文本技术工作小组），以推动HTML5规范。

最初，WHATWG的工作内容包含两个部分：

WebForms2.0和WebApps1.0。

它们都是对HTML的发展，并被纳入HTML5的规范之中。

Web2.0也是在那个时候提出来的。

2006年，W3C组建了新HTML的工作组，非常明智地采纳了WHATWG的意见，于2008年发布了HTML5的工作草案。

2009年W3C停止了对XHTML2的工作。

紧接着，HTML5的草案不断地更新。

2010年，HTML5开始进入众多开发者的视野。

在HTML5规范还没定稿的情况下，各大浏览器厂商就已经按捺不住了，纷纷参与到规范的制定中来，并对自己旗下的产品进行升级以支持HTML5的新功能。

HTML5规范涉及的内容非常多，众多浏览器厂商的参与使得可以及时获得一些实验性的反馈，HTML5规范也得以持续的完善。

与此同时，IETF制定相关通信协议。

HTML5就是以这种方式快速地融入到Web开发平台当中。

1.1.2HTML5的现状

今天，几乎所有最新版的浏览器都已经在不同程度上支持HTML5，开发者也可以尝试开发基于HTML5的新功能了。

1．两个发展的时间点

HTML5规范仍然处于草案更新之中，但是最新的草案已经相对比较完备了。

HTML规范的发布有两个时间点，如图1-1所示。

图1-1HTML5规范的发布时间点

第一个时间点是2012年，目标是发布“候选推荐版”；第二个时间点是2022年，目标是发布“计划推荐版”。

也许你会认为，既然要到2022年，那就等十年再说吧。

这是非常错误的想法，你需要先明白这两个时间点的真正含义再下结论。

首先是2012年，这是最重要的时间点，因为这一年要发布候选推荐版。

一个规范如果要成为候选推荐标准（REC），它需要具备百分之百的可实施性，只有成功通过上万项的测试案例后才能验证这一点。

据保守估计，整个规范可能需要进行2万项测试。

其次是2022年，这一年要发布计划推荐版。

那个时候，至少会有两大浏览器会完全支持HTML5的所有特性。

如果考虑到HTML5标准的规模，这个日期还是太乐观了。

毕竟之前发布的HTML4.01已经经过十多年都没能实现这一目标。

按照此说法，在两大浏览器支持所有的功能之前，HTML5的规范是没有最终定稿的。

如果你真的等十年之后再来学习，就悔之晚矣。

2.目前发展状况

首先，各大浏览器都已经积极支持HTML5的新功能。

各大浏览器厂商不仅积极地支持HTML5规范，而且还参与到HTML5规范的制定之中。

真正重要的一小部分HTML5新特性已经得到浏览器的支持。

所有浏览器对HTML5的支持情况，都会在一周之内发生变化，因为浏览器制作厂商的创新速度也非常快。

其次，目前已经存在很多基于HTML5的应用了。

有些网站明确表示支持HTML5，并提示用户升级浏览器，很多网络应用也已经为HTML5的到来做了充分的准备。

2012年是HTML5真正发力的开始，而且对于移动应用优势非常明显。

3．HTML5的开发组织

HTML5最初是由WHATWG推动开发的，到了今天，已经有三个重要的组织参与进来。

❑WHATWG：

由来自Apple、Mozilla、Opera、Google等浏览器厂商的人员组成，成立于2004年。

负责开发HTML和Web应用API，并提供了开放式的合作。

❑W3C：

W3C下辖的HTML工作组负责发布HTML5规范。

❑IETF：

因特网工程任务组下辖的HTTP等负责Internet协议的团队。

其中HTML5定义的一个新功能WebSocketAPI就依赖于新的WebSocket协议，这个协议正是由IETF开发的。

1.1.3良好的设计理念

回顾HTML的发展历程，曾经出现了XHTML规范，但没有得到较好的发展。

特别是XHTML2，对语法解析过于严格，严重地违背了著名的Postel法则：

“发送时要保守；接收时要开放”。

根据Postel法则，对自己发送出去的东西要严格要求，而对接收的东西则要放松限制。

HTML5的设计理念就遵循了这个法则，同时HTML5也强调了其兼容性、实用性和互操作性。

1.化繁为简

HTML5为了做到尽可能简化，避免了一些不必要的复杂设计。

例如，DOCTYPE的改进：

在过去的HTML版本中，第一行的DOCTYPE过于冗长，没有几个人能记得住，在实际的Web开发中也没有什么意义。

而在HTML5中就非常简单：

DOCTYPEhtml>

HTML5改进的方面如下。

❑简化了DOCTYPE。

❑简化了字符集声明。

❑以浏览器的原生能力替代脚本代码的实现。

❑简单而强大的HTML5API。

为了让一切变得简单，HTML5可谓下足了功夫。

为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。

2.向下兼容

遵循Postel法则，HTML5有着很强的兼容能力。

在这方面，HTML5没有颠覆性的革新，允许存在不严谨的写法，例如，一些标签的属性值没有使用引号括起来；标签属性中包含大写字母；有的标签没有闭合等。

然而这些不严谨的错误处理方案，在HTML5的规范中都有着明确的规定，也希望未来在浏览器中有一致的支持。

当然对于Web开发者来说，还是严谨一点好。

对于HTML5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。

在HTML5的规范中，也考虑了这方面的内容。

如在HTML5中input标签的type属性增加了很多类型，当浏览器不支持这些类型时，默认会将其视为text，实现了优雅的降级。

3.支持合理存在的内容

HTML5的设计者们花费了大量的精力来研究通用的行为。

例如，Google分析了上百万的页面，从中提取了DIV标签的ID名称。

例如很多人都是这样标记导航区域的：

//导航区域内容

既然该行为已经大量存在，HTML5就会想办法去改进，所以就直接增加了一个nav标签，用于导航区域。

4.解决实用性的问题

对于HTML无法实现的一些功能，用户会寻求其他方法来实现，如对于绘图、多媒体、地理位置、实时获取信息等应用，通常会开发一些相应的插件间接地去实现。

HTML5的设计者们研究了这些需求，开发了一系列用于Web应用的接口。

HTML5规范的制定是非常开放的，所有人都可以获取草案的内容，也可以参与进来提出宝贵的意见。

因为开放，所以可以得到更加全面的发展。

一切以用户需求为最终目的，用户需要什么，它就规范什么。

所以，当你在使用HTML5的新功能时，会发现正是期待已久的东西。

5.最终用户优先

这个设计理念本质上是一种解决冲突的机制。

在遇到无法解决的冲突的时候，规范会把最终用户的诉求放在第一位。

因此，HTML5的绝大部分功能都是非常实用的。

HTML5规范的制定遵循如下的优先顺序：

用户>编写HTML的开发者>浏览器厂商>规范制定者>理论的存粹性

可见，用户与开发者的重要性要远远高于规范和理论。

例如，有很多用户都需要实现一个新的功能，HTML5规范设计者们会研究这种需求，并纳入规范；HTML5规范了一套错误处理机制，以便当Web开发者写了不够严谨的代码时，接纳这种不严谨的做法。

所以，当你在使用HTML5时，会发现它比以前的版本友好多了。

6.通用访问

这个原则可以分成如下三个方面。

❑可访问性：

HTML5考虑了残障用户的需求，以屏幕阅读器为基础的元素也已经被添加到规范当中。

❑媒体中立：

HTML5规范不仅仅是为某些浏览器而设计的。

也许有一天，HTML5的新功能在不同的设备和平台上都能运行。

❑支持所有语种：

例如，新的元素支持在东亚页面的排版中会用到的Ruby注释。

1.1.4新增的HTML5原生功能

1．新增的原生功能

Web应用程序是HTML5中最大的亮点，它原生地支持了一些只有在桌面应用中才能实现的功能。

这些功能主要如下。

❑Canvas绘图（2D和3D）。

❑Channel消息传送。

❑跨文档消息传送。

❑地理位置。

❑WebSocketAPI及其协议。

❑本地存储。

❑本地数据库。

❑Web工作线程。

❑跨域的异步请求。

❑离线应用。

这些功能都有着独立的规范，并且从属于HTML5。

2.原生功能的优点

在过去，很多功能只能通过安装插件才能够实现。

插件的方式会存在很多问题。

❑插件需要安装，且安装过程可能失败。

❑插件可能会被屏蔽或禁用。

❑插件本身存在安全隐患。

❑插件不容易与HTML文档的其他部分集成。

❑插件的开发，对开发者的技能要求进一步提高。

而HTML5的原生功能，让这些功能的实现变得简单，不需要安装不安全的插件，而且能与页面中的其他元素无缝集成，安全性也提高了很多。

1.1.5HTML5带来的好处

对于用户和开发者而言，HTML5的出现意义非常重大。

因为它将解决之前Web页面存在的诸多问题。

首先，不必考虑各个浏览器的兼容性问题。

在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的规范。

对于用户而言，使用不同的浏览器，常常会看到不同的页面效果，甚至有些功能根本不能使用；Web开发者也伤透脑筋，为了使页面能在多个浏览器中正常使用，不得不写一些hack，徒增了Web开发的复杂度。

在HTML5中，纳入了所有合理的扩展功能。

HTML5规范的内容也非常庞大，各大浏览器厂商关注的是自己的产品能否更好地支持HTML5。

这样，只要是基于HTML5开发的Web应用，都能够在浏览器中正常显示（不过，现在还不能完全这样做）。

其次，可以实现复杂的Web应用。

在HTML5之前，HTML与Web应用程序的关系十分薄弱。

与强大的桌面应用程序的功能相比，Web应用程序的功能是微不足道的，并且在很多方面都做了限制。

在HTML5中，不但大大扩展了Web应用的功能，而且安全性也有了明确的规范。

各大浏览器也争相封装了这些功能，目前已经可以使用HTML5开发富Web应用了。

1.2全新的HTML5

下面让我们快速预览一下HTML5的新功能。

1.2.1从“头”说起

这里所说的是HTML文件的开头部分。

HTML5避免了不必要的复杂性，DOCTYPE和字符集都极大地简化了。

1.简化的DOCTYPE声明

DOCTYPE声明是HTML文件中必不可少的内容，它位于文件的第一行，声明了HTML文件遵循的规范。

声明HTML4.01版的DOCTYPE代码为：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"http:

//www.w3.org/TR/html4/loose.dtd">

这么长的一串代码恐怕极少有人能够默写出来，通常都是通过复制/粘贴的方式添加这段代码。

而在HTML5中的DOCTYPE代码则非常简单：

DOCTYPEhtml>

现在好记得多了，可以告别复制/粘贴的时代了。

同时这种声明，也标志性地让人感觉到这是符合HTML5规范的页面。

如果使用了HTML5的DOCTYPE声明，则会触发浏览器以标准兼容的模式来显示页面。

2.简化的字符集声明

字符集的声明也是非常重要的，它决定了页面文件的编码方式。

在过去，都是使用如下的方式来指定字符集的：

HTML5把它简化成了：

在HTML5中，以上两种方式都可以使用，这是由HTML5的向下兼容的原则决定的。

1.2.2明确简洁的结构

一个非常典型的页面设计中通常会包含头部、页脚、导航、主体内容和侧边内容等区域。

Google从上百万的网页中分析了其存在的合理性，例如，头部区域通常使用：

//页眉

针对这种情况，HTML5引入了与文档结构相关联的结构元素，如表1.1所示。

表1.1HTML5中的结构元素

元素名称

描述说明

header

标记头部区域的内容

footer

标记页脚区域的内容

section

Web页面中的一块区域

article

独立的文章内容区域

aside

清茶博客

喝一杯清茶，约三五知己，聊聊天，叙叙旧...

HTML5

HTML5是下一代HTML的标准，目前仍然处于发展阶段。

经过了Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。

CSS3

对于前端设计师来说，虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。

如示例1-1所示的代码，与HTML5之前的页面布满div标签相比，已经变得清晰了很多。

涉及的各种头部，我们都会将其包含在header标签内，各种结尾内容都会使用footer标签包含，导航菜单放在nav标签内，主要内容放在section标签内，独立的文章部分放在article标签内，相关的简介等内容放在侧边标签aside内。

示例1-1中引用了一个CSS文件（Code1-1.css），这里我们不再展示CSS文件内容（我们会提供相应的源代码供读者学习之用）。

运行结果如图1-2所示。

图1-2新型的HTML5页面结构

使用这些用于结构布局的元素，在设计样式表的时候，不用再添加标签的id特性作为选择器了，而是直接针对标签进行设计，因为标签已经具有一定的语义。

1.2.3新增的元素

上一节介绍了HTML5中的一些结构化的元素，使得页面布局耳目一新。

本节将全面介绍HTML5中新增的元素。

HTML5新增了很多新的有意义的标签，为了方便记忆，我们对它们进行了分类。

1.结构片段

❑article：

标识独立的主体内容区域，可用于论坛帖子、报纸文章、博客条目、用户评论等。

❑aside：

标识非主体内容区域，该区域中的内容应该与附近的主体内容相关。

❑section：

标识文档的小节或部分。

❑footer：

标识页面的页脚，或内容区块的脚注。

❑header：

标识页面的页首，或内容区块的标头。

❑nav：

标识页面的导航区块。

2.进度信息

❑meter：

根据value属性赋值和最大、最小值的度量进行显示的进度条状条形图。

❑progress：

标识任务进度显示的进度条。

3.交互性元素

❑command：

标识一个命令元素（单选、复选或者按钮）；当且仅当这个元素出现在

元素里面时才会被显示，否则将只能作为键盘快捷方式的一个载体。

❑datalist：

标识一个选项组，与input元素配合使用该元素，来定义input可能的值。

4.内嵌应用元素及辅助元素

❑audio：

定义声音，如音乐或其他音频流。

❑video：

定义视频，如电影片段或其他视频流。

❑source：

为媒介元素（如video和audio）定义媒介资源。

❑track：

为诸如video元素之类的媒介规定外部文本轨道。

❑canvas：

定义图形，比如图表和其他图像。

该标签只是图形容器，必须使用脚本来绘制图形。

❑embed：

标识来自外部的互动内容或插件。

5.在文档和应用中使用的元素

❑details：

标识描述文档或文档某个部分的细节。

❑summary：

标识

元素的标题。

❑figcaption：

标识figure元素的标题。

❑figure：

标识一块独立的流内容（图像、图表、照片、代码等）。

❑hgroup：

标识文档或内容的多个标题。

用于将h1～h6元素打包，优化页面结构在SEO中的表现。

6.ruby标签

❑ruby：

标识ruby注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

❑rp：

在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。

❑rt：

标识字符（中文注音或字符）的解释或发音。

7.文本和文本标记元素

❑bdi：

允许设置一段文本，使其脱离其父元素的文本方向设置。

❑mark：

标识需高亮显示的文本。

❑time：

标识日期或时间。

❑output：

标识一个输出的结果。

8.其他

❑keygen：

标识表单密钥生成器元素。

当提交表单时，私钥存储在本地，公钥发送到服务器。

❑wbr：

标识单词中适当的换行位置；可以用此标签为一个长单词指定合适的换行位置。

1.2.4废弃的元素

HTML5也删除了一些元素，主要是以下几个方面的元素。

1.能使用CSS方案替代的元素

在HTML5之前的一些元素中，有一部分是纯粹用作显示效果的元素。

而HTML5延续了内容与表现的分离，对于显示效果更多地交给CSS去完成。

所以，在这方面废除的元素有：

basefont、big、center、font、s、strike、tt、u。

2.不再支持frame框架

由于frame框架对网页可用性存在负面影响，因此在HTML5中已经不支持frame框架，但支持iframe框架。

所以HTML5删除了frame框架中的frameset、frame、noframes元素。

3.其他被废除的元素

其他元素被废除的原因通常都是有了较好的替代方案。

❑废除的applet元素：

可由embed和object元素替代。

❑废除的bgsound元素：

可由audio替代。

❑废除的marquee元素：

可由JavaScript编程方式替代。

❑废除的rb元素：

可由ruby元素替代。

❑废除的acronym元素：

可由abbr元素替代。

❑废除的dir元素：

可由ul元素替代。

❑废除的isindex元素：

可以使用form元素和input元素相结合的方式替代。

❑废除的listing元素：

可由pre元素替代。

❑废除的xmp元素：

可由code元素替代。

❑废除的nextid元素：

可由GUIDS替代。

❑废除的plaintext元素：

可由“text/plain”MIME类型替代。

在HTML5继续完善的过程中，可能还会废除其他不合理的元素。

1.2.5全新的选择器

HTML5极大地增强了选择器的功能。

在HTML5之前，如果要在页面中查找特定元素，只能使用三个函数：

getElementById（）、getElementsByName（）、getElementsByTagName（）。

1.根据类名匹配元素（DOMAPI）

HTML5新增了getElementsByClassName（）函数，是根据类目匹配元素的，返回的是匹配到的数组，无匹配则返回空的数组。

varels=document.getElementsByClassName（'section'）;

支持浏览器：

IE9、Firefox3.0+、Safari3.2+、Chrome4.0+、Opera10.1+。

2.根据CSS选择器匹配元素（SelectorsAPI）

HTML5还提供了两个根据CSS选择器匹配元素的函数：

querySelector（）和querySelectorAll（）。

querySelector（）返回匹配到的第一个元素，如果没有匹配则返回null。

varels=document.querySelector（"ulli:

nth-child（odd）"）;

varels=document.querySelector（"table.test>tr>td"）;

展开阅读全文