任務4-HTML1

網頁亂碼是怎樣產生的

  • 網站頭部設定的編碼和網頁本身的編碼不一致導致的
<head>
      <meta chaeset = utf-8>
</head>

如果網站制作者將網頁文件存儲為了gbk格式,然后在網頁頭部卻設置了utf-8的格式,那么瀏覽器在讀取網頁的時候就會將中文或其他非英文和數字的字符解析成亂碼
解決辦法很簡單,將解碼方式和文件存儲的編碼修改成一致即可

  • 不合理的字符串截取造成個別字符亂碼

在gbk和gb2312編碼下,中文是占用兩個字節,而在utf-8編碼模式下,中文字符占用三個字節,而英文和數字都是占用一個字節,如果用英文的一些截取方式去截取中文字符的話,就可能出現將一個中文截斷的現象,網頁就會出現中文亂碼,而gbk和utf-8的中文截取手段也不一樣。
這種情況的解決辦法就是規范截取字符串的函數,因地制宜

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

  • 顏色的寫法

    • 十六進制色
      • 十六進制顏色是這樣規定的:#RRGGBB,其中的 RR(紅色)、GG(綠色)、BB(藍色)十六進制整數規定了顏色的成分。所有值必須介于 0 與 FF 之間

舉例說,#0000ff 值顯示為藍色,這是因為藍色成分被設置為最高值(ff),而其他成分被設置為 0。
- RGB 顏色
- RGB 顏色值是這樣規定的:rgb(red, green, blue)。每個參數 (red、green 以及 blue) 定義顏色的強度,可以是介于 0 與 255 之間的整數,或者是百分比值(從 0% 到 100%)。
>舉例說,rgb(0,0,255) 值顯示為藍色,這是因為 blue 參數被設置為最高值(255),而其他被設置為 0
- RGBA 顏色
- RGBA 顏色值是 RGB 顏色值的擴展,帶有一個 alpha 通道 - 它規定了對象的不透明度。
RGBA 顏色值是這樣規定的:rgba(red, green, blue, alpha)。alpha 參數是介于 0.0(完全透明)與 1.0(完全不透明)的數字

p {
background-color:rgba(255,0,0,0.5);
}

    - HSL 顏色
    - HSLA 顏色
    - 預定義/跨瀏覽器顏色名
- ###紅色、 綠色、藍色、白色、黑色如何表示?

顏色名 | 十六進制顏色值 | 顏色 RGB
:----:|:------:|:------:|
red | #FF0000 |rgb(255,0,0) 
green| #00FF00  |rgb(0,255,0)
blue | #0000FF |rbg(0,0,255)
white | #FFFFFF|rbg(255,255,255)
black | #000000 |  rbg(0,0,0) 

- ###透明黑色怎么寫?   

由RGBA 顏色可得 
> `rgba(0,0,0,0)`

- ###ccc的顏色, #eee的顏色? #333的顏色?
  - 
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-e9a318cec7afb2d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  - 
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-5c841d2495adb544.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  - 
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-8463010d6ef6b318.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##<!doctype html> 的作用是什么

>- <!doctype html>是告訴瀏覽器當前頁面是使用html5版本進行編寫的
- <!doctype html>不是標簽,而是聲明,必須放在html文檔的第一行
- 文檔類型聲明對大小寫不敏感

##嚴格模式和混雜模式指什么?
>- 文檔類型事先聲明,告訴瀏覽器以特定標準去渲染文件,即嚴格模式;
- 如果沒有聲明,則瀏覽器以自己的標準去渲染文件,即混雜模式;

##meta 有什么作用,常見的值有哪些?

>- <meta>標簽定義html文檔的元數據,具有描述網頁內容的作用,常用于 SEO及記錄頁面的主干信息;
- <meta>通常以名稱/值對出現
常見名/值包括:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-dacd0fa34792b072.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-7a62fb910ba61a7f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- http-equiv:相當于http的頭文件,在向瀏覽器傳輸html文檔時先傳遞特定的信息以輔助頁面顯示

###<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">有什么作用?

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4592325-a6335e2e637a878b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- 這個屬性主要是設置瀏覽器優先使用什么模式來渲染頁面的
- 以上代碼IE=edge告訴IE使用最新的引擎渲染網頁,chrome=1則可以激活Chrome Frame

##常見的瀏覽器有哪些,什么內核?
>- 瀏覽器的內核可分為渲染引擎(排版引擎)和JS引擎
- 渲染引擎就是解析并執行Html和Css來渲染頁面的;
- JS引擎就是解析并執行JavaScript的;
- 由于不同的瀏覽器使用的內核不一,導致同一頁面的渲染效果會產生差異,因此作為前端工程師要特別注意不同瀏覽器內核的特征。


>>- 渲染引擎:Mosaic -> Trident
- JS引擎:WebGL(JavaScript和OpenGL ES 2.0的結合)
代表: IE系列瀏覽器
***
- 渲染引擎:Gecko
- JS引擎:spiderMonkey
代表:FireFox系列瀏覽器;Netcape 6
***
- 渲染引擎:Presto(已棄用)
- JS引擎:無記錄
代表:Opera系列瀏覽器
***
- 渲染引擎:KHTML->WebCore->WebKit->Webkit2
- JS引擎:KJs->JScore
代表:Safari;Chrome
***
- 渲染引擎:WebKet->Blink
- JS引擎:JScore->V8
 代表:Chrome;Blink




最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,436評論 2 378

推薦閱讀更多精彩內容

  • 1.網頁亂碼的問題是如何產生的?怎么解決? 一:亂碼產生的原因是:當我們保存文件時會把我們寫入的文字使用編輯器默認...
    freddy閱讀 584評論 0 0
  • 1 . 網頁亂碼的問題的產生,及解決 產生原因:編寫網頁代碼時保存的編碼和瀏覽器解析時的解碼格式不匹配。 錯誤方式...
    osborne閱讀 747評論 0 1
  • 一、網頁亂碼的問題是如何產生的?怎樣解決 如何產生?使用編輯器編寫HTML文件得時候編輯器默認得編碼方式和打開這個...
    咩咩咩1024閱讀 312評論 0 0
  • 1.網頁亂碼的問題是如何產生的?怎樣解決 先認識認識幾種編碼方式 ASCII 全稱美國標準信息交換代碼(Ameri...
    饑人谷_任磊閱讀 475評論 0 0
  • 1.網頁亂碼的問題是如何產生的?怎樣解決? 亂碼產生的根本原因我們在保存文件時的編碼格式和用瀏覽器解析文件時的解碼...
    _hello__world_閱讀 233評論 0 0