■ 预备知识
阅读本书之前要先具备一些HTML知识。你可能开发过一两个网站(或者至少写过一两个网页),因此熟悉超文本标记语言(Hypertext Markup Language,简称HTML)众多标签中的一部分,例如、和.Hey,.I.am.the.title.of.this.web.page...Hey,.I.am.a.paragraph.on.this.web.page.
.
这段代码没有什么让人兴奋的地方,不过却包含一个网页所需的全部基本元素。你可能注意到了,上述代码的开头是文档类型声明,随后是 标签(注意,两侧有尖括号)、头部和主体,主体部分是网页要显示的内容,最后是。
■ 文档类型
网页的开头都是文档类型,指明网页是使用哪种HTML编写的。HTML 4.01 和XHTML 1.0 这两种类型使用好多年了,而且各自都有两种风格:严格和过渡。例如,下述代码表示过渡的HTML 4.01 文档类型(严格的HTML 4.01 文档类型和XHTML 1.0的两种文档类型声明与此类似):
仔细看前一节的示例代码,你会发现那里使用的文档类型声明更简洁:
这行代码声明的是 HTML5 文档类型。与之前的版本相比,HTML5 更简单,更易于使用。本书都使用HTML5 文档类型,所有主流浏览器都支持这种文档类型(连古老的 Internet Explorer 6 都支持),因此没有任何理由不使用。
虽然旧版浏览器支持HTML5 文档类型,但是并不是所有浏览器都支持全部的HTML5 标签和功能。例如,Internet Explorer 8 及之前的版本就不能识别 HTML5 新添加的标签。若想在这些 IE 版本中使用CSS为新添加的标签编写样式,要借助一些JavaScript 代码。后文的“让IE8支持 HTML5”旁注会告诉你怎么做。
其实,关于文档类型最重要的一点是,记住始终要声明文档类型。如果不声明文档类型,网页在不同的浏览器中会有不同的表现,因为不知道文档类型的话,浏览器不知道如何解析CSS。
不同的文档类型对 HTML 的编写方式有不同的要求。例如,在HTML 4.01 中,表示换行的标签写成:
而在 XHTML 中,要写成:
在这方面,HTML5的优势又体现出来了,两种写法都可以。
■HTML标签的工作原理
所有网页的HTML代码都与前面的示例一样,大多数标签都成对出现,一对标签中可以直接写入内容,也可以包含其他标签。标签放在一对尖括号中,告诉Web 浏览器如何显示网页。标签是超文本标记语言中的“标记”部分。
标签对的起始标签告诉浏览器标记从哪里开始,结束标签告诉浏览器标记到哪里结束。结束标签在左尖括号(<)之后都有一个斜线(/)。
网页一般至少包含下述四个部分:
.前一节说过,网页的第一行是文档类型声明。
. 标签在网页开头出现一次,在网页末尾还会出现一次,不过这一次要加上斜线,写成 。这个标签的作用是告诉Web 浏览器,这个文档的内容是使用HTML编写的,而不是其他语言。网页中的所有内容,包括其他标签,都写在 标签对之间。
如果把网页视作树, 标签就是树的根。这棵树有两个枝杈,分别表示组成网页的两个主要部分:头部和主体。
.网页的头部包含网页的标题(例如“Izzie’s Mail-Order Pencils”),以及其他不可见的信息,例如浏览器和搜索引擎使用的网页内容描述。头部放在标签对中。
此外,头部区域还有其他信息,指明浏览器如何格式化页面的HTML,还可以添加交互。读到后文你会看到, 区域可以包含CSS 代码(就是本书教你编写的那种)或者链接,指向存储CSS信息的文件。
.主体放在 标签对中,里面的所有内容都会显示在浏览器中,例如标题、文本和图片等。
标签中一般有如下标签:
.
标签(段落的起始标签),告诉Web 浏览器一段文本从哪里开始;
标签(段落的结束标签),告诉浏览器一段文本到哪里结束。
.标签,标记重要的文本。如果把文本放在标签对里,文本会以粗体显示。例如,Warning! 告诉Web 浏览器着重强调“Warning!”这个词。
. 标签(也称锚记标签),在网页中创建超链接。单击超链接(或简称链接)后可以访问网络中的其他网页。链接指向的网址在起始标签 中指定,例如Click.here!。
单击“Click here!”后,浏览器知道要访问The Missing Manual 网站。 标签中的href 称为属性,那个URL(Uniform Resource Locator,意为“统一资源定位地址”,也称网址)是这个属性的值。在这个例子中,href 属性的值是http://www.missingmanuals.com 。
■HTML5:提供更多标签
HTML5 是HTML的当前版本,已经发布好几年了。有时,提到HTML5 并不是指HTML标签,而是指本地存储(把网站的数据保存在访客的电脑中)、地理定位(确定访客在世界上的位置)或者使用WebGL 在网页中绘图。严格来说,这些技术并不属于HTML,而是随着HTML5一起出现的浏览器新特性。
在本书中,HTML5 始终指代HTML5 文档类型,以及随HTML5 标准一起发布的新标签。HTML5 与之前的版本没有太大差别,因为制定这个标准时考虑了向前兼容性。HTML之前版本的内容基本没变,HTML5 只是根据当下Web 设计师开发网站的方式添加了一些新标签,例如,HTML5 新增了 标签,表示一般位于页头的内容,比如说徽标和站内导航链接;新增的 标签用于放置站内链接;标签表示一般会放在页脚的内容,比如说法律条款和电子邮件地址等。
除此之外,HTML5 还新增了用于插入视频和音频的标签;复杂的表单元素标签,例如滑动条和弹出式日期选择器;内置于浏览器中的表单验证功能(确保访客正确填写表单)。本书会大量使用HTML5,尤其是下一章。
■编写CSS的软件
编写由HTML和CSS组成的网页只需简单的文本编辑器,例如Notepad(Windows)或TextEdit(Mac )。不过,在文本编辑器中编写几百行HTML和CSS之后,你可能想使用更适合用来编写网页的软件。本节列出一些常用的软件,有些是免费的,有些则是收费的。
其实,能协助我们编写网页的工具有几百个,所以本节给出的列表并不完整。本节列出的是最受CSS开发者喜爱的软件,只是抛砖引玉。
免费软件
用于编辑网页和样式表的免费软件有很多。如果一直使用Notepad 或TextEdit,不妨试试下面这些软件。下面是最受欢迎的几个软件:
.Brackets(Windows,Mac,Linux;http://brackets.io/)。Adobe 领头开发,免费开源,为编写HTML和CSS提供了很多工具。这个编辑器专为Web 设计师和开发者而开发。
.Atom(Windows,Mac,Linux;https://atom.io/)。也是免费开源的文本编辑器,由GitHub(最受欢迎的代码分享和协作网站)的员工开发。与Brackets 一样,这个文本编辑器的目标用户群也是Web 开发者。
.jEdit(Windows,Mac,Linux;http://jedit.org)。免费的文本编辑器,使用Java 开发,几乎在任何电脑中都能使用,而且提供了收费文本编辑器才有的很多功能,例如CSS句法高亮。
.Notepad++(Windows;http://notepad-plus.sourceforge.net)。很多人特别喜
前言9欢这个速度快的文本编辑。这个编辑器甚至还内置了便于编写HTML和CSS的功能,例如句法高亮——使用不同的颜色标记标签和特殊的关键字,便于识别网页中的HTML和CSS元素。
收费软件
收费的网站开发软件有便宜的,也有贵的,包含开发网站所需的各种工具:
.EditPlus(Windows;www.editplus.com)是便宜(35美元)的文本编辑器,支持句法高亮、FTP、自动补全和其他便利的功能。
.skEdit(Mac;www.skedit.com)是便宜的(30美元)网页编辑器,完全支持FTP/SFTP、代码提示和其他有用的功能。
.Coda2(Mac;www.panic.com/coda)是Web 开发套件(99美元),各种功能完善,包含文本编辑器、网页预览程序,支持FTP/SFTP,还提供了用于编写CSS 的图形化工具。
.Sublime Text(Windows,Mac,Linux;www.sublimetext.com)是一款强大的文本编辑器(70 美元),深受众多 Web 开发者的喜爱。很多 Web 设计公司都使用这个编辑器。
是一款可视化网页编辑器(每月19.99美元起)。使用Dreamweaver 编写网页的同时可以在Web 浏览器中查看网页。这个软件提供了强大的文本编辑器,以及编写和管理 CSS的工具。这个软件的完整使用说明参阅《Dreamweaver
CC: The Missing Manual 》。
本节给出的都是通用软件,既可以编辑HTML,也可以编辑CSS。从这些工具中选出一个就能满足Web 开发的需求。
■ 关于本书
万维网特别易于使用,全国各地,从老人到一年级的小学生每天都会使用网络。不过,网络的运作规则并不那么易于理解。编写官方文档的计算机科学家和其他电脑人才并不乐于向普通用户解释相关的概念,你可以访问www.w3.org/TR/css3-transforms,看看这些技术专家所写的文档是多么晦涩难懂。
想学习CSS的人往往不知道从哪开始,而且CSS有些微妙难解之处,有些熟练的Web 专家也搞不懂。本书的目的是填补空缺,为用户提供CSS使用手册,一步步说明如何使用CSS创建精美的网页。
本书适合各种技能水平的读者阅读。为了更好地理解本书内容,你要具有一些基本的HTML知识,可能还要对CSS有些基本的了解。如果你从未编写过网页,可以先看“教程:首次编写样式”一节。本书内容主要针对已经入门或中级读者。如果刚开始学习编写网页,可以阅读带有“加油站”标注的旁注,这些旁注是一些介绍性信息,能帮你更好地理解所讲的知识。如果你是高级的Web 开发者,请特别留意带有“高级用户门诊”标注的旁注,这些旁注为有经验的电脑高手提供了很多技术方面的小技巧和快捷方法。
本书大纲
本书分为五部分,前四部分各有几章内容,最后一部分是附录。
.第一部分介绍如何编写样式表,简要说明一些重要的CSS概念,例如继承、选择符和层叠。阅读这一部分的过程中,你会学到使用CSS时编写HTML的最佳实践。这一部分有很多教程,目的是加深你对主要概念的理解,也是为了让你一窥CSS的强大。
.第二部分实际动手,设计网页。这一部分教你最重要的CSS属性,用这些属性装饰文本,创建有用的导航,使用图片提升网页的外观;还会教你如何使用CSS制作简单的动画,说明如何制作吸引人的表格和表单。
.第三部分说明最难理解但最值得学习的CSS功能——控制网页的布局。这一部分会教你如何创建常见的布局(例如两栏和三栏),如何添加侧边栏,教你浮动和定位,这是控制网页布局最常使用的CSS技术。除此之外,还会教你如何编写适应桌面浏览器、平板电脑浏览器和移动设备浏览器的网页,以及一种网页布局的强大新方式——弹性盒模型(flexbox )。
.第四部分涵盖一些改进CSS的高级技巧,还会介绍Sass,强大而高效的样式表编写方式。
.第五部分提供两份参考资料。一份是“CSS属性参考”,简要列出一些有用的CSS属性,以便参考。其中一些属性你可能没见过,阅读这份参考可以快速学习;有些属性则是你已经知道的,阅读这份参考可以巩固知识。另一个附录介绍一些编写及使 CSS的工具和资源。
■ 基础知识
为了能顺利阅读本书,其实也为了能正确使用电脑,你要知道一些基础知识。你要熟悉以下术语和概念:
.点击。说明如何使用电脑的鼠标或触控板时,本书会使用三种表达方式。
前言11“点击”的意思是,把箭头光标移到屏幕上的某个位置,停在那里不动,按鼠标(或笔记本电脑的触控板)上的左键,然后松开。“按右键”与“点击”的意思差不多,不过按的是鼠标上的右键(如果鼠标没有右键,而且使用的是Mac 电脑,可以同时按左键和Control 键)。
“双击”的意思是,快速连续点击两次,点击的过程中也不能移动光标。“拖动”的意思是,按住鼠标左键不放,移动光标。如果让你在PC上按Ctrl 键点击,或者在Mac 上按z键点击,意思是让你在点击的同时按住Ctrl 或z键。
.菜单。“菜单”是指屏幕或窗口顶部显示的文字,例如“文件”和“编辑”等。点击这些菜单后会显示一系列命令,不过这些命令在下拉窗口中显示。本书假定你知道如何打开程序,知道如何浏览网页,也知道如何下载文件。你应该知道如何使用Windows 系统的开始菜单,或者知道如何使用Mac OS X 系统的Dock 或Apple 菜单;也应该知道如何使用Windows 系统的控制面板或Mac OS X 系统的系统偏好设置。
.键盘快捷键。每次从键盘上移开手去握鼠标都会浪费时间,还可能会打断思路。因此,只要可能,很多有经验的电脑用户都会使用组合键,而不是点击菜单中的命令。让你使用 Ctrl+S(z-S)快捷键(保存当前文档的改动)时,你要按住Ctrl 或z键,再按S键,然后同时松开两个按键。
关于箭头符号(→)
本书以及The Missing Manual 系列的其他书都经常出现这样的句子:“打开‘系统
→库→字体’文件夹”。这是一种简述,表示要打开三个嵌套的文件夹,例如:“硬盘中有个名为‘系统’的文件夹,打开这个文件夹。在‘系统’文件夹中有个名为‘库’的文件夹,双击这个文件夹将其打开。在打开的文件夹里有个名为‘字体’的文件夹,再次双击,将其打开。”
这种带有箭头符号的简述还用于表示从菜单中选择命令,如图I-1所示。
■ 关于在线资源
……