關(guān)于 HTML 的學(xué)習(xí)總結(jié)1

1 . 網(wǎng)頁亂碼的問題的產(chǎn)生浑塞,及解決

  • 產(chǎn)生原因:編寫網(wǎng)頁代碼時(shí)保存的編碼和瀏覽器解析時(shí)的解碼格式不匹配。
  • 錯(cuò)誤方式:
    1 . <head>里未添加確定的編碼方式如<meta charset=“utf-8”>
    2 . 瀏覽器端未選擇正確的解碼格式。
  • 解決辦法:
    1 . 一般情況下用<meta>標(biāo)簽聲明即可端姚,實(shí)驗(yàn)中發(fā)現(xiàn)在sublime中 不能簡單地添加<meta charset="GBK"> 而是應(yīng)該安裝插件解決设褐。
    2 . 在選項(xiàng)中選擇對(duì)應(yīng)的解碼格式。

2 . 顏色的寫法泡挺;紅色辈讶、 綠色、藍(lán)色娄猫、白色贱除、黑色的表示? 透明黑色如何表示媳溺?#ccc的顏色月幌, #eee的顏色? #333的顏色悬蔽?

  • 三種顏色表示
    1 . 16進(jìn)制表示扯躺,以“#”開頭。
    2 . rgb(x屯阀,x缅帘,x)(rgba的a表示透明度)
    3 . 一些顏色可以用對(duì)應(yīng)的英文

紅:#ff0000 | #f00 | #RGB(255,0,0)| #red
綠:#00ff00 | #0f0 | #RGB(0,255,0)| #green
藍(lán):#0000ff | #00f | #RGB(0,0,255)| #blue
白:#ffffff |#fff | #RGB(255,255,255) | #white
黑:#000000| #000 | #RGB(0,0,0)| #black

  • 透明黑色: rgba(0,0,0,0)
    rgba中的a代表的是透明度,例子:rgba(255,255,255,0)表示白色完全透明(1為完全不透明)难衰,此為CSS3中的新樣式钦无。

#ccc:表示中等灰色
#eee:表示淡灰色
#333:表示濃灰色

參考1:color-hex
參考2:MDN-color

3 .<!doctype html>的作用

<!DOCTYPE>聲明不是 HTML 標(biāo)簽而是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。它必須是 HTML 文檔的第一行盖袭,位于 <html> 標(biāo)簽之前失暂。它和HTML 4.01有三種 <!DOCTYPE> 聲明不同,在 HTML5 中只有一種<!DOCTYPE html>鳄虱。它沒有結(jié)束標(biāo)簽弟塞,對(duì)大小寫也不敏感,必須始終向 HTML 文檔添加 <!DOCTYPE> 聲明拙已,這樣瀏覽器才能獲知文檔類型决记。如果html中沒有加上doctype 可能在不同瀏覽器出現(xiàn)bug. 所以html加上doctype是至關(guān)重要的

4 . 嚴(yán)格模式和混雜模式指什么

混雜模式(怪異模式)和嚴(yán)格模式(標(biāo)準(zhǔn)模式)是瀏覽器解析CSS時(shí)的兩種模式。
早期的瀏覽器在實(shí)現(xiàn)CSS機(jī)制時(shí)倍踪,為了保證自己的網(wǎng)站在不同的瀏覽器中都能正確展現(xiàn)系宫,開發(fā)者不得不依據(jù)各個(gè)瀏覽器的自身的規(guī)范來使用CSS。因此大部分網(wǎng)站的CSS實(shí)現(xiàn)并未符合W3C的標(biāo)準(zhǔn)建车。然而隨著標(biāo)準(zhǔn)一致性變得越來越重要扩借,瀏覽器開發(fā)商不得不面臨一個(gè)艱難的抉擇:逐漸遵循W3C的標(biāo)準(zhǔn)是前進(jìn)的方向。但是改變現(xiàn)有CSS的實(shí)現(xiàn)缤至,完整去遵循標(biāo)準(zhǔn)潮罪,會(huì)使許多網(wǎng)站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現(xiàn)存的CSS,陳舊的網(wǎng)站顯示必然受到影響嫉到。因此立即遵循標(biāo)準(zhǔn)會(huì)產(chǎn)生問題沃暗,然而忽略標(biāo)準(zhǔn)則又會(huì)維持瀏覽器競(jìng)爭時(shí)所產(chǎn)生的混亂。因此所有的瀏覽器提供了兩種模式:

  • 嚴(yán)格模式:指聲明了文檔類型的模式屯碴,也就是在HTML頁面最上面加上了<!doctype html>(html5的聲明)描睦,并且頁面以最高標(biāo)準(zhǔn)進(jìn)行顯示;
  • 混雜模式(怪異模式):指未聲明文檔類型的模式导而,也就是沒加<!doctype html>忱叭,并且標(biāo)準(zhǔn)不嚴(yán),好處是可以向老版本的瀏覽器進(jìn)行兼容今艺;

5 . meta 的作用韵丑,常見的值:

  • <meta>標(biāo)簽位于文檔頭部<head>區(qū),通常用來為搜索引擎robots定義頁面主題虚缎,或者是定義用戶瀏覽器上的 cookie;它可以用于鑒別作者撵彻,設(shè)定頁面格式,標(biāo)注內(nèi)容提要和關(guān)鍵字;還可以設(shè)置頁面使其可以根據(jù)你定義的時(shí)間間隔刷新自己实牡,以及設(shè)置RASC內(nèi)容等級(jí)等陌僵。
  • meta標(biāo)簽共有兩個(gè)屬性,它們分別是http-equiv屬性和name屬性创坞。name 屬性主要用于描述網(wǎng)頁碗短,對(duì)應(yīng)于content(網(wǎng)頁內(nèi)容),以便于搜索引擎機(jī)器人查找题涨、分類偎谁。http-equiv用以說明主頁制作所方法。

name屬性的對(duì)應(yīng)值有:

  1. content纲堵,content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的巡雨。
  1. Keywords(關(guān)鍵字),keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。
  2. description(網(wǎng)站內(nèi)容描述),description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容席函。
  3. robots(機(jī)器人向?qū)?,robots用來告訴搜索機(jī)器人哪些頁面需要索引铐望,哪些頁面不需要索引。
  4. author(作者),標(biāo)注網(wǎng)頁的作者
  5. meta標(biāo)簽的generator的信息參數(shù)茂附,代表說明網(wǎng)站的采用的什么軟件制作蝌以。
  6. meta標(biāo)簽的COPYRIGHT的信息參數(shù),代表說明網(wǎng)站版權(quán)信息何之。
  7. revisit-after代表網(wǎng)站重訪,7days代表7天,依此類推咽筋。

http-equiv屬性的對(duì)應(yīng)值有:

  1. Expires(期限)溶推,可以用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期,必須到服務(wù)器上重新傳輸蒜危。
  1. Pragma(cache模式),禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容虱痕。
  2. Refresh(刷新),自動(dòng)刷新并指向新頁面。
  3. Set-Cookie(cookie設(shè)定),如果網(wǎng)頁過期辐赞,那么存盤的cookie將被刪除部翘。
  4. Window-target(顯示窗口的設(shè)定),強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示。
  5. content-Type(顯示字符集的設(shè)定),設(shè)定頁面使用的字符集响委。
  6. content-Language(顯示語言的設(shè)定)
  7. Cache-Control指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制新思。
  8. imagetoolbar指定是否顯示圖片工具欄,當(dāng)為false代表不顯示赘风,當(dāng)為true代表顯示夹囚。
  9. Content-Script-Type,W3C網(wǎng)頁規(guī)范,指明頁面中腳本的類型邀窃。

參考1:meta屬性使用
參考2:meta標(biāo)簽

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

  • X-UA-Compatible是IE8的一個(gè)專有<meta>屬性,用來指定IE8瀏覽器去模擬某個(gè)特定版本的IE瀏覽器的渲染方式荸哟。谷歌內(nèi)嵌瀏覽器框架GFC:可以讓用戶的IE瀏覽器外觀不變,但用戶在瀏覽網(wǎng)頁時(shí)瞬捕,實(shí)際上使用的是Google Chrome瀏覽器內(nèi)核鞍历,而且支持IE6、7肪虎、8等多個(gè)版本的IE瀏覽器劣砍。
  • 此標(biāo)記的作用是:在開發(fā)時(shí)指定頁面默認(rèn)首先使用GCF進(jìn)行渲染,如果未安裝GCF笋轨,看是否安裝ie8秆剪,如果是,使用最高版本IE內(nèi)核進(jìn)行渲染爵政。如果兩個(gè)條件都不滿足仅讽,此條標(biāo)記無效。
    參考:神奇的content="IE=edge,chrome=1"的meta標(biāo)簽

7 . 常見的瀏覽器有哪些钾挟,什么內(nèi)核

瀏覽器用的內(nèi)核洁灵,一般不外乎微軟的IE 內(nèi)核和webkit內(nèi)核。所謂內(nèi)核掺出,就是常駐內(nèi)存徽千、能夠快速響應(yīng)的那一部分核心代碼,非內(nèi)核代碼都是要用到時(shí)再調(diào)入內(nèi)存并執(zhí)行的汤锨。webkit內(nèi)核更小巧快速双抽,但兼容性不如IE內(nèi)核。所以有些瀏覽器是用的雙內(nèi)核闲礼,可以在高速模式和兼容模式間切換牍汹。

  • Trident內(nèi)核代表產(chǎn)品Internet Explorer铐维,又稱其為IE內(nèi)核。
    Trident(又稱為MSHTML)慎菲,是微軟開發(fā)的一種排版引擎嫁蛇。使用Trident渲染引擎的瀏覽器包括:IE、傲游露该、世界之窗瀏覽器睬棚、Avant、騰訊TT解幼、Netscape 8抑党、NetCaptor、Sleipnir书幕、GOSURF新荤、GreenBrowser和KKman等。
  • Gecko內(nèi)核代表作品Mozilla
    FirefoxGecko是一套開放源代碼的台汇、以C++編寫的網(wǎng)頁排版引擎苛骨。Gecko是最流行的排版引擎之一,僅次于Trident苟呐。使用它的最著名瀏覽器有Firefox痒芝、Netscape6至9。
  • WebKit內(nèi)核代表作品Safari牵素、Chromewebkit
    是一個(gè)開源項(xiàng)目严衬,包含了來自KDE項(xiàng)目和蘋果公司的一些組件,主要用于Mac OS系統(tǒng)笆呆,它的特點(diǎn)在于源碼結(jié)構(gòu)清晰请琳、渲染速度極快。缺點(diǎn)是對(duì)網(wǎng)頁代碼的兼容性不高赠幕,導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示俄精。主要代表作品有Safari和Google的瀏覽器Chrome。
  • Presto內(nèi)核代表作品OperaPresto
    是由Opera Software開發(fā)的瀏覽器排版引擎榕堰,供Opera 7.0及以上使用竖慧。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動(dòng)態(tài)功能逆屡,例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版圾旨。
    參考:瀏覽器內(nèi)核歷史
- 學(xué)習(xí)參考
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市魏蔗,隨后出現(xiàn)的幾起案子砍的,更是在濱河造成了極大的恐慌,老刑警劉巖莺治,帶你破解...
    沈念sama閱讀 207,248評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件挨约,死亡現(xiàn)場(chǎng)離奇詭異味混,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)诫惭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔓挖,“玉大人夕土,你說我怎么就攤上這事∥僚校” “怎么了怨绣?”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長拷获。 經(jīng)常有香客問我篮撑,道長,這世上最難降的妖魔是什么匆瓜? 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1 279
  • 正文 為了忘掉前任赢笨,我火速辦了婚禮,結(jié)果婚禮上驮吱,老公的妹妹穿的比我還像新娘茧妒。我一直安慰自己,他們只是感情好左冬,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5 374
  • 文/花漫 我一把揭開白布桐筏。 她就那樣靜靜地躺著,像睡著了一般拇砰。 火紅的嫁衣襯著肌膚如雪梅忌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,185評(píng)論 1 284
  • 那天除破,我揣著相機(jī)與錄音牧氮,去河邊找鬼。 笑死皂岔,一個(gè)胖子當(dāng)著我的面吹牛蹋笼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播躁垛,決...
    沈念sama閱讀 38,451評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼剖毯,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了教馆?” 一聲冷哼從身側(cè)響起逊谋,我...
    開封第一講書人閱讀 37,112評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎土铺,沒想到半個(gè)月后胶滋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體板鬓,經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2 325
  • 正文 我和宋清朗相戀三年究恤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了俭令。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡部宿,死狀恐怖抄腔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情理张,我是刑警寧澤赫蛇,帶...
    沈念sama閱讀 33,803評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站雾叭,受9級(jí)特大地震影響悟耘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜织狐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3 307
  • 文/蒙蒙 一暂幼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赚瘦,春花似錦粟誓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至揽咕,卻和暖如春悲酷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背亲善。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1 261
  • 我被黑心中介騙來泰國打工设易, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蛹头。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2 355
  • 正文 我出身青樓顿肺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親渣蜗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子屠尊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容