《Head First HTML與CSS》項目實踐中學到的東西

1.組織的重要性。

   首先是要創建兩個根文件夾，一個存上線頁面的資源，一個存測試頁面的資源。全部改動內容都在測試頁面的文件夾中進行，在這個文件夾中進行測試、W3C語法檢測後（HTML檢測網站：https://validator.w3.org/#validate_by_uri；CSS檢測網站：https://jigsaw.w3.org/css-validator/），再把測試文件夾的資源覆蓋上線文件夾。（這一條只適用於靜態網頁，即沒有任何輸入的頁面。若是是存着數據的，應該不是這樣直接覆蓋（數據也被覆蓋了~）。）

（驗證工具中的「Using experimental feature:HTML5 Conformance Checker」=使用實驗性特性：HTML5符合性檢查工具，這是指驗證工具正在根據HTML5標準檢查你的HTML，不過因爲HTML5標準不是最終版本（還在加特性），驗證工具極可能會改變，因此驗證頁面的結果也不是固定的。）

   而後每一個文件夾都要有一個文件夾說明。說明這個文件夾是基於什麼緣由創建的，存的都是什麼東西，做用是什麼，以及用來記錄將來想在這加什麼需求；

   其次，依靠創建不一樣的文件夾來組織網頁的結構，可是不能濫用這一點（濫用反而不利於維護）。

 

2.bug的查找

瀏覽器的開發者模式是一個很好的調試方式。在那能夠看到任意標籤的樣式表、佈局等內容。

有些瀏覽器對路徑中的字符個數會作出限制，因此一個大型網站的開發要注意這一點。

打開A頁面——修改A頁面成A1——查詢A頁面的元素繼承，會發現結果是A1中修改後的結果，可是，頁面效果不刷新是不會變成A1的效果的。

 

3.頁面構建

block元素一般用做Web頁面中的主要構建模塊，而inline元素每每用來標記小段內容。設計一個頁面時，通常先從較大的block元素開始，而後在完善頁面時再加入inline元素。（block和inline是一個坑，詳見http://www.cnblogs.com/wuduojia/p/7763025.html第4）

設計頁面的時，對於一些佈局上的效果（其實就是CSS樣式），要先分析是怎麼作到的——好比是左外邊距加長了？仍是上內邊距變小了之類的。

若是你確實但願頁面在多種瀏覽器上有一致的外觀，就須要在大量瀏覽器中對頁面進行測試和知道一些特定的規則（典範）的CSS技巧——不過要記住，這些工做都是須要花費時間的，精益求精的代價有時是得不償失的，要權衡。

要了解每一個需求的根源，即爲何要有這個功能——舉個例子，由於我知道這個頁面裏的某個<img>只是裝飾做用，因此我沒必要費心思想她的alt屬性要怎麼寫，也沒必要再把其分紅縮略圖和高清大圖分開存放調用。這一切都是創建在我知道這個圖有什麼用的基礎上的。網站頁同理！只有清楚了這一點，才能知道哪些地方要費盡心思優化，哪些地方用力過猛只能得不償失（又好比不要由於別人告訴你要寫一個按鈕，而後你就只寫一個按鈕。努力在更高層次上去理解爲何。若是你持續關注爲何，你對你的團隊和公司會有更大價值——參考於擁抱大前端 盤點那些值得你瞭解的最佳開發實踐）。因此，團隊的需求溝通很重要！要好好利用這裏的「爲何」去提出問題，在團隊溝通中搞明白，知道在尋求幫助以前要在某件事上花多少時間，也知道要問什麼問題以闡明需求來推動項目。

不要過分實現或者一遍遍重構，爭取所謂的「完美代碼」，應該優先弄「可交付的代碼」；必須利用經驗和本能來知道何時要專一於架構和完美，何時就只是把事情搞定。 人的精力有限，不少東西不是在一天的每一個時候都能作到的，一我的也不可能在全部計算機方面的工做都作到那些，畢竟是人不是神。

自低向上構建程序的時候也不是什麼都不考慮，在實現一個功能的時候想一想有哪些實現方式，這些實現方式對後面要構建的東西有什麼影響？從而決定到底用什麼方式實現。

 Richard Feynman, 挑戰者號, 軟件工程這篇文章值得警醒。

正常狀況下，創建同系列的網頁就像給同一間房裝修同樣，要保持風格上的一致。

 

4.爲何HTML不能亂造輪子，而C++中提倡造輪子。

實際上是同樣的意思，只不過表面看起來不同而已：

C++中，內容多，功能大，適合造輪子。而不少輪子別人已經弄過了，搞很差弄得很好，或者很符合你的要求，那麼就不必造了，去看看源碼就行了——固然，若是你以爲很差（有缺點之類），或者不符合你的要求（沒有你想要的功能），那麼就再造一個，這就是「提倡造輪子」的意思。不能亂搞——好比有了int，你何須再搞一個新的數據類型int-1.0？

而在HTML中，不少時候你想到的黑科技，實際上是你本身沒把HTML和CSS分離開，或者說沒有把結構和表現分離開，好比用<p>實現列表功能，實際上列表功能有對應的標籤實現——大多數時候，已經有專門的元素標籤能解決你的問題了，或者CSS能解決了，是你本身不知道或者理解的很差沒想到而已。

綜上所述，決定了二者能不能造輪子的理由是同樣的：是否是已經有了相應的「輪子「？這個」輪子「知足本身的需求麼？這個輪子對於本身的需求有什麼反作用？這個反作用不能夠接受？

向HTML和CSS學習————C++寫的代碼，把底層邏輯與應用的表面設計分離編寫

 

5.絕對路徑和相對路徑，在瀏覽器解析、響應等方面有區別麼？何時用絕對路徑，何時用相對路徑？

這就涉及到不少問題了，兩種路徑各有利弊。我接觸很少，先寫一點知道的。

          1.告訴別人網址時，只說域名會更好一點：

由於域名輸入後瀏覽器會自動尋找完整的URL，若是世界上只有你這麼一個域名，那麼就必定能找對。此時無論你換沒換託管公司（好比你從www.wuduojia,cn換成了home.wuduojia.cn），只要輸入wuduojia.cn就能進入正確的地方，固然這個前提是沒有和你重複的URL（好比www.wuduojia.cn和home.wuduojia.cn只存在一個，否則就會找不到正確的了（在這裏雖然域名惟一，可是實際上存在的網址有兩個了））；

再就是，若是你的默認主頁改了，只輸入wuduojia.cn也會被瀏覽器自動轉到wuduojia.cn/index.html(默認主頁名字，這裏的index.html只是一個例子），（若是你告訴別人的是wuduojia.cn/index.html，之後你忽然改爲wuduojia.cn/default.htm，別人就進不去了。）

          2.使用相對連接來連接同一網站的頁面，使用URL來連接其餘網站上的頁面：

 「....一個問題是，若是一個web頁面中有不少URL，她們會很難管理：URL很長，不容易編輯，並且也會影響HTML的可讀性........若是一個網站都使用URL連接到本地頁面，移動這個網站或者改變他的名字時，就必須修改全部這些URL來反映新的網站位置...推薦用相對連接來連接同一網站中的頁面，用URL來連接其餘網站頁面。"

————————《Head first HTML與CSS》P145

URL的書寫還涉及到要不要把協議寫上去，詳見：CSS和js連接方式用//代替http://有什麼好處？ （裏面有個答主說外鏈要加全，我想知道萬一外鏈也變了咋辦……）

參考https://www.zhihu.com/question/68422353/answer/269384908?utm_source=qq&utm_medium=social，裏面提到，因爲連接寫了http，致使部分網站由於這個緣由不想升級爲https。

 

6.http://www.wuduojia.cn:8000/index.html——這裏的8000是什麼？

8000是一個能夠放在HTTP URL中的可選端口。一般Web上的全部東西都會傳送到一個默認端口（80）,不過有時Web服務器會配置爲在另一個不一樣的端口接收請求（好比8000）——這種狀況常常在測試服務器上出現。

 

7.不要把連接放到一塊兒，用戶很難區分放在一塊兒的連接。

 

8.target標籤與用戶習慣。

我本身的網站徹底是根據本身喜愛來決定用不用target標籤，可是對於一個面對用戶而不是面向本身的網頁，這個標籤用不用、怎麼用，就須要仔細調查、權衡了。

 

9.有必要了解各個瀏覽器（或者說主流瀏覽器）的內置默認樣式和各個標籤的默認內外邊距是否存在、邊框樣式。不少CSS屬性，都是有瀏覽器默認樣式的，好比你沒規定是白色背景，可是默認的就是白色背景；好比你沒規定字體顏色、大小，可是顯示的時候這些都是肯定的——這就意味着這些都是有默認樣式的，且這些東西在不一樣瀏覽器中有不一樣的默認值。

 

10.不一樣的瀏覽器在處理頁面的方式上會存在細微的差異（這個差異指默認的樣式），這種差異不止出如今不一樣瀏覽器上，還會出如今網速差和網速快上（好比圖片的加載）、不一樣屏幕尺寸上（大部分狀況指移動端和桌面端，好比你的樣式創建在1080p上，而移動端比這個小），etc。

因此測試是重要的一個必作事項，不僅僅是不一樣瀏覽器間的測試，還要加上不一樣端的、不一樣網速上，這個在之後實際遇到了再說，目前只考慮不一樣瀏覽器（後面會考慮不一樣端、不一樣分辨率、不一樣設備等），又一個網站值得使用，能夠測試頁面在不一樣端的兼容狀況：https://coolshell.cn/articles/757.html

 

11.在文件夾中直接看圖片分辨率，這樣更方便寫<img>——在文件夾最上邊的名稱處右鍵-其它-在分辨率上打勾，便可實現。

 

12.關於圖片。

實測1250x550的圖片基本填充整個edge瀏覽器的頁面，firefox開發者版本則在高度上高過一個頁面一點——可是在瀏覽器自己大小不一時，同一格式的頁面也會發生變化，這裏的「填充整個頁面」是指瀏覽器鋪滿整個屏幕時的尺寸（屏幕尺寸爲14英寸，型號：Thinkpad x1 carbon2017）（2017.11.2）；

愈來愈多的人在移動設備上查看Web頁面，太大的圖像會影響這些設備上的數據使用；

使用visual studio2017自帶的visual studio version selector能夠改變圖片的分辨率和查找顏色代號——固然，我用的是老版的Photoshop，一切切圖功能都有；

想好圖片是在HTML中用<img>加仍是用<link>連接後在CSS選擇器中用屬性background-image加——這兩點是不同的：

1.<img>中加，能夠經過alt屬性提供可替換的文本以及爲視力障礙者提供服務；用CSS的 background-image加，就不能有可替換的文本和爲視力障礙症提供服務了。那麼該如何選擇？當你的某個圖片只是裝飾效果，若是用<img>則alt值要爲空纔不影響頁面的表達（固然這就意味着，這張圖片加載不出來對頁面也沒什麼問題），這時候用CSS的 background-image就更好一點，這樣能夠省去圖片的alt說明和width和height的值（該屬性不須要這些東西）。

 

13.對於每個我想把握的頁面效果，必須用CSS顯示地聲明，不然就有可能被瀏覽器的默認樣式給暗中改了（詳見（3）《Head First HTML與CSS》學習筆記---CSS入門中的2）。

 

14.肯定本身的縮進風格。我決定縮進2格。

注意在修改代碼時，複製粘貼或者剪切粘貼會破壞代碼的對齊！要及時修正。

 

15.通常都用<link>連接外部樣式，把樣式集中在一個CSS文件中。好比：

<!--這是一個HTML文件的<head>的部分代碼-->
    <style>
      h1,h2{
        font-family: sans-serif;
        color: gray;
      }
      h1{
        border-bottom: 1px solid black;
      }  
    </style>

——————————————————————————————————————————————————————————————————————————————————————————————————————————我是分割線
/*這是一個CSS文件的部分代碼*/
     p{ color: maroon;}

注意，在HTML的代碼中，下劃線效果是獨立出來寫的，由於不但願h2也有下劃線——先把統一的樣式寫了（好比第一段選擇器樣式h1，h2），再寫單獨的（好比第二段選擇器樣式h1）

這樣作的好處在於，對於一些你但願統一格式的標籤，能夠一塊兒修改（若是你分開寫，每次修改的時候就要把全部選擇器都修改一遍，一是麻煩，二是容易出錯。），因此其實真正的意思是：對於多個頁面都要保持一致的樣式，寫成CSS文件用<link>引入；對於始終只用於某個頁面的樣式，用<style>寫在該頁面的HTML中——這兩種狀況可能單獨發生，也可能同時發生。

   

 

17.關於字體的大小和特殊字體的選擇。

  1.大多數PC上都有Verdana字體和Arial，對於font-family的最後一個候選字體，應當指定最全面的通用「sans-serif」或「serif」——即讓瀏覽器爲咱們選擇一個sans-serif或者serif系列的字體。《Head First HTML與CSS》推薦的候選字體系列是：

font-family： Verdana，Geneva，Arial，sans-serif；

  2.獲取Web字體須要時間，因此第一次獲取時頁面性能會受影響——移動設備和小型設備極可能不支持Web字體（注意，是不支持而不是沒有。沒有能夠經過下載解決，不支持的話沒有辦法解決。）；每個額外的字體都會額外增長頁面的加載時間，因此若是頁面中有多個Web字體，Web頁面加載會很慢！因此，通常不是特別須要，不要用特殊字體。

  3.用百分數或者em來定義相對的字體大小——這樣字體大小是根據父元素的大小來定義的，就能夠作到「用戶看你的Web頁面時，都能調整字體大小以方便閱讀」。em和百分數區別？

參考的CSS代碼（建議不要用像素px，由於有些瀏覽器在調整像素大小時會有麻煩）：

body{
    font-size: small;
}
h1{
    font-size: 150%;
}
h2{
    font-size: 100%;
}

這樣作會有以下效果：

one：由於是相對於body字體大小定義其餘元素的字體大小，因此改變Web頁面的字體大小會很容易——只須要改變body字體大小，其餘的元素就會自動按比例改變。

two：假設你的用戶想調整頁面上字體的大小，頁面上的全部字體也都會自動調整大小——若是你是一個用戶，全部這一切都在後臺發生。當你增大文本大小時，全部文本都會變大，由於全部元素都會相對地調整大小。

那麼，什麼時候用px呢？

對於不一樣的瀏覽器，關鍵字的默認大小是不同的（好比font-size屬性的值small、medium等），因此若是大小很重要，就應該考慮用像素大小來指定（若是是font-weight屬性定義的粗細，就是用數值而不是關鍵字，其餘的屬性也是相似的想法）！

何時用em何時用數字呢？

具體的例子看《Head First HTML與CSS》的CSS屬性的5中對line-height屬性用em仍是用數字的討論。在這總結一下就是：要時刻注意本身的想法和代碼表達的意思是否是同樣的！要作到這一點，不光是要注意到，還要能清楚每個規則的真正意思是什麼，就好比這裏的em和數字——這也是爲何有了em還要有數字的區別，這種區別在字體中沒區別，可是在line-height屬性中就有區別了。

 

18盒模型與頁面效果

有些頁面效果是盒模型致使的，好比用外邊距營造出左邊、右邊的縮進效果，詳見：《Head First HTML與CSS》的CSS屬性的5.

 

19.CSS屬性重複寫會覆蓋，因此要想同時使用一個屬性的效果，必須寫在一塊兒，好比：

h3 {
  text-decoration: underline，overline；
}

 可是，有時候咱們又必須分開寫來覆蓋，以達到想要的頁面效果：

.guarantee{    
  margin: 30px;
  margin-right: 250px;/*這裏只是覆蓋了左外邊距，其餘方向的外邊距仍是30px*/
}

 

20.類與id

想要對多個元素使用某個樣式，用class——由於多個元素能夠共用一個類名，好比：

一個元素擁有不一樣的類，就能定義不一樣的樣式：把<h1>放在「products」類中，這個類定義字體大小、粗細；再放到「specials」類中，若是這個商品降價，就讓這個類把<h1>變成紅色。

若是隻有一個元素須要加樣式，或者頁面上只有一個元素，就用id——由於id是用來惟一命名元素的（一個元素只能有一個id，每一個id的名字都是文檔中惟一的）。

爲何要這樣呢？

假設你在和一個團隊共同開發一個Web項目。某個團隊成員看到一個類時，他會認爲其它元素能夠重用這個類（就可能進行增長新樣式之類的行爲了）；若是看到的是一個id，就會知道這對應一個惟一的元素；

若是要在一個頁面上指定元素位置，就須要每一個要定位的元素有惟一的id；

div是放在類裏仍是id裏？

用書上的一個例子說明：假設你的音樂播放列表頁面中有不少唱片區，你能夠把組成唱片的全部元素放在一個div中，而後把這些div放在一個「albums」（單詞意味唱片）類中。這樣能夠標識唱片在哪裏，並且能夠利用類對她們同時指定樣式。不只如此，你還能夠爲每一個唱片指定一個惟一的id，從而能爲它單獨的應用額外的樣式。

上面的全部總結起來就是：對於但願成組指定樣式或者在某些功能上多個地方要保持一致的元素，用class（這並非說用了一個就不用另外一個了！好比功能a、b、c是要一致的，那麼咱們給p元素加一個class；而功能d是p元素特有的，咱們再加一個id來實現）。

 

21.混合樣式表的重要性。

混合樣式表比單同樣式表強在哪裏呢？

  1.當你爲一個網站進行樣式設計時，你必須容許別人爲某個頁面的部份內容進行特別的樣式設計，此時一個樣式表就不夠了。讓咱們來看這麼一個例子：

假設Head First休閒室開張了，有了特許經營權，完成了首次公開募股。這將是一個龐大的公司網站，有數百個頁面，顯然你但願利用外部CSS樣式表對全部頁面增長樣式。但因爲公司有不少分部，這些分部但願以本身的方式對樣式有所調整。另外休閒室經營者們也但願對樣式有一些控制，，好比：

總公司：咱們已經創建了公司網站使用的全部主要樣式，包括字體、顏色等。（這通常是網站主要創建者弄的，目地在於方便地設定全部頁面的效果。雖然這種效果是統1、沒有區別的）

飲料部：咱們會用總公司的顏色和字體，可是飲料頁面咱們要弄不一樣的行高（這是就要加一個樣式表，用來覆蓋行高——可是其它的效果，好比字體、顏色仍是和總公司的同樣。如今飲料的頁面有兩個樣式表了）。

西雅圖休閒室（飲料部的一部分）：咱們的客戶很年輕，追求時尚，因此對顏色有不一樣的要求，增長了一點特殊的顏色效果（如今，咱們要弄一個新的樣式表覆蓋前面定義的顏色——如今西雅圖休閒室的飲料頁面有三個樣式表了）

能夠看到，咱們必需要弄三個樣式表，而不能這樣弄：

飲料部：我直接把總公司的樣式表改爲我所須要的（把顏色改了，保留其它的樣式），作成一個新的樣式表，這樣個人外部樣式表只有一個！——這樣作，之後飲料部要改變新加變化時，又要去改這個樣式表；某天總公司的字體都改了，又要再改一次。若是是兩個樣式表，每次改本身需求的時候，只須要改本身加的那個樣式表。公司改字體的時候，只須要去改公司的樣式表。

  2. 你可能想針對將要顯示頁面的設備類型（pc桌面、筆記本電腦、平板電腦、手機或者甚至頁面的印刷版本）來調整頁面的樣式。要作到這一點，須要在<link>元素中增長一個media屬性或者直接在CSS中增長媒體查詢。詳見：《Head First HTML與CSS》的HTML標籤、屬性的9或者《Head First HTML與CSS》的CSS屬性的6.

要密切關注指定設備的最佳實踐。

  3.混合樣式表能夠避免把全部規則都放在一個文件中致使CSS變得很是龐大，這不利於代碼閱讀，好比：

要爲不一樣的媒體類型和特徵指定不一樣的CSS規則，使用<link>仍是@media？

兩個都行，不過要注意：若是全部規則都放在一個文件，再用@media分開，CSS文件會變得很是龐大。經過爲不一樣的媒體類型使用不一樣的<link>元素，就能按照媒體類型在不一樣文件中組織CSS——因此，媒體文件很大時，用<link>好。

 

22.關於判斷條件。

判斷條件最好別用「==」，由於很容易出錯，下面舉例子：

  1.

知乎是一個大網站，出現這種低級的錯誤不該該啊。阿里巴巴JAVA開發手冊中有一條：【強制】在高併發場景中，避免使用「等於」判斷做爲作中斷或退出的條件。

說明：若是併發控制沒有處理好，容易產生等值判斷被「擊穿」的狀況，使用大於或小於的區間判斷條件來代替。

好比：庫存數=0退出，因爲併發，成爲-1，致使永遠沒法退出。

這像《白夜追兇》同樣，你們分析一下案情。案情的奇怪之處是截圖中的-2，是在我明顯幾秒後點擊產生的，併發的錯誤不太可能，有多是架構上的緩存問題，或者是故意而爲之？

做者：孤盡

連接：https://www.zhihu.com/question/67945212/answer/258076356

來源：知乎

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

  2.適配屏幕時，不用模糊的定義，要說清楚設備類型和分辨率。

@media screen and （min-device-width： 481px）{/*若是設備寬度大於481*/
  #guarantee{
    margin-right： 250px；
  {
}
@media screen and （min-device-width： 1000px）{/*若是設備寬度大於1000*/
  #guarantee{
    margin-right： 20px；
  {
}

這個例子中，若是設備是同樣的，可是寬度大於1000，會有什麼後果呢？

當CSS是：

h1{
    color: blue;
}

效果:

當CSS是：

h1{
    color: blue;
}
@media screen and (min-device-width: 10px){
  h1{
      color: red;
  }
}

 效果：

當CSS是：

h1{
    color: blue;
}
@media screen and (min-device-width: 10px){
  h1{
      color: red;
  }
}
@media screen and (min-device-width: 20px){
    h1{
        color: grey;
    }
  }

效果：

當CSS是：

h1{
    color: blue;
}
@media screen and (min-device-width: 20px){
  h1{
        color: grey;
  }
}
@media screen and (min-device-width: 10px){
  h1{
      color: red;
  }
}

效果是：

 

因而可知，會被覆蓋。因此，最好就是定義明確一點，畢竟市面上的手機、平板的設備類型和尺寸大小是基本固定的！

又或者，寫的時候避免這種模糊的定義。

 

23.功能設計該如何設計

我在學習中發現，一些涉及設計的東西要考慮的方向不是那麼簡單的，好比：

1.把用戶當傻子，考慮越多越好。

2.正常狀況下會發生什麼，根據正常的狀況設置需求。

不少狀況下，這兩點要同時考慮又或者只考慮其中一個。

好比在設計用戶輸入數據的系統時，就考慮第一點別考慮第二點——你永遠也不知道用戶會輸入什麼奇葩的數據讓你寫的判斷條件之類的東西崩潰（好比這篇文章中22提到的例子）

而在考慮樣式的順序時，要拋棄第一點，只考慮第二點，詳見（4）《Head First HTML與CSS》學習筆記---文本的CSS規則和盒模型；div與span；<a>元素的連接色；僞類中關於a元素連接色的討論。

 

24.如何看待一些所謂的「準則」，「規範」

首先，這些約定俗成的東西進過無數程序員的實踐所推崇的東西必定是有其可之處的，好比推薦a連接的僞類樣式順序是link、visited、hover、focus、active，就蘊含着用戶交互的考慮。因此我以爲要學要用，可是前提是搞懂爲何是這樣的規範，即思考其出現的緣由，畢竟我以爲沒什麼東西是放之四海而皆準的，這種東西血多了，想多了，就能幫助我更上一層樓。這種東西上哪學呢？一個是書，一個是本身創造，一個是模仿網站的時候思考本身和原網站的區別的緣由（最好這個網站是那種工業化標準的網站——固然也不能看輕本身，說不定有時候會是本身對呢！）。

關於網站的選擇，知乎上又一個問題能夠參考，不知道有沒有人回答：工業級別的網頁？

每看完一本書，都要把期間學到的全部準則、規範、黑科技之類的東西總結一番！這個要列入本身的學習方法裏。不能只在這裏出現。

 

25.注意浮動的順序，詳見（5）《Head First HTML與CSS》學習筆記---佈局與定位關於浮動的討論。

 

26.這個系列的讀書筆記裏我屢次引用了這個網站中對CSS屬性和HTML標籤的解釋做爲參考，可是根據知乎上某個大佬的意思，這個網址並不十分靠譜。我推測是爲了讓入門者不陷入細節的考量，簡化了一些重要的東西，致使不許確。這一點將在我全面地閱讀CSS權威指南和HTML5權威指南後，在專門的分區裏針對這個讀書筆記系列的兩邊文章（1、2）進行修正.

 

27.對於一些特定用途的標籤，不能隨便地放在文檔流裏。

好比，咱們要把一個a元素內容爲圖片的內容做爲頁面上一個固定連接時，不能亂放這個標籤。應當考慮到，若是不支持固定定位的瀏覽器在顧客手裏時，這個亂放的a標籤就會讓頁面顯示不友好，因此咱們應當把它放在文檔流的最後（頁腳以前），這樣它在HTML中的位置在重要內容後面，對結構的影響就很小了。

 

28.標籤語義化的做用：

1.對於瀏覽器、搜索引擎和構建Web頁面的應用來講，只要它們願意，利用這些含義，就能更明智地肯定如何處理頁面的不一樣部分。

2.開發人員也能更容易理解你的頁面。

 

29.實現某個樣式效果時，想想有多少種實現的辦法，哪一種辦法更好，爲何？

好比，書裏P629提到的例子。