Head First HTML 与 CSS 学习笔记

总的来说，这本书作为入门HTML和CSS还是不错的，讲解生动有趣，这也是Head First系列书籍的特点。缺点就是讲解的不够全面~

第三章

一般来讲，如果要引用一段或者多段文字，就要使用<blockquote>，不过如果只想把一个引用放在现有的文字里，作为其中的一部分，就可以使用<q>.

<blockquote>和<q>实际上是两类不同的元素。<blockquote>元素是一个块(block)元素，而<q>元素是一个内联(inline)元素。块元素显示时就好像前后各有一个换行，而内联元素在页面文本流中总是在"行内"出现。

<h1>、<h2>......<h6>、<p>和<blockquote>都是块元素。<q>、<a>和<em>都是内联元素。

另外，还可以这样考虑块元素和内联元素：块元素通常用作Web页面中的主要构建模块，而内联元素往往用来标记小段内容。设计一个页面时，往往先从较大的块开始(块元素)，然后在完善页面时再加入内联元素。

HTML有有序列表，无序列表和定义列表。

第四章 <a>

要链接到页面中的一个特定目标，只需要在链接最后加一个#，在加上目标标识符(id)。

使用title属性进行工具提示。使用target属性打开新窗口。　　

第五章 <img>

1. 使用<img>元素的alt属性为访问者提供一些指示，告诉他们图像里有什么信息。

第六章标准及其他

<!doctype html>

第七章 CSS

1. 要为多个元素添加一个规则，只需要在选择器之间加上逗号，如"h1, h2";

2. <link type="text/css" rel="stylesheet" href="" />;

3. 继承，覆盖继承。

4. 元素多个类名的写法 <p class="greentea raspberry blueberry">: 类名之间用空格分隔。

5. 如果你的CSS里有错误，通常这个错误以下的所有其他规则都会被忽略。

第八章常用的文本属性

用font-family属性定制页面中使用的字体;
用font-size属性控制字体大小;
用color属性为文本设置颜色;
用font-weight属性影响字体的粗细;
用line-height调整文本的行高; 1.6em
用text-decoration属性为文本增加更多风格;

选择字体大小的秘诀：使用关键字来定义body的字体大小，再使用em或百分数为其他元素指定相对大小。

指定Web颜色的方法：

按名指定颜色 color: blue;
用红绿蓝值指定颜色 color: rgb(80%, 40% 0%); color: rgb(204, 102, 0);
使用十六进制码指定颜色。每组两位数字分别代表颜色的红绿蓝分量。

第九章盒模型(Box Model)

从CSS的角度看，每个元素就是一个盒子。

每个盒子由一个内容区以及可选的内边距、边框和外边距组成。

内边距(padding)是透明的，没有颜色，也没有自己的装饰; 边框(border)有宽度、颜色和样式; 外边距(margin)是透明的，本身没有颜色或装饰。

内边距和外边距之间有一个区别：元素的背景颜色（或背景图像）会延伸到内边距下面，但不会延伸到外边距。

background-image属性把一个图像放在元素的背景中。还有另外两个属性也会影响背景图像：background-position和background-repeat;

border-style设置为锯齿的技巧：使用dashed(破折线)边框，把颜色设置为与背景颜色一致。

链接多个样式表时，样式表的顺序很重要，最下面的样式表最优先。

上右下左

第十章 div与span

在页面中要使用<div>，但不要滥用。如果这样做有助于你将页面分解为逻辑区，从而保证结构清晰并便于指定样式，那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加<div>，就只会让页面复杂，而没有任何实际好处。

width用来指定元素内容区的宽度。

整个盒子的宽度=内容区的宽度+左右内边距的宽度+左右外边距的宽度+左右边框的宽度。

"auto"允许内容填满可用的所有空间。

一般地，不用指定元素的高度，就让他们默认为auto.

"text-align"对齐内联元素（继承），只能在块元素上设置，在内联元素上使用无效。

子孙元素器：（中间用空格分隔）

div h2 {

  color: black;

}

子孙选择器会选择一个元素中嵌套的所有<h2>，而不论他嵌套得有多深。

line-height属性有一点特殊，因为你可以对它直接使用一个数，而不是一个相对度量(比如em或%)。如果使用数1就表示elixirs <div>中的各个元素行高是其自己字体大小的1倍，而不是elixirs <div>字体大小的1倍。

<div>允许你为块级内容创建逻辑划分，<span>元素则采用类似的方式建立内联内容的逻辑分组。

内联元素上的外边距和内边距与块元素稍有不同，如果一个内联元素四周都增加外边距，只能看到左边和右边会增加空间。你也可以对内联元素的上边和下边增加内边距，不过这个内边距不会影响包围它的其它内联元素的间距。

选择器伪类的适当顺序：link，visited，hover，focus，active

层叠

第1步：收集所有样式表。

第2步：找到所有匹配的声明。

第3步：现在对所有匹配的规则排序（作者、读者和浏览器）。

第4步：按特定性对所有声明排序（id、(伪)类、元素）。

第5步：对于冲突的规则，按照他们在各自样式表中出现的顺序进行排序。

第11章布局与定位--摆放元素

并排放置两个内联元素时，浏览器会使用他们的外边距之和来计算他们之间的空间。

上下放置两个块元素时，浏览器会把他们共同的外边距折叠在一起。折叠的外边距的高度就是最大的外边距高度。

对于浮动元素都有一个要求：它必须有一个宽度。

小技巧：

text-decoration: none; 删除默认的下划线

border-bottom: ; 添加下边框

内联元素会留意浮动元素的边界，而块元素会正常流向页面。有一个例外，对一个块元素设置clear属性时，会导致块元素下移，直到它右边、左边或两边没有浮动元素挨着它(具体要取决于clear的值)。

修正两栏问题的思路：

1. 浮动流会从正常的流中删除，然后它下面的所有内联元素会绕流这个元素。

2. 设置主内容区的外边距 = 边栏的宽度。

3. 解决重叠问题：clear属性，可以使用元素的CSS clear属性来提出请求：当元素流入页面时，在这个元素的左边，右边或者两边不允许有浮动内容。

4. 浮动元素的外边距并不会碰到正常流中元素的外边距，所以它们不会折叠。空间=两者外边距之和？

冻结布局（frozen layouts）

新增加一个<div>元素，id为"allcontent"，包围页面中的所有内容.

#allcontent {

  width:                  800px;

}

凝胶布局(Jello layouts)

#allcontent {

  width:           800px;

  margin-left:   auto;

  margin-right: auto;

}

指定内容区宽度为"auto"时，浏览器会根据需要扩展内容区。外边距为"auto"时，浏览器会确定正确的外边距是多少。另外还会确保左和右外边距相同，所以内容会居中。

绝对定位

一个元素使用绝对定位时，浏览器首先要做的是将它从流中完全删除，然后浏览器将这个元素放置在top和left属性指定的位置上(也可以使用bottom和right指定位置)，页面正常流中的所有元素根本不知道页面上有这个绝对定位元素。绝对定位元素放在正常流元素的外边距上。

CSS表格

为表格显示增加HTML结构

新增两个div，包围"main"和"sidebar"<div>

<div id="tableContainer">

  <div id="tableRow">

    <div id="main">

      ...

    </div>

    <div id="sidebar">

      ...

    </div>

  </div>

</div>

用CSS创建表格显示

#tableContainer {

  display: table;

  border-spacing: 10px;

}

#tableRow {

  display: table-row;

}

#main {

  display:          table-cell;

  vertical-align: top;

}

#sidebar {

  display:          table-cell;

  vertical-align: top;

}

要注意的地方：

1. 使用border-spacing来指定单元格之间的间距；border-spacing不会与margin折叠；

2. 使用vertical-align: top; 确保表格两个单元格中的所有内容相对于单元格上边对齐；

3. display: table/table-row/table-cell;

绝对定位将元素完全从页面流中取出，允许你为它指定一个绝对位置，这是相对于离他最近的父元素指定的。固定定位则是相对于浏览器窗口，把元素放在一个固定的位置上。

第12章 HTML5

<article> 表示页面中一个独立的组成部分，如一个博客帖子、用户论坛帖子或新闻报道;

<nav> 所包含的内容将作为页面的导航链接;

<header> 将标题、logo和署名等通常放在页面或区块最上方的内容组织在一起;

<footer> 将诸如文档信息、法律措辞和版权说明等通常放在页面或区块最下方的内容组织在一起;

<time> 用来标记时间和日期;

<aside> 包含的内容是对页面内容的补充，如插画或边栏;

<section> 一个主体性内容分组，通常包含一个首部(header)，可能还有一个底部(footer);

<video> 用来为页面增加视频媒体;

要尽可能用最特定的规则来指定元素的样式。

第13章 HTML表格

<table>标记表格的开始、每个<tr>元素构成表格中的一行(table row)、

每个<th>元素分别是某一列的表头(table head)、每个<td>元素包含表格中的一个单元格(table data)。

<caption>为表格添加标题。

表格：padding、border、border-spacing.

border-spacing属性是针对整个表格定义的，不能单独地设置各个表格单元格的"外边距",而是要为所有单元格设置一个共同的间距。

另外，还可以使用border-collapse的CSS属性来折叠边框，使单元格之间根本没有边框间距。

使用nth-child伪类来增加颜色；使用rowspan属性可以指定一个表格数据单元格占多少行；

列表<li> list-style-type属性可以控制列表中使用的项目符号。list-style-image属性可以定制标记。

第14章 HTML表单

用<form>元素创建表单，用<input>元素创建控件。

<form>元素包含构成表单的所有元素，告诉浏览器当你提交表单时要把表单数据发送到哪里（以及浏览器要用什么方法发送数据）

input表单的输入值可以通过value属性访问，也可以通过表单访问(this.form[name])。

常用的表单元素

需要注意：name属性值必须唯一；

1. 文本输入 <input type="text" name="fullname" />

2. 提交输入 <input type="submit" />

3. 单选钮输入 <input type="radio" name="hotornot" value="hot" />

<input type="radio" name="hotornot" value="hot" />

4. 复选框输入 <input type="checkbox" name="spice" value="Salt" />

<input type="checkbox" name="spice" value="Pepper" />

<input type="checkbox" name="spice" value="Garlic" />

5. 数字输入 <input type="number" min="0" max="20" />

6. 范围输入 <input type="range" min="0" max="20" step="5" />

7. 颜色输入 <input type="color" />

8. 日期输入 <input type="date" />

9. email输入 <input type="email" />

10. url输入 <input type="url" />

11. tel输入 <input type="tel" />

<input>是一个内联元素。

12. 文本区 <textarea name="comments" rows="10" cols="48">...</textarea>

<textarea>元素会创建一个多行的文本区，可以在其中输入多行文本。如果输入的文本在文本区放不下，右边还会出现一个滚动条。

13. select

<select name="characters">

  <option value="Buckaroo">Buckaroo Banzai</option>

  <option value="Tommy">Perfect Tommy</option>

  <option value="Penny">Penny Priddy</option>

  <option value="Jersey">New Jersey</option>

  <option value="John">John Parker</option>

</select>

<select>元素会在Web页面中创建一个菜单控件。菜单提供了一种从一组选项中做出选择的方法。<select>元素与下面的<option>元素结合使用可以创建菜单。

14. lable <input type="radio" name="hotornot" value="hot" id="hot" />

<label>元素可以提供页面结构的更多信息，使你能更容易地使用CSS对标签设置样式，关联标签和表单元素

注意：for属性为相应的id;

15. fieldset和legend

<fieldset>

  <legend>Condiments</legend>

  <input type="checkbox" name="spice" value="salt" />

  <input type="checkbox" name="spice" value="pepper" />

  <input type="checkbox" name="spice" value="garlic" />

</fieldset>

<fieldset>可以用来将公共元素组织在一起，<legeng>为其提供标签。

16. passwords <input type="password" name="secret" />

17. 文件输入 <input type="file" name="doc">

使用文件输入元素的前提是必须使用POST方法；

18. placeholder <input type="text" placeholder="Buckaroo Banzai" />

placeholder属性允许你提供一个提示，使用户了解你希望表单的这一部分需要怎样的内容；

19. required <input type="text" required />

POST打包表单数据，并把它作为请求的一部分发送到服务器；GET打包表单数据，并把数据追加到URL；

由于表单有一个表格结构，通常会用CSS表格显示来建立表单布局。CSS还可以用来指定表单的颜色、字体风格、边框等样式。

伪类： first-child、last-child;

伪元素: first-letter、first-line; (伪元素的语法和伪类相同)

p: first-letter {

  font-size: 3em;

}

属性选择器：

img[width] { border: black thin solid; } 选择所有包含width属性的图像。

兄弟选择器：

h1+p { font-style: italic; } 选择所有紧跟在一个<h1>元素后面的段落