當前位置 : IT培訓網 > Web前端 > Web教程 > 如何檢查HTML5代碼的規范性

如何檢查HTML5代碼的規范性

時間:2016-12-13 14:33:24??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
標簽(Tag):?? html5(196)HTML5代碼(4)
對于已經從事網頁設計方面的人就不說了,初學者要認真對待下,在寫代碼時盡量的做到規范化,如此我們寫出的html代碼才能少出錯。如果你還沒有學習html代碼,那就從HTML5代碼開始學起吧!

雖然前端代碼比較容易些,但能寫的規范點的卻很少,很多網頁設計人員并不懂的SEO優化知識,總感覺有些代碼沒有必要寫,如圖片的alt標簽、圖片的大小、代碼是否空行及代碼的大小寫等等,都是網頁設計人員忽視的地方,所以今天IT培訓網小編總結了有些關于HTML代碼規范方面的知識點,希望可以幫助學習HTML5的學員寫代碼時能夠規范點!

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>IT培訓網</h1>

 

  <h2>HTML</h2>

 

  <p>

    IT培訓網-學IT技術拿高薪 快速就業不是事!

    IT培訓網-學IT技術拿高薪 快速就業不是事!

   IT培訓網,學的不僅是技術,更是夢想,

    IT培訓網-學IT技術拿高薪 快速就業不是事!

  </p>

推薦:

<body>

 

<h1>IT培訓網</h1>

 

<h2></h2>

<p>IT培訓網-學IT技術拿高薪 快速就業不是事!

IT培訓網-學IT技術拿高薪 快速就業不是事!

IT培訓網-學IT技術拿高薪 快速就業不是事!

IT培訓網-學IT技術拿高薪 快速就業不是事!</p>

 

</body>

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

省略 <html> <body>?

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

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

  <title>頁面標題</title>

</head>

 

<h1>這是一個標題</h1>

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

源代碼:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>IT培訓網(www.oalvodamoda.com)</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>

源代碼:

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<title>IT培訓網(www.oalvodamoda.com)</title>

<body>

 

<p id="Demo">段落 1。</p>

<p id="demo">段落 2。</p>

<script>

// 只有段落 2 會被替換

document.getElementById("demo").innerHTML = "HELLO。";

</script>

 

</body>

</html>

運行結果:

段落 1。

HELLO。

注意:現在省略 head 標簽還不推薦使用。

元數據

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

<title>IT培訓網</title>

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

<!DOCTYPE html>

<html lang="zh">

<head>

  <meta charset="UTF-8">

  <title>IT培訓網</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;

}

將左花括號與選擇器放在同一行。

左花括號與選擇器間添加以空格。

使用兩個空格來縮進。

冒號與屬性值之間添加已空格。

逗號和符號之后使用一個空格。

每個屬性與值結尾都要使用符號。

只有屬性值包含空格時才使用引號。

右花括號放在新的一行。

每行最多 80 個字符。

注意:在逗號和分號后添加空格是常用的一個規則。

HTML 中載入 JavaScript

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

<script src="myscript.js">

使用 JavaScript 訪問 HTML 元素

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

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

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

源代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>IT培訓網(www.oalvodamoda.com)</title>

</head>

<body>

 

<p id="Demo">段落 1。</p>

<p id="demo">段落 2。</p>

<script>

// 只有段落 2 會被替換

document.getElementById("demo").innerHTML = "HELLO.";

</script>

 

</body>

</html>

運行結果:

段落 1。

HELLO.

注意:HTML 中 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.oalvodamoda.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

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

但是,通常服務器可以設置多個默認文件,你可以根據需要設置默認文件嗎。

不管怎樣,HTML 完整的后綴是 ".html"。

對于已經從事網頁設計方面的人就不說了,初學者要認真對待下,在寫代碼時盡量的做到規范化,如此我們寫出的html代碼才能少出錯。如果你還沒有學習html代碼,那就從HTML5開始學起吧!

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天