![html5-css3-cover[7]](http://images0.cnblogs.com/blog/555046/201312/03001103-a4b16a252ef54fcf81748aea32788272.jpg "html5-css3-cover[7]")
以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版
英文书名：HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition)
前言
P2:
渐进增强：一种最佳实践
第1章 网页的构造块
P1:
第一步要让内容对所有用户都是可访问的。
P3:
无论如何，页面一定要包含
DOCTYPE.
P5:
HTML 核心观念：只负责描述内容的含义，而非表现。
无论是使用从 HTML 这门语言诞生起就存在的元素，还是使用 HTML5 的新元素，目标都应该是一样的：选择最能表明内容含义的元素，不必关心它们的表现。
P6:
如果图片没有加载成功，或者页面是通过仅显示文本的浏览器查看的，就会显示
alt属性中的文字。HTML 之美，部分在于人们能很容易地掌握其基础，从而构建一些页面，并在此基础上不断取得进步。
P9:
在 HTML 中，空元素结尾处的空格和斜杠是可选的。
在 HTML 中，属性值两边的引号是可选的，但习惯上还是会写上它们。
<img src="..." alt="..." />
P11:
浏览器呈现 HTML 时，会把多个空格或制表符压缩成单个空格，并把回车和换行符换成单个空格，或者将它们一起忽略。
用 UTF-8 对页面进行编码，实现对 Unicode 字符集的支持。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>...</title> </head> <body> ... </body> </html>
P12-13:
网页文件命名规范：
- 使用小写字母的文件名，目录和文件夹的名称也应该全部小写。
- 用短横线 (
-) 分割单词。- 使用正确的扩展名 (
.html) 。
P13:
URL （Uniform Resource Locator, 统一资源定位符）
基本的 URL 包括以下 4 个部分：模式、服务器名称、路径和文件名。如：
http://www.site.com/dir/index.html
有时 URL 不以文件名结尾，而以一个路径结尾（结尾斜杠可含可不含）。这种情况下，URL 指的是路径中最后一个目录中的默认文件（通常为
index.html）。
P15:
相对 URL
- 同一文件夹下的文件：直接文件名访问
index.html- 子文件夹下的文件：直接访问或者通过单句点引用当前文件夹
info/about.html或./info/about.html- 父文件夹下的文件：双句点引用上级目录
../img/pic.jpg- 根目录下的文件或文件夹：以斜杠开头
/root/...
第2章 处理网页文件
P22:
如果目录中没有默认页面（
index.html或default.html），有的服务器就会将目录文件列表显示出来。为防止这种情况的发生，应该在网站每一个包含 HTML 页面的目录下创建一个默认页面。另一种方法是修改服务器的配置，将文件列表隐藏起来。
第3章 基本 HTML 结构
- Chinese (Simplified & Traditional): zh
P30:
title中不能包含任何格式、HTML、图像或指向其他页面的链接。
P33:
HTML5 Outliner: 查看网页大纲。
P36:
利用
hgroup对分级标题进行分组只有第一个最高级别的标题会出现在文档大纲中。
P38:
创建页眉：如果页面中有一块包含一组介绍性或导航性内容的区域，应该用
header元素对其进行标记。一个页面可以有任意数量的
header元素，它们的含义可以根据其上下文而有所不同。
P40:
使用
nav元素明确表示主导航链接的区域。应该仅对文档中重要的链接群使用nav。
P42:
article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。
P45:
section元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。
P48:
使用
aside指定与页面主体内容并不那么相关、可以独立存在的那一部分内容。
P51:
使用
footer元素创建页脚。页脚通常包含关于它所在区块的信息，如指向相关文档的链接、版权信息、作者及其他类似条目。
P54, 56:
使用
div元素创建通用容器，为其所包围的一段内容应用 CSS 样式或 JavaScript 效果。
div应该作为最后想到的容器，因为它没有任何语义价值。
P58-59:
使用 ARIA 的地标角色（landmark role），帮助用户识别页面区域。
role="banner": 包含面向全站内容而非页面特有内容的区域。将其添加到页面级的版头（通常为header元素），每个页面只用一次。
role="navigation": 指向文档内不同部分或相关文档的导航性元素（通常为链接）的集合。与 HTML5 的nav元素相似，应该将其添加到每个nav元素，或其他包含导航性链接的容器。可在每个页面上使用多次。
role="main": 页面的主体内容。将其添加到内容主体部分的容器（这个容器通常是一个div元素，也可能是一个article或section） 。一般一个页面只有一个标记为main的区域。
role="complementary": 文档中作为主体内容补充的支撑部分。对区分主体内容是有意义的。与 HTML5 的aside元素相似，应将其添加到每个aside或包含补充性内容的div。可在每个页面上使用多次。
role="contentinfo": 包含关于文档的信息的大块可感知区域。这类信息包括版权声明和指向隐私权声明的链接等。将其添加到整个页面的页脚（通常为footer元素）。可以在 CSS 选择器中使用 ARIA 角色属性。
P60, 62:
一个 HTML 页面里不能出现两个具有相同
id的元素，并且每个元素都只能有一个id。一个
class名称可以分配给页面中任意数量的元素，并且一个元素可以有一个以上的class。如果要指定多个类别，用空格将不同的类别名分开即可。不管打算如何使用
id和class，都应该为它们选择有意义的（即语义化的）名称。在使用出于格式化目的的class时，应避免使用描述表现样式的名称。考虑为元素选择
class还是id时，如果是出于样式化目的，则通常使用class。
id属性会自动将该元素转化成锚，从而可以创建指到这里的链接。
P62:
可以使用
title属性（不要与title元素混淆）为网站上任何部分加上提示标签。
第4章 文本
P66:
address元素：用以定义与 HTML 页面或页面的一部分有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分内。
P68:
figure元素：由文档主要内容引用的一块独立的内容。可选的figcaption是figure的标题，出现在figure内容的开头或结尾处。
figure没有默认样式，除了在现代浏览器中会出现在新的一行。
figure元素可以包含多个内容块。但不管figure里有多少内容，只允许有一个figcaption。并且这个figcaption必须是figure的第一个或最后一个元素。
P69:
通过
time元素标记一个准确的时间或日期。
P71:
datetime格式：YYYY-MM-DDThh:mm:ss
P72-73:
strong元素表示重要的文本，而em元素则表示强调。浏览器通常将strong文本以粗体显示，将em文本以斜体显示。
b元素表示出于实用的目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键字、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。b元素默认显示为粗体。
i元素表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用语、思想、西方文字中的船舶名称等。i元素默认显示为斜体。
P74:
使用
cite元素可以指明对某内容源的引用或参考，适用于标记艺术作品、音乐、电影和图书等的标题，不应该作为对人名的引用。cite元素默认以斜体显示。
P74-76:
blockquote元素表示单独存在的引述，默认显示在新的一行。而q元素则用于短的引述，像句子里的引述。浏览器默认对
blockquote文本进行缩进，对q元素的文本自动加上特定语言的引号。避免直接将文本放在
blockquote开始和结束标记之间，应该放在blockquote中p或其他语义上适合的元素中。
q元素引用的内容不能跨越不同的段落。
P77:
mark用于对特定的词语进行标注，以引起读者注意。浏览器默认对该元素的文字加上黄色背景。
P78:
使用
abbr元素标记缩写词并解释其含义。使用可选的title属性提供缩写词的全称。另外，也可以将全称放在缩写词后面的括号里（最直接的方式，推荐）。
P79:
dfn元素对文档中首次定义术语的地方进行标记。不需要用它标记术语的后续使用。仅用
dfn包围要定义的术语，而不是包围定义。
P82:
ins元素：标记添加的内容，默认加上下划线。
del元素：标记已删除的内容，默认加删除线。
s元素：标注不再准确或不再相关的内容，默认加删除线。
P85:
使用
code元素标记代码示例、文件名或程序名。要显示单独的一块代码，可以用pre元素包住code元素以维持其格式。
P87-88:
使用
pre元素显示预格式化的文本，以保持文本固有的换行和空格。如果要显示包含 HTML 元素的内容，应将包围元素名称的
<和>分别改为其对应的字符实体<和>。
P88:
small元素表示细则一类的次要的注释。
P89:
<br />或<br>: 强制换行。（后一个仅在 HTML5 中有效）
P90:
span元素：没有任何语义，包围字词短语。
P91:
wbr元素：表示一个可换行处。
P93:
meter元素：表示分数的值或已知范围的测量结果。
P95:
progress元素：表示一个进度条。
第5章 图像
P97-99:
JPEG 格式适用于彩色照片，是一种有损格式。
PNG 和 GIF 格式通常用于保存拥有大量纯色和图案或有透明度的标志之类的文件。 PNG 支持
alpha透明。
P104:
指定图像的尺寸，让浏览器在图像加载的同时让文本显示在周围，保持布局的稳定。
P107:
使用
width和height属性，改变图像在网页上的显示尺寸，是一种快捷但不优雅的方式。最好还是更改文件为相应的尺寸，以原始尺寸显示图像。
width和height属性值默认以像素为单位。可以使用百分数，该数的基准是浏览器窗口的大小（而不是原始图像尺寸）。可以只设置
width或height，让浏览器按比例自动调整另一个值。
第6章 链接
P113:
使用
ref="external"指示一个指向其他网站的链接。
P115:
使用
target="_blank"，在新窗口中打开链接。 （不推荐，应该让用户决定打开链接的方式。）
P120:
避免直接链接到非 HTML 文档。替代方法：
- 链接到包含文档有关信息的 HTML 页面。
- 明确告知用户文件信息（文件类型、大小等）。
第7章 CSS构造块
P122:
样式规则中的每组属性/值对都应该使用一个分号与下一组属性/值对分开，但列表中最后一对后面的分号可以省略。不过，推荐包含这个分号。
缺少（或重复）分号会使浏览器忽略样式规则。
P126:
样式规则冲突时，晚出现的规则优先级高。
P129:
使用
RGBA属性值指定颜色透明度：A-alpha transparency
第8章 操作样式表文件
P135:
外部样式表里的 URL 是相对于服务器上该样式表文件的位置的，而不是相对于 HTML 页面的位置的。
P137:
将内容（HTML)、表现（CSS）和行为（JavaScript）分离是一种最佳实践。
第9章 定义选择器
P145:
按名称选择元素：
p,h1...
P146:
按类或 ID 选择元素：
.class,#id除非必须特别针对目标元素，最好不要在
id或class选择器中添加元素名称。
P148-152:
按上下文选择元素
按祖先元素选择：
article p所有的后代都会被选择。
按父元素选择：
article > p只有子元素会被选择。
选择某元素的第一个子元素：
:first-child
article >:first-child:article下的第一个子元素被选择。p:first-child: 若某元素的第一个子元素名称为p，则该子元素被选择。article > p:first-child: 若article下的第一个子元素为p，则该子元素被选择。按同胞元素选择：同胞元素（sibling），包含在同一父元素中，不必是同一种元素类型。
- 相邻同胞结合符
x + y: 仅选择直接出现在同胞 x 元素后面的 y 元素。- 普通同胞结合符
x ~ y: 选择任何属于同一父元素的同胞 x 后面的 y 元素。
P152-154:
选择元素的一部分：
- 选择元素的第一行：
::first-line- 选择元素的第一个字母：
::first-letter
P154-155:
按状态选择链接元素：
link: 从未被激活或指向，当前也没有被激活或指向的链接visited: 已被激活过的链接focus: 通过键盘选择并已准备激活的链接hover: 正被指向的链接active: 正在被激活的链接（作用于激活的瞬间）注意在样式表中要按上述顺序定义规则。
P156-158:
按属性选择元素：
element[attribute="value"]若不指定
value值，则含有attribute属性名称的元素均被选择。一些变体：
~=: 单词部分匹配，即匹配出现在以空格相隔的单词列表中的完整的单词，用于属性值为多个值的情形。*=: 匹配部分字符串（不需要完整的单词）。|=: 匹配属性值等于value或以value开头（输入的值后面加上连字符）的元素。^=: 匹配属性值以value开头（作为完整的单词，或单词的一部分）的元素。$=: 匹配属性值以value结尾（作为完整的单词，或单词的一部分）的元素。
P159:
指定元素组：
selector1, selector2{ attribute="value"; }
P161:
从最简单的开始，按需增加特殊性。
第10章 文本的格式化
P163:
设置字体：
font-family:name对于包含多个单词的字体名称，应该用引号（单引号或双引号）包围起来。
font-family属性是继承的。
P164:
表示类属的标准字体：
serif（有衬线字体）、sans-serif（无衬线字体）、cursive（手写字体）、fantasy（装饰字体）、monospace（等宽字体）。
P166:
创建斜体：
font-style: italic;取消斜体：
font-style: normal
font-style属性是继承的
P167:
应用粗体：
font-weight: bold;取消粗体：
font-weight: normal;
font-weight属性是继承的
P169:
设置字体大小：
直接指定要使用的特定字号
font-size: 16px;指定相对于父元素文本的大小
首先在
body元素上建立基准，即：body{ font-size: 100%; }大多数系统默认字体大小为 16px.
em值 = 要指定的字体大小 / 父元素的字体大小。 如：p{ font-size: 0.875em; }通过上述设定
p的字体大小为 16*0.875=14 px.CSS3 引入的新单位：
rem(root em)，该单位总是以根元素为参考系。
font-size属性是继承的。
P172:
设置行高：
line-height: n/a/p%;输入 n (这里的 n 为一个数字)，它与元素的字体大小相乘，得出需要的行高。
输入 a，这里的 a 是以 em、像素或磅为单位的值。
输入 p%, 这里的 p% 是字体大小的百分数。
line-height属性是继承的。如果使用数字设定行高，那么所有的子元素都会继承这个因子，然后换算得出对应的行高。而如果使用百分数或 em 值，那么只会继承产生的行高（即计算出来的值），对所有的子元素也都是这个固定值。
P173:
同时设置字体多个属性值：
font: italic bold 0.875em/1.6 "Courier New", Courier, monospace;
font属性是继承的。
P175:
设置颜色：
color: name/#rrggbb/rgb(r,g,b)/...;当颜色 16 进制数值由重复的数字组成时，可以并推荐简写为 #rgb. 如 #FF0099 可以写做 > #F09.
color属性是继承的。
P175-177:
修改背景：
background: #f0c url(img.jpg) repeat-x scroll 0px p0x;
background属性不是继承的。
P178:
指定单词之间的间距：
word-spacing: 0.4em/5px;指定字母之间的间距：
letter-spacing: 0.4em/5px;对于中文汉字间距，起作用的是
letter-spacing.
word-spacing和letter-spacing属性是继承的。
P179:
缩进：
text-indent: 1.5em/18px/5%;
text-indent属性是继承的。
P180:
默认情况下，HTML 文档里的多个空格和回车回显示为一个空格，或者被忽略。
设置空白属性：
white-space: pre/nowrap/normal;
pre: 让浏览器显示原文本中的所用空格和回车；nowrap: 使所有空格成为非断行空格（使段落显示时不自动换行）；normal: 以正常默认方式处理。
P181-182:
对齐文本：
text-align: left/right/center/justify;
text-align属性是继承的，默认左对齐。注意：
text-align属性只能用于设为display: block或者display: inline-block的元素。
P182-183:
修改文本的大小写：
text-transform: capitalize/uppercase/lowercase/none;
text-transform属性是继承的。
P183-184:
使用小型大写字母：
font-variant: small-caps/none;
P185:
装饰文本：
text-decoration: underline/overline/line-through/none;
第11章 用 CSS 进行布局
P191:
在 CSS 选择器中使用 ARIA 地标角色为元素添加样式
footer[role="contentinfo"] { border-top: 2px dotted #b74e07; clear: both; }
P192-193:
在旧版浏览器中为 HTML5 元素添加样式
- 强制 HTML5 新的“类块级”语义元素显示在单独的行
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }- 添加 HTML5 剃刀
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
P194:
对默认样式进行重置或标准化
- 使用 CSS 重置开始主样式表，如 Eric Meyer 创建的 Meyer 重置。
该重置可以有效地将所有默认样式都设置为“零”，比较方便从零开始学习 CSS 是如何影响布局。
- 使用 Nicolas Gallagher 和 Jonathan Neal 创建的 normalize.css 开始样式表。
该样式对默认样式进行微调，使它们在不同的浏览器中有相似的外观。
P196:
盒模型 (The Box Model)
这本书就只看到了这儿，学到的东西也够我的基本使用了。
简单的总结一下，这本书还是比较适合初学者学习 HTML5 & CSS3 入门的。不同于一般的书籍，这本书一开始就站在一个全局的角度，不仅提供基础知识，还有网页构建思想。比如渐进增强，将内容（HTML)、表现（CSS）和行为（JavaScript）分离，使用语义化的 HTML 结构等等。
技术会日新月异，但有些思想还是会传承下去的，我想这也正是这本书真正的价值所在。