前端學習任務四

weixin_34393428發表於2016-07-05
前端

問答

網頁亂碼的問題是如何產生的？怎樣解決？

網頁亂碼的問題是如何產生的？

  • 網頁檔案從寫入到展開的四個步驟分別為
    1.我們使用編輯器編寫 HTML 檔案
    2.儲存編寫的HTML檔案
    3.使用瀏覽器開啟HTML檔案
    4.HTML檔案在瀏覽器展示
  • 當我們使用編輯器寫HTML檔案，在第2步即在儲存檔案時會把我們寫入的文字使用編輯器預設的編碼方式進行儲存。如使用的是Sublime編輯器，那麼預設的編碼方式是utf-8。
  • 在第4步瀏覽器開啟網頁時，它網頁並不知道這個檔案是使用什麼編碼方式，於是自作主張使用了預設解碼方式。

怎樣解決？

  • 在檔案儲存的時候要清楚編輯器是用哪種編碼方式儲存（sublime預設儲存方式是utf-8，如果安裝了外掛也可另存為gbk，其它IDE可以做設定儲存格式）。如果檔案是儲存為utf-8格式，那麼一定要在html的 <head>裡新增<meta charset="utf-8">,這句話的意思是告訴瀏覽器在開啟這個頁面的時候不要去猜了，直接用utf-8去解碼。 同理，如果你的檔案儲存為gbk格式，一定在檔案裡新增<meta charset="gbk">。

顏色有幾種寫法，紅色，綠色，藍色，白色，黑色如何表示？ 透明黑色如何表示？#ccc的顏色， #eee的顏色？ #333的顏色？

  • 顏色有三種寫法，分別為
    1.最常用的是6位16進位制的程式碼表示法。
    2.rgb(r,g,b)表示,括號中的r,g,b分別用0-255的十進位制數或百分比表示紅綠藍。
    3.顏色的關鍵字表示。
  • 紅色，綠色，藍色，白色，黑色如何表示？
    1.紅色：ff0000/rgb(255,0,0)/red
    2.綠色：00ff00/rgb(0,225,0)/green
    3.藍色：#0000FF/rgb(0,0,225)/blue
    4.白色：#FFFFFF/(225,225,225)White
    5.黑色：#000000/rgb(0,0,0)/Black
  • 透明黑色如何表示? #ccc的顏色， #eee的顏色？ #333的顏色？
    1.rgba(0,0,0,0)
    2.#ccc:灰色，銀灰或者灰白
    3.#eee:灰色
    4.#333:深灰色

<!doctype html>的作用是什麼？

  • 宣告文件的解析型別，避免瀏覽器的怪異模式
    BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
    CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
    如果頁面沒有DOCTYPE的宣告，那麼compatMode預設就是BackCompat，瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。而使用<!doctype html>，瀏覽器就會按照W3C的標準解析渲染頁面，此時頁面就會在瀏覽器裡顯示相同。

嚴格模式和混雜模式指什麼？

  • 嚴格模式： 嚴格模式是一種將更好的錯誤檢查引入程式碼中的方法。
    在使用嚴格模式時，你無法使用隱式宣告的變數、將值賦給只讀屬性或將屬性新增到不可擴充套件的物件等。
  • 混雜模式：是一種向後相容的解析方法，混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。

meta有什麼作用，常見的值有哪些？

  • meta標籤是html語言中，head區的一個輔助性標籤。
  • meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能。
    1.name屬性主要用於描述網頁，meta標籤的name屬性語法格式是：＜meta name="引數" content="具體的引數值"＞ 。　
    name屬性有：
    A、Keywords(關鍵字)：用來告訴搜尋引擎你網頁的關鍵字是什麼。　　　
    B、description(網站內容描述)：用來告訴搜尋引擎你的網站主要內容
    C、robots(機器人嚮導)：用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。content的引數有all,none,index,noindex,follow,nofollow。預設是all。
    D、author(作者)：標註網頁的作者。
    2.http-equiv相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。
    http-equiv的屬性有：
    A、Expires(期限)：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸。
    B、Pragma(cache模式)：禁止瀏覽器從本地計算機的快取中訪問頁面內容。C、Refresh(重新整理)：自動重新整理並指向新頁面。
    D、Set-Cookie(cookie設定：如果網頁過期，那麼存檔的cookie將被刪除。
    E、Window-target(顯示視窗的設定)：強制頁面在當前視窗以獨立頁面顯示。　
    F、content-Type(顯示字符集的設定)：設定頁面使用的字符集。
  • 答案引用地址

<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"有什麼作用？

  • X-UA-Compatible是針對ie8新加的一個設定，對於ie8之外的瀏覽器是不識別的，這個區別與content="IE=7"在無論頁面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的標準模式。
  • "IE=edge" 表示告知瀏覽器使用可使用的最高版本的核心渲染頁面。
  • chrome=1是谷歌的一個外掛：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF）。這個外掛可以讓使用者的IE瀏覽器外不變，但使用者在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器核心，而且支援IE6、7、8等多個版本的IE瀏覽器。

常見的瀏覽器有哪些，什麼核心？

  • IE：Trident
  • Mozilla Firefox：Gecko
  • Safari：Webkit
  • Google Chrome：Blink

本教程版權歸飢人谷_鬼腳七和飢人谷所有，轉載須說明來源

相關文章