入門書。在下一步學習mobile html5開發前,熟悉下基本的html5、css3知識。
學習背景,
- silverlight不再升級,adobe放棄flash轉HTML5。這些註定它會成爲以後的主流技術。技術領先,可以開發本地交互變現豐富的應用。
- 適合開發數據類顯示的移動應用,跨平臺開發,節省成本。比如PhoneGap開發企業MIS,web客戶端應用
- win7系統後,HTML5已經被廣泛支持。一個記事本、一個瀏覽器就可以編寫應用。
前幾章節,HTML、CSS基礎知識
實踐環境:win8+ultraEdit+IE10
XHTML是語法嚴格,基於XML的超文本標識語言。與HTML4基本相同。目前看,完全被HTML5取代。
LIST 列表
除了OL(Ordered List),UL格式(Unordered List),還有DL(定義列表,通過DT,DD來構造。)
樣式表CSS
並列定義,
h1,h2,h3{ color:red; }
嵌套定義,
ul ol {list-style-type: circle}
定義class, id
//class and id <li class="featured">The Wineries of Italy</li> <li id="special">Special Discounts Available</li> <style> .featured { color: red } #special { color: red } </style>
pseudo-class,
用於不同場合時候的樣式。比如<a> 有多種場合,link,visited,focus, hover, active。
這些場合可能同時出現,按上面順序定義。
<style> a:link {color: black} a:visited {color: magenta} </style>
針對字體、段落、圖片的css屬性講解。可以直接參考css手冊類。
頁面排版和導航
採用division代替table,
- 可以方便css定義
- 減少編碼
html5增強了div標籤,
- header 頁面標題
- footer 頁面底部文字。比如版權,聯繫方式
- article 獨立的文字塊
- aside 同主題內容相關的文字塊。比如tips,備註
- section 比如書籍章節。不要用於定義格式(如此,同div無區別),而代表有意義的文本
表單
html5 支持多個input類型,比如email URL 。input屬性,比如 required, placeholder text
目前有IOS瀏覽器、IE10支持。提示不同的鍵盤輸入。很棒的特性!
IE10支持 required屬性,
題外話,
IE10的增強,可以媲美很多桌面程序了。html5+IE10的組合能被win7、win8使用。採用這種方式開發的應用可以本地和web同時運行。
本地運行,需要封裝下。
下拉列表,
optgroup 可以很方便實現分組選項
<select name="printers" size="1"> <optgroup label="Inkjet"> <option>SuperJet 1400</option> <option>SuperJet 1405</option> <option>SuperJet 1405 Plus</option> </optgroup> <optgroup label="Laser"> <option>SuperLaser Value Edition</option> <option>SuperLaser Pro</option> <option>SuperLaser Plus</option> </optgroup> </select>
聲音和視頻
<audio> <video>
內部使用<embed> 來適配不兼容html5的瀏覽器。
擴展話題
易用性設計
- 導航清晰、點擊最小化
- 內容明瞭
- 容易記憶
- 目標用戶針對性優化
其他,
* 減少顏色使用,用css樣式代替
* 保持html代碼整潔、簡單
HTML5添加的tag
參考,http://www.html5china.com/manual/html5/index.htm
canvas: 對繪圖類應用很重要,後續單獨學習
棄用的tag,
測試當前瀏覽器HTML5兼容性的網站,http://html5test.com/
小結
本書內容簡單,適合第一次接觸html的人學習。html5新特性講解的不多,很容易接受。
HTML5已經廣泛在win7、win8中得到支持,IE10中對CSS轉變、CSS動畫、陰影基於硬件加速,另外HTML5允許本地數據庫永久保存。
桌面程序開發基於“HTML5+IE10”模式,值得期待。
實際上,Windows8 用Javascript、HTML、CSS開發的應用可以被構建爲Windows原生應用了。