整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

          前寫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> 聲明,這樣瀏覽器才能獲知文檔類型。

          下面說人話吧

          • 標(biāo)簽的作用

          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>的作用。

          • 標(biāo)簽的使用

          <!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

          • 簡體中文
          • <html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa -->
          • 繁體中文
          • <html lang="zh-cmn-Hant"> <!-- 更加標(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ù):

          • 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)刪除),可以在頁面加載時最小化上下狀態(tài)欄。這是一個布爾值,可以直接這樣寫:<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

          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ù):

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

          如果設(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,我們一起飛!


          主站蜘蛛池模板: 亚洲色精品VR一区区三区| 国产麻豆精品一区二区三区v视界 国产美女精品一区二区三区 | 久久无码人妻精品一区二区三区| 日韩精品乱码AV一区二区| 视频一区二区在线观看| 日韩av片无码一区二区不卡电影 | 无码国产精品一区二区免费I6| 国产精品伦一区二区三级视频| 一区二区三区在线视频播放| 中文字幕AV无码一区二区三区| 亚洲日本一区二区三区| 久久久91精品国产一区二区三区 | 视频在线观看一区二区三区| 一区二区亚洲精品精华液| 精品一区二区三区东京热| 亚洲第一区香蕉_国产a| 少妇无码一区二区三区免费| 日韩电影一区二区三区| 香蕉久久av一区二区三区| 亚洲电影一区二区三区| 免费精品一区二区三区第35| 国产成人一区二区三区视频免费| 中文字幕在线无码一区二区三区| 中文国产成人精品久久一区| 精品国产不卡一区二区三区| 中文字幕无线码一区| 国产免费一区二区三区在线观看| 国产在线不卡一区二区三区| 在线观看午夜亚洲一区| 日韩精品无码免费一区二区三区| 国产精品视频一区二区三区经| 国产一区二区三区影院| 狠狠做深爱婷婷久久综合一区| 国产一区二区三区在线免费| 亚洲一区无码精品色| 国产激情视频一区二区三区| 99久久精品日本一区二区免费| 无码中文字幕人妻在线一区二区三区 | 日韩高清一区二区三区不卡| 国产激情一区二区三区在线观看| 美女福利视频一区二区|