Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別棺耍?

Doctype的作用贡未?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別??

Doctype是document type(文檔類型)的簡(jiǎn)寫,用來告訴瀏覽器的解析器使用哪種HTML或XHTML規(guī)范解析頁面蒙袍。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)俊卤。文檔類型有3種:Strict(嚴(yán)格)、Transitional(過渡)以及Frameset(基于框架)害幅。標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行消恍。在兼容模式中,頁面以寬松的向后兼容的方式顯示以现,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作狠怨。簡(jiǎn)單的說佩抹,就是盡可能的能顯示東西給用戶看。

具體的說二者的不同在于:

1.width不同

在嚴(yán)格模式中 :width是內(nèi)容寬度 取董,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +? margin-right;

在兼容模式中 :width則是元素的實(shí)際寬度 ,內(nèi)容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

2.兼容模式下可設(shè)置百分比的高度和行內(nèi)元素的高寬

在Standards模式下无宿,給span等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效茵汰,而在兼容模式下,則會(huì)生效孽鸡。

在standards模式下蹂午,一個(gè)元素的高度是由其包含的內(nèi)容來決定的,如果父元素沒有設(shè)置高度彬碱,子元素設(shè)置一個(gè)百分比的高度是無效的豆胸。

3.用margin:0 auto設(shè)置水平居中在IE下會(huì)失效

使用margin:0 auto在standards模式下可以使元素水平居中,但在兼容模式下卻會(huì)失效(用text-align屬性解決)

body{text-align:center};#content{text-align:left}

4.兼容模式下Table中的字體屬性不能繼承上層的設(shè)置巷疼,white-space:pre會(huì)失效晚胡,設(shè)置圖片的padding會(huì)失效

HTML5 為什么只需要<!DOCTYPE HTML>呢?

DTD的是W3C所發(fā)布的一個(gè)文檔類型定義嚼沿,簡(jiǎn)單的說估盘,就是告訴瀏覽器你的這個(gè)HTML,是根據(jù)那個(gè)標(biāo)準(zhǔn)寫的骡尽,解析的時(shí)候用哪個(gè)標(biāo)準(zhǔn)解析遣妥。

HTML5 不基于 SGML,因此不需要對(duì)DTD進(jìn)行引用攀细,但是需要doctype來規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行)箫踩。

而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型谭贪。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末境钟,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子故河,更是在濱河造成了極大的恐慌吱韭,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鱼的,死亡現(xiàn)場(chǎng)離奇詭異理盆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)凑阶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門猿规,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宙橱,你說我怎么就攤上這事姨俩≌喊危” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵环葵,是天一觀的道長(zhǎng)调窍。 經(jīng)常有香客問我,道長(zhǎng)张遭,這世上最難降的妖魔是什么邓萨? 我笑而不...
    開封第一講書人閱讀 58,963評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮菊卷,結(jié)果婚禮上缔恳,老公的妹妹穿的比我還像新娘。我一直安慰自己洁闰,他們只是感情好歉甚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評(píng)論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扑眉,像睡著了一般纸泄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上腰素,一...
    開封第一講書人閱讀 51,763評(píng)論 1 307
  • 那天刃滓,我揣著相機(jī)與錄音,去河邊找鬼耸弄。 笑死咧虎,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的计呈。 我是一名探鬼主播砰诵,決...
    沈念sama閱讀 40,468評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼捌显!你這毒婦竟也來了茁彭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤扶歪,失蹤者是張志新(化名)和其女友劉穎理肺,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體善镰,經(jīng)...
    沈念sama閱讀 45,850評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡妹萨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了炫欺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乎完。...
    茶點(diǎn)故事閱讀 40,144評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖品洛,靈堂內(nèi)的尸體忽然破棺而出树姨,到底是詐尸還是另有隱情摩桶,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評(píng)論 5 346
  • 正文 年R本政府宣布帽揪,位于F島的核電站硝清,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏转晰。R本人自食惡果不足惜耍缴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挽霉。 院中可真熱鬧,春花似錦变汪、人聲如沸侠坎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽实胸。三九已至,卻和暖如春番官,著一層夾襖步出監(jiān)牢的瞬間庐完,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評(píng)論 1 272
  • 我被黑心中介騙來泰國打工徘熔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留门躯,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,415評(píng)論 3 373
  • 正文 我出身青樓酷师,卻偏偏與公主長(zhǎng)得像讶凉,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子山孔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評(píng)論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案懂讯? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • ①<!DOCTYPE>告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔褐望。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼...
    6659a0f02826閱讀 866評(píng)論 0 0
  • 1. 前言 前端圈有個(gè)“梗”:在面試時(shí)串前,問個(gè)css的position屬性能刷掉一半人瘫里,其中不乏工作四五年的同學(xué)。在...
    YjWorld閱讀 4,458評(píng)論 5 15
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,314評(píng)論 2 66
  • --2001-- 2001年,你鄭重其事的收拾好書包玩荠,坐在媽媽的自行車后座漆腌,不再是幼兒園的小朋友了贼邓,你成為了一名優(yōu)...
    啊哦呀哈閱讀 524評(píng)論 0 0