其实html基本的语法已经差不多掌握了，再看《First head html and css》,虽然确实前面觉得讲得啰嗦了一些，不过感觉讲得还是挺有趣的，作为初学还是极佳的，所以觉得还是看一遍为好，这里只暂且将书中的一些要点提示记录下来，以作备忘。
- “..”表示父文件夹，可以用来链接到源文件上一层文件夹中的一个文件。且在web上，我们选用”/”作为通用分隔符，用来分割路径。
- 为网站选择的文件名和文件夹名中不要使用空格。
- 使用字符实体的简单缩写来指定一些特殊字符，假如我们要在页面中提到<html>直接输入<html>可能会把嵌套弄乱，所以我们要查找相应的缩写来输入。例如：>字符的缩写是
>,<字符的缩写是<。所以，假如我们要在页面中输入“The <html> element rocks.”。通过字符实体，我们可以这样输入：
The <html> element rocks.下面是w3school上更多的字符实体说明：
ps:实体名和实体编号的作用都是一样的，我们既可以使用实体编号，也可以使用实体名。
更详尽的字符实体清单，可以访问：http://www.w3school.com.cn/tags/html_ref_entities.html - 我们使用相对路径来链接同一网站内的页面，而URL通常用来链接其他网站。原因在于，URL很长，不便于管理编辑，而且当移动这个网站或改变它的名字时，就必须修改所有这些URL来反映新的网站的位置。
- 可以为任何元素增加title属性用作工具提示。
- 不一定要把target属性指定为”_blank”,这会使每个链接都在一个新的空窗口打开，如果指定同一个名字，如”blue”,那么具有相同目标名”blue”的所有链接都会在同一个窗口打开。为target指定一个特定的名字时，如”blue”,实际上就是在对显示链接页面的新窗口命名，”_blank”则是一种特殊情况，让浏览器总是使用一个新窗口。
1.任何时候都要以<!doctype html>开头，除非你确实在写HTML4.01或XHTML。
通过告诉浏览器你在使用的HTML版本，浏览器可以更好地处理错误。HTML5是HTML的活标准，它会根据需要继续发展变化，不过不再有固定的版本号，所以从HTML5之后HTML就只是HTML了。可以继续向HTML增加新的内容，浏览器（最终）会支持这个新内容，不过它还会继续支持原来的内容。
2.记得要为web页面指定编码。
要在<head>的元素内最上方添加<meta charset=”utf-8”>。
“meta”表示我们要告诉浏览器关于页面的一些信息……；”utf-8”是unicode系列中的一个编码。web页面中使用的就是”utf-8”。Unicode是常用软件应用和操作系统都支持的一个字符集，这也是Web选择的编码，因为它支持所有语言和多语种文档（即多种语言的文档）。它还与ASCII兼容。
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8”>是HTML4.01和更早版本中标记的格式，在HTML5中已经不需要那么麻烦了。
3. 同样也一定要在<head>内包含<title>元素。如果没有做到，则会得到不符合标准的HTML。
4. 共有5个字体系列：sans-serif、serif、monospace、cursive和fantasy。
- sans-serif字体系列包括没有衬线的字体。与serif字体相比，通常认为sans-serif字体在计算机屏幕上更容易识读。
- serif字体系列包括有衬线的字体。很多人一看到这种字体就会想到新闻报纸的文字排版。
- monospace字体系列中的字体包含固定宽度的字符。例如，一个“i”在水平方向所占的宽度与一个“m"所占的宽度是相同的。这些字体主要用于显示软件代码示例。
- cursive字体系列包括看似手写的字体。有时会看到标题中使用这些字体。
- fantasy字体系列包含有某种风格的装饰性字体。
5. font-size用%指定一个字体大小时，会相对于父元素的字体大小指出这个字体有多大。
6. 指定字体大小的秘诀：
1选择一个关键字（推荐small或medium），指定它作为body规则中的字体大小。这相当于页面的默认字体大小。
2 使用em或百分数，相对于body字体大小指定其他元素的字体大小（选择em还是百分数由你决定，因为实际上这两种方法的作用是一样的。这样子安排的话，改变web页面的字体大小就会很容易，只需要改变body字体大小就可以了。对于用户想调整页面上字体的大小，利用这个，页面上的字体都会自动调整大小。
7. #cb0表示#ccbb00。只有每一组分量中两位数字都相同，才可以使用简写。
8. 媒体查询：
针对将要显示页面的设备类型（桌面PC、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本）来调整页面的样式，利用media属性，在<link>元素中增加这个属性，只使用适用于指定设备的样式文件。如下：
<link href="one-mobile.css" rel="stylesheet" media="screen and (max-device-width:480px)">
media属性允许指定应用这个样式表的设备类型。上面指定了有屏幕的设备而且屏幕宽度不超过480像素。
类似地，我们可以创建一个查询来匹配打印机设备。
<link href="one-print.css" rel="stylesheet" media="print">
one-print.css只有当媒体类型为print时才会使用，这说明我们要通过打印机查看页面。
查询中还有很多属性可以使用，如min-device-width、max-device-width,以及显示方向[orientation,说明是横向(landscape)还是纵向(portrait)]…
除了在link标记中使用媒体查询，还可以直接写在CSS中。
@media screen and (min-device-width:481px){ #guarantee{ margin-right:250px; } } @media screen and (max-device-width:480px){ #guarantee{ magin-right:30px; } }
9.text-align
text-align会对块元素中的所有内联内容对齐。text-align属性只能在块元素上设置，如果直接在内联元素上使用，则不起作用。同时，它对块元素中的内容也起作用。如果对<h1>设置text-align:center;，h1中的内容就会居中显示。
任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。
——《CSS权威指南》
“内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度”。
10.子孙选择器
#one h2表示选择的<h2>元素可以是id为one的所有子孙，如果要选择直接的孩子，就使用#one>h2。
11.流
浏览器并排放置两个内联元素时，而且这些元素都有外边距，那么这两个外边距都会单独显示，不会被折叠。但浏览器上下放置两个块元素时，它会把它们共同的外边距折叠在一起，它们之间的外边距就会是两者之中较大的那一个，
只要两个垂直外边距碰到一起，它们就会折叠，即使是一个元素嵌套在另一个元素中也不例外。注意：如果外面的元素有一个边框，那么两个元素的外边距就不会碰到一起，这样也就不会折叠。
1.凝胶布局
内容宽度固定，不会随着浏览器窗口扩展或收缩。
通常会把内容放在中央。
#allcontent{
width:...;
margin-left:auto;
margin-right:auto;
}2.表格显示布局
<div id="tableContainer">
<div id="tableRow">
<div id="main">
...
</div>
<div id="sidebar">
...
</div>
</div>
</div>div#tableContainer{
display:table;
}
div#tableRow{
display:table-row;
}
#main{
display:table-cell;
width:70%;
}
#sidebar{
display:table-cell;
width:30%;
}断断续续用了两周终于把这本书看完了，对于初学真的很推荐，大家一起加油吧！
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
