HTML(5)樣式指南和代碼約定-4.6HTML5

HTML 代碼約定

web 開發(fā)者常常不確定在 HTML 中使用的代碼樣式和語法。

創(chuàng)新互聯建站主要從事網站設計制作、成都網站制作、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務耀州,10余年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220

在 2000 年至 2010 年之間，許多 web 開發(fā)者從 HTML 轉換為 XHTML。

通過 XHTML，開發(fā)者不得不編寫有效的“格式良好的”代碼。

HTML5 在代碼驗證時會更寬松一點。

通過 HTML5，您必須創(chuàng)建屬于自己的最佳實踐、樣式指南和代碼約定。

智能且有未來保證

對樣式的合乎邏輯的使用，可以令其他人更容易理解和使用您的 HTML。

在未來，諸如 XML 閱讀器之類的程序，也許需要閱讀您的 HTML。

使用格式良好的“近似 XHTML 的”語法，能夠更智能。

注釋：請始終保持您的樣式智能、整潔、純凈、格式良好。

請使用正確的文檔類型

請始終在文檔的首行聲明文檔類型：

<!DOCTYPE html>

如果您一貫堅持小寫標簽，那么可以使用：

<!doctype html>

請使用小寫元素名

HTML5 允許在元素名中使用混合大小寫字母。

我們推薦使用小寫元素名：

混合大小寫名稱并不好開發(fā)者習慣使用小寫名（比如在 XHTML 中）小寫更起來更純凈小寫更易書寫

不太好：

<SECTION> <p>This is a paragraph.</p></SECTION>

很糟糕：

<Section> <p>This is a paragraph.</p></SECTION>

還不錯：

<section> <p>This is a paragraph.</p></section>

關閉所有 HTML 元素

在 HTML5 中，您不必關閉所有元素（例如 <p> 元素）。

我們建議關閉所有 HTML 元素：

看起來不好：

<section> <p>This is a paragraph. <p>This is a paragraph.</section>

看起來不錯：

<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p></section>

關閉空的 HTML 元素

在 HTML5 中，關閉空元素是可選的。

允許這樣：

也允許這樣：

斜杠（/）在 XHTML 和 XML 中是必需的。

如果您期望 XML 軟件來訪問您的頁面，保持這個習慣是個好主意。

使用小寫屬性名

HTML5 允許大小寫混合的屬性名。

我們建議使用小寫屬性名：

混合屬性名并不好開發(fā)者習慣于使用小寫屬性名（比如在 XHTML 中）小寫屬性名看情況更純凈小寫屬性名更易書寫

看起來不好：

看起來不錯：

屬性值加引號

HTML5 允許不加引號的屬性值。

我們推薦屬性值加引號：

如果屬性值包含值，則必須使用引號混合樣式絕對不好加引號的值更易閱讀

這個屬性值無效，因為值中包含空格：

這樣是有效的：

必需的屬性

請始終對圖像使用 alt 屬性。當圖像無法顯示時該屬性很重要。

請始終定義圖像尺寸。這樣做會減少閃爍，因為瀏覽器會在圖像加載之前為圖像預留空間。

空格和等號

等號兩邊的空格是合法的：

但是精簡空格更易閱讀， But space-less is easier to read, and groups entities better together:

避免長代碼行

當使用 HTML 編輯器時，通過左右滾動來閱讀 HTML 代碼很不方便。

請盡量避免代碼行超過 80 個字符。

空行和縮進

請勿毫無理由地增加空行。

為了提高可讀性，請增加空行來分隔大型或邏輯代碼塊。

為了提高可讀性，請增加兩個空格的縮進。請勿使用 TAB。

請勿使用沒有必要的空行和縮進。沒有必要在短的和相關項目之間使用空行，也沒有必要縮進每個元素：

不必要：

<body> <h1>Famous Cities</1> <h2>Tokyo</h2> <p> Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p></body>

更好：

<body><h1>Famous Cities</1><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.It is the seat of the Japanese government and the Imperial Palace,and the home of the Japanese Imperial Family.</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>LondonA</li> <li>Paris</li> <li>Tokyo</li></ol>

省略 <html> 和 <body>？

在 HTML5 標準中，能夠省略 <html> 標簽和 <body> 標簽。

以下代碼作為 HTML5 進行驗證：

示例 <!DOCTYPE html><head> <title>Page Title</title></head><h1>This is a heading</h1><p>This is a paragraph.</p>

我們不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文本的根元素。它是規(guī)定頁面語言的理想位置。

<!DOCTYPE html><html lang="en-US">

對于可訪問應用程序（屏幕閱讀器）和搜索引擎，聲明語言很重要。

省略 <html> 或 <body> c可令 DOM 和 XML 軟件崩潰。

省略 <body> 會在老式瀏覽器（IE9）中產生錯誤。

省略 <head>？

在 HTML5 標準中，<head> 標簽也能夠被省略。

默認地，瀏覽器會把 <body> 之前的所有元素添加到默認的 <head> 元素。

通過省略 <head> 標簽，您能夠降低 HTML 的復雜性：

示例 <!DOCTYPE html><html><title>Page Title</title><body> <h1>This is a heading</h1> <p>This is a paragraph.</p></body></html>

注釋：對于 web 開發(fā)者，省略標簽的做法是陌生的。建立規(guī)則需要時間。

元數據

<title> 元素在 HTML5 中是必需的。請盡可能制作有意義的標題。

<title>HTML5 Syntax and Coding Style</title>

為了確保恰當的解釋，以及正確的搜索引擎索引，在文檔中對語言和字符編碼的定義越早越好：

<!DOCTYPE html><html lang="en-US"><head> <meta charset="UTF-8"> <title>HTML5 Syntax and Coding Style</title></head>

HTML 注釋

短注釋應該在單行中書寫，并在 <!-- 之后增加一個空格，在 <!-- 之前增加一個空格：

長注釋，跨越多行，應該通過  在獨立的行中書寫：

長注釋更易觀察，如果它們被縮進兩個空格的話。

樣式表

請使用簡單的語法來鏈接樣式表（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;} 開括號與選擇器位于同一行在開括號之前用一個空格使用兩個字符的縮進在每個屬性與其值之間使用冒號加一個空格在每個逗號或分號之后使用空格在每個屬性值對（包括最后一個）之后使用分號只在值包含空格時使用引號來包圍值把閉括號放在新的一行，之前不用空格避免每行超過 80 個字符

注釋：在逗號或分號之后添加空格，是所有書寫類型的通用規(guī)則。

在 HTML 中加載 JavaScript

請使用簡單的語法來加載外部腳本（type 屬性不是必需的）：

通過 JavaScript 訪問 HTML 元素

使用“不整潔”的 HTML 樣式的后果，是可能會導致 JavaScript 錯誤。

這兩個 JavaScript 語句會產生不同的結果：

var obj = getElementById("Demo")var obj = getElementById("demo")

如果可能，請在 HTML 中使用（與 JavaScript）相同的命名約定。

請訪問 JavaScript 樣式指南。

使用小寫文件名

大多數 web 服務器（Apache、Unix）對文件名的大小寫敏感：

不能以 london.jpg 訪問 London.jpg。

其他 web 服務器（微軟，IIS）對大小寫不敏感：

能夠以 london.jpg 或 London.jpg 訪問 London.jpg。

如果使用混合大小寫，那么您必須保持高度的一致性。

如果您從對大小寫不敏感的服務器轉到一臺對大小寫敏感的服務器上，這些小錯誤將破壞您的網站。

為了避免這些問題，請始終使用小寫文件名（如果可以的話）。

文件擴展名

HTML 文件名應該使用擴展名 .html（而不是 .htm）。

CSS 文件應該使用擴展名 .css。

JavaScript 文件應該使用擴展名 .js。

網頁名稱：HTML(5)樣式指南和代碼約定-4.6HTML5
文章轉載：http://www.bm7419.com/article0/dghhdoo.html

成都網站建設公司_創(chuàng)新互聯，為您提供域名注冊、網站設計公司、ChatGPT、云服務器、虛擬主機、面包屑導航

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容