2015.12.6日开始看这本书，用了4天疯狂看完。学完了韩顺平老师的视频之后准备再通过书本梳理一下知识，然后完成一些小网页的制作。下面是看书的过程中觉得值得记下来的东西，有些是新的理解，有些是韩老师的视频中没有讲到的：
1.制作项目时要进行 组织网站， 把文件，图片按照分类在文件夹中放好，便于管理。并且以后进行网页升级的时候，会多出许多文件，尽早归类放好，以后就不用改href里边的链接了。
2.关于href，同一文件夹中的文件之间的引用，直接写文件名即可；若要引用子文件夹中的文件，使用 子文件夹名/文件名 的方式引用；若要引用父文件夹中的文件，则要使用 ../父文件夹中的文件名。 HTML把 .. 认做父文件夹，其他引用可以以此类推。
3.引用（在不同的浏览器上效果不同，使用的话要测试一下）
文本中使用 <q>内容</q> 能够引用文本，显示时会加上双引号，以后使用css布局的时候，也方便更改字体等。
使用<q>元素一般用来引用比较短的文本，引用之后的文本会作为现有段落的一部分，而常引用可以用<blockquote>，它将会把引用的部分单独拿出来缩进，放在页面中，一般使用过它的时候会配合<p>，用</p>来结束上一段，插入<blockquote>之后，再用<p>来开启一个新的段落。
</p> 结束上一个段落（如果有）
<blockquote>
内容
</blockquote>
<p>（开启下边的新段落，如果有的话。）
若有多段的引用，每个段落分别放在一个<blockquote>里边即可。
最后，<blockquote>是个块元素，<p>是行内（内联）元素，跟韩老师视频上的知识联系上了。
4.列表除了 有序列表 无序列表 之外，还有个定义列表：
5.<em>斜体，强调文本
6.如何将做好的页面放在服务器上，让其他人也能够访问，见书第四章，以后做了自己的网站用得到。
7.<a>元素中的title属性，并且，title属性可以给任何元素。
这样鼠标移动到连接上的时候就会显示一个提示描述。
8.通过在a页面的一个元素上的id，可以让b页面在访问时，直接显示在a页面该id所表示的那个元素上，而不是让a页面从头显示。
<a href="a.html#id">内容</a>
如果a是web上的网页，可以通过查看源代码来寻找id
9.target属性，不仅有_blank,_self,_top,_parent，还可以：
10.<img>的alt元素 目前的标准来说，img标签里边，必须要存在alt属性，否则http://validator.w3.org/会报错，以后编程的时候也要注意。同时，也要有src属性，不然没意义。
11.书上说，在页面中插入图片时尽量不要使用width和height来改变图片的大小，而是直接修改图片本身，再加入页面。如果用了他们，浏览器其实还是会加载原来的图像，然后再由浏览器来缩放，如果原来的图像很大，即使这样设置让图片显示的小，加载的还是大图片，影响网页的加载速度。
12.HTML5中的新元素<article>，用于博客帖子和新闻报道之类的内容，以后可能用得到。
13.关于HTML5：HTML5是当前的HTML标准，它可以说是HTML的最后一个版本，兼容之前所有的HTML元素，并且之后即使出了新的功能或者某些功能有了更新，依然会向下兼容，实际上可以认为HTML不再有版本的概念，现在的HTML已经是一个活的标准了，之后可以再往里边添加更多的功能，但是目前的所有功能，都将继续存在下去，即使添加新的功能，也丝毫不会影响之前所创建的页面。
14.以后可以看看这个，如何构建web应用。
15.使用<meta>指定字符编码
注意：这里的 <meta charset="utf-8"> 要放在<head>元素里边
16.关于<head>元素的要求：
17.书中文字的下划线用的事 border-bottom:1px solid black; 视频中是用的是underline ，实际工作什么情况下选哪个？
原来书中后文解释了：
18.外部css文件引入html文件的语句分析：
19.class类选择器中，如果使用1 .类选择器名{} 这样的方法，则会应用到所有成员，书中还给出了2 p.类选择器名{} 这种方法。但是其实只要用第一种就可以了，如果哪些元素不需要这个选择器，不插入 class="类选择器名" 这句话不就好了？但是当多个选择器冲突的时候，2会比1更特别，会覆盖1的效果起作用。
20.关于字体：
每个font-family包含一组共有特征的字体。共有5个字体系列，前第一种用的最多，其次是第二种：
1)sans-serif:外观清晰，在网页上可读性好的字体类
2)serif:高雅、传统的字体类，像报纸上的字，字母边缘有称线
3)monospace:包含固定宽度的字符，各个字母所占的宽度相同。用于显示软件代码
4)cursive:有趣的风格，看起来像是手写体
5)fantast:包含某种风格的装饰性字体
引用一组候选字体：
注意：这里添加多个字体的时候，如果一个字体的名称有多个单词组成，要把这个字体用 " " 包围起来。
21.使用@font-face添加web字体，让用户即使没有安装这种字体，也能在打开网页时加载字体进去。见第八章，324页
@font-face是一个内置的css规则，并不是一个元素。另外还有两个常用的规则，是@import（允许导入其他css文件而不是在HTML中通过<link>链入）和@media（允许创建某些特性于媒体类型的css规则）。
22.指定字体的大小，不仅可以用像素px，还可以用百分比、em或者关键字，用font-size:150%;表示该字体的大小是其父元素指定的字体大小的150%；或者用font-size:1.2em;表示该字体将是其父元素字体大小的1.2倍；最后关键字的用法：
最后，这么多方法用哪个呢，这里有一个设置字体大小的秘诀：
这里之所以用关键字而不是用像素来指定body里的字体大小，是因为在某些浏览器，用像素的话，字体缩放的时候也可能出现问题。
23.对于font-weight，通常使用bold和normal，其他效果设置了也基本没变化。
24.对于font-style，有italic（斜体）和oblique（倾斜）两种，他们的却别在于，italic使用专门设计的倾斜字符，而oblique只是把正常的字符斜着放。但是实际上，他们两个的显示效果很可能是相同的，而且根据不用的浏览器效果不用，作为设计者无法控制，所以在实际运用过程中，只使用italic即可。
25.指定颜色的方式:1.用名字，如red，green等；2.按照红绿蓝分量的多少指定一个颜色，如 rgb(80%,40%,0%); 或者rgb(204,102,0)【这里的数字在0到225之间】; 3.使用十六进制码来指定颜色，十六进制码一共6位，其实每组2位分别代表了红绿蓝的分量其实也就是十进制的0-225之间的数，如：
通过转换就可以得到数字;
CC=12*16^0+12*16^1=204;
66=6*16^0+6*16^1=102;
00=0*16^0+0*16^1=0;
其实也就跟上边的指定方式一样。
另外：
26.对于文本装饰text-decoration, 可选的值有 line-through,underline,overline,none这几种，如果要放在一起使用也可以，中间用空格隔开。并且只有同时指定两个值的时候，它们才能够同时显示，分别指定则会覆盖，只显示一个。
一般来说，不推荐文本使用下划线，会造成是链接可以点击的误会，用border-bottom下边框来完成效果更好一些。
27.可以用line-height:1.6em;来改变行间距，为字体大小的1.6倍，这里的字体大小，相当于该元素所在的div的字体的大小。但是实际上div中很可能有多个不同大小的字体，如果都用div设置字体的大小，可能会有偏差，所以在这里可以使用line-height:1; 这样可以设置行高位div中各个元素的字体是它本身的1倍，而不是div字体大小的1倍。见书第十章P440页
28.再讲盒子模型：css将每个元素看成一个盒子。
29.为元素增加背景图片可以用：background-image:url(图片相对路径或是链接);而img元素在是页面中放置图片，两者是有区别的。
当使用background-image插如图片后，图片会不停的重复以占满整个元素背景，使用background-repeat:no-repeat;可以让图片不重复；再使用background-position:top left; 让图片显示在左上角。
30.对于padding，指定的顺序很重要：
31.关于边框：
通过border-style属性可以控制边框的样式：solid（实线），dotted（点线），double（双条线），dashed（破折线），groove（槽线），inset（内凹线），outset（外凸线），ridge（脊线）。
边框宽度：可以用关键字（thin,medium,thick）和像素来指定，最好用像素。
边框颜色，跟背景颜色一样。
指定某一个边框：border-top-color;border-top-style等等
指定边框圆角：
小技巧:如何做出锯齿线的边框？
32.关于选择器，在实际运用过程中，需要多个元素使用的某一堆样式，可以放在类选择器中；如果只有一个元素会用到这个特别的样式，用id选择器就好了。
33.一个THML文件中可以引入多个css样式表。实际运用中，比如分公司想在总公司的样式基础上，加一些自己的变化，便可以通过引用多个样式表来实现：先引用总公司的样式表，然后再引用分公司的样式表。这样，没重复的地方就用总公司的样式，有重复的地方，分公司的样式表就会覆盖总公司的，所以顺序不能错。
另外，希望有多个样式表，还有一个原因：可以针对不同显示设备，来调整页面的样式。要做到这一点，需要用到<media>属性。这里比较重要，以后需要页面适配移动端的时候可能会用到，在第九章400页。
34.关于text-align，该元素只能在块元素上使用，然后该块元素里边的所有的行内元素都会生效，包括文本和图片。
35.关于子孙选择器（父子选择器）：
1）.若是 #id h1{} 这样的子孙选择器，那么它会作用于此id元素下的所有的h1元素，不论嵌套了多少层，都会有效。
2）.若使用 #id>h2{} 这样只有当h2是此id元素的直接子元素的时候才生效，下边嵌套的元素不生效。
3）.若只想要应用于id下嵌套的某个元素的子元素，则使用 #id 该元素 子元素{} 这样的方式。
36.关于属性的设置，有很多简写的方式，可以等熟练了再使用。详见第十章444页。
37.伪类：其实也就是<a>元素的链接在点击前，点击后和悬停的时候所显示的颜色的设置。
38.页面的布局：书中说了四种布局方式，各有优劣，看情况使用：
39.想要小窗口固定显示，在浏览器上，即使上下滚动页面，位置也不便，可以用position：fixed; 来进行定位，这个定位就是以浏览器左上角为原点的结对定位。
40.HTML5的一些新元素：<header>,<footer>,<section>,<article>,<time>,<video>，他们有各自的作用，很好用。详见第十二章550页。
41.对于表格<table>，可以用<caption>来指定一个标题，默认显示在表格正上方。
通过border-spacing:10px 30px;可以设置表格单元格之间的的水平边框间距为10px，垂直边框间距为30px。通过border-collapse:collapse; 可以设置单元格之间没有间距。
若想要将表格的奇偶行通过不同的颜色区分出来，可以使用：
tr:nth-child(2n){} 偶数
tr:nth-child(2n+1){} 奇数
这个伪类来设置选择器，并在其中加入需要的各种属性。
42.对于无序列表ul里边的li，可以使用list-style-type来设置每一项前边的标志，默认是实心圆。同时，还可以使用list-style-img:url(地址) 来用图片做一个自己的标志。
还可以使用list-style-position 来控制文本是否在标记下回绕。
43.表单元素是如何工作的：
关于<form>的属性type，除了我们常见的text,submit,radio,checkbox之外，还有数字number,范围输入range，颜色color，日期date，邮箱email，电话tel，链接url。最后这三种type，在PC上看不到区别，但是在移动端，会弹出方便输入对应信息的定制键盘。
form表单中要输入的值很多的时候，可以把它们布局成用div制成的表格，整个放在form表单中。使用表格显示布局来表示表格，在form的css里边加上display：table。
44.关于表单元素，除了<input>之外还有<select>和<textarea>。
45.关于表单元素form的method属性，有get和post。使用get，提交后会在url后边加上提交的所有数据，把它当做一个普通请求发送给服务器；而使用post则会打包数据发送给服务器，用户看不到。当需要服务器返回一个用户可能经常查看的东西，比如搜索结果的时候，用get，这样用户可以将返回的页面加一个书签，如果用post就不能加书签了。但是如果是私人信息，或者订单等，就用post，不会显示在url，比较安全，同时防止用户增加标签，不然每次都会重新提交。最后如果使用了文本域textarea，那么最好也用post，因为post是打包发送，能发送的数据量比较大，用文本域的话可能会发送大量的数据给服务器，post比较合适。
46.关于表单的可访问性，使用<label>元素来标记输入框的提示语，外观没区别，但是对网页来说可读性会增强很多。
47.表单中的其他元素：
还有password，file这些知道，另外还有：
48.关于更多的css选择器：
49.关于音频：
50.如果以后需要在这本书上查询东西，可以看最后变得索引。【强行凑齐五十条】