《Start Here! Learn HTML5》 讀書筆記

入門書。在下一步學習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支持。提示不同的鍵盤輸入。很棒的特性!

image

 

IE10支持 required屬性,

image

 

題外話,

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>

image

 

聲音和視頻

<audio> <video>

內部使用<embed> 來適配不兼容html5的瀏覽器。

 

擴展話題

易用性設計

  • 導航清晰、點擊最小化
  • 內容明瞭
  • 容易記憶
  • 目標用戶針對性優化

 

其他,

* 減少顏色使用,用css樣式代替

* 保持html代碼整潔、簡單

 

HTML5添加的tag

參考,http://www.html5china.com/manual/html5/index.htm

SNAGHTMLa044af

canvas: 對繪圖類應用很重要,後續單獨學習

 

 

棄用的tag,

image

 

測試當前瀏覽器HTML5兼容性的網站,http://html5test.com/

 

 

小結

本書內容簡單,適合第一次接觸html的人學習。html5新特性講解的不多,很容易接受。

 

HTML5已經廣泛在win7、win8中得到支持,IE10中對CSS轉變、CSS動畫、陰影基於硬件加速,另外HTML5允許本地數據庫永久保存。

 

桌面程序開發基於“HTML5+IE10”模式,值得期待。

實際上,Windows8 用Javascript、HTML、CSS開發的應用可以被構建爲Windows原生應用了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章