《Head First HTML and CSS》讀后感精選10篇

1、PAGE 此資料由網(wǎng)絡(luò)收集而來，如有侵權(quán)請(qǐng)告知上傳者立即刪除。資料共分享，我們負(fù)責(zé)傳遞知識(shí)。Head First HTML and CSS讀后感精選10篇Head First HTML and CSS是一本由Elisabeth Robson / Eric Freeman著作，OReilly Media出版的Paperback圖書，本書定價(jià)：USD 39.99，頁數(shù)：768，特精心從網(wǎng)絡(luò)上整理的一些讀者的讀后感，希望對(duì)大家能有幫助。Head First HTML and CSS讀后感(一)：看起來很厚，讀起來很薄Head First 系列的特色就是： * 圖片很多 * 每章的內(nèi)容（包括遣詞造句）

2、都是按模板來寫的 * 所以只要你能看懂其中一章，那么其他章節(jié)基本上都能看懂（專業(yè)術(shù)語可能要查一下資料） 別看它有七百多頁而且還是英文的，只要你去讀就會(huì)發(fā)現(xiàn)其實(shí)沒那么厚，沒那么難懂。Head First HTML and CSS讀后感(二)：注意你看的版本HTML與CSS有兩版，第一版是2020年出的，書名是HTML, CSS和XHTML，中文版是2020年出的，第二版是2020年出的，書名是HTML和CSS，沒有中文版 不用說應(yīng)該盡量看新版，新版對(duì)HTML5， mobile web等都有涉及，舊版已經(jīng)將近10年，雖然語法沒變，但標(biāo)準(zhǔn)，設(shè)備和網(wǎng)絡(luò)環(huán)境已經(jīng)變了很多，直接看新版更利于快速進(jìn)入實(shí)戰(zhàn)階段

3、Head First HTML and CSS讀后感(三)：敢不要這么啰嗦么？在headfirst的官網(wǎng)沒有這本書的源碼下載，甚至?xí)斜砝镎也坏綍? 這本書真的是headfirst系列的？ 從書的編輯風(fēng)格來說和其他書一樣， 但是真尼瑪啰嗦。 別的headfirst是為了講道理搞一些小對(duì)話小故事， 這貨是干湊對(duì)話故事啊，全都是廢話。 到處都是“這個(gè)后面再說”“那個(gè)后面再說” 其實(shí)都是一句話就說清楚的事。 哪怕你后面重復(fù)一遍加深印象也好。 img一個(gè)標(biāo)簽扯了一整章， 這本書如果壓縮掉四分之一到三分之一會(huì)是一本好書。 買都買了，耐著性子再看。看完就扔。Head First HTML and CS

4、S讀后感(四)：本書優(yōu)點(diǎn)和個(gè)人認(rèn)為的HTML練習(xí)方式我是在codecademy上敲過他們的HTML5的6個(gè)單元之后才看的這本書。所以介紹性質(zhì)的章節(jié)就跳過了。（很多概念也是敲之前就已經(jīng)有了解了。） 書的優(yōu)點(diǎn)： 行文很幽默，中間討論版本差異或者不太相同又容易搞混的概念時(shí)，會(huì)用擬人化的形式進(jìn)行訪談，看著不枯燥。比其他大部分書的對(duì)照做到要好。而且會(huì)在介紹完后幫助讀者復(fù)習(xí)。 大量圖像，還有不同代碼的對(duì)比圖。確實(shí)做到了書籍一開始介紹的Head First原理。 和codecademy相比，本書在代碼實(shí)踐上用的都是一個(gè)個(gè)整體的網(wǎng)站設(shè)計(jì)，而且是在努力引導(dǎo)讀者自己思考。而codecademy網(wǎng)站每個(gè)練習(xí)單元雖然

5、也是整體，但是缺少網(wǎng)站的設(shè)計(jì)感，講解div 和 span 模型，或者absolute等位置時(shí)用的只是彩色方塊。只了解到這段代碼能起到什么作用，如果是比較喜歡思考的人，可能會(huì)自己嘗試著寫不同的語句試驗(yàn)。碰到不想動(dòng)腦子的就麻煩了。而書里會(huì)有各種各樣的問題促使人思考，所有的例子都不是空洞得只有概念。是基于網(wǎng)頁設(shè)計(jì)的思路，可以為以后的代碼設(shè)計(jì)鋪路。 e.g. : 講解fixed時(shí)用的是網(wǎng)站主希望“Free Cup”的標(biāo)簽始終出現(xiàn)在瀏覽者的視野中?？梢宰屪x者思考平時(shí)自己瀏覽網(wǎng)頁時(shí)那些適應(yīng)性區(qū)域的目的。 書的缺點(diǎn)： 我個(gè)人認(rèn)為，可能就是太啰嗦，而且內(nèi)容有點(diǎn)少。就像他們自己說的，如果再深入就得1400頁了。

6、所以，這本書看完最好是再看看書中沒有說的十大主題和Head First Programming HTML 5這本書。 以及，太貴了。不過，亞馬遜上算是60%的價(jià)格？并不用花定價(jià)的錢。 實(shí)踐為主的練習(xí)方式：（個(gè)人意見和計(jì)劃） 1.到codecademy網(wǎng)站上用2到3天的時(shí)間把HTML的部分直接過一遍。 2.然后敲完這本書。（10天左右？） 3.打開幾個(gè)lofter博客，或者自己想寫但沒什么頭緒的類似網(wǎng)站，用瀏覽器的開發(fā)者工具瀏覽布局和div和span。自己猜猜代碼，然后把代碼扣下來，照著寫。 4.后續(xù)的話，估計(jì)就是各大網(wǎng)站都用MySQL , java 和PHP 的，所以還要接著學(xué)這些語言。 5.

7、學(xué)的時(shí)候，循環(huán)上述步驟。 我現(xiàn)在第三步進(jìn)行了兩個(gè)網(wǎng)頁。感覺比純看書進(jìn)步得要快一點(diǎn)。（也有可能是基礎(chǔ)已經(jīng)掌握了，不會(huì)像以前看代碼那么慢。）所以，今天正好把這篇評(píng)論寫了。如果看到的人，有什么更好的練習(xí)方法，希望能給我留個(gè)言ww先謝過了。Head First HTML and CSS讀后感(五)：和慕課網(wǎng)，w3school那些妖艷賤貨完全不一樣html和css我大概學(xué)了3遍，第一次是在萌碼，第二次是慕課網(wǎng)，最后一次是這本書，其中還看了一部分的w3school。 前面兩次的學(xué)代碼平臺(tái)看似互動(dòng)的界面，其實(shí)學(xué)習(xí)效果很差。很多東西沒有講明白，比如css的布局，在前兩個(gè)網(wǎng)站都是給幾個(gè)例子讓你跟著做，我當(dāng)時(shí)又求

8、快飛快的做完，然后過幾天就什么都忘了。 這本書的CSS布局是精華部分，先從html的flow說起，然后講float，position，果凍布局，表式布局。 下面是一些看書時(shí)記的筆記，細(xì)節(jié)部分怕忘了重新摘抄在這里： 1.target=“name”，name是窗口名字，_blank是一個(gè)特殊例子，意思是打開新窗口 2.一般使用id屬性來當(dāng)作錨，在a標(biāo)簽的href后面加上#id來尋找錨 3.依然是空元素，因?yàn)閕mage不是的一部分，而是被引用 4.CSS的PPI是96，就是每inch包含96像素 5.可以通過設(shè)置img的屬性width和height來設(shè)置圖片的尺寸，但是這個(gè)方法仍然會(huì)下載全尺寸大小的

9、圖片（建議使用thumbnail技術(shù)） 6.瀏覽器對(duì)標(biāo)簽和其它標(biāo)簽有些不同，在載入頁面的內(nèi)容后才會(huì)根據(jù)img的src取回圖片 7.font-size最常用的單位是關(guān)鍵字，比如xx-small, x-small, small medium. 8.可以把font-weight的值設(shè)置成100-900間的100的倍數(shù) 9.width屬性專門用來指定盒子模型的content區(qū)域。盒子的真正寬度是左右padding，左右margin，左右border再加上content的width 10.width默認(rèn)為auto，就是說它會(huì)自動(dòng)填充到可以填充的區(qū)域 11.text-align將會(huì)調(diào)整塊級(jí)元素內(nèi)的所有行級(jí)

10、元素 12.如果使用%和em，那么值是相對(duì)的。而如果你把line-height的值設(shè)為1，那么它會(huì)變成自身font-size的一倍，而不是父元素的font-size 13.可以為行級(jí)標(biāo)簽設(shè)置width，但是你看不到設(shè)置它們有什么用，除非你移動(dòng)了它們的位置.除了標(biāo)簽 14.偽類有5種狀態(tài)：link, visited, hover, focus, active 15.cascade就是瀏覽器的決定，給定一組樣式表和一組樣式，哪一個(gè)樣式會(huì)被使用 16.嵌套的block的margin發(fā)生折疊時(shí)，如果外層的元素有border，那么它們的margin不會(huì)碰到一起 17.每個(gè)設(shè)置了position位置的元素

11、都有一個(gè)z-index，也就是z軸 18.默認(rèn)position值是“static” 19.把border-spacing想象成一般元素的margin，還有border-collapse 20.vertical-align 來確認(rèn)所有在table中的內(nèi)容都垂直對(duì)齊，有top，middle，bottom 21.表式布局的關(guān)鍵是：display: table, table-row, table-cell。以及為cell設(shè)置的vertical-align 22.只有當(dāng)元素使用absolute，fixed，relative才有Z軸。默認(rèn)的“static”則沒有Z軸 23.relative positio

12、n取決于包含元素的標(biāo)準(zhǔn)流位置，然后再根據(jù)此位置做調(diào)整 24.行級(jí)元素，流的順序是從左上到右下 25.如果用手機(jī)觀看網(wǎng)頁，手機(jī)瀏覽器會(huì)理解標(biāo)簽，并把它放在最下面而優(yōu)先顯示更重要的內(nèi)容 26. , controls, autoplay是布爾屬性 27.有 controls，autoplay，src，preload，poster，loop，width，height等屬性 28.偽類 nth-child() 參數(shù)為odd even 2n 2n+1 29.于rowspan對(duì)應(yīng)的是colspan，作用于 30.列表屬性：包括list-style-image，list-style-type，list-style-position 31.下面的不需要標(biāo)明name屬性 32. 可以創(chuàng)建一個(gè)小塊字段集合，增加可視化 33.在中加入m