一、HTML & CSS 介紹
- HTML (超文件標示語言，HyperText Markup Language)是用來作為呈現網頁資料的一種語言，由蒂姆‧伯納斯-李 (Tim Berners-Lee)所發明，於1993年作為草案(Draft)發行，1994年的HTML 2.0開始成為規範，到後來較為普及的HTML 4.01、以及目前使用上越來越廣泛的HTML5，將取代HTML 4.01成為新的標準。
- CSS (層疊樣式表，Cascading Style Sheet)，是用來為結構式文件(如HTML)添加樣式的語言，可用來調整字體、顏色、間距、排版等，目前W3C推薦版本為CSS2.1，但更新的CSS3也已被大部份的瀏覽器支援。
二、HTML5
- 廣義來說，HTML5通常指的是包含HTML、CSS和JavaScript的技術組合，且HTML5將是新一代的W3C網頁開發標準。
- HTML5提供了新屬性、更有語意的標籤、增強的表單元素、音訊與視頻的增強支援、二維繪圖API、離線資料庫…等。
- htm5shiv：讓IE9以下版本支援HTML5標籤 (但不表示可完全支援HTML5新功能)，於<head></head>中加入：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> - HTML5樣版 ：http://html5boilerplate.com/
- 各瀏覽器HTML5的支援程度： http://fmbip.com/litmus/
- HTML5與CSS3相容性速查：http://caniuse.com/
三、什麼是CSS3？
CSS3是為了滿足CSS 2功能上的不足，所提出來的升級版本，並由許多科技大廠(Adobe、Apple、Microsoft、Google…)所共同協商策劃。從2010年開始，隨著HTML5的流行，出現了CSS3這個全新的版本。
四、CSS3不是HTML5
- 所謂的「HTML5技術」，實際上是包含了HTML新元素、CSS3、SVG、及JavaScript新修訂版本，當您看到許多酷炫的HTML5新特性時，其中有大部份是由CSS3所帶來的效果，例如：旋轉、縮放、2D及3D動畫、動態文字效果、陰影、圓角、漸變…等。
- 如要查詢瀏覽器對HTML5的得分數，可利用 http://html5test.com 來查詢。
- 許多的HTML5 DEMO
五、CSS3的相容性
- 常見的CSS3語法屬性在現有的Firefox、Chrome、Safari等最新版的瀏覽器都能獲得較正常的支援，IE則從版本9開始支援CSS3，但到IE 10開始才有較高的支援度。
- 如要查詢某版本瀏覽器對特定CSS語法的支援度如何，可利用http://caniuse.com/ 及http://fmbip.com/litmus/ 網站來查詢。
- 用CSS3畫出多拉A夢(可檢視各瀏覽器的CSS3支援程度)： http://purecss3.net/doraemon/doraemon_css3.html
六、瀏覽器CSS屬性的前綴
- 由於許多CCS3屬性仍在開發當中，且在每一個瀏覽器所呈現出來的效果有可能不同，因此我們常在一些功能仍不穩定的屬性前，加上特定瀏覽器的前綴。例如：
div#smaple{ -moz-transform: scale(1) rotate(5deg) skewX(5deg) skewY(5deg)); /* Firefox */ -webkit-transform: scale(1) rotate(5deg) skewX(5deg) skewY(5deg); /* Chrome, Safari */ -o-transform: scale(1) rotate(5deg) skewX(5deg) skewY(5deg); /* Opera */ -ms-transform: scale(1) rotate(5deg) skewX(5deg) skewY(5deg); /* IE */ transform: scale(1) rotate(5deg) skewX(5deg) skewY(5deg); /* for the future! */ }注意結尾有個沒有瀏覽器前綴的CSS屬性，這是為了將來該屬性功能穩定後，所採取的方法，但該屬性也有可能一直無法被正確實現，因此要不要加上無前綴屬性見人見智(一般用法都是會加)。
七、工具網站
- CSS代碼產生器：http://css3generator.com
- CSS代碼產生器：http://enjoycss.com
- CSS代碼產生器：http://www.cssmatic.com
- CSS代碼產生器：http://ds-overdesign.com/
- 背景產生器：http://www.patternify.com
- 漸變效果產生器：http://www.colorzilla.com/gradient-editor
- 文字效果編輯器：http://csstypeset.com
- 前綴產生器：http://pleeease.io/play
- 按鈕產生器：http://css3buttongenerator.com
- 按鈕產生器：http://www.bestcssbuttongenerator.com
八、HTML編輯器
推薦使用Sublime Text 或 Notepad++ 等編輯器，
或直接使用線上編輯器(Liveweave、CodePen 或 JSFiddle 等)