HTML5与CSS3基础教程笔记

1.一个网络注意包括以下三个部分
*文本内容（text content）：在页面上让访问者了解页面内容的纯文字。
*对其他文件的引用（references to other files）：这些文件加载图像，音频，视频，SVG文件等，指向其他HTML页面和资源，以及样式表（用于控制页面的布局）和JavaScript文件（用于为页面添加行为
#标记（markup）：对文本内容进行描述并使引用正确工作。

2.每个网页都以DOCTYPE声明开头，该声明用于告诉浏览器这个页面的HTML版本。
<!DOCTYPE html>
<html lang="en">

3.网页的内容位于body元素的开始标记和结束标记之间，文档以</html>结尾。

4.标记：
用来包含文档中内容的信息，这些信息称做标记，用以描述内容的含义（meaning），即语义（semantics）。
如标记段落内容的p元素。

5.HTML并不定义内容在浏览器应当如何显示，由CSS（Cascading Style Sheet，层叠样式表）来定义内容的显示。

6、标记的组成：HTML标记注意包括三种成分：元素（element）、属性（attribute）和值（value）。

7、元素是描述页面的标签，元素里面的属性进一步描述了元素的用途和内容。
元素可以包含文本，也可以包含其他元素，也可以是空的。一个非空元素由开始标记（start tag，元素的名称和属性）、内容和结束标记（end tag)组成。
如下所示：

am continually <em>asksk</em>
其中<em>是开始标记；</em>是结束标记；asksk是内容

8.空元素（empty element）看起来像开始标记和结束标记的结合，由左尖括号开头，然后是元素的名称和任何可能有的属性，然后是一个可选的空格和一个可选的斜杠，最后是必须有的右尖括号。如下所示：

<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
空元素并包围任务文本内容（alt属性中的文本是元素的一部分，并为被元素包围），就像这里显示的img元素。空元素只有一个标记，即作为元素的开始，又作为元素的结束。结尾处的空格和斜杠在HTML5中是可选的，但通常还是会写上它们的。不过，元素最后面的>是必须的。

9.属性和值
属性包含的是有关文档内容的信息并非文档内容本身。
有的属性可以接受任何值，有的则有限制。最常见是还是那些仅接受枚举的或预定义的值的属性。
很多属性的值需要填入一个数字，特别是那些描述大小和长度的值。数字值无需包含单位，只需输入数字本身。图片和视频的宽度和高度是有单位的，不过它们默认单位是像素。
有的属性引用其他文件，如href和src。它们只能包含URL（统一资源定位符）形式的值。

10.父元素和子元素
如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。

11.文件名名称的注意点：
1）使用小写字母的文件名
2）用短横线("-")分割单词：不要在文件名中使用空格分割单词。应该使用短横线，如company-history.html，不推荐使用下划线（"_")，因为短横线是搜索引擎更倾向于接受的方式。
3）使用正确的扩展名：
可以使用.htm作为网页的扩展名，但通常使用的.html，因此推荐使用.html。如果页面使用其他的扩展名（如.txt），浏览器会将其当做文本处理，会把代码直接呈现给访问者。

12.URL（Uniform Resource locator，统一资源定位符）是地址的别名。它包含关于文件存储位置和浏览器应如何处理它的信息。

13.URL的组成：
1）URL的第一部分称为模式（scheme）。模式告诉浏览器如何处理需要打开的文件。最常见的模式是HTPP,用于访问网页。
2）URL的第二个部分是文件所在的服务器名称，紧接着是到达这个文件的路径，以及文件自身的名称。有时URL不以文件名结尾而以一个路径结尾（可以包含一个结尾的斜杠，也可以不包含）。在这种情况下，URL指定路径中最后一个目录中的默认文件（通常为index.html)。
例如：
"http://www.site.com/tofu/index.html"
其中“http://”表示模式；
"www.site.com"表示服务器名称
“tofu”表示路径
“index.html”表示文件名

"http://www.site.com/tofu/index.html"和"http://www.site.com/tofu/"如果最后一个目录中的默认文件是index.html的话，就相等，否则就不相等。

14.其他常见的模式有https(用于安全网页)、ftp（File Transfer Protocol，文件传输协议、用于下载文件）、mailto（用于发电子邮件）、file（用于访问本地硬盘或本地文件共享网络上的文件）。
例如：
1）"ftp://ftp.site.com/pub/proposal.pdf"
其中 "ftp:"是模式，"ftp.site.com"是服务器名，"pub"是路径，"proposal.pdf"是文件名
当用户点击这个URL时，浏览器会开始按FTP模式传输文件proposal.pdf
2)"mailto:somename@somedomain.com"
其中"mailto:"是模式，"somename@somedomain"是电子邮件地址
用于电子邮件的URL包括mailto模式，紧接着是一个冒号（没有斜杠），然后是电子邮件地址本身
3）"file:///c|/path/home.html"
其中"file:///"是模式,"c"是盘符， "|"是竖线，”/path/home.html“是路径和文件名。
使用file模式引用本地的文件。

模式后面通常紧跟一个冒号和两个斜杠，mailto和news是例外，它们后面只有一个冒号。注意：file模式后面跟着一个冒号和三个斜杠。这是因为第二个和第三个斜杠之间代表的主机假定为本地计算机。
最常用到的模式是http和mailto,其他模式则只有在特殊情况下才会用到。

15.绝对URL显示文件的完整路径，包括模式、服务器名称、完整路径和文件名本身。对于URL来说,绝对URL本身被引用文件的实际位置无关，无论是在哪个服务器上的网友中，某一个文件的绝对URL都是完全一样的。
引用别人的服务器上的文件是，总是应该使用绝对URL。对于FTP站点以及几乎所有不使用HTTP协议的URL，都应该使用绝对URL。

16.相对URL以包含URL本身的文件为准为参照点，描述目标文件的位置。
1）如果目标文件与当前页面（也就是包含URL的页面）在同一个目录欧诺个，那么这个文件的相对URL就只有文件名和扩展名。
//在当前文件夹中，有一个名为index.html的文件
"index.html"

2）如果目标文件在当前目前的子目录中，那么这个文件的相对URL就是子目录名，接着就是一个斜杠，然后是文件名和扩展名，
//在当前的文件中，有一个info文件夹
"info/data.html"
其中："info"是子文件夹名，
3）如果要引用文件层次结构中更高目录中的文件，那么应该使用两个句点和一个斜杠。可以组合和重复使用两个句点和一个斜杠，引用当前文件所在服务器或硬盘上的任何文件。
"../img/image.png"
其中：这个文件位于与网站根目录下的当前文件夹同属一层的文件夹（img）中。在这种情况下，使用两个句点和一个斜杠上升一级，然后指出子目录，再跟一个斜杠，最后是文件名。

16.HTML文档的组成
每个HTML文档都应该包含以下基本成分：
*DOCTYPE
*html元素（包含lang属性，该属性不是必需的，建议加上）；
*head元素；
*说明字符编码的meta元素；
*title元素；
*body元素。
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

17.title元素必须位于head部分，将它放置在指定字符编码的meta元素后面。title元素是必需的，title中不能包含任何格式、HTML、图像或指向其他页面的链接。

18.HTML提供了6级标题用于创建页面信息的层级关系。使用h1~h6元素对标题进行标记，其中h1是最高级别的标题，h2是h1的子标题，h3是h2的子标题，以此类推。不过标题的外观并不是由其层级决定的，可以通过CSS改变它们的样式。

19.使用标题对网页进行组织
（1）在HTML的body部分，输入<hn>，其中n是1-6的数字，此数字取决于要创建的标题的级别。h1是最重要的标题，而h6则是最不重要的标题。
（2）输入标题的内容。
（3）输入</hn>,其中n是与第（1）步中相同的数字。
注意：通常浏览器会从h1到h6逐级减小标题的字号。需要依据内容所处的层次关系选择标题级数，而不是根据你希望文字应该显示的大小。搜索引擎对标题赋予很高的权重，尤其是h1.

20.HTML5则提供了四个分块内容（section content）元素--article、aside、nav和section。这些元素将文档划分为不同的区块，并定义了h1~h6（以及header和footer）元素的范围。在每个分块元素都有它自己的h1~h6层次结构。

21.两种等价的大纲实现：
1）第一种大纲只用了标题元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h1>Product User Guide</h1>
<h2>Setting it up</h2>
<h2>Basic Features</h2>
<h3>Video Playback</h3>
<h2>Advanced Features</h2>
</body>
</html>

2）第二种大纲即用了标题元素，又用了HTML5的section元素（包含一个嵌套的section元素）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>
<h1>Product User Guide</h1>
<section>
<h1>Setting it up</h1>
</section>

<section>
<h1>Basic Features</h1>
<section> 
<h1>Video Playback</h1>
</section>
</section>

<section>
<h1>Advanced Features</h1>
</section>
</body>
</html>

第二种大纲的改进方式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>
<article>
<h1>Product User Guide</h1>
<section>
<h2>Setting it up</h2>
</section>

<section>
<h2>Basic Features</h2>
<section> 
<h3>Video Playback</h3>
</section>
</section>

<section>
<h2>Advanced Features</h2>
</section>
</article>
</body>
</html>

22.对分级标题进行分组：
有时一个标题有多个连续的层级，例如带有子标题，替换标题或广告语。这时将它们放进hgroup元素可以指明它们是相关的。每个hgroup都包含两个或更多的h1~h6标题，不可放入其他元素。
在一个hgroup中，只有第一个最高级别的标题会出现在现在文档大纲中，hgroup中的所有标题都会在浏览器中显示。

23.对两个货更多标题进行分组的步骤
（1）输入<hgroup>
(2) 输入<hn>,其中n是1~6的数字，此数字取决于要创建的标题的级别。h1是最重要的标题，而h6则是最不重要的标题。
（3）输入标题的内容。
（4）输入</hn>，其中n是第二步中相同的数字。
（5）重复（2）~（4）步，创建所有需成为hgroup一部分的标题。通常，每一个后续标题的级别都应低一级（例如，从h1到h2，依次类推）。
（6）输入</hgroup>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>
<article>
<hgroup>
<h1>Product User Guide</h1>
<h2>Setting it up</h2>
</hgroup>

<p>...[文章内容]...</p>
</article>
</body>
</html>
其中：h2是文章标题h1的子标题，由于”Product User Guide“被标记为最高的标题，因此只有它出现在文档大纲里，不过两个标题都会出现在浏览器中。类似的，如果在这个h1后面再加一个h1，新的h1也不会出现在大纲里，就像上面的h2一样，由于h2并不出现在大纲里，文章中的下一个标题可以是h2（而不是h3），并且可以将其看做是h1”Product User Guide“的直接子标题
注意：hgroup不能仅包含一个标题，至少要包含两个。
在一个hgroup中，只有第一个最高级别的标题会出现在现在文档大纲中，标题的顺序没有影响。因此如果一个hgroup有一个h3，后面紧跟一个h2，那么h2会出现在大纲中。通常根据优先级别对标题进行排序，因此低级别的标题不会出现在级别高的前面。

24.如果页面中有一块包含一组介绍性或导航性内容的区域，应该用header元素对其进行标记。
一个页面可以有任意数量的header元素，它们的含义可以根据其上下文而又所不同。例如，处于页面顶端或接近这个位置的header可能代表整个页面的页眉（有时也成做页头）。通常页眉包括网站标志、主导航和其他全站链接，甚至搜索框。

25. 创建页眉的步骤
1）将光标放置在需要创建页眉的元素里。
2）输入<header>。
3）输入页眉内容，包括各种类型的内容，它们分别由各自的HTML元素进行标记。例如，header可以包含h1~h6标题、标志、导航、搜索框，等等。
4）输入</header>
注意：
1）只有在必要时使用header，大多数情况下，如果只有h1~h6或hgroup，没有其他需要与之组合在一起伴生内容，就没有必要用header将它包起来。
2）header与h1~h6元素中的标题是不能互换的，它们都有各自的语义目的。
3）不能在header里面嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。

26.标记导航：
nav元素明确表示主导航链接的区域。nav中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者都有的情况。无论是哪种情况，应该仅对文档中重要的链接群使用nav。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>
<header>
<nav role="navigation">
<ul>
<li><a href="#gauid">Barcelona</a></li>
<li lang="es"><a href="#sagrada familia">La Sagrada Familia</a></li>
<li><a href="#park-guell">Park Guell</a></li>
</ul>
</nav>
</header>
</body>

</html>
其中：上面的这些链接（a元素）代表一组重要的导航，因此将它们放入一个nav元素。通常用一个ul元素对链接列表进行标记，除非链接是面包屑链接，就用一个ol元素进行标记。role属性并不是必需，它可以提供可访问性。

27.article元素表示文档、页面。应用或网站中一个独立的容器，原则上是可独立分配或可在用，即聚合。它可以是一篇论坛帖子，一篇杂志或报纸文章，一篇博客文章，一则用户提交的评论，一个交互式的小部件或小工具，或者任何其他独立的内容项。

28.创建文章的步骤
1）输入<article>
2）输入文章的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
3）输入</article>
注意：
1）可以将article嵌套在另一个article里面，只要里面的article与外面的article是部分与整体的关系。不过，不能将article嵌套在address元素里面。
2）一个页面可以有多个article元素,也可以没有。
3）一个article里包含一个或多个section元素并不是强制性的。让article里的h1~h6独自存在也是很好的，不过定义section则会让文章的语义更明显。每个section都可以有自己的标题层级关系。

29.section元素的定义：
section元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。

30.定义区块的步骤
1）输入<section>
2）输入区块的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
3）输入</section>

31.侧栏
aside元素可以用在页面的很多地方，在哪里使用它根据上下文而定。它可以是主要内容中的一个框，或者与主要内容位于同一栏而并未嵌套，或者位于（或作为）侧栏。aside的例子包括抬升式引用、侧栏。新闻站上列出相关文章的链接框、广告、nav元素组、商业站上相关出品列表。
注意：
1）HTML5不允许将aside嵌套在address元素内。
2）对于与内容有关的图像（如图表、图形或带有文字的插图），使用figure而非aside。

32.定义区块的步骤
1）输入<aside>
2）输入侧栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
3）输入</aside>

33.footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚，如果一个footer抱着她所在区块的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。
不允许在footer里面嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>
<header>
<nav role="navigation">
...[包含链接的ul]...
</nav>
</header>

<article>
<h1 id="gauid">Barcelona Artitect</h1>
...[介绍性段落]...

<section>
<h2 id="guadi-h2" lang="es">guadi h2</h2>
...[图像和段落]...
<section>

<section>
<h2 id="other-guadi-h2" lang="es">other guadi h2</h2>
...[另一个图像和段落]...
<section>
</article>

<aside role="complementary">
<h1>asside content</h1>
...[倒栏的其余内容]...
</aside>

<footer>
<p>
<small>© Copyright 2016</small>
</p>
</footer>
</body>

</html>

34.div容器，是一个通用容器，是一个没有任何语义的容器。
div是块级内容的无语义容器，而span是短语的无语义容器。
div在默认情况下自动显示在新的一行。

35.可以给HTML元素分配唯一的标识符，或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别。然后，就可以对具有给定id或class名称的元素添加样式了。
1）为元素添加唯一标识符的方法：
在元素开始标记中输入id="name"，其中name是唯一标识该元素的名称。name几乎可以是任何字符，只要不以数字开头且不包含空格。
2）为元素指定类别的方法：
在元素的开始标记中输入class="name",其中name是类别的名称。如果要指定多个类别，用空格将不同的类别名称分开即可，如class="name anothername"

36.在要添加title标签的HTML元素中，输入title="label"，其中label是访问者将鼠标移到这个元素上时希望出现在提示框里的文本，或者希望由屏幕阅读朗读的文本。如果在img元素同时出现title和alt属性，则提示框会采用title属性的内容，而不是alt属性的内容。

36.em元素用来标识强调的文本，cite元素用于标识对艺术作品、电影、图书等内容的引用。

37. 要在网页中开始一个新的段落，应该使用p元素。

38.address元素是用以定义与HTML页面或页面一部分有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分内。
address只能包含作者的联系信息，不能包括其他内容，如文档或文章的最后修改时间。此外，HTML5禁止在address里包含以下元素：h1~h、article、address、aside、footer、header、hgroup、nav和section。

39.根据定义figure指的是由文档主要内容引用的一块独立的内容（具有可选的标题）。可选的figcaption是figure的标题，出现在figure内容的开头或结尾处。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>

<article>
<h1>201</h1>
</article>
</body>
</html>

40.strong元素表示重要的文本，而em则表示强调。根据内容需要，这个两个元素既可以单独使用，也可以一起使用。
浏览器通常将strong文本以粗体显示，将em文本以斜体显示，如果em是strong的子元素，文本将同时以斜体和粗体显示。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>

<body>

<p>
<strong>Warning: Do not approach the zombies <em>under any circumstances</em></strong>
They may
<em>look</em>
friendly,but that's just because they want to eat your arm.
</p>

</body>
</html>

41.b元素简介：
HTML5将b重新定义为：
b元素表示出于实用的目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要的关键词，评论里的产品名、基于文本的交互式软件中指示操作的文字。文章导语等。
b元素默认显示为粗体。

42.i元素简介
i元素表示一块布同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称，技术术语，外语里的惯用语，思想，西方文字中的船舶名称等。

43.使用cite元素可以指明对某内容源的引用或参考。

44.引述文本，有两个特殊的元素用以标记引述的文本。blockquote元素表示单独存在的引述，默认显示新的一行。而q元素则用于段的引述。

45.突出显示文本，用mark元素表示。无论何时使用mark，该元素总是用于提起读者对特定文本片段的注意。

46.解释缩写词，使用abbr元素标记缩写词并解释其含义。使用可选的title属性提供缩写词的全称。另外也可以将全称放在缩写词后面的括号里。

47.dfn元素对文档中首次定义术语的地方进行标记。并不需要用它标记术语的后续使用。
作为距离dfn元素最近的祖先区块的段落，描述列表组或区块，除了包含dfn元素以外，还必须包括该术语的定义。这意味着dfn及术语的定义应该是彼此相邻的。

48.sub元素表示下标；sup元素表示上表。

49.有时可能需要将在前一个版本之后对页面内容的编辑标出来，或者对不再准确，不再相关的文本进行标记。有两张用于标注编辑的元素;代表添加内容的ins元素和标记已删除内容的del元素。
s元素用以标注不再准确或不再相关的内容（一般不用于标注编辑）。

50.标记代码，可以用code元素。要显示单独一块代码（位于句子以外），可以用pre元素包住code元素以维持其格式。

51.kbd元素，标记用户输入指示。samp元素用于指示程序或系统的示例输出。var元素表示变量或占位符的值。

52.small元素表示细则一类次要的注释，通常包括免责声明，注意事项，法律限制，版权信息等。有时还用来署名，或用来满足许可要求。small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本。

53.浏览器会根据包含内容的块或窗口的宽度让文本自动换行。如果希望手动地强制文字进行换行，可以使用br元素实现这一要求。

54.同div一样，span元素是没有任何语义的。不同的是，span只适合包围字词短语，而div适合包含块级内容。

55.u元素为一块文字添加明显的非文本注解，比如在中文中将文本标明为专有名词，或标明文本拼写有误。

56.wbr元素代表“一个可换行处”。可以在一个较长的无间断短语（如URL）中使用该元素，表示此处可以在必要的时候进行换行，从而让文本中有限的空间内更具有可读性。因此，与br不同，wbr不会强制换行，而是让浏览器知道哪里可以根据需要进行换行。

57.ruby旁注标记，通常用于表示生僻字的发音。这些小的注解字符出现在它们标注的字符的上方或右方。
ruby元素以及它们的子元素rt和rp是HTML5中为内容添加旁注标记的机制。rt指明对基准字符进行注解的旁注字符。可选的rp元素用于在不支持ruby的浏览器中的旁注文本周围显示括号。

58.如果HTML页面中混合了从左到右书写的字符和从右到左书写的字符，就可以要用到bdi和bdo元素。
除非在html元素中添加dir属性并将属性值设为rtl，否则内容的基准方向都默认为从左到右。对于页面内的元素，如果其内容与页面基准设置不一致，也可以对其设置dir属性。
在单独进行设置的地方，内容一般将按照希望的方向显示。这是由Unicode的双向算法控制的。
当上述算法不按照设想的方式显示文本时，可以使用bdo（双向重写）元素对内容进行重写。通常，这代表HTML源代码中的内容是视觉顺序而非逻辑顺序的情况。
视觉顺序（visual order）就是内容看上去都顺序---HTML源代码内容与希望显示的顺序相同。逻辑顺序（logical order）则与之相反，可用于希伯来语这样从右至左书写的语言；先输入从右到左的第一个字符，然后是第二个（也就是第一个字符左边的字符），以此类推。

59.bdi元素用于内容的方向未知的情况，不必包含dir属性，因为默认已设为自动判断。

60.meter元素用来表示分数的值或已知范围的测量结果，HTML5建议浏览器中呈现meter时，在旁边显示一个类似温度计的图形---一个表示测量值的横条，测量值的颜色与最大值的有所区别。
meter支持好几个属性，value是其中唯一必需包含的属性，如果不指定min和max，则默认将它们分别设为0和1.0。low，high和optimum属性通常共同作用，它们范围划分为低，中和高三个区间。optimum代表范围内的最优位置。
一定不要将meter和progress元素混杂一起使用。

61.progress元素用它表示一个进度条，就像web应用中看到的指示保持或加载大量数据操作进度的那种组件。
progress元素支持三个属性：max，value和form。它们都是可选的，max属性指定任务的总工作量，其值必须大于0。value是任务已完成的量。如果progress没有嵌套在一个form元素里面，有需要将它们联系起来，可以添加form属性并将其值设为该form的id。

62.Web上用的最广泛的三种格式是GIF，PNG和JPEG，当前的浏览器都能查看这三种图像格式。
JPEG格式适用于彩色照片，因为它包含大量的颜色并进行了合理的压缩，使文件变得比较小。它是一种有损的格式，图像保存的时候会丢失一部分原始信息。
PNG和GIF格式通常用于保存拥有大量纯色和图案或有透明度的标志之类的文件。对于连续的颜色或重复的图案，PNG和GIF格式的压缩效果要好于JPEG的。选择PNG通常更好一些，因为它对小文件的压缩算法更好，且具有更高级的透明度支持（alpha透明度）。

63.首先，使用透明度将一个图像置于另一个图像的后面可以创建复杂的布局。其次，可以利用透明度为图像创建非矩形的边缘，增强页面的视觉吸引力。PNG和GIF都支持透明度，当JPEG不支持。
在GIF格式中，一个像素要么是透明的，要么是不透明的。而PNG则支持alpha透明。alpha透明即支持全透明，又支持半透明。这意味着具有复杂透明背景的图像使用PNG的效果要好于使用GIF的效果，因为使用PNG可以让边缘变得平滑，避免产生锯齿。

64.img元素用来显示图像，输入<img src="data:image.url" />，其中image.url指示图像文件在服务器上的位置。
在HTML5中，img元素必须包含alt元素，alt元素用来为图像添加一段描述性文本，当图像处于某种原因不显示的时候，就将这段文字显示出来。应尽量让替代文本少于50个字符。

65.指定图像尺寸,当浏览器读到插入图像的HTML代码时，必须加载图片，从而链接它有多大，需要为它留出多大的空间。如果指定图像的尺寸，浏览器就可以预留空间，在图像加载的同时让文本显示在周围，保持布局的稳定。
使用width和height属性是改变图像在网页上显示尺寸的方式，文件本身并没有改变。可以只设置width或只设置height，让浏览器按比例自动调整另一个值。

66.出现在地址栏、标签页和书签上小图标称为favicon。这个词是favorites icon（收藏夹图标）的简称。
通常应将favicon保存为ICO格式，也可以将favicon保存为PNG和GIF格式。一定要在type中使用正确的MIME类型。
由于浏览器通常将图标显示在灰色或其他颜色的背景上，因此可能要将图标的背景改为透明的。

67.链接有两个主要的部分：目标和标签。
1）第一个部分目标（destination）是最重要的部分。使用它指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件，发送电子邮件等等。最常见是连接到其他网页的链接，以及连接到其他网页的特定位置（称为锚，anchor）的链接。目标是通过编写URL定义，通常只能呢在浏览器的状态栏中看到。
2）第二个部分是标签（label），即访问者在浏览器中看到或在屏幕阅读器中听到，通过激活可以到达目标的部分。它可以是文本、图像或二者皆有。对于标签的文本，浏览器通常默认显示为带下划线的蓝色文字。通过CSS可以很容易地改变这一样式。
<a href="page.html"/>
href指hypertext reference（超文本引用）。通常对指向站内网页的链接使用相对URL，对指向其他网站页面的链接使用绝对URL。
rel属性是可选的，它描述包含链接的页面和链接指向的页面之间的关系。

68. HTML5几乎允许在链接内包含任何类型的元素或元素组。例如段落、列表、整篇文章和区块---几乎任何元素都行，交互式的内容除外，如其他链接、audio、video，表单元素，iframe等。通过使用HTML验证器对页面进行测试以防止链接中出现不允许包含的元素。
在以前的HTML中，链接中只能包含文本、图像等所谓的行内元素，也即标记文本短语（如em、strong、cite等）的元素。

69.链接的注意点：
1）如果仅指定路径，省略文件名，就可以创建指向对应目录下默认文件（通常为index.html）的链接。如果连路径也省略，就指向网站的默认首页。
2）在URL中应该全部使用小写字母，除非指向的页面或目录名称中含有大写字母。
3）不要让链接的标签太长。如果标签是句子的一部分，应在链接定义中仅保留关键词，让句子的其他部分位于a元素的外面。

70.target属性，可以让链接在新的窗口或标签页打开。

71.通常，激活一个链接会将用户带到对应网页的顶端。如果要想用户跳至网页的特定区域，就可以创建一个锚，并在链接中引用该锚。

72.HTML定义内容的含义，为网页构建基本的结构，而CSS（Cascading Style Sheet,层叠样式表）来定义它们的外观。
样式表是一种文本文件，其中包含一个或多个（通过属性和值）决定网页某特定元素如何显示的规则。CSS里有控制基本格式（如字号和颜色）的属性，有控制布局（如定位和浮动）的属性，还有决定访问者打印时在哪里换页的打印控制元素。

73.样式表中的每条规则都有两个主要部分：选择器（selector）和声明块（declaration block）。选择器决定哪些元素受到影响；声明块由一个或多个属性/值对（每个属性/值对构成一条声明）组成，它们指定应该做什么。
例如：
h1 {
background: yellow;
color: red;
}
其中，h1是选择器，{color：red；} 是声明块， "color：red;"是一个声明，"color"是属性， "red"是属性color的值。
样式规则由选择器（表示哪些元素将进行格式化）和声明块（描述要执行的格式化）组成。声明块内的每条声明都是一个由冒号隔开、以分号结尾的属性/值对。声明块以前花括号开始，以后花括号结束。

74.样式的注解采用/*注解内容*/

75.对某一给定元素应用多条样式规则时，CSS用层叠原则来考虑继承（inheritance）、特殊性（specificity）和位置（location）等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。
1）很多CSS属性不仅影响选择器所定义的元素，而且会被这些元素的后代继承。继承决定了一个元素没有任何样式应该如何显示。
例如，让所有h1元素显示为蓝色，并带有红色边框。因为color属性是继承的，border属性不是。那么，h1元素里包含的任意元素都会是蓝色的，当不会有红色的边框。另外，对大多数属性来说，还可以使用inherit值强制进行继承。
2）特殊性则决定了应用多个规则时应该如何显示。根据特殊性原则，选择器越特殊，规则就越强。因此，如果一条规则声明所有的h1元素都应该是蓝色的，而另一条规则声明所有h1元素都应该是蓝色的，而另一条规则声明所有class为spanish的h1元素都应该是红色的，那么对于所有class为spanish的h1元素，第二条规则将覆盖第一条规则，因为h1.spanish是比h1更为特殊的选择器。
例如：
p{
color: red;
}

p.group{
color: blue;
}

p#last {
color: green;
}

p#last {
color: magenta;
}
有四个具有不同特殊性的规则。第二个影响所有p元素，第二个只影响class为group的p元素，而第三和第四个则只影响id为last的唯一p元素。由于第三和第四规则具有相同的特殊性，位置就称为了考虑因素。由于第四条规则最后出现，因此它的优先级更高。
注意：id属性被认为是最特殊的(因为它们在一个文件中必须是唯一的)，而带class属性的选择器则比不带class的更特殊。同时，具有多个class的选择器比只有一个class的更特殊。在特殊性次序中，最低级ed是只有元素名的选择器，这时继承的规则被认为是最一般的，可以被任何其他规则覆盖。

3）有时候特殊性还不足以判断在相互冲突的规则中哪一个应该优先。在这种情况下，规则的位置就可以起到决定的作用：晚出现的优先级高。例如，直接应用在HTML元素上规则被认为比外部样式表中或插入HTML文档顶部的特殊性相同的规则出现的更晚,因此优先级更高。
如果这还不够，那么还可以在某条规则的末尾加上!important，以声明这个规则币其他规则更重要，超过整个优先级体系。

75.每个CSS属性对于它可以接受哪些值都有不同的规定。有的属性只能接受预定义的值；有的属性接受数字、整数、相对值、百分数、URL或则颜色；有的属性可以接受多种类型的值。
1）对于任何属性，如果希望显式地指出该属性的值于对应元素的父元素对该属性设定的值相同，就可以使用inherit值。
2）大多数CSS属性都有一些可供使用的预定义值。于HTML不同，不需要（也不能）将预定的值放到引号里。
border:none;
其中"none"是预设值。
3）很多CSS属性的值是长度。所有长度都必须包含数字和单位，并且它们之间没有空格。例如3em，10px。唯一的例外是0，它可以带单位也可以不带。
font-size:24px;
4)只有极少数的CSS属性接受不带单位的数字。其中最常见是就是line-height和z-index。
5）有的CSS属性允许开发人员指定另一个文件（尤其是图像）的URL。在这种情况下，使用url（file.ext），其中file.ext是目标资源的路径和文件名。注意，规范指出，相对URL应该相对于样式表的位置而不是相对HTML文档的位置。
可以在文件名上加上引号，但这不是必需的。此外，在单词url和前括号之间不应该有空格。括号和地址之间允许有空格，当这部是必需，也不建议这样做。
background:url(bg_flax.jpg)
"bg_flax.jpg"就是URL。

76.一般有三种方法实现CSS应用：外部样式表（首选方法），嵌入样式表和内联样式（最不可取的方法）。

77.外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式，然后让网站上的每个页面加载这个外部样式表，从而确保每个页面都有相同的设置。

78.创建外部样式表
1)在文本编辑器中创建一个新文档。
2）为网页定义样式规则，同时，根据需要在CSS中添加注释。
3）将文档以纯文本格式保存在希望放置的目录中。尽管任何名称都是允许的，但应该为该文件添加.css的扩展名，表明这是一个层叠样式表。
例如：

@charset "UTF-8";

/* A simple style sheet */
img{
border: 4px solid red;
}
一定要将CSS文件保存为以.css为扩展名的纯文本格式文件（可能称为Text Document、Plain Text、ASCII等）。

79.外部样式表的注意点：
1）无论选择什么文件名，一定不要包含空格。
2）外部样式表要么是通过链接引用的，要么是导入的（通过@import）。@import指令会影响页面的下载速度和呈现速度。
3）样式表开头处的@charset并不总是必需的。如果样式标准包含非ASCII字符，就必须包含它。此外，一定要将它放在样式表的第一行。不过，不要在嵌入样式表或内联样式中包含@charset。

80.链接到外部样式表的步骤
1）在每个希望使用样式表的HTML页面的head部分，输入<link rel="stylesheet".
2）输入一个空格，然后输入href="url.css",其中url.css是CSS样式表的名称。
3）输入一个空格和/>。

81.外部样式表注意点：
1）外部样式表里的URL是相对于服务器上该样式表文件的位置的，而不是相对于HTML页面的位置的。
2）外部样式表中的规则可能被HTML文档内人样式覆盖。
3）可以同时链接到多个样式表。如果不同的文件中有相互冲突的显示规则，则靠后的文件中的规则具有更高的优先级。
4）HTML早期版本要求在link元素定义中包含type="text/css"，但HTML5不要求这样做，可以忽略。

82.嵌入样式表是在页面中应用CSS的第二种方式。它允许在HTML文档里直接设置样式（通常位于head部分）。由于这些样式只在一个网页里存在，因此不会像外部样式表中的规则那样应用到其他的页面。

83.创建嵌入样式表的步骤
1）在HTML文档的head部分输入<style>
2）根据需要，定义任意数量的样式规则。
3）输入</style>结束嵌入样式表。
当且仅当style元素出现在link元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表的样式。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
img{
border: 4px solid red;
}
</style>
</head>
<body>
...
<img src="img/plg.jpg" alt="plg introduce" width="250" height="183"/>
...

</body>
</html>
其中，使用嵌入样式表时，style元素及其包围的样式规则通常位于文档的head部分。浏览器对页面的呈现方式与使用外部样式表时是一样。注意：嵌入样式表不应在其开头处（或其他任何位置）包含@charset声明。

84.将内容(HTML)、表现（CSS）和行为（JavaScript）分离是一种最佳实践，而将HTML和CSS混在一起就会打破这种原则。从实际情况来看，在外部样式表中维护CSS比在嵌入样式表中维护CSS更为容易。

85.内联样式只影响到一个元素，并且严重违背最佳实践，它将内容(HTML)和表现（CSS)混在了一起。

86.应用内联样式的步骤
1）在希望进行格式化的HTML元素中，输入style="。
2）创建一个样式规则，但不要包含花括号和选择器。不需要选择器是因为直接将样式放入目标元素中了。
3）要创建其他样式定义，输入；（分号）并重复第2步。
4）输入后引号"。

87.可以指定一个只用于特定输出的样式表，如只用于打印，或只用于浏览器在屏幕上查看。
指定与媒体相关的样式表的步骤：
1）在link或style开始标记中添加media="output",其中output可以是print、screen或all。多个值之间用逗号分隔。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test title</title>
<link rel="stylesheet" href="base.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>
</head>
<body>
...
<img src="img/plg.jpg" alt="plg introduce" width="250" height="183"/>
...

</body>
</html>
通过对link元素添加media属性，可以将样式表限制于某种特定的输出。在这个例子中，使用浏览器查看页面时，base.css会起作用（由于使用了media=“screen”）；打印页面时，print.css会起作用（由于使用了media="print"）。

2）也可以在样式表中使用@media规则，这种方法不需要在link元素中指定媒体类型。
@charset "UTF-8"

/* 针对所有媒体的样式 */
img {
border: 4px solid red;
}

p {
color: green;
font-style: italic;
}

/* 打印样式表 */
@media print {
img {
display: none;
}

p {
color: black;
}
}

样式表中的@media规则是指定其他媒体类型的另一种方式。

88. 选择器可以定义五个不同的标准来选择进行格式化的元素。
*元素的类型或名称。
例子：
h1 {
color: red;
}
最简单的选择器类型就是要格式化的元素的类型的名称（在上面的例子中为h1）

*元素所在的上下文。
例子：
h1 em {
color: red;
}
这个选择器使用上下文。这个样式只应用于h1元素中的em元素。其他地方的em元素不受影响。 "h1"上下文，"em"要选择的元素的名称

*元素的类或ID。
例子：
.very {
color: red;
}

#gauid {
color: red;
}
第一个选择器所有属于very类的元素。就是所有在开始标记中包含class="very"的元素。
第二个选择器选择id为guadi的那个元素，也就是在开始标记中指定id="guadi"的元素。
一个ID在每个页面中只能出现一次，而一个class可以出现任意次。

例子2：
/* "em.very" 字符串中，"em"表示要选择的元素的名称，"very"是类名 */
em.very {
color: red;
}

/*"article#gauid"字符串中，"article"要选择的元素的名称，"guadi"是ID */
article#guadi {
color: red;
}
通过在class或id选择器前面添加目标元素的名称，可以增强选择器的特殊性。在这个例子中，第一个选择器仅选择属于very类的em元素，而不是very类的任何元素。类似地，第二个选择器仅选择id为guadi的article元素。触发确有必要，一般不要使用这种方法。

*元素的违类或伪元素。
例子：
/*"a"是名称，"link"是伪类*/
a:link {
color:red;
}
在这个例子中，选择器选择属于link伪造的a元素（即还没有访问过的a元素）

*元素是否有某些属性和值。
例子：
/* "a"是名称 "name"是属性*/
a[name] {
color：red;
}
可以在选择器中使用方括号添加关于目标元素的属性或值的信息。

为了指出目标元素，选择器可以使用这五个标准的任意组合。在大多数情况下，只使用一个或两个标准即可。另外如果要对几组不同等元素应用相同的样式规则，可以将相同的声明同时应用于几个选择器。

89.选择要格式化的元素，最常用的标准可能是元素的名称或类型。

90.安装类型选择要格式化的元素的方法
输入selector,其中selector是目标元素的类型名称（不含任何元素）》
例子：
h2{
color: red;
}
这个选择器会选择文档所有的h2元素，并让它们显示为红色。

注意：
1)并非所有的选择器都需要指定元素的名称。如果要一类元素竞选格式化，而不管属于这个类的元素的类型，就可以从选择器中去掉元素的名称。
2）通配符*（星号）匹配代码中的任务元素名称。例如使用* { border: 2px solid green;} 会让每个元素都有一个2像素宽，绿色的实线边框！
3）可以在一个选择器中使用一组元素名称，名称之间用逗号分隔。

91.如果已经在元素中标识了class或id，就可以在选择器中使用这个标准，从而只对被标识的元素进行格式化。

a）按类选择要格式化的元素
1）输入.（点号）。
2）不加空格，直接输入classname，这里的classname标识希望应用样式的类。
例子：
.about{
color: red;
}
这个选择器会选择class为about的元素。在这个例子中，它们都是article元素，不过可以将类应用于任何元素。如果只想对有这个类的article元素应用这种样式。可以将选择器写为article.about。这样通常会是特殊性高于所需要的程度。

b）按id选择要格式化的元素
1）输入#（井号）。
2）不加空格，直接输入id，这里的id唯一标识希望应用样式的元素。
例子：
#gauid {
color: red;
}
就只有唯一个包含id="gauid"的元素。

注意：可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news{ color：red;}会影响所有属于news类的元素，而h1.news { color：red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。

92.类选择器与ID选择器的比较
要在class选择器和id选择器之间作出选择的时候，建议尽可能地使用class选择器。这主要是因为class选择器是可再用的。在任何情况下，id选择器都引入下面两个问题。
#与它们关联的样式不能在其他元素上复用。这样会导致其他元素上重复样式，而不是通过class共享样式。
#它们的特殊性比class选择器要强得多。这意味着如果要覆盖使用id选择器定义的样式，就要编写特殊性更强的CSS规则。

93.在CSS中，可以根据元素的祖先、父元素或同胞元素来定位它们。
祖先（ancestor）是包含目标元素（后代，desendant）的任何元素，不管它们之间间隔了多少代。
a）按祖先元素选择要格式化的元素
1）输入ancestor，这里的ancestor是希望格式化的元素的祖先元素的选择器。
2）输入一个空格。
3）如果需要，对后续的每个祖先元素重复第1步和第2步。
4）输入descendant，这里的descendant是希望格式化的元素的选择器。

例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test title</title>
</head>
<body>
<article class="about">
<h1>Antoni Gaudi</h1>

<p>Many tourists...</p>
<p>Barcelona.. </p>

</article>
</body>
</html>

article.about p {
color: red;
}
其中，article.about和p之间的空格意味着这个选择器会寻找任何作为about类的article的后代的p元素，不管它是第几代元素。不过，在class前面添加元素名称通常会带来更高的特殊性，而在实践中往往并不需要这么高的特殊性。

/*得到相同效果的其他方式
--------------------------------*/

/*任意article后代的所有p，特殊性最低的方法*/
article p {
color: red;
}

/*任意about类元素后代的所有p，特殊性第二低的方法*/
.about p {
color: red;
}
构造选择器以达到预期效果通常有一种以上的方法。关键在于需要多大的特殊性。这里上面的例子的选择器（article p {}）的特殊性比它后面的选择器(.about p {})和（article.about p {}）选择器的特殊性都低。

基于元素祖先的选择器称为后代选择器。CSS3将其重命名为后代结合符。
article.about只表示"class等于about的article"。因此article.about p表示"包含在class等于about的article元素里的任何p元素"。相比之下，特殊性低一些的.about p表示"包含在class等于about的任意元素里的所有p元素。"
上面的例子展示了后代结合符。CSS也有子结合符，从而可以为父元素的直接后代（即子元素）定义样式规则。在CSS3之前他们称做子选择器。父元素是直接包含另一个元素（子元素）的元素，也即它们之间没有隔着任何层次。

94.按父元素选择要格式化的元素
1）输入parent，这里的parent是直接包含待格式化元素的元素的选择器。
2）输入>（大于号）。
3）如果需要，对后续每代父元素重复第1步和第2步。
4）输入child，这里的child是要格式的元素的选择器。

例如：
article.about > p{
color: red;
}
这个选择器仅选择作为about类article元素的子元素（而非子子元素、子子子元素等）的p元素。包含于任何其他元素的p元素均不会被选择。

95.有时，只选择元素的第一个字元素（而不是所有的子元素）是很有用的。要实现这种效果，可以使用:frist-child伪类。
.about > p:first-child {
color:red;
}

96.同胞元素（sibling）是拥有同一父元素的任何类型的子元素。
相邻同胞元素（adjacent sibling）是直接相互毗邻的元素，即它们之间没有其他的同胞元素。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test title</title>
</head>
<body>
<h1>...</h1>
<p>...</p>
<h2>...</h2>
</body>
</html>

其中，h1和p是相邻同胞元素，p和h2是相邻同胞元素，而h1和h2则不是相邻的同胞元素。不过它们都是同胞元素，也是body元素的子元素。
CSS相邻同胞结合符（adjacent sibling combinator）可以直接跟在指定的同胞元素后面的同胞元素。

97.可以只选择元素的第一个字母或第一行，并对其添加样式。
a)选择元素的第一行
1）输入element，这里的element是要对其第一行进行格式化的元素的选择器。
2）输入:frist-line以选择第一步中引用的元素的第一整行。
例子：
p:frist-line {
color: red;
}

b）选择元素的第一个字母
1）输入element，这里的element是要对其第一个字母进行格式化的元素的选择器。
2）输入:first-letter以选择第1步中引用的元素的第一个字母。
例子：
p:first-letter {
color: red;
}

98.伪元素。伪类及CSS3的::first-line 和::first-letter语法
在CSS3中，:first-line的语法为::first-line, :first-letter的语法为::first-letter。注意，它们用两个冒号代替了单个冒号。
这样修改的目的是将伪元素（有四个,包括::first-line、::first-letter、::before和::after)与伪类（如:first-child、:link、:hover等）区分开。
伪元素:是HTML中并不存在的元素。例如，定义第一个字母或第一行文字，并未在HTML中作相应的标记。它们是另一个元素的部分内容。
相反伪类则应用于HTML元素中。例如，使用：first-child可以选择某元素的第一个子元素。

99.CSS允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过等等。可以通过一系列伪类实现这一特性。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test title</title>
</head>
<body>
<h1>klkl</h1>
<p>Many tourists are drawn to Barcelona to see Antoni Gaudi's incredible architecture.</p>
<p>Barcelona celbarated </a> the 150th anniversary of Gaudi's birth in 2002.</p>
<h2>ttsssk</h2>
</body>
</html>

无法在代码中指定链接的状态。链接的状态是由访问者控制的。伪类让你可以获取链接的状态，以改变链接在该状态下显示的效果。

a:link{
color: red;
}

a:visited {
color:orange;
}

a:focus {
color: purple;
}

a:hover {
color: green;
}

a:active {
color: blue;
}
链接的样式应该始终按照这种顺序进行定义，以避免链接处于多种状态（如已访问和鼠标停留）时覆盖属性。

100.按状态选择要格式化的链接元素的步骤
1）输入a（a是链接元素的名称）。
2）输入：（冒号）。
3）输入link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观。
或者输入visited已设置访问者已激活过的链接的外观。
或者输入focus，如果链接是通过键盘选择并已准备好激活的。
或者输入hover以设置正被指向的链接的外观。
或者输入activie以设置激活过的链接的外观。

101.由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA).

102.可以对具有给定属性或属性值的元素进行格式。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test title</title>
</head>
<body>
<h1>klkl</h1>
<p>Many tourists are drawn to Barcelona to see Antoni Gaudi's incredible architecture.</p>
<p>Barcelona celbarated </a> the 150th anniversary of Gaudi's birth in 2002.</p>

<section class="project">
<h2 lang="es">La Casa mi<h2>
<p>Gaudi's work was . <span lang="es">La Casa Mila</span> is an apartment building and <em>real people</em> live there. </p>
</section>

<screen class="work">
<h2 lang="es"> La Sagrada Fmailia</h2>
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.
</p>
</screen>

</body>
</html>

section[class]{
color：red;
}
方括号包围目标属性和目标属性值。这个例子中米有属性值，它们选择的是所有具有class属性的section。每个包含class属性section元素，无论其class值是什么都显示为红色。

103.按属性选择要格式化的元素的步骤
1）输入element，这里的element是要考察其属性的元素的选择器。
2）输入[attribute，这里的attribute是选择元素需要考察的属性的名称。
3）输入="value"，表示属性值等于这里的value的元素将被选中。或者输入~="value"。表示属性值包含这里的value的元素将被选中（属性值还可以包含其他内容，不同的属性值之间用空格分隔）。它必须匹配完整的单词，而不是单词的一部分。或者输入|="value"(前面是管道符号，而不是数字1或小小字母l)，表示属性值等于这里的value或已value开头的元素都被选择。
或者输入^="value"，表明属性值以这里的value开头（作为完整的单词，或单词的一部分）的元素将被选中。
或者输入$="value"，表示属性值以这里的value结尾（作为完整的单词，或单词的一部分）的元素将被选中.
或者输入*-"value"，表示属性值至少包含这里的value一次的元素将被选中。也就是说，value不必是属性值中的完整单词。
4）输入]。

104.属性选择器示例：
*这个选择器选择任何rel属性值等于external（必须完全匹配）的a元素。
a[rel="external"] {
color: red;
}

*假设某section元素有两个类，如<section class="project barelona">，另一个section有一个类，如<section class="barcelona">。~=语法可以测试单词的部分匹配，即匹配出现在以空格相隔的单词列表中的完整的单词。
section[class ~= "barcelona"] {
color: red;
}

/*这个选择器也能匹配，因为这个选择器匹配部分字符串（不需要完整的单词）*/
section[class*="barc"] {
color: red;
}

/*这个选择器也能匹配，因为barc并不是空格分隔的列表中的某个完整的单词*/
section[class ~="barc"] {
color: red;
}

*这个选择器选择任何带有lang属性且属性值以es开头的h2.
h2[lang |= "es"] {
color: red;
}
*通过使用通用选择器，这个选择器选择任何带有lang属性且属性值以es开头的元素。
*[lang != "es"] {
color: red;
}
*通过联合使用多种方法，这个选择器选择所有既有任意href属性，又有任意属性值包含单词howdy的title属性的a元素。
a[href][title ~= "howdy"]{
color：red;
}
*选择器选择所有既有任意href属性，又有任意属性值包含how（作为完整的单词或单词一部分，它匹配how、howdy、show等，无论how出现在属性值的什么位置）的title属性的a元素。
a[href][title*="how"] {
color：red;
}
*这个选择器匹配任何href属性值以http://开头的a元素
a[href^="http://"] {
color: orange;
}
*这个选择器匹配任何src属性值完全等于logo.png的img元素。
img[src="logo.png"] {
border: 1px solid green;
}
*这个选择器匹配任何src属性以.png结尾的img元素。
img[src$=".png"] {
border: 1px solid green;
}

105.将样式应用于元素组的步骤
1）输入selector1，这里的selector1是受样式规则影响的第一个元素的名称。
2）输入，（逗号）。
3）输入selector2，这里的selector2是受样式规则影响的下一个元素的名称。
4）对其他每个元素重复2和3步骤。
例子：
h1,
h2 {
color：red;
}

等价于：
h1 {
color：red;
}

h2 {
color：red;
}

106.使用CSS可以修改文本的字体、大小、粗细、倾斜、行高、前景、和背景颜色、简距和对齐方式，可以决定是否为文本添加下划线或删除线，可以将文本转换为大小全部使用大小写字母、全部使用小写字母或使用小型大写字母。

107.设置字体的方法
在样式表中需要的选择器之后，输入font-family: name，这里的name是首选的字体的名称。
对于宝华多个单词的字体名称，应该用引号（单引号或双引号）包围起来。
例如：
body {
font-family: "Palatino Linotype", Palatino, serif;
}

108.通过使用CSS的font-style属性，可以让任何元素中的文本以斜体显示。

p {
font-style: italic; /*italic（创建斜体文本）或oblique（创建倾斜文本）*/
}

取消斜体
输入font-style：normal。
font-style属性是继承的。

109.添加粗体样式的通用做法是简单地写出font-weight：bold。font-weight属性是继承的。
a）应用粗体格式
1）输入font-weight:。
2）输入bold，让文本显示为具有评价加粗值的粗体。这一属性值使用于大多数情况。
或者输入bolder（更粗）或lighter（更细）以设置相对当前粗细的值。
或者输入100~900之间的100的倍数，其中400代表正常粗细，700代表粗体。

b）取消粗体格式
出入font-weight：normal。

110.为网页里的文本设置字体大小有两种方式：
第一种直接指定要使用的特定字号；
1）输入font-size:.
2）在冒号（：）后输入准确的字号，如22px。
或者使用关键词指定字体大小，即使用xx-small、x-small、samll、medium、large、x-large或xx-large。
h1 {
font-size: 22px,
}

第二种指定相对于父元素文本的大小。
body{
font-family: serif;
font-size: 100%; /*16px*/
}

h1 {
font-size: 1.375em,
}

1）输入font-size:.
2）在冒号（：）后输入相对值，如1.375em。
或者使用相对关键词，即使用larger或smaller。

font-size属性是继承的。

注意：1个em单元（不要与HTML的em元素弄混）等于所用字体的大小，因此，1em等于100%。

111.行高指的是段落的行距，即段落内每行之间的距离。
设置行高的步骤
1）输入line-height：。
2）输入n，这里的n是一个数字，它与元素的字体大小相乘，得出需要的行高。
或输入a，这里的a是以em，像素或磅为单位的值。
或输入p%,这里的p%是字体大小的百分数。

112. 可以为单个元素设置背景，或者为整个页面设置背景，还可以为上述二者的任意组合设置背景。
修改文本背景的步骤
1）输入background：。
2）输入 transparent（透明）或color，这里的color是颜色名称、十六进制数值，或RGB、HSL、RGBA、HSLA颜色值。
3）如果元素，输入url（image.gif)以使用图像作为背景，这里的image.gif是图像相对样式表所在位置的路径和文件名。
如果愿意，输入repeat将图像在横向和纵向重复。输入repeat-x仅横向重复，或输入repeat-y仅纵向重复，或者no-repeat不重复。
如果愿意，输入fixed（固定）或scroll（滚动）以决定背景图是否应该随着画布一起滚动，默认是scroll。
如果愿意，输入xy以设置背景图像的位置，其中x和y可以表示为距离左上角的绝对值或百分数。或者用left（左对齐），center（居中）或right（右对齐）表示x，用top（顶端对齐）、center（居中）或bottom（底端对齐）表示y。

background属性不是继承的。
例子：
body {
background: #foc url(bg-page.png) repeat-x scroll 0 0;
}
等价于：
body {
background-color: #foc;
background-image: url(bg-page.png);
background-repeat-x;
background-attachment: scroll;
background-position: 0 0;
}

113.可以增加或减少单词之间或字母之间的距离。前者称为字间距（tracking），后者称为字偶距（kerning）。
word-spacing和letter0spacing属性是继承的。

114.通过设置text0indent属性，可以指定段落第一行前面应该空出多大的空间。

115.默认情况下，HTML文档里的多个空格和回车会显示为一个空格，或者被忽略。如果要让浏览器显示这些额外的空格，可以使用white-space属性。
设置空白属性的步骤
1）输入white-space:‘
2）输入pre，以让浏览器显示原文本中所有的空格和回车；
或者输入nowrap，以使所有空格称为非断行空格；
或者输入noraml，以按正常方式处理空格。

116.对齐文本的步骤
1）输入text-align：;
2）输入left让文本左对齐；
或者输入right让文本右对齐；
或者输入center让文本居于屏幕的中间；
或者输入justify让文本两端对齐。

注意：text-align属性只能用于设为display：block或display: inline-block的元素。p和div等元素已默认设为display：block。在HTML5之前，这类元素称为块级元素。
text-align属性是继承的。它的默认值取决于文档的语言和书写系统，不过在大多数情况下它会被不加区分地设置为左对齐。

117.使用text-transform属性，可以为样式定义文本的大小写。通过这种方法，可以将文本显示为首字母大写、全部大写、全部小写或按原样显示。
修改文本大小写的步骤
1）输入text-transform：。
2）在冒号（：）后输入capitalize让每个单词的首字母大写；
或者输入uppercase让所有字母大写；
或者输入lowercase让所有字母小写；
或者输入none让文本保持本来的样子（可以用来取消继承的值）。

text-transform属性是继承的。

118.使用小型大写字母的方法
输入font-variant：small-caps。
取消小型大写字母的方法
输入font-variant：none。

font-variant属性是继承的。

119.可以使用样式表对文本进行装饰，如天津下划线和删除线（可能用来表示修改）。
装饰文本的步骤
1）输入text-decoration：。
2）在冒号（：）后输入underline以天津下划线；
或者输入overline以添加上划线；
或者输入line-through以添加删除线。

取消文本装饰的方法
输入text-decoration：none。

120.CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）。

121.每一个元素可以是是块级（从新的一行开始，就像一个新的段落），也可以是行内（部会产生新行）。在默认情况下元素按照他们在HMTL中自上而下出现的次序显示（这被称作文档流，document flow），并在每个块级元素的开头和结尾处换行。

122.对元素的盒子进行定位有四种基本方法：可以让盒子处于文档流中（这是默认的方式，也称做静态方法），可以让盒子脱离文档流，并指定该元素相对于其父元素（绝对方法）或浏览器窗口（固定方法）的精确坐标，还可以相对于盒子在文档流中的默认位置对其进行移动（相对方法，使用频率介于静态方法和另两种方法之间）。此外，如果盒子相互重叠，还可以指定它们的叠放次序（z-index）。

123.设置元素高度或宽度的步骤
1）输入width：w，其中的w是元素内容区域的宽度，可以表示为长度（带单位，如px、em等）或父元素的百分数。或者使用auto让浏览器计算宽度（这是默认值）。
2）输入height：h，其中的h是元素内容区域的高度，只能表示为长度（带单位，如px、em等）。或者使用auto让浏览器计算高度（这是默认值）。

124.max-width属性非常适合为流式布局设置外围现在，限制内容宽度的最大值。min-width限制最小的宽度。
百分数是相对于父元素的宽度，而不是相对于元素本身的原始宽度的。

width和height不是继承的。

125.对于大多数默认显示为块级元素的元素，width的auto值是由包含块的宽度减去元素的内边距、边框和外边框计算出来的。包含块的宽度指的是父元素给元素留出的宽度。
对于图像这样的元素，auto宽度等于它们固有的宽度，即外部文件的实际尺寸。浮动元素的auto宽度为0，非浮动的行内元素会完全忽略width属性（即不能为em、cite等元素设置宽度，除非键它们设置为display：inline-block或display：block）。
如果手动设置width、margin-left和margin-right值，当这些值加上边框和内边距的值不等于包含块的大小，有的属性就需要作出让步。实际上，浏览器会覆盖你对margin-right的设置，将其设为auto。

126.设置元素外边距的方法
输入margin：x，其中x是要添加的空间量，可以表示为长度、相对父元素宽度的百分数或auto。

注意：如果对margin使用一个值，这个值就会应用于全部四个边。如果使用两个值，那么前一个值会应用于上下两边，后一个值会应用于左右两边。如果使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。如果使用四个值，那么它们会安装时钟顺序，依次应用于上、右、下、左四个边。
如果元素位于另一个元素的上面，对于相互接触的两个margin（即元素相互接触的下外边距和上外边距），仅使用其中加大的一个，另一个外边距会被叠加。左右边距不叠加。
外边距不是继承的。

127.内边距就是元素内容周围、边框以内的空间。padding元素。
在元素周围添加内边距的方法
输入padding：x，这里的x是要添加的空间量，表示为带单位（通常为em或像素）的长度或父元素宽度的百分比。
注意：如果对padding使用一个值，这个值就会应用于全部四个边。如果使用两个值，那么前一个值会应用于上下两边，后一个值会应用于左右两边。如果使用三个值，那么第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边。如果使用四个值，那么它们会安装时钟顺序，依次应用于上、右、下、左四个边。

内边距不是继承的。

128.可以使元素浮动在文本或其他元素上，float元素。
让文本环绕元素
1）输入float：。
2）输入left，让元素浮动到左边，其他内容围绕在它右边；
或者输入right，让元素浮动到右边，其他内容围绕在它左边；
或者输入none，让元素完全不浮动。（none是默认值，因此只有在特定情况下需要覆盖某个浮动元素的样式规则时才需要用到它。）
3）使用width属性显示第设置元素的宽度。

提示：选择的方式是应用于需要浮动的元素的，而不是应用于环绕它的元素。在使用float：left时，页面的其他部分围绕在右边，反之亦然。
对于某些元素（如短语南日），如果不显示地设置宽度，它们将无法正确的浮动。
float属性是不继承。

129.可以控制元素能够浮动在哪些元素的旁边，以及不能浮动在哪些元素的旁边。要阻止元素浮动在不合适的元素旁边，可以使用clear属性。

130.控制元素浮动位置的步骤
1）输入clear：。
2）输入left，阻止元素浮动在该元素的左边；
输入right，阻止元素浮动在该元素的右边；
输入both，阻止元素浮动在该元素的左右两边；
输入none，允许元素浮动在该元素的左右边；

131.可以在元素周围创建一个边框，并设置它的厚度、风格和颜色。如果指定了内边距，边框将包围在元素内容和内边距的外面。
1）定义边框风格
输入border-style：type，其中的type可以是none、dotted（点状）。dashed（虚线）、solid（实绩）、double（双线）、groove（凹槽）、ridge（凸槽）、inset（凹边）或outset（凸边）。
2）设置边框宽度
输入border-width：n，这里的n是需要的宽度。
3）设置边框颜色
输入border-color：color，这里的color是颜色名称、十六进制或RGB、HSL、RGBA、HSLA 颜色。
4）使用简记法同时设置多个边框属性
a）输入border。
b）如果需要，输入-top、-right、-bottom或-left将边框效果限制在某一条边上。
c）如果需要，输入-property，这里的property可以是style（风格）、width（宽度）或color（颜色），仅使用单个属性设置边框。
d）输入冒号（：）。
e）输入恰当的值。如果跳过了第3步，则可以指定所有三种边框属性，也可以指定三种类型的任意组合。如果在第3步中指定了一种属性，则只能使用这种属性可以接受的值。

132.每个元素在页面的文档流中都有一个自然位置。相对于这个原始位置对元素进行移动就称为相对定位。周围的元素完全不受此影响。
偏移自然流中元素的步骤
1）输入position：relative；
2）输入top、right、bottom或left。再输入：v，这里的v是希望元素从它的自然位置偏移的距离，可以表示为绝对值、相对值（如10px或2em）或百分数。
3）如果元素，重复第2步，添加其他方向上的偏移量。每个属性/值对之间用分号分隔。

133.提示：
1）相对定位中的“相对”指的是相对于元素的原始位置，而不是周围元素的位置。无法让元素相对于其他元素移动，但可以相对于它的原始位置移动。
2）其他元素不会受到偏移的影响，它们仍然按照这个元素原来的盒子进行排列。设置了相对定位的内容可能与其他内容重叠，这取决于top、right、bottom和left的值。
3）使用相对定位、绝对定位或固定定位时，对于相互重叠的元素，可以用z-index属性指定它们的叠放次序。
4）如果不指定position属性，偏移量将不会其作用。
5）对元素设置position：static，可以覆盖position：relative设置。static是元素的默认值，这就是元素出现在常规文档流中的原因。
6）定位不是继承的。

134.通过对元素进行绝对定位，即指定它们相对于body或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流。
对元素进行绝对定位的步骤：
1）输入position：absolute；
2）根据需要，输入top、right、bottom或left。
再输入：v，这里的v是希望元素相对于其祖先元素偏移的距离（如10px或2em）或相对于其祖先的百分比。
3）根据需要，对其他方向重复第2步，照例用分号分隔每个属性/值对。声明块以前花括号开始，以后花括号结束。
4）根据需要，对希望成为绝对定位参照题的祖先元素添加position：relative。如果跳过这一步，元素将对象与body计算偏移量。

135.提示：
1）由于绝对定位的元素脱离了文档流，因此它们可能会相互重叠，或与其它元素重叠。
2）如果不为绝对定位的元素指定偏移量，这个元素将显示在它的自然位置上，但不会影响后续元素在文档流中的位置。
3）还有一种定位类型称为固定定位。当访问者滚动浏览器窗口时，页面内容通常随之上下移动，如果对元素设置position: fixed;,它就会固定在浏览器窗口中。当访问者上下滚动浏览器窗口时，该元素不会随之移动，页面的其余部分仍照常滚动。
4）使用相对定位、绝对定位或固定定位时，可以使用z-index属性指定相互重叠的元素的叠放次序。

136.指定元素三维位置的方法
输入z-index：n，其中n是表示元素在定位过的对象堆中的层级的数字。

137.提示：
1）z-index属性仅对定位过的元素（即设为绝对定位、相对定位或固定定位的元素）有效。
2）z-index的值越大，元素在堆中就越高。
3）如果在设置了z-index的元素中嵌套元素，那么这些嵌套的元素手写更加自身的z-index确定次序，然后作为一个整体在更大的上下文中确定次序。
4）z-index属性不是继承的。

138.元素并不总是包含在它们自己的盒子里。这可能是因为盒子不够大，例如，图像比它的容器更宽就会溢出；也可能是因为使用负的外边距或绝对定位让内容处于盒子的外面。无论哪种情况，都可以使用overflow属性控制元素在盒子外面的部分。
决定浏览器如何处理溢出的步骤
1）输入overflow：。
2）输入visible，让元素的盒子进行扩展以适应其内容，这是默认项。
或输入hidden，隐藏元素的盒子容纳不了的内容；
或输入scroll，从而总是在元素添加滚动条，让访问者可以通过滚动条看到溢出的内容；
或输入auto，让滚动条仅在需要的时候出现。

overflow属性不是继承的。

139.可以使用除默认方式以外的多种方式对齐元素，让它们在页面上显得较为整齐。
使元素垂直对齐的步骤
1) 输入vertical—align:。
2）输入baseline，使元素的基准线对齐父元素的基准线；
或者输入middle，使元素的中线对齐父元素的中线；
或者输入sub，使元素成为父元素的下标；
或者输入super，使元素成为父元素的上标；
或者输入text-top，使元素的顶部对齐父元素的顶部；
或者输入text-bottom，使元素的底部对齐父元素的底部；
或者输入top，使元素的顶部对齐当前行里最高元素的顶部；
或者输入bottom，使元素的底部对齐当前行里最低元素的底部；
或者输入元素行高的百分比，可以是正数也可以是分数。

vertical-align属性仅对显示为行内元素的元素有效，对显示为块级元素的元素无效。

140.一般情况下，浏览器负责控制鼠标指针的形状。大多数时候适用箭头形状，指向链接时使用手指形状等等，使用CSS可以修改指针的形状。
修改指针形状的步骤
1）输入cursor：。
2）输入pointer表示停留在链接上时通常显示的指针形状（鼠标手图案）或default表示箭头,或者输入crosshair(+)、move(方向坐标)、wait、help（？）、text（I）或progress；
或者输入auto显示特定情况下通常使用的指针形状；
或者输入x-resize显示双向箭头，这里的x是其中一个箭头需要指向的方向，可以是n（北）、nw（西北）、e（东）等等。

141.显示和隐藏元素可以使用display和visibility两个属性。两者的差异如下：
1）display属性可以用在多个方面。可以覆盖元素的自然显示方式，如将其从inline改为block，或者反过来。还有一种混合显示方式称做inline-block，让元素与其他内容出现在同一行，同时具有块级元素的属性。display属性还可以让元素及其内容不在页面上占据任何空间。此外，该属性还可以是其他的值。
img {
/*让元素显示在单独的一行上*/
display: block;
}

.hide {
/*让这个类的所有元素都不显示*/
display: none;
}
2）同时，visibility属性的主要目的是控制元素可否可见。与display属性不同的是，使用visibility隐藏元素时，元素及其内容应该出现的位置会留下一片空白区域。

142.指定元素显示方式的步骤
1）在样式表规则中，输入display：。
2）输入block，让元素显示为块级元素；
或者输入inline，让元素显示为行内元素；
或者输入inline-block，让元素显示为行内元素，同时具有块级元素的特征，即可以为元素设置width、height、margin、padding等属性；
或者输入none，隐藏元素，并将其从文档流中完全移除。

143.控制元素可见性的步骤
1）在样式表规则中，输入visibility：。
2）输入hidden，让元素不可见，当在文档流中保留它；
或者输入visible，让元素显示出现来。

144.提示：
如果使用display：none；，那么隐藏的元素不会在浏览器中留下任何痕迹，没有空白的空间。如果使用visibility：hidden；，隐藏的元素仍然会在文档流中保留其所占据的空间。所有的内容（包括后代元素）也受到同样的影响。

145.表单有两个基本组成部分：访问者在页面上可以看见并填写的字段、标签和按钮的集合；以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本。
基本的表单字段类型包括文本框、特殊的密码框、单选按钮、复选框、下拉菜单、更大的文本区域、甚至可点击的图像。每个元素都有一个名称、作为在处理表单时用于标识数据的标签。

146.表单有三个重要的组成部分：
*form元素，其中包含用于处理表单的脚本的URL和处理表单的方法（post或get）；
*表单元素，如字段和选择框（复选框、下拉菜单、单选按钮）；
*以及提交按钮，用于触发向服务器上的监听脚本发送数据的动作。

147.创建表单的步骤
1）输入<form method="post"。
2）输入action="script.url“>，这里的script.url是提交表单时要运行的脚本在服务器上的位置。
3）创建表单的内容，（包括一个提交按钮）。
4）创建</form>以结束表单。

148.文本框可以包含一行无格式的文本，它可以是访问者想输入的任何内容，通常用于输入配置信息。
创建文本框的步骤
1）如果需要，输入用于让访问者识别文本框的标签。
2）输入<input type="text"。
3）输入name=”label“，这里的label是用于让服务器（和脚本）识别输入数据的文本。
4）输入id=”label“，这里的label是用于让对应的标签元素识别文本框的文本。还用于让JavaScript为表单添加功能。
5）如果需要，输入value=”default“，这里的default是这个字段中最初显示的数据，如果访问者没有输入别的内容的话，这一数据将被发送到服务器。
6）输入需要，输入required=”required“，表示仅在这个字段有值的情况下才能提交表单。
7）如果需要，输入placeholder=”hinttext“，这里的hinttext是这个字段中最初显示的数据，用于指导用户的输入。当input元素获得焦点时，这些文本将会消失，让用户输入内容。
8）如果需要，输入autofocus=”autofocus“。如果这是第一个拥有此属性的input元素，该元素在页面加载时会默认获取焦点。
9）如果需要，通过输入size=”n“定义文本框的大小，这里的n是需要设置文本框宽度，以字符为单位。也可以使用CSS设置输入框的宽度。
10）如果需要，输入maxlength=”n“，这里的n是该文本框允许输入的最大字符数。
11）最后，输入/>，结束文本框。

149.提示：文本框大小的默认值为20。不过访问者可以输入更多的字符，直到达到maxlength属性规定的限制。如果需要更大的可以容纳好几行文本的字段，最好使用文本区域。

150.密码框与文本框的唯一区别是，密码框中输入的文本会使用圆点或星号进行隐藏，不过这些信息在发往服务器时并为加密。
编译数据时，password属性会识别密码。
即便密码框中没有输入任何内容，name属性然将被发送给服务器（使用为定义的value）。

151.为表单组件添加正式标签的步骤
1）输入<label。
2）如果需要，输入for="idname">,这里的idname是对应表单元素的id属性值。
3）输入标签的内容
4）输入</label>。
提示：如果使用for属性，就必须同时在相关联的form元素的开始标记中添加id属性，才能使for属性生效（否则，文档无法通过验证）.
如果省略for属性,那么对于需要添加标签的元素,id属性并不是必需的.在这种情况下,标签和该元素之间是通过邻近原则(如位于同一个li元素)联系在一起的.

152.创建单选按钮的步骤
1)如果需要,输入单选按钮的介绍文本.
2)输入<input type="radio".
3)输入name="radioset"，这里的radioset用于识别发送至脚本的数据，同时用于将多个单选按钮联系在一起，确保同一组中最多只有一个被选中。
4）输入id=”id“，这里的id用于让对应的标签识别该单选按钮。同一组单选按钮的name值都是相同的，但同一页面中每个元素的id必须是唯一的。
5）输入value=”data“，这里的data是该单选按钮被选中（无论是被默认选中还是被访问者选中）时要发送给服务器的问题吧。
6）如果需要，输入checked=”checked“让该单选按钮在页面打开时默认处于激活状态。在一组单选按钮中，只能对一个按钮添加这一属性。（在HTML中，=”checked“是可选的）
7）输入/>。
8）输入<label for="id">radio label<label>,其中，id与单选按钮中的id值相同，radio label则用于让访问者识别该单选按钮。radio label的值通常与value的值相同，当这不是必需的。
9）对同一组内的所有单选按钮，重复第2到第8步。

153.选择框非常适合向访问者提供一组选项，从而允许他们从中选取。它们通常呈现为下拉菜单的样式。如果允许用户选择多个选项，选择框就会呈现出一个带滚动条的项目框。
创建选择框的步骤
1）如果需要，输入描述菜单的文本。
2）输入<select。
3）输入name=”label“，这里的label用于在收集的数据发送至服务器时对数据进行识别。
4）输入id=”idlabel“，这里的idlabel是用于让对应的标签和JavaScript识别输入字段的文本。
5）如果需要，输入size=”n“，这里的n代表选择框的高度（以行为单位）。
6）如果需要，输入multiple=”multiple“，从而允许访问者选择一个以上的菜单选项（选择的时候需按住Control键或Command键）。
7）输入>.
8）输入<option.
9）如果需要，输入selected=”selected“，指定该选项被默认选中。
10）输入value=”label“，这里的label用于在该选项被选中时对将要发送至服务器的数据进行识别。
11）如果需要，输入label=”menu option“，这里的menu option是应该出现在菜单里的选项文字。
12）输入>。
13）输入希望出现在菜单中的选项名称。
14）输入</option>。
15）对每个选项重复第8步至第14步。
16）输入</select>.

154.如果有一个选项很多的特别大的菜单，可以需要对这些选项进行分组，分别放入不同的类别。
对选择框选项进行分组
1）根据”创建选择框的步骤“，创建所需的选择框。
2）在希望放在同一个子菜单中的第一组选项中的第一个option元素之前，输入<optgroup.
3）输入label=”submenutitle”>，这里的submenutitle是子菜单的标题。
4）在该组的最后一个option元素之后，输入</optgroup>.
5）对每个子菜单重复第2至第4步。

155.选择框由两种HTML元素构成，select和option。通常，在select元素里设置name属性，在每个option元素里设置value属性。
如果添加size属性，那么选择框看起来会更像一个列表，且没有自动选中的选项（除非设置了selected）。
如果size大于选项的数量，访问者就可以通过点击空白区域让所有的选项处于未选中状态。

156.创建复选框的步骤
1）如果需要，输入复选框的介绍文本。
2）输入<input type="checkbox".
3）输入name=”boxset“，这里的boxset用于识别发送至脚本的数据，同时用于多个复选框联系在一起。
4）输入value="data",这里的data是该复选框被选中（无论是被访问者选中还是被其他选中）时都要发送给服务器的文本。
5）输入checked="checked"让该复选框在页面打开时默认处于选中状态，建站者或访问者可能会勾选默认选项。（在HTML中，=”checked“是可选的。）
6）输入/>以结束复选框。
7）输入<label for="id">checkbox label</label>,其中，id与复选框元素中的id值相同，checkbox label则用于让访问者识别该复选框。checkbox label的值通常与vaule的值相同，但这并不是必需的。
8）对同一组内的所有复选框，重复第2步至第7部。

157.创建文本区域的步骤
1）如果需要，输入用于识别文本区域的解释性文本。
2）输入<textarea。
3）输入name=“label”，这里的label是用于让服务器（和脚本）识别输入数据的文本。
4）如果需要，输入maxlength=“n”，这里的n是可以输入的最大字符数。对于text来说，这个属性是HTML5新增的，因此它在不同的浏览器中的表现并不一致。
5）输入rows=“n”，这里的n是文本区域的高度（以行为单位）。
6）输入cols=“n”，这里的n是文本区域的宽度（以字符为单位）。
7）输入>。
8）输入文本区域的默认文本（如果有的话）。
9）输入</textarea>以完成文本区域。

对于文本区域，不需要使用value属性。替代value属性的是出现在textarea开始标记和结束标记之间的文本。
访问者在一个文本区域中最多可以输入32700个字符。必要的时候会出现滚动条。

158.让访问者上传文件的步骤
1）输入<form method="post" enctype="multipart/form-data"。enctype属性可以确保文件采用正确的格式上传。
2）输入action=“upload.url”>，其中的upload.url是处理上传文本的脚本的URL。为此可能需要一段专门的脚本。
3）为文件上传区域输入标签，如<lable for="picture">Picture:</label>。
4）输入<input type="file"，创建一个文本上传框和一个Browse(浏览)按钮。
5）输入name="title",这里的title用于识别将要上传的文件。
6）输入id="label",这里的label用于让对应的标签识别这个表单元素，它在此页面上必须是唯一的。
7）如果需要，输入size=“n”,这里的n是访问者可以输入路径和文件名的字段的宽度。也可以使用CSS设置宽度。
8）输入/>。
9）跟平常一样结束表单，包括创建提交按钮，输入</form>结束标识。

159.
隐藏字段可以用于存储表单中的数据，但它不会显示给访问者。可以认为它们是不可见的文本框。它们通常用于存储先前的表单收集的信息，以便将这些信息同当前表单的数据一起交给脚本进行处理。
创建隐藏字段的步骤
1）输入<input type="hidden"。
2）输入name="label",这里的label是对要存储的信息的简短描述。
3）输入value="data",这里的data是要存储的信息本身。它通常是表单处理脚本中的一个变量。
4）输入/>。
隐藏字段出现在表单标记中的位置并不重要，因为它们在浏览器中是不可见的。只要它们位于表单的开始标记和结束标记之间即可。
如果要创建一个在访问者点击提交按钮时与其他数据一起提交的元素，同时希望访问者可以看到它，那么可以创建一个常规的表单元素并使用readonly（只读）属性。

160.什么时候适用隐藏字段假设有一个表单，希望访问者在提交表单之前有机会检查他们输入的内容。处理表单的脚本可以向访问者显示提交的数据，同时创建一个表单，其中有包含同样数据的隐藏字段。如果访问希望边距数据，他们只需后退就可以了。如果它们想提交表单，由于隐藏字段已经将数据填好了，因此他们就不需要再次输入数据了。

161.创建提交按钮的步骤
1）输入<input type="submit"。
2）如果需要，输入value="submit message"。这里的submit message是将要出现在按钮上的文本。
3）最后输入/>。

162.创建带图像的提交按钮
1）输入<button type="submit">。
2）输入将要出现在按钮中图像左侧的文本（如果有的话）。
3）输入<img src="data:image.url"，其中的image.url是将要出现在按钮上的图像的名称。
4）输入alt="alternate text",这里的alternate text是当图像无法显示时需要出现的文本。
5）如果需要，添加其他的图像属性。
6）输入/>以结束图像。
7）输入将要出现在按钮中图像右侧的文本（如果有的话）。
8）输入<button>。
提示：如果省略value属性，那么提交按钮就会显示默认的Submit Query。
提交按钮的名-值对仅在设置了name属性以后才会发送给脚本。因此，如果忽略name属性，就不必处理这一额外的、通常没有意义的提交数据。
如果有多个提交按钮，可以为每个按钮设置name属性和value属性，从而让脚本知道用户按下的那个按钮。

163.使用图像提交表单的步骤
1）创建PNG、GIF或JPEG图像。
2）输入<input type="image"。
3）输入src="data:image.url",这里的iamge.url是图像在服务器上的位置。
4）输入alt="description"，这里的description是图像无法显示时将要出现的内容。
5）输入/>结束用于提交表单活动图像的定义。

164.禁用表单元素的方法
在表单元素的标记中输入disabled="disabled"（或者仅输入disabled，这两种方式都是可行的）、
可以通过脚本修改已禁用表单元素的内容。例如：为单选按钮添加οnclick="document.getElementById('other_description').disabled = flae;"。这样就可以根据被选中的单选按钮对文本区域进行禁用或启用。

165.从基本层面看，table元素是由行组成的，行又是由单元格组成的。每个行(tr)都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。如果认为为整个表格添加一个标题有助于访问者理解该表格，可以提供caption。
在默认情况下，表格在浏览器中呈现的宽度是其中的信息在页面可用空间里所需的最小宽度。

166.每个行都是由tr元素标记的。
在默认情况下，th文本是以粗体显示的，th和caption文本都是居中对齐的，表格的宽度就是内容所需的宽度。
通过制定thead、tbody和tfoot显示地定义了表格不同部分。thead元素可以显式地将一行或多行标题标记为表格的头部。tbody元素用于包围所有的数据行。tfoot元素可以显式地将一行或多行标记为表格的尾部。

167.创建表格结构的步骤
1）输入<table>。
2）如果需要，输入<caption>caption content</caption>，其中caption content是对表格的描述。
3）如果需要，在要创建的表格部分的第一个tr元素之前，输入<thead>、<tbody>、<tfoot>.
4）输入<tr>定义行的开始。
5）输入<th scope="scopetype">开始标题单元格（其中的scoptype可以是col、row、colgroup或rowgroup），或者输入<td>定义数据单元格的开始。
6）输入单元格的内容。
7）输入</th>结束标题单元格，或输入</td>结束数据单元格。
8）对行内的每个单元格重复第5步至第7步。
9）输入</tr>结束行。
10）为所在表格部分内的每个行重复第4至第9步。
11）如果在第3步中开始了一个表格部分，就根据需要使用</thead>、</tbody>、</tfoot>.结束这个部分。
12）为每个表格部分重复第3步至第11步。注意，一个表格只能有一个thead和tfoot，但可以有多个tbody元素。
13）输入</table>以结束表格。

168.让单元格跨越两个货两个以上列的步骤
1）在需要定义跨越一个以上的列的单元格的地方，如果<td和一个空格。
2）输入colspan="n">，这里的n是单元格要跨越的列数。
3）输入单元格的内容。
4）输入</td>.
5）完成表格的其余部分。如果创建了一个跨越两列的单元格，在该行就应该少定义一个单元格；如果创建一个跨越三列的单元格，在该行就应该少定义两个单元格，以此类推。

169.让单元格跨越两个或两个以上行的步骤
1）在需要定义跨越一个以上的行的单元格的地方，输入<td和一个空格。
2）输入rowspan="n">，这里的n是单元格要跨越的行数。
3）输入单元格的内容。
4）输入</td>。
5）输入表格的其余部分。如果创建了一个rowspan等于2的单元格，就不需要定义下一行中该单元格对应的单元格了；如果创建了一个rowspan等于3的单元格，就不需要定义该单元格对应的单元格了，以此类推。

170.提示：
表格中的每一行都应具有相同的单元格数量。跨越多列的单元格应算做多个单元格，它的colspan属性值为多少，就算做多少个单元格。
表格中的每一列都应具有相同的单元格数量。跨越多行的单元格应算做多个单元格，它的rowsoan属性值为多少，就算作多少个单元格。

171.视觉区域（viewport）指的是浏览器（包括桌面浏览器和移动浏览器）显示的页面的区域。它不包含浏览器地址栏、按钮这样的东西，只是浏览区域。媒体查询的width特性对应的是视觉区域的宽度。不过device-width特性不是，它指的是屏幕的宽度。
在移动设备上，默认情况下这两个值通常不一样。

172. 使用CSS3，可以在不引入额外的标记或图像的情况下，为大多数元素（包含表单元素、图像，甚至是段落文本）创建圆角。
为元素创建四个相同的圆角
1）输入-moz-border-radius: r,这里的r是圆角的半径大小，表示为长度（带单位）
2）输入-webkit-border-radius：r，这里的r是圆角的半径大小。
3）输入border-radius：r。这里的r是圆角的半径大小，使用于第1步中相同的值。

173.为元素创建一个圆角
1）输入-moz-border-radius—topleft：r，这里的r是左上方圆角的半径大小，表示为长度（带单位）。
2）输入-wbekit-border-top-left-radius：r，这里的r使用与第1步中相同的值。
3）输入border-top-left-radius：r，这里的r是圆角的半径大小，表示为长度（带单位）。

174.创建椭圆形圆角
输入-moz-border-radius：x/y，其中x是圆角在水平方向上的半径大小，y是圆角在垂直方向上的半径大小，均表示为长度（带单位），这两个值之间应以一个斜杠分隔。

175.输入border-radius创建圆形
1）输入-moz-border-radius：r，这里的r是元素的半径大小（带长度单位）。要创建圆形，可以使用短形式的语法，r的值应该等于元素高度或宽度的一半。
2）输入-webkit-border-radius：r，这里的r是元素的半径大小（带长度单位）。要创建圆形，可以使用短形式的语法，r的值应该等于元素高度或宽度的一半。
3）输入border-radius：r，这里的r是元素的半径大小（带长度单位。

176.为元素的文本添加阴影
1）在CSS中，输入text-shadow：。
2）分别输入表示x-offset（水平偏移量）、y-offset（垂直偏移量）、color（颜色）和blur radius（模糊半径）的四个值（带长度单位，不用逗号分隔）。
3）输入；（分号）。

177.为元素的文本添加多重阴影
1）在CSS中，输入text-shadow：。
2）分别输入表示x-offset（水平偏移量）、y-offset（垂直偏移量）、color（颜色）和blur radius的四个值（带长度单位，不用逗号分隔）。
3）输入，（逗号）。
4）对四种属性使用不用的值重复第2步.
5）输入：（分号）。

178.将text-shadow改会默认值
1）在CSS中，输入text-shadow：。
2）输入none。
3）输入；（分号）。
text-shadow属性是继承的。

179.为单个元素应用多重背景图像
1）输入background—color：b，这里的b是希望为元素应用的后备背景颜色。
2）输入background-image：u，这里的u是绝对或相对路径图像引用的列表（用逗号分隔）。
3）输入background—position：p，这里是p是成对的x-offset和y-offset的集合（用逗号分隔）。每个背景图像都应有一组x-offset和y-offset。
4）输入background-repeat：r，这里的r是repeat-x、repeat-y或no-repeat值的列表（用逗号分隔），每个图像对应一个值。

180.使用渐变背景
1）创建后备背景颜色
输入background-color：color，这里的color可以是任何支持的颜色名称、十六进制数以及RGB、RGBA或HSL值。
2）定位渐变类型
输入background：type，这里的type可以是linear-gradient（线性渐变）或radialgrandient（径向渐变）。
3）定义渐变开始位置
输入left和，（逗号）以创建从元素左侧开始的渐变；
或者输入right和，（逗号）以创建元素右侧开始的渐变；
或者输入top和，（逗号）以创建从元素顶端开始的渐变；
或者输入bottom和，（逗号）以创建从元素底端开始的渐变；
或者输入angle（角度）值和，（逗号）以改变渐变的角度。这里的角度为渐变线沿逆时针方向转至水平线所转过的角度；
或者输入center（仅适用于径向渐变）和，（逗号）以创建从元素中心开始的渐变。
4）指定开始颜色和结束颜色
输入c1，c2），其中c1和c2分别是渐变的开始颜色或结束颜色。使用颜色名称等值指定颜色。
5）创建包含多个颜色的渐变
a）重复创建线性渐变或径向渐变的头两步,即指定渐变的类型和开始位置。
b）然后输入c1 p1， c2 p2，c3 p3），其中C#表示颜色，p#是对应颜色的位置（使用0到100%之间的百分数进行指定）。

181.为元素设置不透明度
可以使用opacity属性修改元素（包括图像）的透明度。
修改元素不透明度的方法：
输入opacity：0，这里的0表示元素的不透明程度（两位小数，不带单位）。
opacity的默认值为1,该属性值可以使用0.00（完全透明）至1.00（完全不透明）之间的两位小数，
通过使用opacity属性和：hover伪属性，可以修改元素在用户鼠标停留时的不透明度，或者为某些元素（如可选的表单字段）添加表示禁用的外观。

182.所有的列表都是由主要元素和次要元素构成的。
主要元素用于指定要创建的列表的类型，其中，ul表示无序列表（unordered list），ol表示有序列表（ordered list；在HTML5之前称为定义列表）。
次要元素用于指定要创建的列表项目类型，其中，li代表ol或ul中的列表项目，dt和dd分别代表dl中的术语和描述。

183.创建列表
1）输入<ol>(有序列表)或<ul>(无序列表)。对于有序列表，可以包含start、type和reversed这三个可选的属性。
2）输入<li>以开始第一个列表项目。对于有序列表，可以包含可选的value属性。
3）添加要包含在列表项目内的内容（如文本、链接、img元素等）。
4）输入</li>以结束列表项目。
5）对于每个新的列表项目，重复第2步至第4步。
6）输入</ol>或</ul>以结束列表。

184.HTML提供了专门用于描述成组出现的名称（术语）及其值之间关联的列表类型。这种类型在HTML5中称为描述列表（description list），而在HTML的早期版本中则称为定义列表。
根据HTML5规范，“有名称及其值构成的组合可以是术语和定义、元数据主题和值、问题和答案，以及任何其他的名-值组。”每个列表都包含在dl中，其中的每个名-值组都有一个或多个dt元素（名称或术语）以及一个或多个dd元素（它们的值）。

185.创建描述列表的步骤
1）输入<dl>。
2）输入<dt>。
3）输入需要描述或定义的单词或短语，包括任何额外的语义元素（如dfn）。
4）输入</dt>以完成名-值组中的名称部分。
5）如果名-值中有多于一个的名称或术语，可以根据需要重复第2步至第4步。
6）输入<dd>。
7）输入第3步中输入的术语的描述。
8）输入</dd>以完成名-值组中的描述（值）部分。
9）如果名-值组中有多于一个的定义值，可根据需要重复第6步至第8步）。
10）对每个由术语和描述构成的组，重复第2步至第9步。
11）输入</dl>以完成整个定义列表。

186.HMTL定义网页的内容，CSS定义网页的表示，JavaScript则定义特殊的行为。

187.脚本主要有两种类型，一种是从外部文件（使用纯文本格式）加载的脚本，另一种是嵌入在页面中的脚本。
无论是加载外部脚本还是嵌入脚本，均使用script（脚本）元素。

188.加载外部脚本的方法
输入<script src="script.js"></script>,这里的script.js是外部脚本在服务器上的位置及文件名。应该尽可能地将脚本元素放在</body>结束标记之前，而不是放在文档中的head元素里。

189.浏览器在页面加载的时候，在默认情况下，浏览器会按照脚本在HTML中出现的顺序依次对每个脚本进行下载（对于外部脚本）、解析和执行。在处理脚本的过程中，浏览器即不会下载该script元素后面出现的内容，也不会呈现这些内容。这称为阻塞行为（blockind behavior）。
消除JavaScript阻塞的最简单的方法就是将所有的script元素放置在HTML结束之前，即</body>结束标记的前面。另一种简单的加快脚本速率的方法就是将JavaScript放在同一个文件中（或尽可能少的一些文件中）并压缩代码。通常，压缩代码会去除换行、注释及额外的空格（以及其他同未压缩的代码存在差异的地方）。

190.添加嵌入脚本的步骤
1）在HTML文档中，输入<script>。
2）输入脚本的内容。
3）输入</script>。

HTML5与CSS3基础教程笔记相关推荐

html5入门 epub,分享《HTML5与CSS3基础教程(第7版) 》(图灵程序设计丛书) pdf epub azw3格式...
<HTML5与CSS3基础教程(第7版)> pdf epub azw3格式下载地址: https://pan.baidu.com/s/1J2LPQoV1GP90UwaFXvKPaw 内容 ...
HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
html5与css3基础教程课件,揭秘HTML5和CSS3教学幻灯片.ppt
揭秘HTML5和CSS3教学幻灯片.ppt * 揭秘HTML5和CSS3 鲁超伍|Adam / / /adamlu 网站标准的简单历史 WHATWG? Web Hypertext Applicatio ...
HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
HTML5与CSS3基础教程第八版学习笔记16-21章
第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...
HTML5与CSS3基础教程学习笔记【第三章基本HTML结构】
第三章基本HTML结构前言 3.1开始编写网页 3.2创建页面标题 3.3创建分级标题 3.4普通页面构成 3.5创建页眉 3.6标记导航 3.7标记页面的主要区域 3.8创建文章 3.9定义区块 ...
《HTML5与CSS3基础教程》第四章学习笔记文本
文章目录第4章文本 4.1 添加段落 4.2 指定细则 4.3 标记重要和强调的文本 4.4 创建图 4.5 指明引用或参考 4.6 引述文本 4.7 时间 4.8解释缩写词 4.9 定义术语 4 ...
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...

HTML5与CSS3基础教程笔记

HTML5与CSS3基础教程笔记相关推荐

最新文章

热门文章