《Head First HTML with CSS & XHTML》要点总结

来源：互联网发布：淘宝买家权重信用查询编辑：程序博客网时间：2024/05/16 07:01

花大概十多天把本书并配合书本代码学习一遍（囫囵吞枣），并把书中要点记录，也有利于以后的查询，毕竟是重点。

（书籍资源和代码资源在文末）

要点一：

1、HTML和CSS是用来创建网页的语言。

2、Web服务器存储并提供由HTML和CSS创建的网页。浏览器接受网页并基于HTML和CSS显示其中的内容。

3、HTML是超文本标记语言（HyperText Markup Language）的缩写，用来结构化网页。

4、CSS是级联样式表（Cascading Style Sheet）的缩写，用来控制HTML的外观。

5、我们使用HTML来标记内容，用标记提高结构。我们称匹配标记和它们之间的内容为元素。

6、一个元素由以下三个部分组成：一个开始标记、内容和一个结束标记。有些元素（如<img>）是例外。

7、开始标记可以拥有属性。如，type和align。

8、结束标记的左尖括号之后，标记名之前有一个“/”，用来区别于开始标记。

9、网页通常应该有一个<html>元素，并伴随有一个<head>元素和一个<body>元素。

10、网页的信息来源于<head>元素。

11、写进<body>元素的内容就是在浏览器中能看见的东西。

12、浏览器忽略大多数空白（制表符、回车、空格），但是可以它们让你的HTML更具有可读性。

13、通过在<style>元素中输入CSS规则，给HTML网页添加CSS。<style>元素通常嵌在<head>元素中。

14、在HTML中用CSS制定每个元素的样式特点。

要点二：

1、当你需要从一个网页链接到另一个网页时，使用<a>元素。

2、<a>元素中的href属性说明了链接的目的地。

3、<a>元素中的内容是链接的标签。标签显示在网页上。默认情况下，它会加下划线来说明是可以单击的。

4、链接的标签可以是文字或图像。

5、当你点击链接时，浏览器装载href中指定网页。

6、可以链接相同文件夹下的文件，也可以是不同文件夹下的。

7、相对路径是指向网站中的其他文件的链接，跟链接的源文件有关。就像地图一样，于终点和起点有关。

8、使用“..”来链接父目录中的文件。

9、“..”代表父目录。

10、记得用“/”符号分隔路径的各个部分。

11、当图片的路径有误时，你会在网页上看到损坏的图像。

12、网站中的文件名或者文件夹名不能出现空格。

13、最后在构建的早期组织好你的网站，这样当网站升级时就不用更改一堆路径了。

14、组织网站的方法有许多，怎么做取决于你。

要点三：

1、在输入内容之前先计划好网页的结构。先画草图，再绘制略图，最后写HTML。

2、用大的块元素来创建你的网页，然后用内联元素修饰。

3、记住，无论什么时候，使用元素来告诉浏览器你的内容的含义。

4、通常使用最能匹配内容含义的元素。例如，当你需要列表时绝对不用段落表示。

5、<p>、 <blockquote>、<ol>、<ul>和<li>都是块元素。他们独立显示，文本前后有空行。

6、<q>、<em>、<a>是内联元素。这些元素的内容和其他内容一起跟随在文字流中。

7、当你需要插入换行时，请使用<br>元素。

8、<br>是个“空元素”。

9、空元素没有内容。

10、一个空元素仅由一个标记组成。

11、嵌套元素是一个完全包含在另外一个元素中的元素。如果你的元素嵌套正确，所有标记都会正确匹配。

12、结合使用两个元素创建HTML列表：使用<ol>和<li>创建有序列表，用<ul>和<li>创建无序列表。

13、当浏览器显示一个有序列表，它会给列表标上序号，无需你费力。

14、可以用start属性指定你自己的列表顺序。用value属性改变每个项的值。

15、可以在<li>中嵌入<ol>或者<ul>来建立嵌套列表。

16、在HTML中使用实体来显示特殊字符。

要点四：

1、通常将网页发布到网上的最佳途径是找一家主机代理商。

2、域名是一个独一无二的名字，像amazon.com或者starbuzzcoffee.com，都是用来标识网站的。

3、主机代理商可以为你的域创建一个或者多个Web服务器。服务器的名字通常是“www”。

4、FTP（File Transfer Protocol，文件传输协议）是一种把网页和内容传送到服务器的常用方法。

5、FTP应用程序，例如用于Mac的Fetch或者用于Windows的WS_FTP，它们提供图形用户界面让FTP的使用更加简单。

6、URL代表Uniform Resource Locator（统一资源定位符），或者叫网址，用于标识网络上的资源。

7、通常URL由一个协议、一个网站名和到资源的绝对路径组成。

8、HTTP是一种用于在Web服务器和浏览器之间传送网页的请求/响应协议。

9、浏览器用文件协议从你的电脑中读取网页。

10、绝对路径是从根目录到文件的路径。

11、“index.html”和“default.htm”都是默认页面。如果你只指定了目录而没有文件名，Web服务器会寻找默认页面返回给浏览器。

12、可以在<a>元素的href属性中使用相对路径或者URL链接到其他网页。要链接到自己的网站的其他页面，最好还是使用相对路径；对外部链接则使用URL。

13、使用id属性在页面中创建目标锚，在“#”后边跟目标锚id，用以链接到页面的特定位置。

14、要提高可读性，使用title属性来提供对<a>元素中的链接的描述。

15、使用target属性在新窗口中打开链接，同时，target属性可能会给使用不同设备和浏览器的用户带来问题。

要点五：

1、使用<img>元素在网页中添加图像。

2、浏览器对待<img>元素不同于其他HTML元素；在读完HTML页面后，浏览器从网络服务器上接受每张图像并显示。

3、如果你网页上有许多大图像，你要创建缩略图来使你的网页更具实用性并更快地下载。用户通过点击小图像来看大版本的图像。

4、<img>元素是个内联元素，意味着浏览器不会在图像前边或者后边插入换行。

5、src属性用来指定图像文件的位置。你可以在src属性中使用相对路径从你的网站上得到图像，或者用URL从别的网站获得图像。

6、宽度小于800像素是网页图像显示的优秀方案。大多数照片是用数码相机拍摄的，对网页来说太大，必须调整大小。

7、可以使用PS软件。

8、对浏览器来说图像太大会让你网页难以使用，下载和显示变慢。

9、一个像素是屏幕能显示的最小点。每个图像都是由数以千计的像素组成的。

10、JPEG和GIF是网络浏览器广泛接受的两种图像格式。

11、JPEG格式最适用于照片和其他复杂图像。

12、图像可以像链接一样链接到其他网页。使用<img>元素作为<a>元素的内容，把链接放到<a>元素中的href属性来创建图像链接。

要点六：

1、HTML 4.01是最受浏览器广泛支持的HTML标准。

2、万维网联盟（W3C）是定义“标准HTML”的公认组织。

3、许多浏览器有两种显示HTML的模式：处理旧版HTML的“转换显示”模式和处理HTML4.01的标准模式。

4、如果没有告诉浏览器你使用的是哪个HTML版本，许多浏览器将使用“转换显示”模式，而这可能会导致在不同浏览器上有不一致的显示结果。

5、文档类型定义（DOCTYPE）用来告诉浏览器网页是使用哪个版本的HTML。

6、如果你写的是完全合法的HTML4.01，就使用严格的DOCTYPE。

7、如果你用的是包含面向显示的元素和属性的过渡HTML，那就使用过渡的DOCTYPE。

8、<head>元素里面的<meta>标记告诉浏览器关于网页附加信息。

9、字符编码告诉浏览器网页中使用的字符类型。

10、现今计算机使用的大部分西欧语言都可以用字符编码ISO-8859-1表示。

11、W3C校验器是一种校验网页是否符合标准的免费在线服务。

12、使用检验器检验以确保HTML的结构合理及元素和属性符合标准。

13、遵从标准将加速网页显示，并减少网页在不同的浏览器之间的显示差异。

要点七：

1、CSS中简单的表达式，称为规则。

2、每个规则为选定的XHTML元素提供样式。

3、一个典型的规则包括一个选择符、若干属性和属性值。

4、选择符指定对哪些元素应用规则。

5、每个属性声明以一个分号结束。

6、一个规则里的所有属性和属性值包含在括号{}之间。

7、可以用元素名作为选择符来选择任意元素。

8、可以一次选择多个元素，只需要逗号把那些元素名隔开就可以了。

9、在HTML中引入一个样式的最简单的方法是用<style>标记。

10、你应当给XHTML和复杂的站点链接一个外部样式表。

11、<link>元素用来引入一个外部样式表。

12、许多属性可以被继承。举个例子，如果给<body>元素设置一个可继承的属性，那么<body>的所有子孙元素将继承这个属性。

13、你可以给你要修改的元素创建一个更具体的规则，来覆盖继承的属性。

14、用class属性将元素加入到一个类中。

15、在元素名和类名之间加“.”来选择类里的某个元素。

16、用“.classname”来选择类里的所有元素。

17、一个元素可以属于多个类，只需在class属性里放置许多类名，并用空格把他们隔开。

要点八：

1、CSS提供许多属性来控制字体外观，包括font-family，font-weight，font-size和font-styles。

2、一个font-family是一系列有共同特征的字体。

3、网页的字体系列有serif，sans-serif，monospace，cursive和fantasy。serif和sans-serif最常用。

4、访问者在你的网页上看到的字体格式取决于其电脑中安装的字体。

5、比较好的做法是在CSS属性font-family中定义多个字体以防用户未安装首选字体。

6、最后一种字体通常是一种通用字体，如serif或sans-serif。当浏览器没找到前几种时可以找合适的来代替。

7、用px，em，%或关键字定义font-size。

8、如果用像素（“px”）定义字体大小，就是告诉了浏览器字母的高度为多少像素。

9、em和%是相对字体大小，所以用em和%定义字体大小意味着字母的字体大小将是父元素字体大小的相对值。

10、用相对大小定义字体大小可以使网页具有更强的通用性。

11、在body规则中用字体大小关键字来设置字体大小，那么如果用户想把文本变大或变小，所有的浏览器都可以按比例来缩写字体大小了。

12、用font-weight属性可以将文本加粗。

13、font-style属性用来创建italic或oblique文本，italic和oblique修饰的文本是倾斜的。

14、网页颜色是通过把不同数量的红色、绿色和蓝色相混合产生的。

15、如果把红色100%、绿色100%和蓝色100%混合，就得到白色。

16、如果把红色0%、绿色0%和蓝色0%混合，就得到黑色。

17、CSS有17中预定义的颜色，包括黑色、白色、红色、蓝色和绿色。

18、可以用红色、蓝色和绿色的百分数，也可以用0~255的数字给出红色、蓝色和绿色的值或者用颜色的十六进制代码来定义任何你想要的颜色。

19、想要一种颜色的十六进制代码，可用图形软件实现，如PS。

20、十六进制代码有6位数，每一位可以是0~F中的一个。前两个代表红色的数值，中间两位代表绿色的数值，最后两位代表蓝色的数值。

21、可以用text-underline属性给文本添加下划线。添加下划线的文本容易被用户当做链接文本，所以使用这个属性要谨慎。

要点九：

1、CSS用盒模式控制元素显示的方式。

2、盒子由内容区和可选的补白（内填充）、边框和边界（外填充）组成。

3、内容区是元素的内容。

4、补白用来在内容区周围创建可见的空间。

5、边框包围着补白和内容，是可见的，将内容分隔开。

6、边界包围着边框、补白和内容，用来在元素和元素之间添加空间。

7、补白、边框和边界都是可选的。

8、元素的背景可以做内容和补白底下显示，但不能延伸到边界。

9、可以用像素或百分数设置不百合边界的尺寸。

10、可以用像素或关键字thin、medium和thick设置边框宽度。

11、边框有8中不同的样式，包括solid、dashed、dotted和ridge。

12、设置边界、补白或边框时，CSS提供同时设置各个侧面的属性（上，下，左，右），也可以单独设置。

13、line-height属性用来增加文本的行间距。

14、background-image属性用来给元素添加背景图像。

15、background-position和background-repeat属性用来设置背景图像的位置和重复方式。

16、class属性用来同时样式化一组元素。

17、id属性用来给元素设置唯一的名字。也可以用id属性给一个元素提供唯一的样式。

18、一个页面中一个元素只能有一个id。

19、可以用id#selector选择元素，比如#my-favorite。

20、一个元素只能有一个id，但可以属于几个类。

21、可以在XHTML中用多个样式表。

22、如果两个样式表有冲突的属性定义，XHTML文件中靠后的样式表具有优先权。

23、可以在<link>元素中用media属性确定媒体设备类型，如“print”或“handheld”。

要点十：

1、<div>元素用来把相关的元素组成逻辑部分。

2、创建逻辑部分有助于标识页面的主内容区、标题和页脚。

3、可以用<div>元素把需要想用样式的元素组成一组。

4、用嵌套的<div>元素给文件添加更深一层的结构，这样有利于结构清晰和样式设计。不过除非真正需要，否则别轻易添加结构。

5、用<div>元素把几部分内容组成一组，就可以跟其他块元素一样给他设计样式。例如，可以用border属性给一组被<div>包围着的元素添加边框。

6、width属性用来设置元素内容区的宽度。

7、一个元素的总宽度等于内容区的宽度加上所有补白、边框和边界的宽度。

8、一旦设置了一个元素的宽度，它就不在随浏览器窗口的宽度变化而伸缩了。

9、Text-align是一个用于块元素的属性，可以使块元素中的所有内联内容居中。它可以被任何嵌套的块元素继承。

10、可以用子孙选择嵌套在其他元素中的元素，例如，子孙选择符 div h2{ ··· } 选择所有嵌套在<div>元素中的<h2>（包括孩子，孙子等）。

11、可以用缩写方式定义相关的属性。例如，padding-top，padding-right，padding-bottom，padding-left都是关于padding的属性，可以用一个缩写定义，padding。

12、Padding，margin，border，background和font属性都可以用缩写规则指定。

13、<span>内联跟<div>元素一样：它用来把相关的内联元素和文本组成一组。

14、跟<div>一样，也可以把<span>元素添加到类中（或者给<span>元素设置唯一的id）来给它们设计样式。

15、<a>元素是有不同状态的元素的一个例子。<a>元素主要的状态有unvisited，visited和hover。

16、可以用伪类单独地给每个状态设计样式。伪类和<a>元素一起最常用的是：：link，用于未被访问的链接，：visited，用于已经访问的链接，：hover，用于停留状态。

17、其他元素支持：hover伪类，一些浏览器也支持：first-child;:active,:focus伪类用于其他元素。

要点十一：

1、浏览器用流（文档流）在页面上放置元素。

2、块元素从开始流到结尾，元素之间有换行。每个块元素默认占据浏览器窗口的整个宽度。

3、内联元素在块元素中从左上方流到右下方。如果需要多于一行的空间，浏览器就新创建一行，在垂直方向上扩展包含块元素以包含内联元素。

4、普通页面流中的两个并列放置的块元素，上边元素的下边界和下边元素发上边界会重叠，它们之间的边界就是较大边界的大小，或者如果大小相等就是一个边界的大小。

5、漂移元素（浮动元素）被移出了正常的流，放到左边或者右边。

6、漂移元素放置在块元素的上面，不影响它们的流。不过，行内容考虑漂移元素的边界，流到它的周围。

7、clear属性是用来指定一个块元素的左边或右边（或两边）不能有漂移元素。一个设置了clear属性的块元素会一直向下移直到它边上没有块元素。

8、漂移元素必须设置一个明确的宽度值，不能是默认的。

9、流动布局是：当你扩大浏览器窗口时，页面内容也随之扩大来填满页面。

10、冻结布局是：内容的宽度是固定的，不随浏览器窗口的变化而扩大或缩小。这有一个优点是你可以更好地控制你的设计，但代价是不能有效地利用浏览器的宽度。

11、凝胶物布局是：内容区的宽度是固定的，但边界随着浏览器窗口的变化扩大或缩小。凝胶物布局通常用来把内容放在页面的中间。它跟冻结布局有一样的优点，但总是更引人注目一点。

12、可以把position属性设置为四个值：static、absolute、fixed和relative。

13、static是默认布局，把元素放在页面的正常流中。

14、用绝对布置（绝对定位）可以把元素放在页面的任何位置。默认状态下，绝对布置相对于页面边放置元素。

15、如果把一个绝对布置嵌入另一个布置过的元素中，那么它的位置就是相对于布置过的那个包含它的元素。

16、top、right、bottom和left属性用来放置绝对、固定和相对布置的元素。

17、绝对布置的元素可以用z-index属性相互层叠放置。较大的z-index值表明它在上层（在屏幕上更靠近你）。

18、固定布置（固定定位）的元素总是以相对于浏览器窗口的位置放置，页面滚动时不移动。页面中其他内容在这些元素先滚动。

19、相对布置（相对定位）的元素先和正常流一样流到页面上，然后按照指定的数值偏移，在它们应该正常显示的地方留出了空间。

20、用相对布置时，left、right、top、bottom涉及到与元素在正常流中的位置相对的偏移量。

21、通常使用偏移元素或绝对布置的元素可以完成同样的设计。

22、float提供了一种形成两栏布局的灵活的解决方法，元素可以把漂移元素从他们身边清理掉，绝对布置做不到这点。

要点十二：

1、XHTML表格可以结构化表格式数据。

2、使用HTML的表格元素，<table>、<tr>、<th>、<td>等标记创建表格。

3、<table>标记的定义作用于整个表格。

4、表格由行定义的，使用的是<tr>元素。

5、每行中，使用<td>元素定义一个或多个单元格。

6、使用<th>标记定义一个数据单元格的行表头或者列表头。

7、表格以格子的方式罗列出来，每一行对应HTML中的一个人<tr></tr>标记对，每一列对应行中<td></td>标记对之间的内容。

8、使用表格summary属性和<caption>元素，你可以提供一些表格的附加信息。

9、表格单元格包含补白、边框及单元格之间的边框间距。

10、正如你能控制的补白、边框、边界等属性一样，你也可以用CSS控制表格的补白、边框、边界间距等属性。

11、border-collapse属性是一个针对表格的特殊的CSS属性，它允许你将多个单元格合并为一个更清晰的单元格。

12、使用CSS中的text-align和verticalalign属性尅该表表格数据的对齐方式。

13、你可以使用background-color属性为你的表格添加一些颜色。背景颜色的设置可以是整个表格、一行或者单个单元格。

14、如果一个数据单元格为空，那么<td>元素中不放置任何内容。不管怎样，你都需要使用一个<td></td>标记对维持表格的对齐方式。

15、如果你的单元格需要被扩展为多行或者多列，你可以使用<td>元素的rowspan或者colspan属性。

16、在表格中嵌入一个表格，只需将表格及其所有的内容放进嵌套表格的一个单元格中就可以了。

17、表格可以用来记录表格式的数据，而不是用来做网页的版面设计。如之前的描述，使用CSS定位创建多栏网页布局。

18、列表可以像其他元素那样被CSS样式化。CSS中有很多针对列表的属性，例如，list-style-type和list-style-image。

19、list-style-type改变列表中标志（marker）的类型。

20、list-style-image定义图像列表标记。

要点十三：

1、<form>元素定义了一个表单，所有的input元素都放在<form>元素中。

2、active属性包含了Web应用程序的URL。

3、method属性包括两种发送表单数据的方法：一种是POST，一种是GET。

4、POST将数据打包并将数据包作为请求的一部分发送。

5、GET也将数据打包并将数据包附在URL上。

6、当表单数据为私有或者数量大时，使用POST方式，比如<textarea>或者文件<input>元素。

7、对于可能要标注的请求，使用GET。

8、<input>元素能够演变为网页中许多不同的input控件，主要取决于type的属性值。

9、type为text，创建一个但行文本输入框。

10、type为submit，创建一个提交按钮。

11、type为radio，创建一个单选框按钮。所有单选框按钮名字相同，这些单选框组成一个互助互斥的按钮组。

12、type为CheckBox，创建一个复选框控件。多个复选框共享一个复选框名字，并可得到一组选项。

13、<textarea>元素创建一个多行文本输入区。

14、<selecct>元素创建一个包括一个或多个<option>元素的菜单。<option>元素定义了菜单的项目。

15、如果把文本放入<textarea>元素的内容中，那么在网页上将会当成文本区空间的默认文本。

16、text<input>元素中的value属性，可以单独为单行输入文本框设置value值。

17、在提交按钮上设置value属性，可改变按钮上的文字。

18、当网页表单被提交后，表单数据值与相应的表单数据名匹配成对，然后把所有的表单数据名与值发送给服务器。

19、表格常用作表单的版面设计，给表单一个表格式的结构。布局后，CSS为表单的外观进行样式化，比如颜色，字体等。

20、XHTMl允许使用<fieldset>元素组合表单元素。

21、<lable>元素以一种很简单的方式给表单元素附加标签。

资源点我

0 0