《Head First HTML and CSS》是一本html和css入门级的书，知识点很全，风趣幽默。下面是我的读书笔记。
一、Web语言：认识HTML
1、Web服务器 Web浏览器
2、浏览器会忽略HTML文档中的制表符、回车和大部分空格。它们会根据你的标记来确定在哪里换行或分段。
3、HTML的注释<!-- -->
4、<html></html><head></head><title></title><body></body>……都称为标记，标记包含标记名，标记名两边的尖括号（即<和>字符）
5、元素=开始标记+内容+结束标记，例如：<h1>Starbuzz Coffee Beverages</h1>
6、属性能提供元素的一些额外信息，例如type属性
7、HTML是超文本标记语言的缩写，用来建立网页的结构，CSS是层叠样式表的缩写，用来控制HTML的表现。
二、认识HTML中的“HT”：深入了解超文本
1、属性的写法：首先是属性名，后面是一个等于号，然后是用双引号扩起来的属性值。Web上有些不严谨的HTML没有加双引号。
这样做：<a href=”top10.html”>Great Movies</a>
不要这样做：<a href=top10.html>Great Movies</a>
2、相对路径
..链接到源文件上一层文件夹中的一个文件。
向上两级的文件夹中,../../XX.html
三、Web页面建设：构建模块
1、每个块（block）元素都单独显示，就好像前后都有换行，块元素将内容分块显示；内联(inline)元素在页面文本流中总在“行内”出现，例如<img>。
2、void元素，例如：<br>元素、<img>元素
需要使用void元素时，如<br>或<img>,只需使用一个开始标记。
3、ul=unordered list
ol=ordered list
li=list iitem
（1）将每个列表项放在一个<li>元素中
（2）用<ol>或<ul>元素包围列表项
四、Web镇之旅，连接起来
1、域名：一个唯一的名字，可以用来定位你的网站。例如：starbuzzcoffee.com、google.com……
2、URL（统一资源定位符）：在浏览器输入的web地址称为URL。例如：http://www.starbuzzcoffee.com/index.html
“http:”URL的第一部分指出用来获取资源的协议
“www.starbuzzcoffee.com” 第二部分是网站名
“index.html” 第三部分是从根文件夹到资源的绝对路径
3、HTTP：超文本传输协议，在Web上传输传输超文本文档的公认的一种方法（协议）
4、绝对路径：在协议和网站名之后的最后一部分
5、访问页面中的一个特定点:
要链接到页面中的一个特定目标，只需在链接最后加一个#，再加上目标标识符。例如：链接到http://wickedlysmartt.com/buzz的Coffee部分(特定目标的主要好处是链接到长文件中的某个位置，使得访问者不必向下滚动文件来查找所需部分)
http://wickedlysmartt.com/buzz/index.html页面
<h3 id=”Coffee”>Coffee</h3>
<p>……</p>
<a href=”http://wickedlysmartt.com/buzz/index.html#Coffee” title=”read all about caffeine on the Buzz”(title属性提供链接的一个描述)>Caffeeine Buzz</a>
6、index.html和default.htm都是默认页面
六、严肃的HTML：标准及其他
1、HTML5的doctype为：<!doctype html>
2、<meta charset=”utf-8”>
meta表示我们要告诉浏览器关于页面的一些信息，charset是<meta>标记的属性，指定字符编码，“utf-8”是unicode系列中的一个编码
<meta>标记放在<head>元素中（<head>包含有关页面的信息）
3、只能在<head>元素中放置<tilte>、<meta>、<style>元素
七、CSS入门：加一点样式
1、为多个元素写一个规则，只需要在选择器之间加上逗号，如“h1,h2”
h1,h2{
font-family:sans-serif;
color:gray;
}
h1{
border-bottom:1px solid black;
}
增加第二个规则，只为<h1>增加另一个属性，border-bottom属性
优点：如果如果把共同的样式合并在一起，倘若它们有改变，只需要在一个规则中修改。如果把它们分开，就必须修改多个规则。
为什么使用border-bottom元素下边框为文本加下划线？而不是用underline样式？
如果使用border-bottom，这条线会延伸到页面边缘。而使用underline时，下划线只出现在文本下面（设置文本下划线的属性名为text-decoration值为”underline”）。
2、<link type=”text/css” rel=”stylesheet” href=”XX.css”>
type=”text/css”：在html5中，不再需要这个属性（这是可选的），可能会在比较老的页面上看到它
rel=”stylesheet”:rel属性指定了HTML文件与所链接文件之间的关系，我们要链接到一个样式表，所以这里使用值”stylesheet”
<link>是一个void元素，它没有结束标记
（<style type=“text/css”>
…
</style>）
3、CSS注释：/* */
八、增加字体和颜色样式：扩大你的词汇量
1、字体系列 font-family
body{
font-family:Verdana,Geneva,Arial,sans-serif;
}
（1）要完全按照拼写输入字体名，大小写字母必须一致。
（2）浏览器查看用户计算机上是否有Verdana字体，如果有这个元素，就会使用这个字体；如果Verdana不可用，再查找Geneva字体，如果这个字体可用，它将作为body元素的字体；如果Geneva不可用，再查找Arial字体，如果这个字体可用，它将作为body元素的字体；最后，如果前面指定的特定字体都没有找到，就使用浏览器的默认sans-serif字体。
2、字体大小 font-size
（1）px
例如：body{
font-size:14px;
}
字母最低部分与最高部分之间有14像素
（2）%
例如：body{
font-size:14px;
}
h1{
font-size:150%;
}
指定一个百分数字体大小时，就是相对于父元素的字体大小
（3）em
例如：body{
font-size:14px;
}
h1{
font-size:150%;
}
h2{
font-size:1.2em;
}
使用em时，指定一个比例因子
综上：body is 14px
p is 14px（<p>没有设置font-size值，所以默认的继承<body>字体大小）
h1 is 21px
h2 17px(1.2*14px，等于16.8,大多数浏览器会把它四舍五入为17)
3、字体粗细 font-weight
font-weight:bold;
font-weight:normal;(去掉粗体样式)
4、web颜色
（1）按名指定颜色
例如：body｛
background-color:silver;
｝
（2）按红、绿、蓝值指定颜色
方法一
例如：body{
background-color:rgb(80%,40%,0%);
}
rgb是red,green,blue的缩写,小括号里指定红、绿、蓝的百分比，每个分量后面都有一个百分号
方法二
例如：body{
background-color:rgb(204,102,0);
}
还可以将红、绿、蓝值指定为0到255之间的一个数值（255的80%是204，255的40%是102，255的0%是0）
（3）使用十六进制码指定颜色
十六进制总以#开头，每组2位数字分别代表颜色的红、绿、蓝分量
例如：#cc6600
红 cc:（12*16）+12=204（十六进制数cc的十进制表示就是204）
绿 66：102
蓝 00：0
#ccbb00可以缩写为#cb0
5、下划线 text-decoration
例如：em{
text-decoration:underline;
}
九、盒模型：与元素亲密接触
1、行高 line-height
例如：body{
font-family:Verdana,Geneva,Arial,sans-serif;
line-height:1.6em;
}
可以按像素指定行高，也可以使用em或百分数值相对于字体大小来指定
2、从css角度看，每个元素就是一个盒子。每个盒子由一个内容区以及可选的内边距、边框和外边距组成。
3、背景图像 background-image
background-image和<img>: background-image只是设置一个元素的背景图像，装饰，它在页面中没有任何具体的意义。
例如：background-image:url(images/background.gif);
url两边不需要加引号
4、默认地，背景图像会重复（平铺）。另外，浏览器会默认地把背景图像放在元素的左上角。
background-repeat属性可以控制平铺行为
background-repeat:no-repeat;(图像显示一次)
repeat-x(图像只在水平方向上重复)
repeat-y(图像只在垂直方向上重复)
inherit(按父元素的设置来处理)
repeat(设置图像在水平和垂直方向上重复，这是默认行为)
background-position属性会设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top,left,right,bottom和center
background-position:top left;
5、边框简明指南
（1）边框样式 border-style:solid;(实线)
dotted(点线)等等
（2）边框宽度 border-width:thin;
border-width:5px;(可以使用使关键字thin、medium、thick指定边框宽度，或者使用像素数指定)
（3）边框颜色 border-color:red;
border-color:rgb(100%,0,0);
border-color:#ff0000;(可以使用颜色名、rgb值或十六进制码来指定颜色)
（4）指定边框圆角 border-radius:15px;(可以使用px或em指定半径大小0)
6、id属性 唯一标识符
例如：<p id=”footer”>……</p>
每个元素只能有一个id,id名中不允许出现空格或其他特殊字符
与class不同，页面中只能有一个元素的id为footer
7、混合样式表
使用多个样式表顺序很重要，一个样式表会覆盖在它上面链接的样式表的样式。
8、样式表不再只面向浏览器
（1）在<link>元素中增加media属性
例如：<link href=”XX.css” rel=”stylesheet” media=”screen and (max-device-width:480px)”>
通过创建一个媒体查询来指定设备类型。这个查询指定了有屏幕的设备而不是其他设备，比如说打印机或3D眼镜。而且屏幕宽度不超过480px
（2）不在link标记中使用媒体查询，直接在CSS中
/*使用@media规则 后面是媒体查询*/
@media screen and (min-device-width:481px){
#footer{
margin-right:250px;
}
}/*如果设备屏幕宽度大于480px就会使用这些规则*/
@media screen and (max-device-width:480px){
#footer{
margin-right:250px;
}
}/*如果设备屏幕宽度小于等于480px就会使用这些规则*/
p{
color:red;
}/*所有其他规则会应用于所有页面，因为它们并未包含在一个@media规则中*/
十、高级web建设：div与span
1、text-align:对块元素中的所有内联内容对齐，适用于对任何类型的内联元素对齐。Text-align属性只能在块元素上设置，如果直接在内联元素（如<img>）上使用，则不起作用。
2、子孙选择器：不止选择孩子，选择所有子孙。例如：#elixirs h2表示选择的<h2>元素可以是elixirs的所有子孙。#elixirs>h2选择直接孩子。
3、如果要强调某些文字，可以使用<em>。如果强调一个重点，可以使用<strong>。如果你想要的只是改变某些文字的样式，就应该使用<span>。
4、<a>元素：一个链接可以有多种状态，未访问、已访问、悬停等。
对链接指定样式
元素<a>，后面是一个冒号（：）然后是想要选择的状态。要确保这些选择器中没有空格。
a:link{/*这个选择器应用于处于未访问状态的链接*/
……
}
a:visited{/*这个选择器应用于已访问的链接*/
……
}
a:hover{/*悬停在一个链接上时会应用这个选择器*/
……
}
另外两种状态：facus和active。浏览器将焦点放在你的链接上时就是焦点(facus)状态。有些浏览器允许按下Tab键来轮流访问页面上的所有链接。浏览器访问到某个链接时，这个链接就拥有焦点；用户第一次单击一个链接时，就处于活动（active）状态。
伪类：可以用伪类单独地为各个状态指定样式，伪类最常用于<a>。但不仅限于<a>。常用伪类包括：:link、:visited、:hover、:active、:focous、:first-child、last-child。
十一、摆放元素：布局与定位
1、流：流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示所遇到的各个元素。块元素从上向下流，各元素之间有一个换行，默认的，每个块元素会占浏览器窗口的整个宽度。内联元素从元素内容区的左上方流向右下方。
2、浮动元素(float)：对于所有浮动元素都有一个要求：它必须有一个宽度。
浏览器遇到浮动元素时，会把它尽可能放在最左边或最右边，还会从流中删除这个元素，就好像它浮在页面上一样。由于这个浮动元素已经从正常的流中删除，所以其他块元素会填充，就好像根本没有这个元素一样。不过，对内联元素定位时，它们会考虑浮动元素的边界，因此会围绕着浮动元素。
3、clear属性：当元素流入页面时，在这个元素左边、右边或两边不允许有浮动内容。
例如：#footer{
……
clear:right;
}
现在浏览器在页面上放置元素时，它会查看页脚右边有没有一个浮动元素。如果有，就会把页脚下移，直到它右边没有浮动内容为止。（防止浮动元素覆盖页脚）
4、绝对定位：绝对定位会从流中删除，并根据指定的top、left、right、bottom属性定位。由于在流之外，其他元素甚至不知道有这样一个元素，它们会将它完全忽略。流中的元素不会将其内联内容围绕在一个绝对定位元素周围，它们完全不知道页面上有这个绝对定位的元素。 相对于离它最近的父元素指定。
多个绝对定位元素可以分层放置，一个元素可以放在另一个绝对定位你元素的上面。如果页面上同一位置有多个绝对定位元素，每个定位元素都有一个名为z-index的属性，这会指定它在一个虚拟z轴上的位置。（上面的元素更靠近你，z-index更大）。
绝对定位元素不需要必须指定宽度。如果没有指定宽度，默认的，块元素会占浏览器的整个宽度（减去指定的距左边或右边的偏移量）。
例如：#sidebar{
position:absolute;
top:10px;
right:200px;
width:280px;
}
5、position属性：position属性有四个值static、absolute、fixed、relative。
Static、（静态定位，默认值），元素会放在正常的文档流中，由浏览器决定这些静态定位元素放在哪里。Fixed（固定定位）是将元素放在相对浏览器窗口的一个位置上，所以固定元素永远也不会移动。Relative（相对定位）会让元素正常流入页面，不过在页面上显示之前要进行偏移。
6、只有使用css绝对定位、相对定位或固定定位的元素有z-index。
十二、现代HTML：HTML标记
1、<header>放在页面顶部的内容，或者放在页面某个区块的顶部
<nav>页面的导航链接
<section>一个主题性的内容分组
<aside>包含的内容是对页面内容的补充，如插图或边栏
<article>表示在页面中一个独立的组成成分，如一个博客帖子、用户论坛帖子或新闻报道。
<video>为页面增加视频媒体
<time>日期和时间
<footer>放在页面底部的内容，或者放在页面某个区块的底部
十三、建立表格：表格与更多列表
1、<table> /*<table>标记开始整个表格*/
<tr> /*每个<tr>元素指定一个表行，放在一行中的所有表格数据都要嵌套在<tr>元素中*/
<th></th> /*<th>元素包含表格表头中的一个单元格，它必须放在一个表行中*/
</tr>
<tr>
<td></td> /*<td>元素包含表格中的一个数据单元格，它必须嵌套在一个表行中*/
</tr>
</table>
2、边框间距border-spacing：表格单元格有内边距和边框，不过在外边距方面稍有些不同。不能单独地设置各个表格单元格的“外边距”，而要为所有单元格设置一个共同的间距。我们把单元格之间的空间叫做border-spacing（边框间距），这是针对整个表格定义的。
例如：table{
margin-left:20px;
margin-right:20px;
border:thin solid black;
capation-side:bottom;
border-spacing:10px 30px;/*这会设置10像素的水平边框间距，30像素的垂直边框间距*/
}
3、折叠边框border-collapse: border-collapse属性来折叠边框，使单元格之间没有边框间距。这样，浏览器就会忽略表格上设置的所有边框间距。还会把紧挨着的两个边框合并成一个边框。
例如：table{
margin-left:20px;
margin-right:20px;
border:thin solid black;
capation-side:bottom;
border-collapse:collapse;
}
4、单元格跨多行rowspan；rowspan属性指定一个表格数据单元格占多少行，然后从这个单元格所跨越的其它行中删除相应的表格数据元素。
例如：
<tr>
<td rowspan=”2”>NM</td>
<td class=”center”>Agu 9th</td>
<td class=”cneter”>93</td>
<td rowspan=”2” class=”right”>4242</td>
<td rowspan=”2” class=”right”>7289</td>
<td class=”center”>5/5</td>
</tr>
<tr>
<td class=”center”>Agu 27th</td>
<td class=”cneter”>98</td>
<td class=”center”>4/5</td>
</tr>
效果如下：
| NM |
Agu 9th |
93 |
4242 |
7289 |
5/5 |
| Agu 27th |
98 |
4/5 |
表格数据跨多列colspan
5、控制列表标记list-style-type：
无序列表li{
list-style-type:disc; 默认的列表标记类型
/* list-style-type:circle; 圆形标记
list-style-type:square; 方块标记
list-style-type:none; 删除所有的列表标记*/
}
li{
list-style-image:url(XXX); /*为列表自定义标记图像*/
padding-top:5px;
padding-left:20px;
}
有序列表list-style-type属性控制一个有序列表的标记是十进制数、罗马数字、还是字母表字符。常用的值包括decimal、upper-alpha、lower-alpha、upper-roman、lower-roman。
十四、实现交互：HTML表单
1、<form>元素：可以使用<form>元素创建表单。
例如：<form action=“http://wickedlysmart.com/hfhtmlcss/contest.php” method=”POST”>
……
</form>
action属性包含：web服务器的URL（http://wickedlysmart.com）、
脚本所在文件夹（hfhtmlcss）、
将处理表单数据的服务器脚本的文件名（contest.php）。
method属性确定表单数据如何发送到服务器。
表单里可以有什么？
2、<input>表单元素
（1）文本输入: text<input>元素用于输入一行文本。
例如：<input type=”text” name=”fullname”>使用type属性指示你希望得到一个文本输入。大多数表单元素都需要一个名字，服务器脚本将使用这个元素名。这个<input>元素是一个void元素，所以后面没有内容。
（2）提交输入：submit<input>元素会创建一个按钮，允许你提交表单。点击这个按钮时，浏览器会把表单发送到服务器脚本进行处理。
例如：<input type=”submit”>
（3）单选钮输入：radio<input>元素会创建包含多个按钮的控件，但是一次只能选择其中一个按钮。
例如：<input type=”radio” name=”hotornot” value=”hot”>
<input type=”radio” name=”hotornot” value=”not”>
每个选项使用一个radio<input>,与一组给定选项关联的单选钮必须有相同的名字，不过每个选项可以有不同的值。
（4）复选框输入：checkbox<input>元素会创建一个复选框控件，可以选中也可以不选中。多个复选框可以放在一起，如果是这样，你可以根据需要选中多个选项。
例如：<input type=”checkbox” name=”spice” value=”Salt”>
<input type=”checkbox” name=”spice” value=”Papper”>
<input type=”checkbox” name=”spice” value=”Garlic”>
类似于单选钮，对各个选项使用相同的checkbox<input>元素。相关的复选框也共用一个名字。每个复选框有一个不同的值。
3、<textarea>元素会创建一个多行的文本区，可以在其中输入多行文本。如果输入的文本在文本区中放不下，右边还会还会出现一个滚动条。
<textarea name=”comments” rows=”10” cols=”48”></tetxarea>
<textarea>元素不是一个空元素，所以它有开始和结束标记。name属性为元素指定一个唯一的名字。rows属性告诉浏览器文本区高度为多少个字符。cols属性告诉浏览器文本区宽度为多少个字符。开始和结束标记之间的所有文本会成为浏览器文本区控件中的初始初始文本。
4、<select>元素会在Web页面中创建一个菜单控件。
例如：
<select name=”characters”>
<option value=”Tommy”>Perfect Tommy</option>
<option value=”Penny”>Penny Priddy</option>
<option value=”Jersey”>New Jersey</option>
</select>
5、<input>是一个内联元素。如果希望<input>之间有换行，就必须增加<br>
6、GET或POST：POST会打包你的表单变量，在后台把它们发送到服务器；GET也会打包你的表单变量，但会把这些数据追加到URL的最后，然后向服务器发送一个请求。
表单中的数据是私有的用POST。
使用了一个<textarea>，就应该使用POST，因为可能会发送大量数据。GET和POST请求对发送的数据量都有一个限制，不过对POST请求的限制通常要宽松的多。
表单中还可以有哪些元素？
7、fieldset和legend：<fieldset>元素用来将公共元素组织在一起。<legend>为这一组提供一个标签。
<fieldset>
<legend>Condiments</legend>
<input type="checkbox" name=”spice” value=”salt”>Salt<br>
<input type="checkbox" name=”spice” value=”pepper”>Pepper<br>
<input type="checkbox" name=”spice” value=”garlic”>Garlic<br>
</fieldset>
8、password:
例如：<input type=”password” name=”secret”>
9、文件输入：使用这个元素的前提是必须使用POST方法。
例如：<input type=”file” name=”doc”>
10、placeholder:表单中大多数不同类型的<input>元素都可以使用placeholder属性，这会为填写表单的人提供一个提示，让他了解你希望这个控件中输入什么内容。这个属性的值会显示在控件中，但是比增加到控件的正常内容要浅一些。一旦单击这个文本域，占位文本就会消失，所以它不会与你输入的内容混杂在一起。
例如：<input type=”text” placeholder=”Buckaroo Banzai”>
11、required：
例如：<input type=”text placeholder=”Buckaroo Banzai” requires>
