Html5

About Me
以Microsoft技術為主，從事於商
業應用系統軟體設計與開發，近年
來開始接觸App開發以及Azure雲
端服務
HTML5 & JavaScript 程式開發
實戰
Microsoft 研討會講師
K NET 社群共同創辦人及講師
學校業師
高師大資訊教育所碩士
樹德科大資管系學士
ian.msmvp@outlook.com
http://codeian.idv.tw/
陳葵懋 Ian Chen

2015年12月Adobe呼籲開發者轉移到HTML5
https://blogs.adobe.com/primetime/2015/11/adobe-primetimes-commitment-to-html5/

Google Chrome 預設關閉Flash，HTML5將是優先選項

YouTube 將預設用 HTML5 播放影片

Thoughts on Flash
https://www.apple.com/hotnews/thoughts-on-flash/
• Flash was designed for PCs using mice,
not for touch screens using fingers
• If developers need to rewrite their Flash websites,
why not use modern technologies
like HTML5, CSS and JavaScript?

HTML
用於建立網頁的標準標示語言，描述一
個頁面結構，並由瀏覽器轉化為網頁呈
現，是一種標示語言而非程式語言
HyperText Markup Language
超文字標記語言

DOM
由W3C標準化，各瀏覽器廠商以此標
準實作，解決各瀏覽器間物件模型不一
致的問題
Document Object Model
文件物件模型

HTML 標準發展史
01
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
HTML 5
2014

The Browser Cold War
http://www.extremetech.com/computing/109127-the-browser-cold-
war

What's HTML5
HTML
(Structure)
CSS 3
(Presentation)
JavaScript
(Behavior)
HyperText Markup
Language
HTML文件標籤，負責建
立網頁元素架構，告知瀏
覽器該如何解析網頁
Cascading Style
Sheets 層疊樣式表，用
來添加HTML 文件的樣
式，例如字型、顏色、間
距、圓角、轉場動畫...
直譯式程式語言，可用於
開發前端網頁、桌面和行
動應用程式
(Windows/Mobile App)
以及後端伺服器應用服務
(Node.js)
Web Page

樣式套用
<style>
body { font-size:medium; }
</style>
CSS 3
API 呼叫交互應用
<script>
var
contect=canvasobj.getContext(“2d”);
</script>
JavaScript
網頁標籤結構
<head> <body> <div> …..
HTML
What's HTML5

KEY WORD
顶部“开始”面板中可以
对字体、字号、颜色、行
距等进行修改。
HTML CSS 3 JavaScript 缺一不可
沒有JavaScript，HTML 5 等於0
What's HTML5

支援客戶端本機儲存，
離線資料庫、行動應用
離線儲存
支援直接插入影片、音
訊，不需要第三方外掛
多媒體
搭配CSS3呈現多樣化
版面
樣式呈現
新的語意化標籤，讓
HTML文件結構更完整
語意
HTML5 特色

因應行動化支援觸碰操
作控制
觸碰事件
支援繪製canvas、
WebGL、SVG等功能
圖像繪制
支援拖曳存取本地端的
檔案系統
檔案存取
HTML5 特色

HTML5
CSS 3
HTML 是以瀏覽器為載具，
但各家瀏覽器實作支援程
度不同
瀏覽器支援度
ADD YOUR TITLE HERE

http://html5test.com/
檢測您的瀏覽器
http://caniuse.com
快速查詢瀏覽器支援功能
瀏覽器支援度

開發工具 – Visual Studio
Visual Studio Community
https://www.visualstudio.com/zh-hant/vs/community/

HTML 5 語法特徵
1 HTML 5
<!DOCTYPE html>
2 HTML 4
<!DOCTYPE html
PUBLIC "-
//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/
TR/xhtml1/DTD/xhtm
l1-transitional.dtd">

HTML 5 語法特徵
1 HTML 5
<meta charset=utf-8"/>
2 HTML 4
<meta http-
equiv="Content-Type"
content="text/html;
charset=utf-8"/>

HTML 5 語法特徵
1 HTML 5
<link href=“"
href="StyleSheet1.css"
rel="stylesheet" />
2 HTML 4
<link rel="stylesheet"
type="text/css"
href=“……" >

HTML 5 語法特徵
1 HTML 5
<script
src="JavaScript1.js">
</script>
2 HTML 4
<script
type="text/javascript"
src=“…….." >

HTML 5 新語意標籤
網頁文件結構更清楚
• article
• footer
• header
• hgroup
• nav
• Section
• …

增強的標記元素
豐富多樣化表單UI元件
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
取決於Browser對於HTML 5的支
援程度
不同Browser呈現樣式不同

email url number
http://www.diveintohtml5.org/forms.html

• 自動驗證
required="required"
• 自動記憶
autocomplete=“off“ (off/on , 預
設=on)
• 鎖定唯讀
readonly="true"
• 文字方向性
dir="ltr“(ltr / rtl , 預設= ltr)
• 輸入提示(placeholder)
• 增減(step)
• 最大值／最小值 (min & max)
援程度

• 建議清單
搭配datalist清單，指定其選用的
datalist即具有建議輸入選單的效
果
• 多檔上傳
• 驗證的正則運算式
定義驗證的正則運算式，並且必
須搭配 title 屬性使用，title 屬性
是用來當驗證失敗時所要提示的
訊息文字。
援程度

繪圖
Canvas
• 具有2D、3D能力
• 必須使用腳本語言來操控 –
JavaScript
• 線條、矩形、圓、圖像
• 目前瀏覽器大多支援(IE9)
• 只是一個畫布標籤
canvas 標籤負責顯示的職責、
而 Context 物件負責描繪的
職責
• 沒有JavaScript支撐 = 沒有繪畫能力
• 繪畫三部曲
取得畫布
指定2D、3D
呼叫API進行繪製
• http://www.kevs3d.co.uk/dev/phor
ia/

影音
Video
<embed
src=“xxx" ….></embed>
<object …..> </object>
<video src=“…."></video>
<audio src=“…."></audio>
• video用以播放影片
• audio用以播放音訊
• MP4、WebM、Ogg
實際上HTML5是開放支援所有格
式，但由瀏覽器實作而決定了實
際能運作的格式

本地儲存
Local Storage
• Cookie有大小限制
• Cookie隨httprequest來回傳
送，浪費頻寬及效能
• HTML5 Local Storage 生命週
期長
• HTML5 Session Storage 生
命週期短
• key-value pair 的形式

Cordova
JavaScript
撰寫APP 商業應用邏輯
除原生JavaScript亦可使用
TypeScript AngularJS
Cordova Plugin
APP操作設備原生功能
Camera、 Geolocation、File
System…
HTML CSS 3
APP UI
Front-End Frameworks
WinJS , jQuery Mobile

Cordova
02
03
04
01
跨平台支援 Windows Phone、
Windows Store、iOS、Android
HTML+CSS+JavaScript
實現開發上架Store的APP
One Project One Dev Tool
開發社群資源龐大

RWD 響應式網頁
響應式網頁
網站在不同的裝置（桌面電腦顯示器、行動電話、平版）上瀏覽時，自動對應不同解析度及尺寸，呈現最適合的版面配置

Responsive Web Design
RWD 響應式網頁
R
W
D
!
• 在不同解析度下改變網頁頁面的排版佈置，
讓不同的設備都可以正常瀏覽同一網站
• 盡可能減少使用者為了瀏覽資訊，而進行
多餘的縮放、平移和捲動等操作行為
• Base on CSS3 Media queries
• The same HTML to all devices
• Bootstrap
Ethan Marcotte | 2011

Summary
• HTML5已不再只是針對網頁編寫的標
記語言
• HTML5 = HTML + CSS3 +
JavaScript API
• HTML5 增強前端支援，能建立更豐富
的網頁及網路應用程式
• 各瀏覽器支援程度不相同，但趨向
HTML5是一個已見的事實
• 行動化APP/響應式設計

Html5

Recommended

Recommended

More Related Content

Similar to Html5

Similar to Html5 (20)

More from Ian Chen

More from Ian Chen (17)

Recently uploaded

Recently uploaded (11)

Html5