HTML(5) 代碼規(guī)范

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>

非常糟糕:

</SECTION>

推薦:

<body>

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

菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。

菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。</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> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

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

省略 <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)題名描述了頁面的主題:

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

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

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

<!--

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

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

-->

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

樣式表

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

短的規(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;

}

將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來縮進(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

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

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

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

實(shí)例

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)一使用小寫的文件名。

文件擴(kuò)展名

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

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

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

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

區(qū)別在于：

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

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

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

如果一個(gè) URL 沒有指定文件名 (如 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，我們一起飛！

動(dòng)距離

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn)：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

第二個(gè)屬性是對HTML頁面的特殊擴(kuò)展,提供了對<body>標(biāo)簽的直接訪問(body標(biāo)記)。

窗口尺寸、工作區(qū)尺寸

可視區(qū)尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫法：

document.documentElement.clientWidth || document.body.clientWidth;

可視區(qū)尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性寫法：

document.documentElement.clientHeight || document.body.clientHeight;

獲取瀏覽器窗口水平滾動(dòng)條的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性寫法：

document.documentElement.scrollLeft || document.body.scrollLeft;

獲取瀏覽器窗口垂直滾動(dòng)條的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已經(jīng)支持documentElement對象的各種屬性, 而

以上兼容性寫法不影響所獲的屬性值

編寫自定義函數(shù)：

// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 獲取瀏覽器窗口水平滾動(dòng)條的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 獲取瀏覽器窗口垂直滾動(dòng)條的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響

易的CSS3炫酷3D滾動(dòng)預(yù)覽特效， 3D旋轉(zhuǎn)展示！

效果圖：

實(shí)現(xiàn)代碼：

html:

css:

javascript：

在線咨詢

上一篇：face-api.js：在瀏覽器中進(jìn)行人臉識(shí)別的JavaScript接口
下一篇：vue實(shí)戰(zhàn)開發(fā)010:JS實(shí)現(xiàn)字體上下無縫滾動(dòng)效果

您的項(xiàng)目需求

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

整合營銷服務(wù)商

HTML(5) 代碼規(guī)范

您的項(xiàng)目需求