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