前寫html或者Jsp頁面,從來不注意doctype的聲明,也不太明白doctype的作用。
一般都是這樣寫的
<html> <body> <h1>我的第一個標(biāo)題</h1> <p>我的第一個段落。</p> </body> </html>
直到最近碰到了一個非常奇葩的bug:
某一個頁面在IE7和8,Chrome,ff等下正常,但是在IE9下顯示有問題,我就開始找啊找,各種調(diào)試,各種log,終于在httpWatch里邊找到了答案:DOCTYPE未聲明。于是我給頁面添加了<!DOCTYPE html>,果然奏效了。
哪么<!DOCTYPE>是何方神圣,馬上開始科譜
來自于w3school的文檔解釋是這樣的
定義和用法
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽;它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,因為 HTML 4.01 基于 SGML。DTD 規(guī)定了標(biāo)記語言的規(guī)則,這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML,所以不需要引用 DTD。
提示:請始終向 HTML 文檔添加 <!DOCTYPE> 聲明,這樣瀏覽器才能獲知文檔類型。
document.compatMode用來判斷當(dāng)前瀏覽器采用的渲染方式。
官方解釋:
BackCompat:標(biāo)準(zhǔn)兼容模式關(guān)閉。
CSS1Compat:標(biāo)準(zhǔn)兼容模式開啟。
這個屬性會被瀏覽器識別并使用,但是如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認(rèn)就是BackCompat,
這也就是惡夢的開始 ,瀏覽器會按照自己的方式解析渲染頁面,那么,在不同的瀏覽器就會顯示不同的樣式。
如果你的頁面添加了<!DOCTYPE html>那么,那么就開啟了標(biāo)準(zhǔn)模式,那么瀏覽器就得老老實實的按照W3C的標(biāo)準(zhǔn)解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
<!DOCTYPE html>使用也很簡單,就是在你的html頁面的第一行添加"<!DOCTYPE html>"一行代碼就可以了
<!DOCTYPE html> <html> <head> <title>文檔的標(biāo)題</title> </head> <body> 文檔的內(nèi)容...... </body> </html>
jsp的話,添加在<%@ page %>的下一行
不用區(qū)分大小寫哦。
來看下常用的標(biāo)簽列表,后文會一一介紹:
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不區(qū)分大小寫 -->
<html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
<meta charset='utf-8'> <!-- 聲明文檔使用的字符編碼 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優(yōu)先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超過150個字符" /> <!-- 頁面描述 -->
<meta name="keywords" content=""/> <!-- 頁面關(guān)鍵詞 -->
<meta name="author" content="name, email@gmail.com" /> <!-- 網(wǎng)頁作者 -->
<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->
<!-- 為移動設(shè)備添加 viewport -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設(shè)備 begin -->
<meta name="apple-mobile-web-app-title" content="標(biāo)題"> <!-- 添加到主屏后的標(biāo)題(iOS 6 新增) -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 設(shè)置狀態(tài)欄的背景顏色,只有在 `"apple-mobile-web-app-capable" content="yes"` 時生效 -->
<meta name="format-detection" content="telephone=no" /> <!-- 禁止數(shù)字識自動別為電話號碼 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) -->
<!-- iOS 圖標(biāo) begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默認(rèn) 57x57 像素,必須有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以沒有,但推薦有 -->
<!-- iOS 圖標(biāo) end -->
<!-- iOS 啟動畫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 豎屏 768 x 1004(標(biāo)準(zhǔn)分辨率) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 豎屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 橫屏 1024x748(標(biāo)準(zhǔn)分辨率) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 橫屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
<!-- iOS 啟動畫面 end -->
<!-- iOS 設(shè)備 end -->
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標(biāo) -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
<title>標(biāo)題</title>
</head>
基本標(biāo)簽
使用 HTML5 doctype,不區(qū)分大小寫。
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不區(qū)分大小寫 -->
聲明文檔使用的字符編碼
<meta charset='utf-8'> <!-- 聲明文檔使用的字符編碼 -->
更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa
很少情況才需要加地區(qū)代碼,通常是為了強調(diào)不同地區(qū)漢語使用差異,例如:
<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實是同一種水果。只是大陸和臺灣稱謂不同,且新加坡、馬來西亞一帶的稱謂也是不同的,稱之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。
</p>
優(yōu)先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 優(yōu)先使用 IE 最新版本和 Chrome -->
SEO 優(yōu)化
頁面描述
每個網(wǎng)頁都應(yīng)有一個不超過 150 個字符且能準(zhǔn)確反映網(wǎng)頁內(nèi)容的描述標(biāo)簽。文檔
<meta name="description" content="不超過150個字符" /> <!-- 頁面描述 -->
頁面關(guān)鍵詞
<meta name="keywords" content=""/> <!-- 頁面關(guān)鍵詞 -->
定義頁面標(biāo)題
<title>標(biāo)題</title>
定義網(wǎng)頁作者
<meta name="author" content="name, email@gmail.com" /> <!-- 網(wǎng)頁作者 -->
定義網(wǎng)頁搜索引擎索引方式,robotterms是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。文檔
<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->
可選標(biāo)簽
為移動設(shè)備添加 viewport
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
content 參數(shù):
iOS 設(shè)備
添加到主屏后的標(biāo)題(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="標(biāo)題"> <!-- 添加到主屏后的標(biāo)題(iOS 6 新增) -->
是否啟用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否啟用 WebApp 全屏模式 -->
設(shè)置狀態(tài)欄的背景顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 設(shè)置狀態(tài)欄的背景顏色,只有在 `"apple-mobile-web-app-capable" content="yes"` 時生效 -->
content 參數(shù):
如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。
如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個屏幕,頂部會被狀態(tài)欄遮擋。
禁止數(shù)字識自動別為電話號碼
<meta name="format-detection" content="telephone=no" /> <!-- 禁止數(shù)字識自動別為電話號碼 -->
iOS 圖標(biāo)
rel 參數(shù):
apple-touch-icon 圖片自動處理成圓角和高光等效果。
apple-touch-icon-precomposed 禁止系統(tǒng)自動添加效果,直接顯示設(shè)計原圖。
iPhone 和 iTouch,默認(rèn) 57x57 像素,必須有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默認(rèn) 57x57 像素,必須有 -->
iPad,72x72 像素,可以沒有,但推薦有
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad,72x72 像素,可以沒有,但推薦有 -->
Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 -->
Retina iPad,144x144 像素,可以沒有,但推薦有
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以沒有,但推薦有 -->
iOS 啟動畫面
官方文檔:https://developer.apple.com/library/ios/qa/qa1686/_index.html
參考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
iPad 的啟動畫面是不包括狀態(tài)欄區(qū)域的。
iPad 豎屏 768 x 1004(標(biāo)準(zhǔn)分辨率)
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 豎屏 768 x 1004(標(biāo)準(zhǔn)分辨率) -->
iPad 豎屏 1536x2008(Retina)
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 豎屏 1536x2008(Retina) -->
iPad 橫屏 1024x748(標(biāo)準(zhǔn)分辨率)
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 橫屏 1024x748(標(biāo)準(zhǔn)分辨率) -->
iPad 橫屏 2048x1496(Retina)
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 橫屏 2048x1496(Retina) -->
iPhone 和 iPod touch 的啟動畫面是包含狀態(tài)欄區(qū)域的。
iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率) -->
iPhone/iPod Touch 豎屏 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari)文檔
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) -->
Android
Android Lollipop 中的 Chrome 39 增加 theme-color meta 標(biāo)簽,用來控制選項卡顏色。
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
<meta name="theme-color" content="#db5945">
Windows 8
Windows 8 磁貼顏色
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁貼顏色 -->
Windows 8 磁貼圖標(biāo)
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁貼圖標(biāo) -->
其他
添加 RSS 訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->
添加 favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
禁止 Chrome 瀏覽器中自動提示翻譯
TML 代碼約定
很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。
在2000年至2010年,許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對于 HTML5 ,我們應(yīng)該形成比較好的代碼規(guī)范,以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行:
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫,可以使用以下代碼:
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母:
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個段落。
<p>這是一個段落。
</section>
推薦:
<section>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉:
我們可以這么寫:
<meta charset="utf-8">
也可以這么寫:
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面,使用這種風(fēng)格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習(xí)慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<div CLASS="menu">
推薦:
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風(fēng)格不推薦的,建議統(tǒng)一風(fēng)格。
屬性值使用引號易于閱讀。
以下實例屬性值包含空格,沒有使用引號,所以不能起作用:
<table class=table striped>
以下使用了雙引號,是正確的:
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸,在加載時可以預(yù)留指定空間,減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器,左右滾動代碼是不方便的。
每行代碼盡量少于 80 個字符。
空行和縮進
不要無緣無故添加空行。
為每個邏輯功能塊添加空行,這樣更易于閱讀。
縮進使用兩個空格,不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想,
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢想。</p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中, <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實例:
<!DOCTYPE html>
<head>
<title>頁面標(biāo)題</title>
</head>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素,用于描述頁面的語言:
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發(fā)生錯誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中, <head>標(biāo)簽是可以省略的。
默認(rèn)情況下,瀏覽器會將 <body> 之前的內(nèi)容添加到一個默認(rèn)的 <head> 元素上。
實例
<!DOCTYPE html>
<html>
<title>頁面標(biāo)題</title>
<body>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落。</p>
</body>
</html>
嘗試一下 ?
現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的,標(biāo)題名描述了頁面的主題:
<title>菜鳥教程</title>
標(biāo)題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫:
<!--
這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->
長評論第一個字符縮進兩個空格,更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。
在逗號和分號后添加空格是常用的一個規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導(dǎo)致 JavaScript 執(zhí)行錯誤。
以下兩個 JavaScript 語句會輸出不同結(jié)果:
實例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問 JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風(fēng)格,我們建議統(tǒng)一使用小寫的文件名。
文件擴展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會把它們當(dāng)作 HTML 文件來處理。
區(qū)別在于:
.htm 應(yīng)用在早期 DOS 系統(tǒng),系統(tǒng)現(xiàn)在或者只能有三個字符。
在 Unix 系統(tǒng)中后綴沒有特別限制,一般用 .html。
技術(shù)上區(qū)別
如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是,通常服務(wù)器可以設(shè)置多個默認(rèn)文件,你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣,HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。