描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787111546696丛书名: OReilly精品图书系列
内容简介
JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精力,以及jQueryUI插件中的创新。
目 录
目录
前言
部分JavaScript入门
第1章编写个JavaScript程序
1.1编程简介
1 2如何把JavaScript添加到页面中
1.3个JavaScript程序
1.4把文本写到Web页面上
1.5附加外部JavaScript文件
1.6追踪错误
第2章JavaScripttYJ语法
2.1语句
2.2内置函数
23数据类型
2.4变量
2.5操作数据类型和变量
2.6教程:使用变量创建消息
2.7教程:请求信息
2.8数组
2.9教程:编写使用数组的页面
2.10对象的简单介绍
2.1 1注释
第3章为程序添加逻辑和控制
3.1使程序智能地响应
3.2教程:使用条件语句
3.3使用循环处理重复性任务
3.4函数:把有用的代码转换为可复用的命令
3.5教程:一个简单测验
第二部分jQuery入门
第4章jQuery简介-.
4.1 JavaScript库简介
4.2获取jQuery
4.3把jQuery添加到页面中
4.4修改Web页面:概览
4.5理解文档对象模型
4.6再谈选择页面元素
4.7向页面中添加内容
4.8设置和读取标签属性
4.9读取、设置和删除HTML属性
4.10操作选中的每个元素
4.1 1自动提取引用
第5章动作/响应:让页面通过事件动起来
5.1事件
5.2以jQuery的方式使用事件
5.3教程:事件简介
5.4更多的jQuery事件概念
5.5高级事件管理
第三部分开始jQuery UI学习
第四部分高级jQuery UI和JavaScript
第五部分提示、技巧和排错
第六部分附录
前言
部分JavaScript入门
第1章编写个JavaScript程序
1.1编程简介
1 2如何把JavaScript添加到页面中
1.3个JavaScript程序
1.4把文本写到Web页面上
1.5附加外部JavaScript文件
1.6追踪错误
第2章JavaScripttYJ语法
2.1语句
2.2内置函数
23数据类型
2.4变量
2.5操作数据类型和变量
2.6教程:使用变量创建消息
2.7教程:请求信息
2.8数组
2.9教程:编写使用数组的页面
2.10对象的简单介绍
2.1 1注释
第3章为程序添加逻辑和控制
3.1使程序智能地响应
3.2教程:使用条件语句
3.3使用循环处理重复性任务
3.4函数:把有用的代码转换为可复用的命令
3.5教程:一个简单测验
第二部分jQuery入门
第4章jQuery简介-.
4.1 JavaScript库简介
4.2获取jQuery
4.3把jQuery添加到页面中
4.4修改Web页面:概览
4.5理解文档对象模型
4.6再谈选择页面元素
4.7向页面中添加内容
4.8设置和读取标签属性
4.9读取、设置和删除HTML属性
4.10操作选中的每个元素
4.1 1自动提取引用
第5章动作/响应:让页面通过事件动起来
5.1事件
5.2以jQuery的方式使用事件
5.3教程:事件简介
5.4更多的jQuery事件概念
5.5高级事件管理
第三部分开始jQuery UI学习
第四部分高级jQuery UI和JavaScript
第五部分提示、技巧和排错
第六部分附录
前 言
前言以前,Web实在是一个令人讨厌的地方。用简单旧式HTML构建的Web页面只是显示信息,而没有其他更多的东西。人们单击一个链接,然后等待载入一个新Web页面,这就是与它的交互。
现如今,大多数Web站点几乎具有和台式机上的程序一样的响应性,对于每次鼠标单击都迅速响应。这都得益于我们将要在本书中学习的内容,即JavaScript与jQuery。
JavaScriptJavaScript是一种程序设计语言,它允许用动画、交互性和动态的视觉效果来增强HTML的功能。
JavaScript可以通过提供即时反馈而使得Web页面更加有用。例如,当访问者选择要购买的一件商品的时候,一个具备JavaScript功能的购物车页面可以即时显示总金额、税费和运费。当某人试图提交一个遗漏了必需信息的Web表单时,JavaScript可以产生一条错误消息。
JavaScript还允许创建有趣的、动态的和交互式的界面。例如,使用JavaScript可以将由缩略图组成的一个静态页面转换为一场包含动画的幻灯片放映。或者,可以做一些更加微妙的事情,例如,通过将内容组织到很小的面板,访问者只要简单地单击一下鼠标就可以访问它们,从而可以在页面上放置更多的信息,而不必使页面显得拥挤(参见9.6节)。或者,添加一些有用的和吸引人的内容,例如,弹出的工具提示为Web页面上的项目提供补充信息(参见9.5节)。
JavaScript的主要优点之一是其即时性。它使得页面可以立即对于某人和页面的交互操作做出响应,例如单击一个链接、填充一个表单,或者只是在屏幕上移动鼠标等操作。JavaScript不会遭遇到和PHP这样的服务器端编程相关的令人沮丧的延迟,而后者依赖于Web浏览器和Web服务器之间的通信。因为JavaScript不会依赖于频繁加载和重新载入Web页面,所以使用它创建的Web页面在感观和操作方面都更像是桌面程序,而不像是一般的Web页面。
如果你访问Google Maps(http://maps.google.com/),将会看到JavaScript的实际应用。Google Maps允许我们查看所在城市的地图(或者很多其他地方的地图),放大以获取街道和公交车站的详细视图,或者缩小以得到如何穿越城镇、州或全国的鸟瞰图。尽管在Google之前有很多的地图站点,但它们总是要求重新载入多个Web页面(这通常是一个很慢的过程)来获得想要的信息。相反,Google Maps不需要刷新页面,它对我们的选择做出快速响应。
使用JavaScript创建的程序,既有真正简单的程序(例如,弹出一个新的浏览器窗口,其中有一个Web页面),也有像Google Docs(http://docs.google.com/)这样功能完备的Web应用程序,而后者允许我们使用Web浏览器来创建演示文稿、编辑文档和创建电子表格,其感觉就像是在计算机上直接运行的程序一样。
JavaScript简史JavaScript由Netscape的Brendan Eich于1995年后期只用了不到10天时间发明的,它几乎和Web本身一样老。尽管JavaScript在如今广受重视,但是它有着颇为跌宕起伏的历史。一度认为它是狂热爱好者的编程语言,用来添加不太有用的效果,如像证券报价机一样在Web浏览器状态栏底部滚动的消息,或者是跟随鼠标在页面上四处移动的、具有动画效果的蝴蝶。在JavaScript的早期,很容易在网上找到数以千计的JavaScript程序(也叫做脚本),但是,很多这样的脚本通常不会在所有的Web浏览器上都有效地运行,并且有时候甚至导致浏览器崩溃。
注意JavaScript和Java编程语言毫无关系。JavaScript初名为LiveScript,但是,Netscape的市场营销人员确信,如果试图和当时热门的Java语言联系起来,JavaScript应该会得到更多的关注。但是,不要把两者混为一谈,尤其是在求职面试的时候。
在早期,JavaScript也遭遇到两个主流浏览器Netscape Navigator和Internet Explorer不兼容的问题。由于Netscape和Microsoft都试图通过添加新的(表面上)和更好的功能来超越对方,因此这两个浏览器常常以不同的方式工作,从而使得人们很难创建在两种浏览器中都能很好运行的JavaScript程序。
注意在Netscape引入了JavaScript之后,Microsoft引入了jScript,这是它们自己的JavaScript版本,包含在 Internet Explorer之中。
幸运的是,一片混战的日子已经过去,当前的浏览器(如Firefox、Safari、Chrome、Opera和Internet Explorer 9)都将它们操作JavaScript的很多方式标准化了,这使得编写在大多数浏览器下工作的JavaScript程序容易一些了(在当前的Web浏览器中仍然有一些不兼容,因此,你需要学习一些处理跨浏览器问题的技巧。我们将在本书中学习如何克服浏览器不兼容的问题)。
在过去的几年里,通过在Google、Yahoo!和Flickr等知名网站上的应用,JavaScript已经获得了重生。这些站点广泛地使用JavaScript来创建交互式的Web应用程序。现在来学习JavaScript是再好不过的时机了。有了丰富的知识和已经编写的高质量的脚本,即便你是初学者,也可以为Web站点添加高级的交互,你完全不必要成为一名计算机科学家。
注意JavaScript也称为ECMAScript。ECMAScript是JavaScript规范的“正式”名称,它由名为Ecma国际(http://www.ecmascript.org/)的国际标准化组织负责开发和维护。
JavaScript随处可见JavaScript并不是仅用于Web页面。已经证明它是非常有用的一种编程语言,如果学习了JavaScript,你可以创建Yahoo!组件和Google App,为iPhone开发程序,并且在像Acrobat、Photoshop、Illustrator和Dreamweaver这些众多的Adobe程序中加入脚本编程功能。实际上,Dreamweaver已经为聪明的JavaScript程序员提供了一种方式来向程序中添加他们自己的命令。
在Yosemite版的Mac OS X操作系统中,Apple让用户通过JavaScript自动操作Mac系统。此外,JavaScript应用于许多实用的前端Web开发工具,如Gulp.js(可自动压缩图像、CSS和JavaScript文件)以及Bower(使得快速而方便地下载常见的JavaScript库,如jQuery、jQuery UI或AngularJS到本机上)。
JavaScript在服务器端开发方面也越来越受欢迎。Node.js平台(谷歌V8的一款 JavaScript引擎,可在服务器上运行JavaScript)完全被Walmart、PayPal、eBay这样的大公司接受。学习JavaScript甚至可以从事构建复杂的服务器端应用开发。事实上,JavaScript对前端(即 JavaScript在Web浏览器中运行)和后端(在Web服务器上运行)的组合称为全栈JavaScript开发。
换言之,现在是学习JavaScript的好时机!
jQueryJavaScript有一个令人尴尬的小秘密:编写起来比较难。尽管JavaScript比很多其他编程语言要简单一些,但它仍然是一门编程语言。并且很多人(包括Web设计师)发现编程很难。更为复杂的是,不同的Web浏览器对JavaScript的理解不同,因此,在Chrome中正常运行的程序可能在Internet Explorer 9中完全没有反应。这种常见的情况可能导致在不同的机器和不同浏览器上要花很多时间进行测试,才能确保程序对站点的所有访问者都能正常工作。
这也是jQuery诞生的原因。jQuery是一个JavaScript库,其目的是使JavaScript编程更容易、更有趣。JavaScript库是一组复杂的JavaScript程序,它简化了有难度的编程任务,并且解决了跨浏览器的问题。换句话说,jQuery解决了JavaScript头疼的两个问题,即不同Web浏览器复杂和繁琐的特性。
在JavaScript编程中,jQuery是Web设计师的秘密武器。有了jQuery,只用单独一行代码就能完成任务,而要编写自己的JavaScript代码来完成这些任务,要写上百行程序并且花很多时间进行浏览器测试。实际上,一本深入介绍JavaScript的图书,至少是本书厚度的两倍,并且,当你读完它时(如果你能设法读完的话),只需一点jQuery知识你就能够完成一半的编程任务。
这就是为什么本书主要介绍jQuery,它使你可以如此轻松地做到很多事情。jQuery的另一个美妙之处在于,你可以使用上千个易于使用的jQuery插件,向Web站点添加高级功能。例如,jQuery UI插件(参见9.1节)可创建许多复杂的用户界面元素,如标签面板、下拉菜单、弹出式日期选择器日历,只需要一行程序就能做到!
jQuery已经用于数百万个站点(http://trends.builtwith.com/javascript/jQuery),这一点也不令人惊奇。甚至像Drupal和WordPress这样流行的内容管理系统,也内置了支持jQuery的模块。你甚至可以找到一种叫做“jQuery程序员”的招聘职位,而根本不提JavaScript。当你学习jQuery的时候,你就加入了Web设计师和程序员的一个大社群,这些人使用一种简单和更为强大的方法来创建功能强大的交互式Web页面。
HTML:主题结构如果没有Web设计的两大支柱HTML和CSS,JavaScript一筹莫展。很多程序员提到,3种语言构成了一个Web页面的三个“层”:HTML提供了结构层,以一种更有意义的方式来组织图片和文字等内容;CSS(Cascading Style Sheet,层叠样式表)提供表现层,使得HTML中的内容很好地显示;JavaScript添加行为层,给Web页面带来活力,使它能够和Web访问者交互。
换句话说,要掌握JavaScript,我们还需要很好地理解HTML和CSS。
注意要了解HTML和CSS的完备介绍,请参阅Elisabeth Robson和Eric Freeman编写的《Head First HTML with CSS and XHTML》。如果需要CSS的技巧性主题的深入介绍,请参阅David Sawyer McFarland所著的《CSS3: The Missing Manual》(这两本书都由O’Reilly出版)。
HTML(HyperText Markup Language,超文本标记语言)使用叫做标签的简单命令来定义Web页面的各个部分。例如,下面的HTML代码创建了一个简单的Web页面:
Hey, I am the title of this web page. Hey, I am some body text on this web page.这个示例可能不是很令人兴奋,但是它具备了一个Web页面所需的所有基本元素。这个页面开始的行是文档类型声明,或者简称为doctype,它说明了页面的文档类型以及它符合哪个标准。HTML实际上有几种不同的版本,并且对于每个版本使用不同的doctype。在这个例子中,该页面的doctype是HTML5;一个HTML 4.01或XHTML文档的doctype更长一些,并且还包含了一个URL,它把Web浏览器指向互联网上的一个文件,其中包含了该类型文件的定义。
实际上,doctype告诉Web浏览器如何显示该页面。doctype甚至可以影响到CSS和JavaScript如何工作。如果doctype不正确或者缺少doctype,我们可能会发现脚本有很多跨浏览器的差别而终四处碰壁。换句话说,总是要在HTML中包含一个doctype。
历史上有许多版本的HTML类型(HTML 4.01 Transitional,HTML 4.01 Strict,XHTML 1.0 Transitional,XHTML 1.0 Strict),但它们巨大、复杂的代码让人在使用它们时容易敲错。推荐使用代码HTML5中更短、更简单的doctype()。
HTML标签如何工作在前面的示例中,和任何Web页面的HTML代码一样,可以看到大多数的命令都成对地出现,并且包含一段文本或其他命令。尖括号之间的内容,也就是那些标签,都是告诉Web浏览器如何显示页面的指令。标签就是超文本标记语言的“标记”部分。
开始标签告诉浏览器指令从哪里开始,而结束标签告诉指令在哪里结束。结束标签总是在个尖括号符号(表示一段文本的开始,而表示其结束。某些标签未包含结束标签,比如、和
这类单标签。
对于功能正常的Web页面,必须至少包含如下3个标签:
标签出现在Web页面刚开始的地方(在doctype之后),并且在Web页面末尾再次出现(带有一个斜杠)。这个标签告诉Web浏览器,这个文档中包含的信息是使用HTML编写的,而不是用其他某种语言编写的。页面的所有内容(包括其他的标签)都出现在开始和结束标签中。
如果把Web页面看做一棵树,标签就是它的树干。从树干伸展出来的是两个分支,分别代表任何Web页面的两个主要部分,即标题和正文。
Web页面的标题由标签括起来,它包含了页面的标题。它还提供了可供浏览器和Web搜索引擎使用的其他不可见的信息(例如,搜索关键字)。
此外,标题还可以包含Web浏览器用来显示Web页面和增加交互性的信息。例如,把CSS放入文档的标题部分。文档的标题也经常包含指向JavaScript程序的链接和指向其他JavaScript文件的链接。
Web页面的正文包含在一对标签中,其中包括了出现在浏览器窗口中的所有信息,包括标题、文本、图片等。
在标签内,我们通常可以看到如下标签:
用
现如今,大多数Web站点几乎具有和台式机上的程序一样的响应性,对于每次鼠标单击都迅速响应。这都得益于我们将要在本书中学习的内容,即JavaScript与jQuery。
JavaScriptJavaScript是一种程序设计语言,它允许用动画、交互性和动态的视觉效果来增强HTML的功能。
JavaScript可以通过提供即时反馈而使得Web页面更加有用。例如,当访问者选择要购买的一件商品的时候,一个具备JavaScript功能的购物车页面可以即时显示总金额、税费和运费。当某人试图提交一个遗漏了必需信息的Web表单时,JavaScript可以产生一条错误消息。
JavaScript还允许创建有趣的、动态的和交互式的界面。例如,使用JavaScript可以将由缩略图组成的一个静态页面转换为一场包含动画的幻灯片放映。或者,可以做一些更加微妙的事情,例如,通过将内容组织到很小的面板,访问者只要简单地单击一下鼠标就可以访问它们,从而可以在页面上放置更多的信息,而不必使页面显得拥挤(参见9.6节)。或者,添加一些有用的和吸引人的内容,例如,弹出的工具提示为Web页面上的项目提供补充信息(参见9.5节)。
JavaScript的主要优点之一是其即时性。它使得页面可以立即对于某人和页面的交互操作做出响应,例如单击一个链接、填充一个表单,或者只是在屏幕上移动鼠标等操作。JavaScript不会遭遇到和PHP这样的服务器端编程相关的令人沮丧的延迟,而后者依赖于Web浏览器和Web服务器之间的通信。因为JavaScript不会依赖于频繁加载和重新载入Web页面,所以使用它创建的Web页面在感观和操作方面都更像是桌面程序,而不像是一般的Web页面。
如果你访问Google Maps(http://maps.google.com/),将会看到JavaScript的实际应用。Google Maps允许我们查看所在城市的地图(或者很多其他地方的地图),放大以获取街道和公交车站的详细视图,或者缩小以得到如何穿越城镇、州或全国的鸟瞰图。尽管在Google之前有很多的地图站点,但它们总是要求重新载入多个Web页面(这通常是一个很慢的过程)来获得想要的信息。相反,Google Maps不需要刷新页面,它对我们的选择做出快速响应。
使用JavaScript创建的程序,既有真正简单的程序(例如,弹出一个新的浏览器窗口,其中有一个Web页面),也有像Google Docs(http://docs.google.com/)这样功能完备的Web应用程序,而后者允许我们使用Web浏览器来创建演示文稿、编辑文档和创建电子表格,其感觉就像是在计算机上直接运行的程序一样。
JavaScript简史JavaScript由Netscape的Brendan Eich于1995年后期只用了不到10天时间发明的,它几乎和Web本身一样老。尽管JavaScript在如今广受重视,但是它有着颇为跌宕起伏的历史。一度认为它是狂热爱好者的编程语言,用来添加不太有用的效果,如像证券报价机一样在Web浏览器状态栏底部滚动的消息,或者是跟随鼠标在页面上四处移动的、具有动画效果的蝴蝶。在JavaScript的早期,很容易在网上找到数以千计的JavaScript程序(也叫做脚本),但是,很多这样的脚本通常不会在所有的Web浏览器上都有效地运行,并且有时候甚至导致浏览器崩溃。
注意JavaScript和Java编程语言毫无关系。JavaScript初名为LiveScript,但是,Netscape的市场营销人员确信,如果试图和当时热门的Java语言联系起来,JavaScript应该会得到更多的关注。但是,不要把两者混为一谈,尤其是在求职面试的时候。
在早期,JavaScript也遭遇到两个主流浏览器Netscape Navigator和Internet Explorer不兼容的问题。由于Netscape和Microsoft都试图通过添加新的(表面上)和更好的功能来超越对方,因此这两个浏览器常常以不同的方式工作,从而使得人们很难创建在两种浏览器中都能很好运行的JavaScript程序。
注意在Netscape引入了JavaScript之后,Microsoft引入了jScript,这是它们自己的JavaScript版本,包含在 Internet Explorer之中。
幸运的是,一片混战的日子已经过去,当前的浏览器(如Firefox、Safari、Chrome、Opera和Internet Explorer 9)都将它们操作JavaScript的很多方式标准化了,这使得编写在大多数浏览器下工作的JavaScript程序容易一些了(在当前的Web浏览器中仍然有一些不兼容,因此,你需要学习一些处理跨浏览器问题的技巧。我们将在本书中学习如何克服浏览器不兼容的问题)。
在过去的几年里,通过在Google、Yahoo!和Flickr等知名网站上的应用,JavaScript已经获得了重生。这些站点广泛地使用JavaScript来创建交互式的Web应用程序。现在来学习JavaScript是再好不过的时机了。有了丰富的知识和已经编写的高质量的脚本,即便你是初学者,也可以为Web站点添加高级的交互,你完全不必要成为一名计算机科学家。
注意JavaScript也称为ECMAScript。ECMAScript是JavaScript规范的“正式”名称,它由名为Ecma国际(http://www.ecmascript.org/)的国际标准化组织负责开发和维护。
JavaScript随处可见JavaScript并不是仅用于Web页面。已经证明它是非常有用的一种编程语言,如果学习了JavaScript,你可以创建Yahoo!组件和Google App,为iPhone开发程序,并且在像Acrobat、Photoshop、Illustrator和Dreamweaver这些众多的Adobe程序中加入脚本编程功能。实际上,Dreamweaver已经为聪明的JavaScript程序员提供了一种方式来向程序中添加他们自己的命令。
在Yosemite版的Mac OS X操作系统中,Apple让用户通过JavaScript自动操作Mac系统。此外,JavaScript应用于许多实用的前端Web开发工具,如Gulp.js(可自动压缩图像、CSS和JavaScript文件)以及Bower(使得快速而方便地下载常见的JavaScript库,如jQuery、jQuery UI或AngularJS到本机上)。
JavaScript在服务器端开发方面也越来越受欢迎。Node.js平台(谷歌V8的一款 JavaScript引擎,可在服务器上运行JavaScript)完全被Walmart、PayPal、eBay这样的大公司接受。学习JavaScript甚至可以从事构建复杂的服务器端应用开发。事实上,JavaScript对前端(即 JavaScript在Web浏览器中运行)和后端(在Web服务器上运行)的组合称为全栈JavaScript开发。
换言之,现在是学习JavaScript的好时机!
jQueryJavaScript有一个令人尴尬的小秘密:编写起来比较难。尽管JavaScript比很多其他编程语言要简单一些,但它仍然是一门编程语言。并且很多人(包括Web设计师)发现编程很难。更为复杂的是,不同的Web浏览器对JavaScript的理解不同,因此,在Chrome中正常运行的程序可能在Internet Explorer 9中完全没有反应。这种常见的情况可能导致在不同的机器和不同浏览器上要花很多时间进行测试,才能确保程序对站点的所有访问者都能正常工作。
这也是jQuery诞生的原因。jQuery是一个JavaScript库,其目的是使JavaScript编程更容易、更有趣。JavaScript库是一组复杂的JavaScript程序,它简化了有难度的编程任务,并且解决了跨浏览器的问题。换句话说,jQuery解决了JavaScript头疼的两个问题,即不同Web浏览器复杂和繁琐的特性。
在JavaScript编程中,jQuery是Web设计师的秘密武器。有了jQuery,只用单独一行代码就能完成任务,而要编写自己的JavaScript代码来完成这些任务,要写上百行程序并且花很多时间进行浏览器测试。实际上,一本深入介绍JavaScript的图书,至少是本书厚度的两倍,并且,当你读完它时(如果你能设法读完的话),只需一点jQuery知识你就能够完成一半的编程任务。
这就是为什么本书主要介绍jQuery,它使你可以如此轻松地做到很多事情。jQuery的另一个美妙之处在于,你可以使用上千个易于使用的jQuery插件,向Web站点添加高级功能。例如,jQuery UI插件(参见9.1节)可创建许多复杂的用户界面元素,如标签面板、下拉菜单、弹出式日期选择器日历,只需要一行程序就能做到!
jQuery已经用于数百万个站点(http://trends.builtwith.com/javascript/jQuery),这一点也不令人惊奇。甚至像Drupal和WordPress这样流行的内容管理系统,也内置了支持jQuery的模块。你甚至可以找到一种叫做“jQuery程序员”的招聘职位,而根本不提JavaScript。当你学习jQuery的时候,你就加入了Web设计师和程序员的一个大社群,这些人使用一种简单和更为强大的方法来创建功能强大的交互式Web页面。
HTML:主题结构如果没有Web设计的两大支柱HTML和CSS,JavaScript一筹莫展。很多程序员提到,3种语言构成了一个Web页面的三个“层”:HTML提供了结构层,以一种更有意义的方式来组织图片和文字等内容;CSS(Cascading Style Sheet,层叠样式表)提供表现层,使得HTML中的内容很好地显示;JavaScript添加行为层,给Web页面带来活力,使它能够和Web访问者交互。
换句话说,要掌握JavaScript,我们还需要很好地理解HTML和CSS。
注意要了解HTML和CSS的完备介绍,请参阅Elisabeth Robson和Eric Freeman编写的《Head First HTML with CSS and XHTML》。如果需要CSS的技巧性主题的深入介绍,请参阅David Sawyer McFarland所著的《CSS3: The Missing Manual》(这两本书都由O’Reilly出版)。
HTML(HyperText Markup Language,超文本标记语言)使用叫做标签的简单命令来定义Web页面的各个部分。例如,下面的HTML代码创建了一个简单的Web页面:
实际上,doctype告诉Web浏览器如何显示该页面。doctype甚至可以影响到CSS和JavaScript如何工作。如果doctype不正确或者缺少doctype,我们可能会发现脚本有很多跨浏览器的差别而终四处碰壁。换句话说,总是要在HTML中包含一个doctype。
历史上有许多版本的HTML类型(HTML 4.01 Transitional,HTML 4.01 Strict,XHTML 1.0 Transitional,XHTML 1.0 Strict),但它们巨大、复杂的代码让人在使用它们时容易敲错。推荐使用代码HTML5中更短、更简单的doctype()。
HTML标签如何工作在前面的示例中,和任何Web页面的HTML代码一样,可以看到大多数的命令都成对地出现,并且包含一段文本或其他命令。尖括号之间的内容,也就是那些标签,都是告诉Web浏览器如何显示页面的指令。标签就是超文本标记语言的“标记”部分。
开始标签告诉浏览器指令从哪里开始,而结束标签告诉指令在哪里结束。结束标签总是在个尖括号符号(表示一段文本的开始,而表示其结束。某些标签未包含结束标签,比如、和
这类单标签。
对于功能正常的Web页面,必须至少包含如下3个标签:
标签出现在Web页面刚开始的地方(在doctype之后),并且在Web页面末尾再次出现(带有一个斜杠)。这个标签告诉Web浏览器,这个文档中包含的信息是使用HTML编写的,而不是用其他某种语言编写的。页面的所有内容(包括其他的标签)都出现在开始和结束标签中。
如果把Web页面看做一棵树,标签就是它的树干。从树干伸展出来的是两个分支,分别代表任何Web页面的两个主要部分,即标题和正文。
Web页面的标题由标签括起来,它包含了页面的标题。它还提供了可供浏览器和Web搜索引擎使用的其他不可见的信息(例如,搜索关键字)。
此外,标题还可以包含Web浏览器用来显示Web页面和增加交互性的信息。例如,把CSS放入文档的标题部分。文档的标题也经常包含指向JavaScript程序的链接和指向其他JavaScript文件的链接。
Web页面的正文包含在一对标签中,其中包括了出现在浏览器窗口中的所有信息,包括标题、文本、图片等。
在标签内,我们通常可以看到如下标签:
用
标签告诉Web浏览器一段文本开始,而用
表示一段文本结束。
标签突出显示文本。如果把某段文本包含在成对的标签和中,将会得到粗体文本。HTML代码段Warning!告诉Web浏览器以粗体显示单词 “Warning!”。
。
浏览器知道,当访问者单击了“Click here!”的时候,它应该跳转到Missing Manual Web站点。这个标签的href部分叫做属性,而这个URL(Uniform Resource Locator,统一资源定位符或Web地址)是值。在这个例子中,http://www.missingmanuals.com是href属性的值。
快速熟悉验证Web页面正如前面所介绍的,Web页面的doctype标识用来创建Web页面的HTML或XHTML的类型。规则根据类型而略有不同,例如,和HTML 4.01不同,XHTML不允许拥有一个未结束的
标签,并且要求所有的标签名和属性都是小写的(例如,
评论
还没有评论。