《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有两版，第一版是2022年出的，书名是HTML, CSS和XHTML，中文版是2022年出的，第二版是2022年出的，书名是HTML和CSS，没有中文版
不用说应该尽量看新版，新版对HTML5， mobile web等都有涉及，旧版已经将近10年，虽然语法没变，但标准，设备和网络环境已经变了很多，直接看新版更利于快速进入实战阶段
《Head First HTML and CSS》读后感(三)：敢不要这么啰嗦么？
在headfirst的没有这本书的源码下载，甚至书籍列表里不到书名...
这本书真的是headfirst系列的？
从书的编辑风格来说和其他书一样， html里的float是什么意思
但是真啰嗦。
别的headfirst是为了讲道理搞一些小对话小故事，
这货是干凑对话故事啊，全都是废话。
到处都是“这个后面再说”“那个后面再说”
其实都是一句话就说清楚的事。
哪怕你后面重复一遍加深印象也好。
img一个标签扯了一整章，
这本书如果压缩掉四分之一到三分之一会是一本好书。
《Head First HTML and CSS》读后感(三)：敢不要这么啰嗦么？
在headfirst的没有这本书的源码下载，甚至书籍列表里不到书名...
这本书真的是headfirst系列的？
从书的编辑风格来说和其他书一样， html里的float是什么意思
但是真啰嗦。
别的headfirst是为了讲道理搞一些小对话小故事，
这货是干凑对话故事啊，全都是废话。
到处都是“这个后面再说”“那个后面再说”
其实都是一句话就说清楚的事。
哪怕你后面重复一遍加深印象也好。
img一个标签扯了一整章，
这本书如果压缩掉四分之一到三分之一会是一本好书。
买都买了，耐着性子再看。看完就扔。
《Head First HTML and CSS》读后感(四)：本书优点和个人认为的HTML练习方式
我是在codecademy上敲过他们的HTML5的6个单元之后才看的这本书。所以介绍性质的章节就跳过了。（很多概念也是敲之前就已经有了解了。）
书的优点：
· 行文很幽默，中间讨论版本差异或者不太相同又容易搞混的概念时，会用拟人化的形式进行访谈，看着不枯燥。比其他大部分书的对照做到要好。而且会在介绍完后帮助读者复习。
· 大量图像，还有不同代码的对比图。确实做到了书籍一开始介绍的Head First原理。
· 和codecademy相比，本书在代码实践上用的都是一个个整体的网站设计，而且是在努力引导读者自己思考。而codecademy网站每个练习单元虽然也是整体，但是缺少网站的设计感，讲解div 和 span 模型，或者absolute等位置时用的只是彩方块。只了解到这段代码能起到什么作用，如果是比较喜欢思考的人，可能会自己尝试着写不同的语句试验。碰到不想动脑子的就麻烦了。而书里会有各种各样的问题促使人思考，所有的例子都不是空洞得只有概念。是基于网页设计的思路，可以为以后的代码设计铺路。
《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.学的时候，循环上述步骤。
书的缺点：
· 我个人认为，可能就是太啰嗦，而且内容有点少。就像他们自己说的，如果再深入就得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来寻锚
《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，但是你看不到设置它们有什么用，除非你移动了它们的
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标签，并把它放在最下面而优先显示
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! 当然啦！
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! 当然啦！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论