Charles Wyke-Smith（作者） 一直从事媒体相关工作。1980年代，他与人在旧金山共同创办了PRINTZ
Electronic
Design公司，当时可是一家全部工作都使用计算机处理的设计工作室。另外，他曾在富国银行、ESPN电子游戏担任领导和顾问工作，在Benefitfocus公司担任过用户体验总监。2009年，他与人合办了PeopleMatter公司，提供人力资源服务。目前，他是一家新的创业公司Bublish的CEO，这家公司提供图书策划等方面的服务。
Charles是一位乐手和多本Web开发书的作者，除了本书之外，他还出版过Codin'' for the Web、Scriptin''
with AJAX和Visual Stylin'' with CSS3。他和妻子，还有两个女儿住在美国南卡罗来纳州查尔斯顿市。
HTML标记与文档结构 这是一本讲CSS的书，所以，第1章要先讲讲HTML（Hypertext Markup
Language，超文本标记语言）。
之所以从HTML讲起，是因为CSS的用途就是为HTML标记添加样式。所以，你首先得知道怎么编写和构造HTML标记，才能让CSS更方便地为它添加样式。每个网页在呱呱坠地时都只包含HTML标记，因为用HTML来标记内容是做任何网页的头一件事。所谓内容，就是你想要传达给读者的那些东西，比如文字、图片、音频和视频。
用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user
agent）能够理解的含义。我们平常用的浏览器、给视障用户朗读网页的屏幕阅读器，以及搜索引擎放出的Web爬虫都是用户代理，它们需要显示、朗读和分析网页。HTML规定了一组标签，用来给内容打上不同的标记。每个标签都是对它所包含内容的一种描述。最常用的HTML标签描述的是标题、段落、链接和图片。目前，HTML一共有114个标签，但按照8020原则，使用其中25个左右的标签就可以满足80%的标记需要。要想知道和了解HTML标签，可以看看本书网站：http:www.stylinwithcss.com。
在给内容都打上标记之后，就可以使用CSS来给标签添加样式了。添加样式的根据有标签名、标签属性（如id和class），以及标签与其他标签在标记中的相对位置关系，等等。HTML标签也会构成一个层次化的文档，从而可以通过CSS来设置网页的布局，为每个元素应用你想要的样式。
HTML最新的版本HTML5，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。这些新标签包括 、
（即navigation，导航）、 、 、 和 。比如，对于一组可以让用户导航到网站中其他页面的链接，就可以使用
标签把它们独立地标记出来。而在 里，则可以组织起来一篇既包含多个标题，又包含文本段落的博客文章。
在HTML5标准出现之前，创建页面的结构只能使用一些几乎没有什么语义的标签，比如 和。而现在，我们有了一套专门的结构化标签。
为了进一步说明上述思想，接下来我们就看一看到底怎么给内容加标记，并展示怎么用HTML创建出一种标签层次，以便应用CSS和JavaScript。
1.1 HTML标记基础对于每个包含内容的元素（比如标题、段落和图片），根据它所包含的内容是不是文本，有两种不同的方式给它们加标记，一种是使用闭合标签，另一种是使用自闭合标签。
1.1.1 文本用闭合标签闭合标签的基本格式如下： 标签名文本内容可以给这个标签添加一些属性，比如： 标签名
属性_1=""属性值""
属性_2=""属性值""文本内容标题、段落等文本元素都要求闭合标签，也就是要有一个开标签和一个闭标签，比如： Words by
Dogsworth I wandered lonely as a dog.
可见，每个标签都由一对包含标签名的尖括号组成。标签名通常是一个（表示内容类型的）英文单词的简写形式或者其中的一个字母。闭标签与开标签的不同之处是标签名前面多一个斜杠。
位于开标签和闭标签之间的，就是将来会显示在浏览器中的内容；标签本身不会显示。开标签和闭标签明确地标识出了标题和段落的起始位置。注意，前面的标题标签名中有一个数字1，那是因为HTML有6级标题，表示最高级别的标题。
1.1.2 引用内容用自闭合标签 标签名 属性_1=""属性值"" 属性_n=""属性值""
非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。
下面就是使用自闭合标签标记的一张图片。 关闭标签
XHTML标准严格规定所有标签都必须关闭，但HTML5标准在这方面则要宽松得多。换句话说，在HTML5网页里，某些闭标签是可以省略不写的。要了解HTML5语法，可以参考这个链接http:dev.w3.orghtml5html-author#syntactic-overview。
即使你在标记段落时只写了一个段落的开标签，没有写与之对应的闭标签，仍然可以通过HTML5标准验证。不过，我个人习惯于关闭所有标签，因为这样可以更清楚地知道自己标记的结构，同时也能保证不让自己忘了关闭那些应该关闭的标签。我建议读者也这样做，本书中的代码示例也会关闭所有标签。
对于自闭合标签，XHTML要求必须这样写： 而在HTML5中，可以省略最后那个表示关闭的斜杠，写成：
不过，我还是习惯于给自闭合标签的末尾也加上一个空格和斜杠。HTML5会忽略这个斜杠，而我在检查代码结构时，通过它一眼就能知道这个标签已经关闭了，所以它不包含后面的标签。
1.1.3 属性
属性负责为浏览器提供有关标签的额外信息。比如说，前面例子中的标签有两个属性。一个属性是src（source，来源），属性值为cisco.jpg。这个属性定义了图片的来源是一个名为cisco.jpg的文件。另一个属性是alt（alternative，替代内容），定义的是在图片因故未能加载成功时在屏幕上显示的文本。
视障用户使用的屏幕阅读器会大声读出alt属性的内容，因此一定要给标签的这个alt属性添加让人一听（或一看）就能明白的内容。
每个HTML标签都可以添加属性。在稍后的例子中我们会看到，class和id等属性，几乎可以适用于任何标签。而另一些属性，比如src，则只适用于类似这样的引用源文件的标签。
要想了解所有HTML标签和属性，可以参考HTML Dog网站：http:htmldog.com
referencehtmltags。 本章使用了哪些HTML标签
以下是本章使用的块级（block）和行内（inline）标签。至于什么是块级标签，什么是行内标签，本章稍后再作介绍。文本内引用
1.1.4 标题与段落 到现在为止，我们用得最多的还是标题和段落标签。一般来说，网页都会以一个
标签开头，其中的文本用于告诉读者这个网页是干什么的。然后用 标记下一级内容，或许是一个副标题，然后才是 ，依此类推。
不仅是最大最突出的标题（除非你用CSS缩小它的字号），搜索引擎也会将其视为仅次于
模板的第一行代码是一种新语法，或者说是一种简化的DOCTYPE，这一行就是为了声明：“以下是一个HTML文档。”注意，这个标签不用关闭。
然后是标签，也就是所谓的根级标签，因为页面中所有的其他标签都嵌套在这个标签内部，而且它的闭标签也是整个页面中的最后一个闭标签。标签只有两个直接的子标签：和。
使用HTML注释标签，可以为你自己或者其他将来可能会修改这个页面的人写一些备注。HTML注释以结尾，注释内容就写在它们中间。浏览器在加载页面时，会忽略注释，不会显示其中的内容。
帮助浏览器理解页面的信息都包含在标签中。在这个最简单的例子里，标签里只包含和 Types of Guitars Guitars
come in two main types: electric and acoustic. Acoustic Guitars
Acoustic guitars have a large hollow body that projects the sound
of the strings. Nylon String Acoustic Guitars Descendants of the
gut-strung instruments of yore, nylon string guitars have a mellow
tone. Steel String Acoustic Guitars Steel string guitars first
appeared in country music and today most acoustic guitars have
steel strings. Electric Guitars Electric guitars have a solid or
hollow body with pickups that capture the string vibration so it
can be amplified. Solid Body Electric Guitars Solid body electric
guitars are commonly used in rock and country music. Hollow Body
Electric Guitars Hollow body acoustic guitars are commonly used in
blues and jazz. 整个页面的内容只有标题和段落。为清晰起见，这里省略了本该有的"
等标签。图1-4展示了以上代码在浏览器中显示的效果。
图1-4 由标题和段落构成的页面在以上代码和屏幕截图中，可以看到三种级别的标题。浏览器为每一级标题分别应用了不同的字号，从而让页面内容的层次显得非常分明。由于标题和段落都是块级元素，所以每个元素各占一行。
还有，页面四周都添加了一定的边距，所以文本才不会碰到浏览器窗口。而且，段落中的行与行之间也有距离。好了，边距的话题回头我们再仔细聊，还是先给页面添几张图片吧。如图1-5所示，当然你已经知道了，图片是行内元素。
图1-5 为页面添加两个行内元素（吉他图片）标记中的两个标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上；而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略。因此，为了让代码的版式布局一目了然，你可以随意在标签之间添加换行和空格。一般推荐的做法都是子标签相对于父标签要有一个缩进。
以下是图1-5中展示的那部分页面对应的代码，其中包含两张图片。图片是行内元素，所以两把吉它会并排显示。 Types of
Guitars Guitars come in two main types: electric and acoustic
Acoustic Guitars Acoustic guitars have a large hollow body that
projects the sound of the strings.
现在，为了进一步加深对块级元素和行内元素的理解，我们在这个页面上搞一次小试验。这次试验要用到我最喜欢的一个开发工具，那就是Web
Developer扩展。它是Firefox的一个扩展，安装之后它会生成一个菜单，里面包括很多查看HTML、CSS和JavaScript的工具。
要安装Web Developer，在Firefox工具栏中选择“附加组件”，然后在“附加组件管理器”中搜索“Web
Developer”。找到之后，点击安装。 图1-6 我在Web
Developer工具条中选择了Outline菜单在图1-6中，可以看到浏览器窗口顶部偏下的Web
Developer工具条。这个工具条有很多功能，其中一个就是能让你更清晰地确定每个元素的位置，以及元素之间的嵌套关系。如图所示，我选择了Outline（轮廓）菜单中的Outline
Block Level Elements（显示块级元素的轮廓）命令，这个命令可以显示页面中块级元素方盒子的轮廓。
图1-7 选择Outline Block Level
Elements命令后，会显示块级元素盒子的实际大小以及相互之间的间距。没有显示行内元素的轮廓显示块级元素的轮廓之后，通过图1-7就可以发现元素盒子比它们包含的文本要大一些。每个盒子的高度比内容稍微高一点，而宽度跟浏览器窗口一样宽！
块级元素盒子会扩展到与父元素同宽在我们这个页面中，所有块级元素的父元素都是body，而它的宽度默认与浏览器窗口一样宽（当然有少量边距）。因此，所有块级元素就与浏览器窗口一样宽了。说到这，相信你就能理解为什么块级元素始终会占一行了。对了，就是因为它们始终会保持与浏览器窗口同宽。这样一来，一个块级元素旁边也就没有空间容纳另一个块级元素了。
通过Web
Developer工具条不能像显示块级元素轮廓那样，同时显示所有行内元素的轮廓。不过，通过Outline菜单中的Outline
Custom
Elements（显示自定义元素的轮廓）命令可以显示这些元素的轮廓。行内元素盒子的行为与块级元素盒子的行为正好相反。行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧说到这，你就可以理解为什么几个行内元素会并排显示在一行，而每个块级元素都会另起一行了。
1.2.3 嵌套的元素现在，该看一看在标记中嵌套的HTML元素到了屏幕上是什么效果啦。前面例子中的所有元素都有一个共同的父元素——body。因此，Web
Developer通常不显示它。但通过在Outline菜单中选择Outline Custom
Elements命令，可以自定义显示body，如图1-8所示。 图1-8 选择Outline Custom
Elements命令后，在弹出的窗口中可以指定显示哪个元素以及用什么颜色显示如图1-9所示，父元素body的盒子（最外面的轮廓），直接嵌套（也就是包裹）着所有子元素盒子（内部的轮廓）。其中，块级子元素扩展到与body元素同宽，后者默认与浏览器窗口同宽（但有一点外边距）。
在标记中嵌套的是HTML标签，而在屏幕上嵌套的则是一个个的盒子
图1-9 父元素body包围着它的子元素在一个包含很多元素的页面中，盒子套盒子会越套越深，此时合理的HTML布局有助于通过标记看清页面结构，从而保证标签间正确的嵌套关系。我们推荐HTML标签每个层次相对于上一层次都缩进4个空格，如下面代码中的点所示。
在Dreamweaver等HTML编辑器中，每次按Tab键时就会缩进4个空格，从而保证缩进的一致性。 .... ........
Introduction ........ Chapter 1 ........ Chapter 2 ........ Chapter
3 ....
两个在标记中嵌套的例子我们再来看一个嵌套的例子，这一次使用blockquote元素。顾名思义，blockqoute元素包含引用内容，而且在页面上看起来是独立的元素。请注意代码中使用的表示弯引号的HTML实例。
“Sometimes you want to give up the guitar, you''ll hate the guitar.
But if you stick with it, you''re gonna be rewarded.” Jimi Hendrix
使用cite元素包含作者姓名 图1-10展示了这段代码在页面中显示的效果，为两个元素都加了轮廓。
图1-10 blockquote元素默认会缩进 HTML实体
HTML实体常用于生成那些键盘上没有的印刷字符，比如TM、?、，等等。HTML实体以一个和号（）开头，一个分号（;）结尾，二者之间是表示实体的字符串。在前面的例子中，两个实体的名字分别是“left-double-quote”（左双引号）和“right-double-quote”（右双引号）的简写。
Peachpit另一位作者Elizabeth
Castro（她的书非常赞，在此强烈向大家推荐）在自己的一个网页中列出了常用的HTML实体：http:www.elizabethcastro.com
htmlextrasentities.html。要注意的是，由于和号表示实体开头，所以在要显示和号的时候不能直接写和号，而要在HTML标签包含的文本中使用
实体，这样才能显示出来。比如，写成Johnson Johnson，才会显示成：Johnson
Johnson。显然，
标签也是一个块级元素（它名字里就有block）。因为它的目的就是在页面中独立显示一块内容，所以作为块级元素非常合适。
嵌套在blockquote元素中位于引用文本之后的是cite元素，它是一个行内元素。因为文本结束后还有空间，所以它就显示在了段落最后一行上。从图1-10中也可以看到，标签的内容默认是斜体。
同样是在这个例子中，还可以看到两个HTML实体，“和”，分别用于生成能够正确打印出来的左、右双引号。使用这两个引号的实体，而不是按键盘上的Shift-''（Shift-引号键），能让页面显示更加专业。
第二个嵌套的例子如下，是一个块级元素包含三个行内元素。 It is absolutely critical that everyone
does this ASAP! 图1-11展示了Firefox浏览器中显示的效果。
图1-11 一个段落中嵌套着三个分别表示重要性、强调和简写的标签图1-12与图1-11一样，只不过显示了元素盒子的轮廓。
图1-12 三个行内元素嵌套在一个块级元素中这个例子除了能让你感到情况紧急之外，还能让你有如下收获。 ?
文本被标记为段落，而其中包含三个行内元素。 ? 标签表示重要，默认以粗体显示。 ? 标签表示强调，默认以斜体显示。 ?
标签表示简写，在Firefox中默认会加上点下划线。好了，我们已经知道了HTML标记怎么在页面中创建盒子了，也知道了嵌套标记实际上就是嵌套盒子。那么，接下来我们就可以聊一聊文档对象模型（Document
Object Model，DOM）了。
1.3 文档对象模型在开始学习CSS之前，关于HTML我们要介绍的最后一个知识点，就是HTML结构所对应的文档对象模型（以下简称“DOM”）。DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置，就可以选中相应的HTML元素，并修改其样式属性。
我们就通过下面这个例子来理解DOM吧。 HTML代码正确缩进，以表明标签的层次关系 The Document Object
Model The page''s HTML markup structure defines the DOM.
图1-13 与标记对应的简单DOM结构图上面的代码示例和图1-13展示了一个典型的页面结构，即结构化的标签（即
）包含着几个子内容标签（这里的 和）。代码中用缩进表示元素间的层次关系。这种层次关系也可以用垂直的、类似家族树的结构图表示。
图1-14展示了标明元素轮廓的HTML元素。
图1-14 从图中可以看出，body元素包含着section元素，后者进而包含一个标题和一个段落
对于这个例子中的DOM层次，我们可以作如下表述。 ? section是h1和p的父元素，也是直接祖先元素。 ?
h1和p是section的子元素，也是直接后代元素。 ? h1和p是同胞元素，它们有共同的父元素section。 ?
section、h1和p 是body的后代元素，或者下面的元素（嵌套在后者的内部）。 ?
section和body是h1和p的祖先元素，或者上面的元素（在某一层次上包含后者）。
在本书后面几章里，我们会经常使用子元素、父元素、同胞元素、祖先元素和后代元素这些概念。所以，请读者务必先对HTML创建的DOM的层次有一个清晰的认识，搞明白这些概念的含义，以及它们之间的嵌套关系。
CSS操作DOM的过程是先选择一个或一组元素，然后再修改这些元素的属性。通过CSS修改了元素后，比如修改了宽度或者在标记里插入一个伪元素，这些变化会立即在DOM中发生，并体现在页面上。
简言之，就是通过HTML标记来构建DOM，然后在页面初次加载和用户与页面交互时，使用CSS来修改DOM。 1.4 小结
本章讲解了HTML标签怎么为内容提供结构，以及每个元素会在屏幕上生成什么样的盒子。演示了块级元素和行内元素的区别，以及在元素互相嵌套的情况下，它们之间会存在的一种层次关系。你知道了标记中嵌套的HTML元素会生成屏幕上嵌套的盒子。最后，我们学习了DOM，它是浏览器中文档的模型，而CSS可以修改DOM中元素的样式属性，从而修改页面本身的布局和外观。本章学习的这些基础知识，对于使用CSS为HTML添加样式至关重要。第2章，我们会从CSS的规则和机制入手，讲一讲它是怎么对HTML发生作用的。
購物車/收銀台(
1
) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
