HTML5 代碼規(guī)范

TML 代碼約定

很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開發(fā)人員從 HTML 轉換到 XHTML。

使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。

而針對于 HTML5 ，我們應該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

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

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

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

</SECTION>

非常糟糕:

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

</SECTION>

推薦:

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

</section>

除此之外，中星小編還介紹4款最受歡迎的HTML5/CSS3應用及代碼，一起來看看吧。

1、基于HTML5 Canvas的圖表插件Chart.js

chart.js是一款基于HTML5 Canvas的圖表插件，chart.js的功能非常強大，它不僅提供了常見的柱形圖、折線圖、餅狀圖，而且還提供了環(huán)形圖、雷達圖，樣式外觀多樣，圖表的色彩搭配也比較清新。chart.js還有一個特點就是圖表在初始化的時候有彈性動畫特效，這也是HTML5 Canvas的一大功勞。

柱形圖折線圖餅狀圖環(huán)形圖雷達圖極線圖

2、HTML5 3D動畫柱狀圖表

這次我們要分享一款很酷的HTML5 3D圖表應用，它是一款柱狀圖表，呈3D的外觀樣式，并且我們可以改變圖表的顏色主題，讓其更加符合你的需求。這款HTML5圖表可以切換需要查看的圖表數據，在切換的時候有不錯的動畫效果，而且，我們還可以切換圖表的大小，以適應不同大小的瀏覽窗口。

3、CSS3 3D環(huán)形進度條帶進度百分比

這是一款基于純CSS3的環(huán)形進度條，而且，從外觀上看，這款進度條很有3D立體的感覺，尤其是在進度條上有立體的投影，顯得非常小巧迷人。另外，進度條的環(huán)形中央帶有進度百分比，可以實時根據進度來更新百分比的數值，和之前分享的HTML5/CSS3扇形進度條動畫相比有一定優(yōu)勢。

4、純CSS3垂直Tab菜單 Tab樣式可自定義

Tab菜單在網頁上使用起來非常方便，也比較節(jié)省空間，所以很多門戶網站很喜歡用Tab菜單。今天我們要來分享一款垂直方向的Tab菜單，它是用純CSS3實現的，加載和切換特別靈活。另外，Tab菜單的樣式你可以使用CSS重新定義，擴展很方便。

、編碼格式：使用UTF-8

請確保您的編輯器使用的字符編碼為UTF-8，沒有字節(jié)順序標記。在html模板或文檔中通過meta來定義編碼格式。

6、注釋

根據需要解釋代碼，這個就不多說了，團隊開發(fā)這個非常重要，盡管很多時候大家不愿意遵守，但確實重要！

7、TODO待定項

尚未實現的或待定的內容一定要標識強調出來，利用TODO辨識，而非其他諸如@@來強調。在todo項中如果有必要列明聯(lián)系人，比如負責人。在TODO后追加一個冒號作為行動內容，例如TODO：為網站增加html5模板。

取前端學習資料及視頻進群：532018971

HTML 很容易寫，但創(chuàng)建網頁時，您經常需要重復做同樣的任務，如創(chuàng)建表單。在這篇文章中，我收集了10個超有用的HTML 代碼片段，有 HTML5 啟動模板、空白圖片、打電話和發(fā)短信、自動完成等等，幫助你提高開發(fā)速度。

一、HTML5 啟動模板

當啟動一個新的項目的時候，你需要一個啟動模板。這里是一個簡潔干凈的模板，可以作為 HTML5 項目的基礎。

<!DOCTYPE html>

<html>

<head>

<title>Untitled</title>

<!--[if lt IE 9]>

</head>

<body></body>

</html>

二、Base64 編碼的空白 GIF 圖片

我不推薦使用透明的 GIF，但我知道，即使在2013年，很多人都還在使用他們。如果你是其中之一，你可能會享受這個 Base64 編碼的 1 * 1px的空白 GIF。這種方式比使用的圖像更好。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">三、獲取方位的表單 (Google Maps)

這里是一個簡單但功能強大的表單代碼，用戶可以輸入他的位置指示到特定的地方。對于聯(lián)系頁面非常有用。<form action="http://maps.google.com/maps"method="get"target="_blank"><label for="saddr">Enter your location</label>

</form>

四、嵌入 Flash

獲取前端學習資料及視頻進群：532018971

lt;marquee>...</marquee>普通卷動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設卷動

<marquee behavior=alternate>...</marquee>來回卷動

<marquee direction=down>...</marquee>向下卷動

<marquee direction=up>...</marquee>向上卷動

<marquee direction=right></marquee>向右卷動

<marquee direction=left></marquee>向左卷動

<marquee loop=2>...</marquee>卷動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定卷動距離

<marquee scrolldelay=300>...</marquee>設定卷動時間

<!>字體效果

<h1>...</h1>標題字(最大)

<h6>...</h6>標題字(最小)

<b>...</b>粗體字

<strong>...</strong>粗體字(強調)

<i>...</i>斜體字

<em>...</em>斜體字(強調)

<dfn>...</dfn>斜體字(表示定義)

<u>...</u>底線

<ins>...</ins>底線(表示插入文字)

<strike>...</strike>橫線

<s>...</s>刪除線

<del>...</del>刪除線(表示刪除)

<kbd>...</kbd>鍵盤文字

<tt>...</tt> 打字體

<xmp>...</xmp>固定寬度字體(在文件中空白、換行、定位功能有效)

<plaintext>...</plaintext>固定寬度字體(不執(zhí)行標記符號)

<listing>...</listing> 固定寬度小字體

<font color=00ff00>...</font>字體顏色

<font size=1>...</font>最小字體

<font style=font-size:100 px>...</font>無限增大

<!>區(qū)斷標記

<hr>水平線

<hr size=9>水平線(設定大小)

<hr width=80%>水平線(設定寬度)

<hr color=ff0000>水平線(設定顏色)

<br>(換行)

<nobr>...</nobr>水域(不換行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>連結格式

<base href=位址>(預設好連結路徑)

<a href=位址></a>外部連結

<a href=位址 target=_blank></a>外部連結(另開新視窗)

<a href=位址 target=_top></a>外部連結(全視窗連結)

<a href=位址 target=頁框名></a>外部連結(在指定頁框連結)

<!>貼圖/音樂

<img src=圖片位址>貼圖

<img src=圖片位址 width=180>設定圖片寬度

<img src=圖片位址 height=30>設定圖片高度

<img src=圖片位址 alt=提示文字>設定圖片提示文字

<img src=圖片位址 border=1>設定圖片邊框

<bgsound src=MID音樂檔位址>背景音樂設定

<!>表格語法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址

<table border=邊框大小>...</table>設定表格邊框大小(使用數字)

<table bgcolor=顏色碼>...</table>設定表格的背景顏色

<table borderclor=顏色碼>...</table>設定表格邊框的顏色

<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色

<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)

<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)

<table cols=參數>...</table>指定表格的欄數

<table frame=參數>...</table>設定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數字)

<table height=高度>...</table>指定表格的高度大小(使用數字)

<td colspan=參數>...</td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=參數>...</td>指定儲存格合并列的列數(使用數字)

<!>分割視窗

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整

<frameset cols="20%,*">分割左右兩個框架

<frameset cols="20%,*,20%">分割左中右三個框架

<分割上下兩個框架

<frameset rows="20%,*,20%">分割上中下三個框架

<! - - ... - -> 注解

<a href target> 指定超連結的分割視窗

<a href=#錨的名稱> 指定錨名稱的超連結

<a href> 指定超連結

<a name=錨的名稱> 被連結點的名稱

<address>....</address> 用來顯示電子郵箱地址

<b> 粗體字

<base target> 指定超連結的分割視窗

<basefont size> 更改預設字形大小

<bgsound src> 加入背景音樂

<big> 顯示大字體

<blink> 閃爍的文字

<body text link vlink> 設定文字顏色

<body> 顯示本文

<br> 換行

<caption align> 設定表格標題位置

<caption>...</caption> 為表格加上標題

<center> 向中對齊

<cite>...<cite> 用於引經據典的文字

<code>...</code> 用於列出一段程式碼

<comment>...</comment> 加上注解

<dd> 設定定義列表的項目解說

<dfn>...</dfn> 顯示"定義"文字

<dir>...</dir> 列表文字標簽

<dl>...</dl> 設定定義列表的標簽

<dt> 設定定義列表的項目

<em> 強調之用

<font face> 任意指定所用的字形

<font size> 設定字體大小

<form action> 設定戶動式表單的處理方式

<form method> 設定戶動式表單之資料傳送方式

<frame marginheight> 設定視窗的上下邊界

<frame marginwidth> 設定視窗的左右邊界

<frame name> 為分割視窗命名

<frame noresize> 鎖住分割視窗的大小

<frame scrolling> 設定分割視窗的卷軸

<frame src> 將html檔加入視窗

<frameset cols> 將視窗分割成左右的子視窗

<frameset rows> 將視窗分割成上下的子視窗

<frameset>...</frameset> 劃分分割視窗

<h1>~<h6> 設定文字大小

<head> 標示文件資訊

<hr> 加上分格線

<html> 文件的開始與結束

<i> 斜體字

<img align> 調整圖形影像的位置

<img alt> 為你的圖形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入圖片并預設圖形大小

<img hspace> 插入圖片并預設圖形的左右邊界

<img lowsrc> 預載圖片功能

<img src border> 設定圖片邊界

<img src> 插入圖片

<img vspace> 插入圖片并預設圖形的上下邊界

<input type name value> 在表單中加入輸入欄位

<isindex> 定義查詢用表單

<kbd>...</kbd> 表示使用者輸入文字

<li type>...</li> 列表的項目 ( 可指定符號 )

<marquee> 跑馬燈效果

<menu>...</menu> 條列文字標簽

<multiple> 可同時選擇多項的列表欄

<noframe> 定義不出現分割視窗的文字

<ol>...</ol> 有序號的列表

<option> 定義表單中列表欄的項目

<p align> 設定對齊方向

<p> 分段

<person>...</person> 顯示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表單中定義列表欄

<small> 顯示小字體

<strike> 文字加橫線

<strong> 用於加強語氣

<sub> 下標字

<sup> 上標字

<table border=n> 調整表格的寬線高度

<table cellpadding> 調整資料欄位之邊界

<table cellspacing> 調整表格線的寬度

<table height> 調整表格的高度

<table width> 調整表格的寬度

<table>...</table> 產生表格的標簽

<td align> 調整表格欄位之左右對齊

<td bgcolor> 設定表格欄位之背景顏色

<td colspan rowspan> 表格欄位的合并

<td nowrap> 設定表格欄位不換行

<td valign> 調整表格欄位之上下對齊

<td width> 調整表格欄位寬度

<td>...</td> 定義表格的資料欄位

<textarea name rows cols> 表單中加入多少列的文字輸入欄

<textarea wrap> 決定文字輸入欄是自動否換行

<th>...</th> 定義表格的標頭欄位

<title> 文件標題

<tr>...</tr> 定義表格美一行

<tt> 打字機字體

<u> 文字加底線

<ul type>...</ul> 無序號的列表 ( 可指定符號 )

<var>...</var> 用於顯示變數

在線咨詢

上一篇：Safari現支持NFC、USB和Lightning
下一篇：最新梳理 - 科創(chuàng)類競賽及編程等級考試匯總，家長們趕

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

HTML5 代碼規(guī)范

您的項目需求