HTML(5) 代碼規范

日期:2019-07-29 15:45作者:北大青鳥西安建大IT學院

摘要:HTML 代碼約定 很多 Web 開發人員對 HTML 的代碼規范知之甚少。 在2000年至2010年,許多Web開發人員從 HTML 轉換到 XHTML。 使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。 而針對于
關鍵詞: 北大青鳥web前端

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 個字符。

 






轉載請保留本文網址http://www.cpnradio.com/qqwd/webqd/254.html
上一篇:CSS 下拉菜單
下一篇:HTML 字符集
人妻 清高 无码 中文字幕