（1）《Head First HTML与CSS》学习笔记---HTML基本概念
前言：
1.???? 這本書并沒有面面俱到，涵蓋所有內(nèi)容，只提供作為初學(xué)者真正需要的東西：基本知識和信心。所以這不是唯一的參考書。（我買了一本《HTML5權(quán)威指南》作為參考書和這本一起看，但還是以本書為第一個月的主要學(xué)習(xí)書籍，權(quán)威指南將在看完這本后再認真看一遍）
2.???? 慢一點看，雖然這本書頁數(shù)多但實際內(nèi)容并沒有頁數(shù)那么夸張。慢才是真正的快，慢才能多思考和留充足的時間寫代碼。
3.???? 記筆記。
4.???? 睡前就別看書了，放松一下，我的辦法是打dnf怪物獵人OL。目前的作息基本上是：
? ? ? ? ? ? ? ? 7：00起床吃早餐看新聞，9：00開始學(xué)習(xí)；
? ? ? ? ? ? ? 12：00吃午飯，吃完后看技術(shù)文章，13：30午覺；
? ? ? ? ? ? ? 14：30起床洗漱，14：00開始看書；
? ? ? ? ? ? ? 17：00吃晚飯，吃完散步一會，洗澡整理內(nèi)務(wù).18：30看書；
? ? ? ? ? ? ? 22：30停下放松，23：30上床睡覺。
? ? ? ? ? ? ? 周末會選一天休息，打打王者、跑步鍛煉或者看電影、出去和同學(xué)聚餐等。
5.???? 先用半個月用txt寫代碼把整本書過一遍，然后使用atom再過一遍，這里一系列的文章都是第二遍的產(chǎn)物。為什么要先txt過一遍而不是直接用更方便的IDE？
因為在真正掌握HTML與CSS之前，盡管那些工具很棒，但是工具本身為了實現(xiàn)便捷性，隱藏了很多具體的、細節(jié)的東西，這些東西是重要的；
通過一個用戶界面修改代碼比直接改原始的HTML與CSS麻煩得多；
（.....不過代碼量上來以后，框架的好處就會很快顯示出來：無需小心翼翼，只要框架沒bug，js算就給他算一下了，無傷大雅，總比操作失誤DOM刷新/項目代碼太亂，太難維護來得強太多了。反正么，大家電腦現(xiàn)在誰不是8G內(nèi)存，泰坦xxoo，i5i7？.....為了讓代碼更好維護，程序員少掉頭發(fā)，更有時間泡妞約炮，偉大的先賢發(fā)明了各種框架來代替我們手動操作DOM——這句話當(dāng)作使用IDE的原因也是可行的。出自：方正的回答）
語言的標(biāo)準(zhǔn)改變時，工具不一定能馬上更新，此時你若懂了那些東西，這些改變就不會影響你。
6.???? 這本書的基本脈絡(luò)是：
? ? ? ? ? ? ? ? ? ? ? ? HTML的基本概念——基于標(biāo)準(zhǔn)的HTML5——核心的HTML標(biāo)簽、屬性和CSS屬性。
7.???? 好的Web頁面都是頁面結(jié)構(gòu)和頁面表現(xiàn)清晰分離的：HTML負責(zé)建立結(jié)構(gòu)，CSS負責(zé)指定樣式。
8.???? 準(zhǔn)備多個瀏覽器對代碼進行測試，這能讓我了解到不同瀏覽器之間的差異和獲得一些如何創(chuàng)建適用于多種不同瀏覽器的頁面經(jīng)驗。
? ? ? ? 在此我準(zhǔn)備了2個瀏覽器：火狐開發(fā)者版本、IE10.本來想加上一個主流的360，但是360是全家桶，裝了太卡只好作罷，等著以后有錢了買臺二手用來專職測試再說。
9.???? 別指望本書的例子都很簡潔、健壯，為了方便學(xué)習(xí)，這些例子的注重方面是簡單。
10.?? 有些Brain Power練習(xí)根本沒有所謂的正確答案；有些則是通過這個過程讓你確定你的答案是否正確，以及在何種情況下正確；有些則是給你提示，指明正確方向。
11.?? Safari圖書在線，一個按需提供資源的數(shù)字圖書館：
https://www.safaribooksonline.com/?utm_source=my&utm_medium=referral&utm_campaign=classic
12.?? 我的筆記同樣不會“面面俱到地”記錄所有東西，只記我認為我會忘記的、重要的東西和思考產(chǎn)物。
?
?13. ? 本書是2013年9月第一版，2017年9月北京第15次印刷。
?
?
HTML的基礎(chǔ)概念
1.???? HyperText Markup Language=HTML=超文本標(biāo)記語言
?
2. ? ? HTML的標(biāo)記告訴瀏覽器哪些文本是標(biāo)題，哪些文本是段落，哪些文本需要強調(diào)，或者圖像要出現(xiàn)在哪里——這就是前面說的結(jié)構(gòu)而不是表現(xiàn)，同時也是超文本標(biāo)記語言中“標(biāo)記”（ML）一詞的來源；
順便提一下，一般“元素”指包含了代碼的標(biāo)簽。
HT的來源是一個強大的<a>標(biāo)簽，她使我們擺脫了單個頁面的束縛，鏈接到其他頁面。
?
3. ? ? 單純使用HTML語言時，瀏覽器會使用默認的樣式來表現(xiàn)結(jié)構(gòu)。
注意，這個“默認的樣式”在不同瀏覽器上可能是不同的，比如<q>元素，有些瀏覽器上的樣式會加引號，有些不會。
?
4. ? ? Web是基于沒有任何特殊格式字符的文本文件創(chuàng)建的（正因此，所以特殊格式的字符要想寫入HTML，必須用特殊的代號表示，參考：http://www.w3school.com.cn/tags/html_ref_symbols.html）
?
?5. ???使用Txt格式（文本文檔）寫HTML時可能會遇到亂碼的情況（即txt文件中的代碼正確，但是網(wǎng)頁顯示卻是亂碼的情況），這是因為txt有時候默認保存的編碼不是utf-8，這就導(dǎo)致你保存的txt文件不是utf-8的編碼，在瀏覽器讀取txt文件的時候就會讀成亂碼，導(dǎo)致網(wǎng)頁顯示也變成了亂碼（注意，頁面代碼中<mate>指定的utf-8是指讓瀏覽器以utf-8的編碼格式來讀取文件，但是如果txt文件本身就不是以utf-8保存的話，也是讀成亂碼的），這一點可以在亂碼頁面用開發(fā)者模式看到（開發(fā)者模式下，你的代碼是亂碼），例圖如下：
解決的辦法是，把相應(yīng)的HTML文件另存為utf-8編碼的文件——這樣才能使文件格式與瀏覽器的解析格式一致。
一般是更改<img>屬性和增加<mate>標(biāo)簽時會出現(xiàn)這種情況。
注意看的話，會發(fā)現(xiàn)英文和一些符號沒有亂碼，只是中文變成了亂碼（這也是為什么要存為utf-8的原因：UTF-8就是在互聯(lián)網(wǎng)上使用最廣的一種unicode的實現(xiàn)方式,這是為傳輸而設(shè)計的編碼,并使編碼無國界,這樣就可以顯示全世界上所有文化的字符了。）——這也是導(dǎo)致頁面內(nèi)容中數(shù)字和結(jié)構(gòu)正常輸出，文字內(nèi)容卻亂碼的原因。
?
6. ? ??Cascading?Style?Sheet=CSS=層疊樣式表
?
7. ? ? CSS的語法與HTML完全不同。
?
8. ? ? 就像不能用數(shù)學(xué)寫詩，不能用英語算賬一樣，你不會用CSS來創(chuàng)建結(jié)構(gòu)，或者使用HTML創(chuàng)建樣式，因為這并不是當(dāng)初設(shè)計她們的初衷。盡管這意味著你得學(xué)習(xí)兩種語言，但你會發(fā)現(xiàn)，由于每個語言各有其擅長的方面，與試圖使用一種語言兼顧這兩方面的工作相比，實際上學(xué)習(xí)兩種語言讓她們各司其職反而更為容易（這與C 有點不一樣，C 是什么都能干，至于干的方便不方便等問題就不好說了。）。
?
9. ? 網(wǎng)頁信息、網(wǎng)頁內(nèi)容、網(wǎng)頁結(jié)構(gòu)、網(wǎng)頁樣式是不同的東西。
網(wǎng)頁信息在<head>標(biāo)簽中，網(wǎng)頁內(nèi)容在<body>標(biāo)簽中，網(wǎng)頁結(jié)構(gòu)由HTML建立，網(wǎng)頁樣式由CSS建立。
?
11. ? atom里的atom-html-preview插件有點問題，有時候無法預(yù)覽到圖片和鏈接的地址頁面......重啟可以解決。
?
12. ? 不是所有標(biāo)簽都能作為內(nèi)嵌元素，詳細請看這。
?
13. ? 代碼更新后要刷新瀏覽器頁面才能更新代碼更改后的效果。
?
14. ? 有的時候鏈接里使用中文會出現(xiàn)亂碼，遇到這種就去相應(yīng)文件另存為吧，和上面說的那個亂碼情況一樣。
?
15. ? 不同的操作系統(tǒng)使用不同的文件分隔符，Windows使用“\“，但在Web上我們選擇了一個通用的分隔符：/，所以不管你是什么系統(tǒng)，在HTML的路徑中都要使用/
注意，這里的文件分隔符是指路徑中的那個，和標(biāo)簽中的/沒有關(guān)系！
?
16. ? 為網(wǎng)站選擇的文件名和文件夾名中不要使用空格。可以用C 中的命名規(guī)則來命名（比如IAmWiner）。
這有一個疑問——為什么有些命名可以有空格，有些不能有？（參考各個語言，不要止于HTML）
?
17. ? 使用短引用標(biāo)簽<q>的原因：增加頁面結(jié)構(gòu)——即原來直接當(dāng)作文本的話，引用的內(nèi)容就是一個普通文本。在使用標(biāo)簽后就是告訴瀏覽器這是一個短引用，這樣在搜索包含引用的網(wǎng)頁時才能搜到；還有就是可以通過CSS來改變這個短引用的樣式（而不是改整個文本）。
?
18. ? block元素（又稱塊元素）<blockquote>與inline元素（又稱內(nèi)聯(lián)元素）<q>的區(qū)別：
? ? ? ?? 1.語義上看，<blockquote>是長引用，<q>是短引用。
? ? ? ?? 2.語法上看，<blockquote>是一個”容器元素“，她是一個全新的塊區(qū)域，就像<h1>、<head>一樣，在樣式上是前后各有一個換行；
? ? ? ? ? ? ? ? ? ?? <q>則是一個”行內(nèi)元素“，她是依托于塊元素的，是在塊元素中的，在樣式上前后沒有換行。
我們在分析一個頁面結(jié)構(gòu)的時候，往往會一個塊一個塊地去分解頁面，這里的塊含了<head>、<h1>、<blockquote>、<p>等，不包括<q>。
在這里要注意，“換行”有兩種，一種是結(jié)構(gòu)上的換行，即區(qū)分不同結(jié)構(gòu)需要的換行(包括HTML標(biāo)簽<br>實現(xiàn)的那種換行）；另一種是樣式上的換行，這種換行是為了表達效果，也就是樣式效果需要的換行（比如CSS中的white-space屬性）。
要時刻記得，標(biāo)簽或者說元素都是為了結(jié)構(gòu)服務(wù)的（在結(jié)構(gòu)中，換行是區(qū)分整體和部分的辦法，畢竟對于純文本，就算是作者，僅僅通過標(biāo)點符號也很難區(qū)分部分和整體——不管是誰都需要一定的視覺信息才能做到。但是這種視覺信息更多的是為結(jié)構(gòu)服務(wù)而不是樣式，更多的<br>討論見http://www.cnblogs.com/wuduojia/p/7763025.html中的第二點。）
（block和inline是一個坑，詳見20）
?
19. ? 為什么在<q>中用<blockquote>沒有任何意義：
首先，這樣使用想表達的結(jié)構(gòu)是：引用的引用，即引用的句子中又引用了新的句子。這樣的結(jié)構(gòu)注定了一個語義：除了第一個引用，后面的所有引用都是隸屬于第一個引用的，即不能獨立出去（換句話說就是引用里的引用都屬于第一個引用的范疇，都依托于第一個引用）。而<q>是一個不能獨立出去的引用，把他作為第一個引用后的任何一個引用都是正確的；<blockquote>則是要獨立出去的，所以不能作為第一個引用外的任何一個后面的引用。
所以語義上這樣做沒有任何意義——語法上也不允許（在W3c語法驗證過）。
?
20. ? 在我看來，有些inline元素的屬性是繼承其父block元素的，所以在這些inline元素中某些屬性是直接繼承的，或者是干脆就不存在。這一點以后再驗證對不對。
（這是錯誤的看法，現(xiàn)在已經(jīng)不再有inline和block了，詳見12）
?
21. ? 在我看來，列表既然是塊元素，那么頁面構(gòu)造時應(yīng)該是如圖左側(cè)這樣劃分，而不是右側(cè)那樣：
而<ol>和<ul>元素設(shè)計為只能包含<li>元素。（當(dāng)然，<li>中可以包含別的元素）
?
22. ? 只有計算機或設(shè)備安裝了正確的字體，瀏覽器才能正確顯示你想要的字符——實際上并不能保證這一點，所以不是所有字符都能顯示正確（把字符改成特殊字體也成立——特殊字體指微軟雅黑、宋體等）。
特殊字符要用字符實體替代才能在HTML代碼中以文本形式輸出到頁面。
?
23. ? <a>根據(jù)上下文可以當(dāng)inline元素也可以當(dāng)block元素；
img是inline元素——為什么？我總結(jié)到了http://www.cnblogs.com/wuduojia/p/7763025.html里的第4點*（注意回答的時間，在15年的時候，已經(jīng)不再有inline和block這種劃分了（參考12）！）。
?
24. ? www.wuduojia.cn是一個網(wǎng)站名，wuduojia.cn是一個域名——可以創(chuàng)建使用相同域名的其他網(wǎng)站，比如corporate.wuduojia.cn
瀏覽器中輸入的地址稱為URL（統(tǒng)一資源定位符=Uniform Resource Locators），其包括了一個協(xié)議（HTTP）、一個網(wǎng)站名（www.wuduojia.cn）、資源的絕對地址（即絕對路徑）
“Http：”是獲取資源的協(xié)議，是一個請求和響應(yīng)協(xié)議。URL不止可以指定資源的位置，還可以用來獲取資源的協(xié)議。HTTP=HyperText Transfer Protocol=超文本傳輸協(xié)議
獲取頁面的過程：協(xié)議告訴瀏覽器要用什么方法獲取資源（大部分情況都是HTTP協(xié)議），網(wǎng)站部分告訴瀏覽器從互聯(lián)網(wǎng)上的哪個計算機獲取資源，最后絕對路徑告訴服務(wù)器我們要的是哪個頁面。
“ftp”是文件傳輸協(xié)議（File Transfer Protocol），是向服務(wù)器傳輸web頁面和內(nèi)容的常用方法。
這里請看書《圖解HTTP》
?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的（1）《Head First HTML与CSS》学习笔记---HTML基本概念的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图片循环播放
- 下一篇： WEB前端大神之路之基础篇