HTML5 程式碼規範
使用正確的文件類型
文件類型宣告位於HTML文件的第一行:
<!DOCTYPE html>
如果你想跟其他標籤一樣使用小寫,可以使用以下程式碼:
<!doctype html>
#使用小寫元素名稱
HTML5 元素名稱可以使用大寫和小寫字母。
推薦使用小寫字母:
混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更清爽。
小寫字母容易寫。
<section>
<p>這是一個段落。 </p>
</section>
#關閉所有HTML 元素
在HTML5 中, 你不一定要關閉所有元素(例如<p> 元素),但我們建議每個元素都要加上關閉標籤。
<section>
<p>這是一個段落。 </p>
<p>這是一個段落。 </p>
</section>
#關閉空的HTML 元素
在HTML5 中, 空的HTML 元素也不一定關閉:
我們可以這麼寫:
<meta charset="utf-8">
也可以這麼寫:
< ;meta charset="utf-8" />
在XHTML 和XML 中斜線(/) 是必須的。
如果你期望 XML 軟體使用你的頁面,使用這個風格是非常好的。
使用小寫屬性名稱
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習慣。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更清爽。
小寫字母容易寫。
<div class="menu">
#屬性值
HTML5 屬性值可以不用引號。
屬性值我們建議使用引號:
如果屬性值含有空格需要使用引號。
混合風格不推薦的,建議統一風格。
屬性值使用引號易於閱讀。
<table class="table striped">
#圖片屬性
圖片通常使用 alt 屬性。 當圖片不能顯示時,它能取代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸,在載入時可以預留指定空間,減少閃爍。
<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>php中文網</h1>
<h2></h2>
<p>php中文網,學的不只是技術,更是夢想。
php中文網,學的不只是技術,更是夢想。
php中文網,學的不只是技術,更是夢想。
php中文網,學的不只是技術,更是夢想。 </p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>#lt <th>Description</th>#1; ;tr>
<td>A</td>
<td>Description of A</td>
<>#lttd;/td>
;B</td>
<td>Description of B</td>
</tr>
</table>
列表範例:
#列表列表範例#<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
<li>Tokyo</li>
##省略<html> 和<body>?
在標準HTML5 中, < html> 和<body> 標籤是可以省略的。
以下 HTML5 文件是正確的:
<!DOCTYPE html>
<head>
<title>頁名</title>
</head>
<h1>這是一個標題</h1>
<p>這是一個段落。 </p>
不建議省略 <html> 和 <body> 標籤。
#省略<head>?
在標準HTML5 中, <head>標籤是可以省略的。
預設情況下,瀏覽器會將 <body> 之前的內容加入到一個預設的 <head> 元素上。
省略 head 標籤還不建議使用。
##HTML5 中<title> 元素是必須的,標題名描述了頁面的主題:
<title>php中文網</title>
標題和語言可以讓搜尋引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8">
<# ;title>php中文網</title>
<!--
這是較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
長評論第一個字元縮排兩個空格,更容易閱讀。
樣式表
樣式表使用簡潔的語法格式( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
#短的規則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans- serif;
font-size: 16em;
color: black;
}
將左花括號與選取者放在同一行。
左花括號與選擇器間新增以空格。
使用兩個空格來縮排。
冒號與屬性值之間新增已空格。
逗號和符號之後使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字元。
在逗號和分號後面加上空格是常用的一個規則。
在HTML 中載入JavaScript
使用簡潔的語法載入外部的腳本檔( type 屬性不是必須的):
<script src="myscript.js">
使用JavaScript 存取HTML 元素
一個糟糕的HTML 格式可能會導致JavaScript 執行錯誤。
以下兩個JavaScript 語句會輸出不同結果:
實例
var obj = getElementById("Demo")
var obj = getElementById(" demo")
試試看»
HTML 中JavaScript 盡量使用相同的命名規則。
使用小寫檔名
大多 Web 伺服器 (Apache, Unix) 對大小寫敏感: london.jpg 不能透過 London.jpg 存取。
其他 Web 伺服器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以透過 London.jpg 或 london.jpg 存取。
你必須保持統一的風格,我們建議統一使用小寫的檔案名稱。
#HTML 檔案後綴可以是 .html (或r . htm)。
CSS 檔案後綴是 .css 。
JavaScript 檔案後綴是 .js 。
.htm 和 .html 的區別
.htm 和 .html 的副檔名檔案本質上是沒有區別的。瀏覽器和 Web 伺服器都會把它們當作 HTML 檔案來處理。
差異在於:
.htm 應用在早期 DOS 系統,系統現在或只能有三個字元。
在 Unix 系統中後綴沒有特別限制,一般用 .html。
技術上差異
如果一個 URL 沒有指定檔案名稱 (如 //m.sbmmt.com/css/), 伺服器會傳回預設的檔案名稱。通常預設檔名為 index.html, index.htm, default.html, 和 default.htm。
如果伺服器只配置了 "index.html" 作為預設文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是,通常伺服器可以設定多個預設文件,你可以根據需要設定預設文件嗎。
不管怎樣,HTML 完整的字尾是 ".html"。