Toolbox HTML

Purpose: 網頁前端設計基礎

NEXT:

知識框架 main ideas

  1. HyperText Markup Language (HTML)
  2. HTML 負責網頁的內容與架構
  3. HTML 語法為標籤與內容 <tag>content<tag/>

實用的工具箱 依據個人經驗 tools simple to hard, workable, experiences

實用的基底

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>

Questions

materials map

used material

wikipedia

Wikipedia of HTML

  • 標記語言 markup language
  • 標籤 成對出現 tags
  • 屬性 attributes
  • 伺服器, HTTP協定, 瀏覽器
  • HTML 標準由 World Wide Web Consortium (W3C) 訂定

Wikipedia of HTML5

  • 最新的修訂版本
  • 希望以 HTML, CSS, Javascript 取代其他外掛程式
  • 更多的 API
  • 動畫效果以 CSS 與 Javascript 實作取代 Flash 等外掛程式

Wikipedia of Canvas 畫布

  • HTML5 的新功能
  • 可以藉由 Javascript 存取實作出圖形、動畫與遊戲

unused material

網路資源 web resources

書籍 books

  • HTML&CSS網站設計建置優化之道
  • Mobile HTML5 學習手冊
  • HTML5 the missing manual 國際中文版第二版

Refining

Book: Mobile HTML5 學習手冊

深入細節的 HTML5 與 CSS3 介紹書，目標客群應該是從舊版本想學習新的語法的工程師。 不適合作為新手入門的第一本書。然而是了解 HTML5 與 CSS3 全貌的好書。 由於主題是定義在行動裝置上的網頁應用程式，多次提到效能的優化方式。 好處在於書本中都有提供解決方案。

  • 第一章 - 網頁開發測試工具清單
  • HTML5
    • 第二章 - HTML5 簡介
    • 第三章 - HTML5 語意標籤 semantic
    • 第四章 - HTML5 新表單 form, label, input
    • 第五章 - 簡介 SVG, Canvas, audio, video
    • 第六章 - 簡介 manifest 快取, localStorage, sessionStorage, Web SQL Database, IndexedDB, geolocation, Web Workers
  • CSS3
    • 第七章 - CSS3 簡介, 選擇器 selector
    • 第八章 - 顏色語法 color rgba hsla, 長度、時間、頻率計量單位 measure
    • 第九章 - 方形模型 box model, 邊框 border, 漸層 gradient, 陰影 shadow
    • 第十章 - 漸變 transition, 變形 transform, 動畫 animation
    • 第十一章 - 多重欄位 columns, Flexbox, data URL
  • 行動裝置與響應式 mobile, responsive
    • 第十二章, 第十三章 - 行動應用裝置設計注意事項與解決方案
    • 第十四章 - 行動裝置效能問題與解決方案