《HTML5与CSS3基础教程》笔记

时间：2022-05-02 11:33:35

《HTML5与CSS3基础教程》笔记

以下笔记摘要页码基于 人民邮电出版社 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:

网页文件命名规范：

  1. 使用小写字母的文件名，目录和文件夹的名称也应该全部小写。
  2. 用短横线 (-) 分割单词。
  3. 使用正确的扩展名 (.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 结构

HTML Language Code Reference

  • 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 元素的内容，应将包围元素名称的 < 和 > 分别改为其对应的字符实体 &lt; 和 &gt; 。

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 文档。替代方法：

  1. 链接到包含文档有关信息的 HTML 页面。
  2. 明确告知用户文件信息（文件类型、大小等）。

第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:

按上下文选择元素

  1. 按祖先元素选择：article p

    所有的后代都会被选择。

  2. 按父元素选择：article > p

    只有子元素会被选择。

  3. 选择某元素的第一个子元素：:first-child

    • article >:first-child: article 下的第一个子元素被选择。
    • p:first-child: 若某元素的第一个子元素名称为 p，则该子元素被选择。
    • article > p:first-child: 若 article 下的第一个子元素为 p，则该子元素被选择。

  4. 按同胞元素选择：同胞元素（sibling），包含在同一父元素中，不必是同一种元素类型。

    • 相邻同胞结合符 x + y: 仅选择直接出现在同胞 x 元素后面的 y 元素。
    • 普通同胞结合符 x ~ y: 选择任何属于同一父元素的同胞 x 后面的 y 元素。

P152-154:

选择元素的一部分：

  1. 选择元素的第一行：::first-line
  2. 选择元素的第一个字母：::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 元素添加样式

  1. 强制 HTML5 新的“类块级”语义元素显示在单独的行 
    article, aside, figcaption, figure, footer, header,
    
hgroup, menu, nav, section {
    
    display: block;
    
}
  2. 添加 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基础教程》笔记

(图片来源：ITP Driveby: Cascading Style Sheets)

这本书就只看到了这儿，学到的东西也够我的基本使用了。

简单的总结一下，这本书还是比较适合初学者学习 HTML5 & CSS3 入门的。不同于一般的书籍，这本书一开始就站在一个全局的角度，不仅提供基础知识，还有网页构建思想。比如渐进增强，将内容（HTML)、表现（CSS）和行为（JavaScript）分离，使用语义化的 HTML 结构等等。

技术会日新月异，但有些思想还是会传承下去的，我想这也正是这本书真正的价值所在。

相关文章