《Head First HTML and CSS》读后感精选10篇

《Head First HTML and CSS》是一本由Elisabeth Robson / Eric Freeman著作，O’Reilly Media出版的Paperback图书，本书定价：USD 39.99，页数：768，特精心从网络上整理的一些读者的读后感，希望对大家能有帮助。

《Head First HTML and CSS》读后感(一)：看起来很厚，读起来很薄

Head First 系列的特色就是：

* 图片很多

* 每章的内容（包括遣词造句）都是按模板来写的

* 所以只要你能看懂其中一章，那么其他章节基本上都能看懂（专业术语可能要查一下资料）

别看它有七百多页而且还是英文的，只要你去读就会发现其实没那么厚，没那么难懂。

《Head First HTML and CSS》读后感(二)：注意你看的版本

HTML与CSS有两版，第一版是2005年出的，书名是HTML, CSS和XHTML，中文版是2008年出的，第二版是2012年出的，书名是HTML和CSS，没有中文版

不用说应该尽量看新版，新版对HTML5， mobile web等都有涉及，旧版已经将近10年，虽然语法没变，但标准，设备和网络环境已经变了很多，直接看新版更利于快速进入实战阶段

《Head First HTML and CSS》读后感(三)：敢不要这么啰嗦么？

在headfirst的官网没有这本书的源码下载，甚至书籍列表里找不到书名...

这本书真的是headfirst系列的？

从书的编辑风格来说和其他书一样，

但是真尼玛啰嗦。

别的headfirst是为了讲道理搞一些小对话小故事，

这货是干凑对话故事啊，全都是废话。

到处都是“这个后面再说”“那个后面再说”

其实都是一句话就说清楚的事。

哪怕你后面重复一遍加深印象也好。

img一个标签扯了一整章，

这本书如果压缩掉四分之一到三分之一会是一本好书。

买都买了，耐着性子再看。看完就扔。

《Head First HTML and CSS》读后感(四)：本书优点和个人认为的HTML练习方式

我是在codecademy上敲过他们的HTML5的6个单元之后才看的这本书。所以介绍性质的章节就跳过了。（很多概念也是敲之前就已经有了解了。）

书的优点：

· 行文很幽默，中间讨论版本差异或者不太相同又容易搞混的概念时，会用拟人化的形式进行访谈，看着不枯燥。比其他大部分书的对照做到要好。而且会在介绍完后帮助读者复习。

· 大量图像，还有不同代码的对比图。确实做到了书籍一开始介绍的Head First原理。

· 和codecademy相比，本书在代码实践上用的都是一个个整体的网站设计，而且是在努力引导读者自己思考。而codecademy网站每个练习单元虽然也是整体，但是缺少网站的设计感，讲解div 和 span 模型，或者absolute等位置时用的只是彩色方块。只了解到这段代码能起到什么作用，如果是比较喜欢思考的人，可能会自己尝试着写不同的语句试验。碰到不想动脑子的就麻烦了。而书里会有各种各样的问题促使人思考，所有的例子都不是空洞得只有概念。是基于网页设计的思路，可以为以后的代码设计铺路。

~e.g. : 讲解fixed时用的是网站主希望“Free Cup”的标签始终出现在浏览者的视野中。可以让读者思考平时自己浏览网页时那些适应性区域的目的。

书的缺点：

· 我个人认为，可能就是太啰嗦，而且内容有点少。就像他们自己说的，如果再深入就得1400页了。所以，这本书看完最好是再看看书中没有说的十大主题和Head First Programming HTML 5这本书。

· 以及，太贵了。不过，亚马逊上算是60%的价格？并不用花定价的钱。

实践为主的练习方式：（个人意见和计划）

1.到codecademy网站上用2到3天的时间把HTML的部分直接过一遍。

2.然后敲完这本书。（10天左右？）

3.打开几个lofter博客，或者自己想写但没什么头绪的类似网站，用浏览器的开发者工具浏览布局和div和span。自己猜猜代码，然后把代码扣下来，照着写。

4.后续的话，估计就是各大网站都用MySQL , javaｓｃｒｉｐｔ 和PHP 的，所以还要接着学这些语言。

5.学的时候，循环上述步骤。

我现在第三步进行了两个网页。感觉比纯看书进步得要快一点。（也有可能是基础已经掌握了，不会像以前看代码那么慢。）所以，今天正好把这篇评论写了。如果看到的人，有什么更好的练习方法，希望能给我留个言~ww先谢过了。

《Head First HTML and CSS》读后感(五)：和慕课网，w3school那些妖艳贱货完全不一样

html和css我大概学了3遍，第一次是在萌码，第二次是慕课网，最后一次是这本书，其中还看了一部分的w3school。

前面两次的学代码平台看似互动的界面，其实学习效果很差。。很多东西没有讲明白，比如css的布局，在前两个网站都是给几个例子让你跟着做，我当时又求快飞快的做完，然后过几天就什么都忘了。

这本书的CSS布局是精华部分，先从html的flow说起，然后讲float，position，果冻布局，表式布局。。。

下面是一些看书时记的笔记，细节部分怕忘了重新摘抄在这里：

1.target=“name”，name是窗口名字，_blank是一个特殊例子，意思是打开新窗口

2.一般使用id属性来当作锚，在a标签的href后面加上#id来寻找锚

3.<img>依然是空元素，因为image不是<img>的一部分，而是被<img>引用

4.CSS的PPI是96，就是每inch包含96像素

5.可以通过设置img的属性width和height来设置图片的尺寸，但是这个方法仍然会下载全尺寸大小的图片（建议使用thumbnail技术）

6.浏览器对<img>标签和其它标签有些不同，在载入页面的内容后才会根据img的src取回图片

7.font-size最常用的单位是关键字，比如xx-small, x-small, small medium….

8.可以把font-weight的值设置成100-900间的100的倍数

9.width属性专门用来指定盒子模型的content区域。盒子的真正宽度是左右padding，左右margin，左右border再加上content的width

10.width默认为auto，就是说它会自动填充到可以填充的区域

11.text-align将会调整块级元素内的所有行级元素

12.如果使用%和em，那么值是相对的。而如果你把line-height的值设为1，那么它会变成自身font-size的一倍，而不是父元素的font-size

13.可以为行级标签设置width，但是你看不到设置它们有什么用，除非你移动了它们的位置.除了<img>标签

14.伪类有5种状态：link, visited, hover, focus, active

15.cascade就是浏览器的决定，给定一组样式表和一组样式，哪一个样式会被使用

16.嵌套的block的margin发生折叠时，如果外层的元素有border，那么它们的margin不会碰到一起

17.每个设置了position位置的元素都有一个z-index，也就是z轴

18.默认position值是“static”

19.把border-spacing想象成一般元素的margin，还有border-collapse

20.vertical-align 来确认所有在table中的内容都垂直对齐，有top，middle，bottom

21.表式布局的关键是：display: table, table-row, table-cell。以及为cell设置的vertical-align

22.只有当元素使用absolute，fixed，relative才有Z轴。默认的“static”则没有Z轴

23.relative position取决于包含元素的标准流位置，然后再根据此位置做调整

24.行级元素，流的顺序是从左上到右下

25.如果用手机观看网页，手机浏览器会理解<aside>标签，并把它放在最下面而优先显示更重要的内容

26.<video> , controls, autoplay是布尔属性

27.<video>有 controls，autoplay，src，preload，poster，loop，width，height等属性

28.伪类 nth-child() 参数为odd even 2n 2n+1

29.于rowspan对应的是colspan，作用于<td>

30.列表属性：包括list-style-image，list-style-type，list-style-position

31.<select>下面的<option>不需要标明name属性

32.<fieldsets> <lengends>可以创建一个小块字段集合，增加可视化

33.在<select>中加入multiple这个布尔属性，选择框将会变成多选

34.pseudo-elements伪元素, p:first-letter, p:first-line

35.css属性选择器，基于属性的值来做选择 img[height="300"]

36.使用加号（+）选择CSS兄弟元素

37.CSS属性transition >过度时间 transform >变形

生词：

You betcha! 当然啦！

本文章为汉语心得记录网文章频道读后感提供，版权归原作者所有，转载请注明出处