HTML中不起眼的DOCTYPE標(biāo)記真的很重要

前寫(xiě)html或者Jsp頁(yè)面，從來(lái)不注意doctype的聲明，也不太明白doctype的作用。

一般都是這樣寫(xiě)的

<html>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>

直到最近碰到了一個(gè)非常奇葩的bug：

某一個(gè)頁(yè)面在IE7和8，Chrome，ff等下正常，但是在IE9下顯示有問(wèn)題，我就開(kāi)始找啊找，各種調(diào)試，各種log，終于在httpWatch里邊找到了答案：DOCTYPE未聲明。于是我給頁(yè)面添加了<!DOCTYPE html>,果然奏效了。

哪么<!DOCTYPE>是何方神圣，馬上開(kāi)始科譜

來(lái)自于w3school的文檔解釋是這樣的

定義和用法

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。

<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因?yàn)?HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語(yǔ)言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：請(qǐng)始終向 HTML 文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類(lèi)型。

下面說(shuō)人話吧

標(biāo)簽的作用

document.compatMode用來(lái)判斷當(dāng)前瀏覽器采用的渲染方式。

官方解釋?zhuān)?/p>

BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。

CSS1Compat：標(biāo)準(zhǔn)兼容模式開(kāi)啟。

這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用，但是如果你的頁(yè)面沒(méi)有DOCTYPE的聲明，那么compatMode默認(rèn)就是BackCompat,

這也就是惡夢(mèng)的開(kāi)始，瀏覽器會(huì)按照自己的方式解析渲染頁(yè)面，那么，在不同的瀏覽器就會(huì)顯示不同的樣式。

如果你的頁(yè)面添加了<!DOCTYPE html>那么，那么就開(kāi)啟了標(biāo)準(zhǔn)模式，那么瀏覽器就得老老實(shí)實(shí)的按照W3C的標(biāo)準(zhǔn)解析渲染頁(yè)面，這樣一來(lái)，你的頁(yè)面在所有的瀏覽器里顯示的就都是一個(gè)樣子了。

這就是<!DOCTYPE html>的作用。

標(biāo)簽的使用

<!DOCTYPE html>使用也很簡(jiǎn)單，就是在你的html頁(yè)面的第一行添加"<!DOCTYPE html>"一行代碼就可以了

<!DOCTYPE html>
<html>
<head>
<title>文檔的標(biāo)題</title>
</head>
<body>
文檔的內(nèi)容......
</body>
</html>

jsp的話，添加在<%@ page %>的下一行

不用區(qū)分大小寫(xiě)哦。

來(lái)看下常用的標(biāo)簽列表，后文會(huì)一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標(biāo)簽

使用 HTML5 doctype，不區(qū)分大小寫(xiě)。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 http://zhi.hu/XyIa

簡(jiǎn)體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區(qū)代碼，通常是為了強(qiáng)調(diào)不同地區(qū)漢語(yǔ)使用差異，例如：

<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實(shí)是同一種水果。只是大陸和臺(tái)灣稱(chēng)謂不同，且新加坡、馬來(lái)西亞一帶的稱(chēng)謂也是不同的，稱(chēng)之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。

</p>

優(yōu)先使用 IE 最新版本和 Chrome

SEO 優(yōu)化

頁(yè)面描述

每個(gè)網(wǎng)頁(yè)都應(yīng)有一個(gè)不超過(guò) 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁(yè)內(nèi)容的描述標(biāo)簽。文檔

頁(yè)面關(guān)鍵詞

定義頁(yè)面標(biāo)題

定義網(wǎng)頁(yè)作者

定義網(wǎng)頁(yè)搜索引擎索引方式，robotterms是一組使用英文逗號(hào)「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標(biāo)簽

為移動(dòng)設(shè)備添加 viewport

content 參數(shù)：

width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁(yè)面加載時(shí)最小化上下?tīng)顟B(tài)欄。這是一個(gè)布爾值，可以直接這樣寫(xiě)：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設(shè)備

添加到主屏后的標(biāo)題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設(shè)置狀態(tài)欄的背景顏色

content 參數(shù)：

default 默認(rèn)值。
black 狀態(tài)欄背景是黑色。
black-translucent 狀態(tài)欄背景是黑色半透明。

如果設(shè)置為 default 或 black ,網(wǎng)頁(yè)內(nèi)容從狀態(tài)欄底部開(kāi)始。

如果設(shè)置為 black-translucent ,網(wǎng)頁(yè)內(nèi)容充滿整個(gè)屏幕，頂部會(huì)被狀態(tài)欄遮擋。

禁止數(shù)字識(shí)自動(dòng)別為電話號(hào)碼

iOS 圖標(biāo)

rel 參數(shù)：

apple-touch-icon 圖片自動(dòng)處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖。

iPhone 和 iTouch，默認(rèn) 57x57 像素，必須有

iPad，72x72 像素，可以沒(méi)有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒(méi)有，但推薦有

Retina iPad，144x144 像素，可以沒(méi)有，但推薦有

iOS 啟動(dòng)畫(huà)面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的啟動(dòng)畫(huà)面是不包括狀態(tài)欄區(qū)域的。

iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標(biāo)準(zhǔn)分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動(dòng)畫(huà)面是包含狀態(tài)欄區(qū)域的。

iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率)

iPhone/iPod Touch 豎屏 640x960 (Retina)

iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）文檔

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標(biāo)簽，用來(lái)控制選項(xiàng)卡顏色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標(biāo)

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動(dòng)提示翻譯

TML 代碼約定

很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范。

而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類(lèi)型

文檔類(lèi)型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：

<!doctype html>

使用小寫(xiě)元素名

HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。

推薦使用小寫(xiě)字母：

混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。

不推薦:

</SECTION>

非常糟糕:

</SECTION>

推薦:

<body>

<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>

</body>

表格實(shí)例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實(shí)例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。

以下 HTML5 文檔是正確的:

實(shí)例:

<!DOCTYPE html>

<head>

</head>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標(biāo)簽。

<html> 元素是文檔的根元素，用于描述頁(yè)面的語(yǔ)言：

<!DOCTYPE html>

聲明語(yǔ)言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。

省略 <head>?

在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。

默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。

實(shí)例

<!DOCTYPE html>

<html>

<body>

</body>

</html>

嘗試一下 ?

	現(xiàn)在省略 head 標(biāo)簽還不推薦使用。

元數(shù)據(jù)

HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題:

標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫(xiě)在  中:

比較長(zhǎng)的評(píng)論可以在  中分行寫(xiě)：

<!--

這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

這是一個(gè)較長(zhǎng)評(píng)論這是一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

-->

長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。

樣式表

樣式表使用簡(jiǎn)潔的語(yǔ)法格式 ( type 屬性不是必須的):

短的規(guī)則可以寫(xiě)成一行:

p.into {font-family: Verdana; font-size: 16em;}

長(zhǎng)的規(guī)則可以寫(xiě)成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來(lái)縮進(jìn)。
冒號(hào)與屬性值之間添加已空格。
逗號(hào)和符號(hào)之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字符。

	在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。

在 HTML 中載入 JavaScript

使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問(wèn) HTML 元素

一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。

以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:

實(shí)例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪問(wèn) JavaScript 代碼規(guī)范。

使用小寫(xiě)文件名

大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫(xiě)敏感： london.jpg 不能通過(guò) London.jpg 訪問(wèn)。

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn)。

你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫(xiě)的文件名。

文件擴(kuò)展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區(qū)別

.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。

區(qū)別在于：

.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。

在 Unix 系統(tǒng)中后綴沒(méi)有特別限制，一般用 .html。

技術(shù)上區(qū)別

如果一個(gè) URL 沒(méi)有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：Mvc-AspNet Mvc選擇題（50題）
下一篇：HTML基礎(chǔ)總結(jié)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML中不起眼的DOCTYPE標(biāo)記 真的很重要

下面說(shuō)人話吧

您的項(xiàng)目需求

HTML中不起眼的DOCTYPE標(biāo)記真的很重要