轉載：http://www.fuzhongkuo.com/?cat=7
. 文件類型聲明及編碼: 應該統一為html5宣告類型<!DOCTYPE html>; 編碼統一為<meta charset=”gbk” />, 書寫時利用IDE實現層次分明的縮排;
TIPS:這裡暫時還是用的xhtml1-transitional的DTD，編碼申明為GB2312
2. 非特殊情況下樣式檔案必須外鏈至<head>…</head>之間;非特殊情況下JavaScript檔案必須外鏈至頁面底部;
3. 引入樣式檔案或JavaScript檔案時, 必須略去預設型別宣告, 寫法如下:
<link rel=”stylesheet” href=”…” />
<style>…</style>
<script src=”…”></script>
4. 引入JS庫檔案, 檔案名稱必須包含庫名稱及版本號碼及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入外掛程式, 檔案名稱格式為庫名稱+外掛程式名稱, 比如jQuery.cookie.js;
5. 所有編碼必須遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及底線數字組成, 且所有標籤必須閉合, 包括 br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括;
6. 應該充分利用無相容性問題的html自身標籤, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自訂屬性的時候, 首先要考慮下有沒有預設的已有的合適標籤去設定, 如果沒有, 可以使用須以”data-”為首碼來添加自訂屬性，避免使用”data:”等其他命名方式;
7. 應該語義化html, 如 標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內嵌元素中不可嵌套區塊層級元素;
8. 應該儘可能減少div嵌套, 如<div><div class=”welcome”>歡迎訪問XXX, 您的使用者名稱是<div class=”name”>使用者名稱</div></div></div>完全可以用以下代碼替代: <div><p>歡迎訪問XXX, 您的使用者名稱是<span>使用者名稱</span></p></div>;
9. 書寫連結地址時, 必須避免重新導向，例如：href=”http://itaolun.com/”, 即必須在URL地址後面加上“/”；
10. 在頁面中盡量避免使用style屬性,即style=”…”;
TIPS:這裡盡量避免不用，不代表不可以用，對於一些只在一個地方用到的樣式，完全可以寫inline-style,速度優於檔案載入的速度。
11. 必須為含有描述性表單元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
12. 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title;
13. 給區塊代碼及重要功能(比如迴圈)必須加上注釋, 方便後台添加功能;
14. 特殊符號使用: 應該儘可能使用代碼替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;
15. 書寫代碼前, 考慮並提高樣式重複使用率；書寫頁面過程中, 應該考慮向後擴充性; THIS ENTRY WAS POSTED IN HTML. HTML5基礎 BY ADMIN // 2014/02/12 // NO COMMENTS 什麼是HTML5。
HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本，現在仍處於發展階段，但大部分瀏覽器已經支援某些 HTML5 技術。HTML 5有兩大特點：首先，強化了 Web 網頁的表現效能。其次，追加了本機資料庫等 Web 應用程式的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要外掛程式的豐富 性網路應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，並且提供更多能有效增強網路應用的標準集。
HTML5的特性
A. 語義特性（Class：Semantic）
HTML5賦予網頁更好的意義和結構。更加豐富的標籤將隨著對RDFa的，微資料與微格式等方面的支援，構建對程式、對使用者都更有價值的資料驅動的Web。
B. 本機存放區特性（Class: OFFLINE & STORAGE）
基於HTML5開發的網頁APP擁有更短的啟動時間，更快的連網速度，這些全得益於HTML5 APP Cache，以及本機存放區功能。Indexed DB（html5本機存放區最重要的技術之一） 和API說明文檔。
C. 裝置相容特性 (Class: DEVICE ACCESS)
從Geolocation 功能的API文檔公開以來，HTML5為網頁應用開發人員們提供了更多功能上的最佳化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的資料與應用 接入開放介面。使外部應用可以直接與瀏覽器內部的資料直接相連，例如視頻影音可直接與microphones及網路攝影機相聯
D. 串連特性（Class: CONNECTIVITY）
更有效串連工作效率，使得基於頁面的即時聊天，更快速的網頁遊戲體驗，更最佳化的線上交流得到了實現。HTML5擁有更有效伺服器推送技 術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特效能夠協助我們實現伺服器將資料’推送’到用戶端的功能。
E. 網頁多媒體特性(Class: MULTIMEDIA)
支援網頁端的Audio、Video等多媒體功能， 與網站內建的APPS，網路攝影機，影音功能相得益彰。
F. 三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基於SVG、Canvas、WebGL及CSS3的3D功能，使用者會驚歎於在瀏覽器中，所呈現的驚人視覺效果。
G. 效能與整合特性（Class: Performance & Integration）
沒有使用者會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術，協助您的Web應用和網站在多樣化的環境中更快速的工作。
H. CSS3特性(Class: CSS3)
在不犧牲效能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字型格式（WOFF）也提供了更高的靈活性和控制性。
HTML4和HTML5的十大關鍵區別。
1.HTML5標準還在制定中
首先要注意的是，HTML5雖然現在很火，但是HTML5標準還在制定中，標準仍在改變。HTML4已經10多年了，不會有任何改變了。
2.簡化的文法
HTML5簡化了很多細微的文法，例如doctype的聲明，你只需要寫<!doctype html>就行了。HTML5與HTML5，XHTML1相容，但是與SGML不相容。
3.<canvas>標籤替代Flash
Flash給很多Web開發人員帶來了麻煩，要在網頁上播放Flash需要一堆代碼和外掛程式。<canvas>標籤使得開發人員只要使用一個標籤 就能和使用者產生UI互動。雖然目前<canvas>標籤還不能實現Flash的所有功能，但是很快<canvas>就會讓 Flash看起來老土，哈哈。
4.新增<header>和<footer>標籤
HTML5設計的一個原則是更好的體現網站的語義性，所以增加了<header>和<footer>這樣的標籤，用來明確表示網頁的結構。
5.新增<section>和<article>標籤
與<header>，<footer>類似，<section>和<article>也有利於清晰化網頁的結構，更有利於SEO。
6.新增<menu>和<figure>標籤
<menu>可以被用於建立傳統的菜單，也可以用於工具列和操作功能表。<figure>標籤使得網頁文字和圖片的排版更專業。
7.新增<audio>和<video>標籤
這兩個標籤可能是HTML5裡面最有用的兩個標籤了。顧名思義，這兩個標籤是用來播放音頻和視頻的。
8.全新的表單
HTML5對<form>和<forminput>標籤進行了大量修改，添加了很多新的屬性，也修改了很多屬性。
9.刪除<b>和<font>標籤
這個改進我還無法理解。我不認為刪除這兩個標籤對代碼的改進有很大的協助。官方的解釋是應該用CSS來替代這兩個標籤。但我還是覺得對於簡單的文本，這兩個標籤還是很方便的。
10.刪除<frame>，<center>，<big>標籤 THIS ENTRY WAS POSTED IN HTML. html規範 BY ADMIN // 2014/02/12 // NO COMMENTS
標題和內容
<div class=”title”>
<h2>標籤的語義</h2>
<a href=”#”>更多>></a>
</div>
<p>段落一的內容<strong>根據瀏覽器的預設樣式 </strong></p>
<p>段落二的內容</p>
表單
執行個體：
<form action=”" method=”">
<fieldset> //欄位集
<legend>登入表單</legend>
<p>
<label for=”name”>帳號 ：</label>
<input type=”text” id=”name”/>
</p>
<p>
<label for=”pw”>密碼 ：</label>
<input type=”password” id=”pw”/>
</p>
<input type=”submit” value=”
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
