HTML (017) HTML5 程式碼規範-cnblog
阿新 • • 發佈：2022-05-13
一、使用正確的文件型別
文件型別宣告位於HTML文件的第一行：
<!DOCTYPE html>
如果你想跟其他標籤一樣使用小寫，可以使用以下程式碼：
<!doctype html>
二、使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
- 混合了大小寫的風格是非常糟糕的。
- 開發人員通常使用小寫 (類似 XHTML)。
- 小寫風格看起來更加清爽。
- 小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
三、關閉所有 HTML 元素
在 HTML5 中, 你不一定要關閉所有元素 (例如
元素)，但我們建議每個元素都要新增關閉標籤。
不推薦:
<section> <p>這是一個段落。 <p>這是一個段落。 </section>
推薦:
<section>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</section>
四、關閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關閉：
我們可以這麼寫：
也可以這麼寫：
在 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">
定義好圖片的尺寸，在載入時可以預留指定空間，減少閃爍。
<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>
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想,
菜鳥教程，學的不僅是技術，更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。</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>
十一、省略 和 ?
在標準 HTML5 中， 和 標籤是可以省略的。
以下 HTML5 文件是正確的:
<!DOCTYPE html>
<head>
<title>頁面標題</title>
</head>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
不推薦省略 和 標籤。
元素是文件的根元素，用於描述頁面的語言： ```html ``` 宣告語言是為了方便螢幕閱讀器及搜尋引擎。省略 或 在 DOM 和 XML 軟體中會崩潰。
省略 在舊版瀏覽器 (IE9)會發生錯誤。
十二、省略 ?
在標準 HTML5 中， 標籤是可以省略的。
預設情況下，瀏覽器會將 之前的內容新增到一個預設的 元素上。
<!DOCTYPE html>
<html>
<title>頁面標題</title>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
注意：現在省略 head 標籤還不推薦使用。
十三、元資料
HTML5 中