HTML代碼書寫規範指南

2021-02-13 摩登教程

HTML 代碼約定很多 Web 開發人員對 HTML 的代碼規範知之甚少。在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規範。而針對於 HTML5 ，我們應該形成比較好的代碼規範，以下提供了幾種規範的建議。使用正確的文檔類型

如果你想跟其他標籤一樣使用小寫，可以使用以下代碼：

使用小寫元素名不推薦:

<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 元素也不一定要關閉：

在 XHTML 和 XML 中斜線 (/) 是必須的。如果你期望 XML 軟體使用你的頁面，使用這種風格是非常好的。使用小寫屬性名不推薦：

推薦：

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

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

避免一行代碼過長空行和縮進不必要的空行和縮進:

<body>
<h1>虞美人·春花秋月何時了</h1>
<h2>李煜</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>HTML教程</li>
<li>Java教程</li>
<li>JavaScript教程</li>
<li>SQL教程</li>
</ol>

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

<!DOCTYPE html>
<head>
<title>頁面標題</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>
<title>頁面標題</title>

<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>

</html>

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

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>奔月教程</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 語句會輸出不同結果:

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 (或 .htm)。.htm 和 .html 的區別.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 伺服器都會把它們當作 HTML 文件來處理。.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。在 Unix 系統中後綴沒有特別限制，一般用 .html。技術上區別如果一個 URL 沒有指定文件名 (如 http://www.runoon.com/css/), 伺服器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。如果伺服器只配置了 「index.html」 作為默認文件，你必須將文件命名為 「index.html」, 而不是 「index.htm」。但是，通常伺服器可以設置多個默認文件，你可以根據需要設置默認文件名。不管怎樣，HTML 完整的後綴是 「.html」。

相關焦點

  • HTML 編碼規範
    >(點擊尾部閱讀原文前往)永遠遵循同一套編碼規範 -- 可以是這裡列出的，也可以是你自己總結的。如果你發現本規範中有任何錯誤，敬請指正。基本規範語義使用符合語義的標籤書寫 HTML 文檔, 選擇恰當的元素表達所需的含義;<!
  • PHP入門-書寫語法以及基本規範
  • 「HTML+ CSS」了解html的基本構成,學習標籤書寫格式
    本篇文章我們主要介紹下一個html的基本構成元素，以及html標籤的書寫格式。<html>稱為網站的根標籤，所有的網頁標籤都在<html></html>中，所以他寫在開頭和結束的部分。2. <head>標籤用於定義文檔的頭部，它是所有頭部元素的容器。
  • CSS樣式書寫規範
    可能不同團隊都有各自的規範，又或者很多人在寫 CSS 的時候還是想到什麼就寫什麼，不存在太多的約束。 我覺得 CSS 代碼規範還是有存在的必要的，尤其是在團隊配合，多人協作下，規範就顯得尤為重要。
  • CSS 樣式書寫規範
    我覺得 CSS 代碼規範還是有存在的必要的，尤其是在團隊配合，多人協作下，規範就顯得尤為重要。本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規範，並不希望大家完全採用，而是希望可以結合自己的團隊需要，發展出一套適合自己的 CSS 代碼規範。也希望可以有更多的建議，共同的完善。本規範也可以在我的 Github 上看到，歡迎留言或者提 PR。
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    在第二期中，我們對html做了入門，已經有了對網頁開發基本的了解。本節知識開始書寫html網頁結構。本節知識視頻教程以下開始文字講解：一、Html代碼基本結構html代碼就像一個人一樣，可以分成幾個部分。我們先來了解三個節點。
  • HTML實戰篇:html仿小米官網右側浮動框代碼
    本篇文章主要給大家介紹一下使用html+css來模仿製作小米官方網站右側的浮動框。dt）的使用，使用dl和dd來完成前邊5個相同模塊的製作2、滑鼠經過（hover）的使用，第一個元素滑鼠經過左側顯示，這個跟我們之前將的導航菜單類似，還有滑鼠經過文字以及圖片改變顏色，這裡可以使用hover之後改變背景圖片來實現；3、浮動（fixed）的使用，該內容一直浮動在網頁右側，跟隨頁面一起滾動，我們可以使用position:fixed來實現；2）代碼實操演練
  • HTML代碼
    HTML 元素HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的所有代碼。<html> 元素：<html> <body><p>This is my first paragraph.</p></body> </html><html> 元素定義了整個 HTML 文檔。
  • 前端小白基礎之html代碼規範
    單標籤不要寫閉合標籤 因為寫了也沒用，還顯得你不懂html規範，我們不是寫XHTML。常見的單標籤有img、link、input、hr、br<img src=" " alt=" ">和<img src=" " alt=" "></img>是一樣的3.
  • html代碼
    48、在網頁的Head部分加入如下代碼，這段代碼的主要功能是屏蔽PrintScreen鍵，不斷清空剪貼版，防止圖片被用文件——另存為菜單另存。這javascript代碼即可實現【1、最基本的彈出窗口代碼】 其實代碼非常簡單： <SCRIPT LANGUAGE="javascript"> <!
  • 0060 PHP代碼嵌入到HTML網頁當中
    PHP嵌入HTML的方式前面幾節課都是純粹的PHP代碼，然後通過php命令執行php文件代碼的方式來運行PHP代碼。>可以看到，雖然這個文件名最後保存為helloworld.php，但是其本質還是一個html規範格式文件，因為最終這個文件的內容是要顯示在瀏覽器當中的，所以起本質仍然是一個html規範文件。
  • 從零開始寫代碼(二),十分鐘讓你學會HTML!
    是一種規範，是一種標準，編寫網頁的一種標準，現在的網頁都是用這個來寫的。超文本：最開始的網頁只有文字，沒有圖片視頻等，現在的網頁上不光有文本還有圖片、音樂、視頻等，叫做超文本。標註：是一種記號，一種標誌，例如紅綠燈，是需要遵循的一種規則。
  • 網站變灰CSS代碼以及html代碼
    悼念舟曲，燭光祈福網頁顏色變黑白代碼1、為方便站點哀悼，特提供css濾鏡代碼，以表哀悼。以下為全站CSS代碼。 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
  • 中文書寫規範與排版指南
    一、書寫規範談起書寫規範，似乎我們既熟悉又陌生。從小到大，十幾載寒窗，我們一直都在寫作文，但我們似乎也缺失了最根本的一點——書寫規範。最常見的就是「 全形與半角」：我們在使用輸入法的時候，中文輸入法下會自動切換為全形標點符號，而英文輸入狀態下會切換為半角標點符號。
  • HTML代碼的美感
    每當我訪問精美的網站，我都情不自禁地會去查看原始碼。這就好比你擁有一副X光眼鏡，能夠看到任何人——甚至透視他們的遮羞布。這簡直是天經地義的事情嘛！我迫不及待地想了解，這個精美的網站，是不是由同樣具有美感的代碼所寫成，而或者只是金玉其外敗絮其中。代碼？美感？當然！歸根結蒂，代碼如詩。
  • 閱讀Google的C++代碼規範有感
    李開復曾在微博上說過，Google的C++代碼規範是全球最好的一份C++代碼規範，沒有之一。
  • HTML實戰一:初始化css代碼,為什麼以及怎麼做?
    之前的文章我們介紹了很多關於html以及css的基礎內容，從本篇文章開始我們要進行實戰訓練，我們實戰第一篇文章要介紹的就是初始化我們的css代碼；1）為什麼要初始化css代碼首先是因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異
  • Web前端開發規範手冊
    css屬性書寫順序, 建議遵循布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據自身習慣書寫, 但儘量保證同類屬性寫在一起.　HTML書寫規範　　head區代碼規範head區是指HTML代碼的<head>和</head>之間的內容。　　必須加入的標籤:公司版權注釋 <!
  • PHP Document 代碼注釋規範
    首頁 > 語言 > 關鍵詞 > php最新資訊 > 正文 PHP Document 代碼注釋規範
  • Python代碼規範——注釋和命名規範
    而Python中的注釋，是用來解釋某一段代碼的具體用途，其分為兩種，注釋和文檔注釋。編碼行注釋至少使用兩個空格和語句分開，注意不要使用無意義的注釋。這邊有幾個需要注意的點，在代碼的關鍵部分（或比較複雜的部分），能寫注釋的儘量寫注釋，而比較重要的幾個注釋段，要使用多個等號隔開，讓這個注釋更加醒目，突出重要性。