HTML(5) 程式碼規範


HTML 程式碼約定

許多 Web 開發人員對 HTML 的程式碼規格所知甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規格。

而針對於 HTML5 ，我們應該形成比較好的程式碼規範，以下提供了幾個規範的建議。

使用正確的文件類型

文件類型宣告位於HTML文件的第一行：

##<!DOCTYPE html>
#如果你想跟其他標籤一樣使用小寫，可以使用以下程式碼：

<!doctype html#>
使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

建議使用小寫字母：

  • 混合了大小寫的風格是非常糟糕的。

  • 開發人員通常使用小寫 (類似 XHTML)。

  • 小寫風格看起來更清爽。

  • 小寫字母容易寫。

不建議:

<SECTION>
<p>這是一個段落。 </p>
#<#/SECTION>
非常糟糕:

<#Section>  
<p>這是一個段落。 </p>
#<#/SECTION>
推薦:

<#section>  
<p>這是一個段落。 </p>
#<#/section>

關閉所有 HTML 元素

在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要添加關閉標籤。

不建議:

<section>
  <p>這是一個段落。
  <p>這是一個段落。
   </section>

推薦:




# <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">

建議：

<div class="menu">

#屬性值

HTML5 屬性值可以不用引號。

屬性值我們推薦使用引號:

  • 如果屬性值含有空格需要使用引號。

  • 混合風格不推薦的，建議統一風格。

  • 屬性值使用引號易於閱讀。

以下實例屬性值包含空格，沒有使用引號，所以不能起作用:

<#table class=table striped>

#以下使用了雙引號，是正確的：

<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#>HTML</h2#>
   
  <p>
    php中文網，學的不僅是技術，更是夢想。
    php中文網，學的不只是技術，更是夢想。
   php中文網，學的不只是技術，更是夢想,
       php中文網，學的不僅是技術，更是夢想。
  </p>

#<#/body>

推薦:

#<body##>

<h1>php中文網</h1>

<h2#></h2>    
<p>php中文網，學的不只是技術，更是夢想。 php中文網，學的不只是技術，更是夢想。
php中文網，學的不只是技術，更是夢想。
php中文網，學的不只是技術，更是夢想。
</p>

#</body> ;

表格實例：

##<table> 
<tr>   
<第#>名稱</第#>   
<第#>描述< /th##>         <
/tr>  <
#tr>     <
td>A</td>     <
#td>A的描述</td#         <
/tr>  <
#tr>     <
td>B</td>     <
#td>B的描述</td>  <
/tr><
/表格>##

列表實例:

<ol#>
  <li>London</li>
  < li>Paris</li>##     
<li>Tokyo</li>
#</ol>
省略<html> 和<body>?

在標準HTML5 中， <html> 和<body> 標籤是可以省略的。

以下HTML5 文件是正確的:

實例

#
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

運行實例»##點擊"運行實例" 按鈕查看線上實例

不建議省略<html> 和<body> 標籤。

<html> 元素是文件的根元素，用來描述頁面的語言：

<
!DOCTYPE html><
html lang="zh">
聲明語言是為了方便螢幕閱讀器及搜尋引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟體中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標籤是可以省略的。

預設情況下，瀏覽器會將 <body> 之前的內容加入到一個預設的 <head> 元素上。

實例

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO。";
</script>

</body>
</html>

運行實例»
點擊"運行實例" 按鈕查看線上實例

元資料

HTML5 中<title> 元素是必須的，標題名稱描述了頁面的主題:

< title>php中文網<#/title#>








標題和語言可以讓搜尋引擎很快了解你頁面的主題:
<

!DOCTYPE

html

#>

<html lang="zh">#<head
#>

##################################### ####  ###<######meta### ###charset=######"UTF-8"######>######  # ##<######title######>###php中文網###<#######/title#######>################################################################################################# #####<######/head######>################HTML 註解######註解可以寫在<!-- 和--> 中:############<!-- 這是註解-->############比較長的評論可以在<!-- 和--> 中分行寫：#############<!-- ###  這是一篇較長評論。 這是  一個較長評論。這是一個較長評論。 ###  這是  一個較長評論 這是一個較長評論。 這是  一個較長評論。 ###-->############長評論第一個字元縮排兩個空格，更容易閱讀。 #########樣式表######樣式表使用簡潔的語法格式( 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;

    • }

  • 將左花括號與選擇器放在同一行。器間新增以空格。

    • #逗號和符號之後使用一個空格。
  • 只有屬性值包含空格時才使用引號。個字元。

    • #

    在HTML 中載入JavaScript

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

    < ;script src="myscript.js">
    ##使用JavaScript 存取HTML 元素

    一個糟糕的HTML 格式可能會導致JavaScript 執行錯誤。

    以下兩個JavaScript 語句會輸出不同結果:

    實例

    #
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>
    ##執行實例»
    點選"執行實例" 按鈕查看線上實例

    HTML  中JavaScript 盡量使用相同的命名規則。

    存取 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 沒有指定檔案名稱 (如 http://www.php.cn/css/), 伺服器會傳回預設的檔案名稱。通常預設檔名為 index.html, index.htm, default.html, 和 default.htm。

    如果伺服器只配置了 "index.html" 作為預設文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

    但是，通常伺服器可以設定多個預設文件，你可以根據需要設定預設文件嗎。

    不管怎樣，HTML 完整的字尾是 ".html"。

    ←

    PHP中文網

    首頁首頁課程課程文章文章問答問答詞典詞典手册手册下載下載搜尋搜尋APP下載 APP下載
Note現在省略head 標籤還不建議使用。