Embed Size (px)
Citation preview
2
OUTLINE
2
•HTML5 簡介
•如何編寫符合 HTML5 的檔案
•新增和廢除的 tag•如何製作相容於各瀏覽器的 HTML5網頁
3
HTML5 簡介
3
3
•HTML5 的發展史
•HTML4.0•HTML4.01→XHTML1.0•XHTML1.1 (W3C)•2004, WHATWG (Web Hypertext Application Technology Working Group)•2007, W3C, HTML WG, HTML5•2009/7 終止制定 XHTML2.0•WHATWG 估計「 HTML5 規格達到 W3C 的推薦標準」在 2022 年
4
HTML5 簡介
4
•HTML4 之前，主要用來定義Richtext 、 Hyperlink 的呈現。
•HTML5•繼承 HTML4•偏重 Web 應用程式
•更好的呈現內容
•HTML5 規範的全稱是 ” HTML5 －－ A Vocabulary and associated APIs for HTML and XHTML”
5
HTML5 特色
HTML5 標準還在制定中
6
HTML5 市場接受度
YouTube 提供 HTML5 撥放器
Jobs 宣布放棄 flash電子書商 (Scribd) 往 HTML5 發展
– 所有電子書改以 HTML5 格式
– 電子書格式支援行動載具 ( 手機、平板 )
Amazon– Kindle 電子書改用 HTL5
7
HTML5 特色
7
•HTML5 用於呈現 Web 應用程式的新增功能
•用於繪圖的 Canvas element•支援 Drag 、 Editable•Undo & Redo•擴充的 HTMLDOM API•離線儲存
•Web SQL 資料庫
•Web Workers 最佳化 JavaScript 執行
•Geolocation•……
8
HTML5 特色 (cont.)
8
HTML5 用於更好的呈現內容的新增元素
用於影音播放的 video 和 audio用於描述檔案結構的article 、 footer 、 header 、 nav 、 section新的表單控制項
9
HTML5 呈現型態
2014 年
20 年前網頁設計
15 年前Flash動畫
10 年前Java 程式跨平台
7 年前VS.NET 程式跨平台
2~3年前智慧型手機設計
方法 1 ：使用 Java 設計Android 手機
方法 2 ： 2012 年使用網頁方法來設計Android, iphone…各廠牌手機
歷年來網頁設計流行過什麼？
11
何謂 HTML5
廣義定義： HTML5 是由 HTML+ CSS+ JavaScript 所組成，目標就是減少瀏覽器對外掛程式的需求。
基礎技術：
– 使用 Html5 + CSS + javascript 進階技術：
– 使用 jquery + PhoneGap
12
HTML5 與 HTML4 差異 (1)
語法簡化，例如文件型態定義：– HTML4
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
– HTML5• <!DOCTYPE html>
13
新增語意標籤，例如 <header> 、 <footer> 、 <section> 和 <article>– HTML5 的設計是要更好的描繪網站的結構，讓搜尋引擎更容易擷取到網頁重點
– 位置可自由搭配
HTML5 與 HTML4 差異 (2)
14
HTML5 普及狀況
14
•瀏覽器的相容性•瀏覽器之間實作上的相容性也是 HTML5 的重要課題
•W3C 於 2010/11/02 公佈 IE 、 Chrome 、 Firefox 下一版本對 HTML5 的支援程度
•http://html5test.com/
15
FeatureInternet Explorer 9 Release Candidate
Chromium 9.0.597.94 (73967)
Firefox 4.0 Beta 11
WebKit Nightly Build r70732
Attributes 100% 100% 100% 100%Audio 100% 100% 100% 100%Video 100% 92.31% 76.92% 85.71%Canvas 95.57% 89.18% 84.09% 94.34%
Foreign Content 90.91% 90.91% 100% 100%
getElementsByClassName 83.33% 100% 88.89% 100%
XHTML 100% 50% 100% 42.86%
• 資料來源： http://test.w3.org/html/tests/reporting/report.htm2010/11/02
勝勝
勝 勝
勝勝
勝 勝
16
17
如何編寫符合 HTML5 的檔案
17
使用 XML 語法編寫 HTML5 檔案
使用 HTML 語法編寫 HTML5 檔案
18
使用 XML 語法編寫 HTML5檔案
18
傳統使用 XHTML1.0 ，需在起始位置加入<!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>HTML5 只需要寫為<?xml version=“1.0” encoding=“UTF-8”?>
<html xmlns=“http://www.w3.org/1999/xhtml”>此寫法也直接指定編碼為 UTF-8 ，不需在 meta tag 另外宣告
19
使用 XML 語法編寫 HTML5檔案
19
•一個以 XML 語法編寫的基本網頁
<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title> 基本的 HTML5 檔－使用 XML</title></head><body>
<p> 基本的 HTML5 檔內文－使用 XML</p></body></html>
20
使用 HTML 語法編寫 HTML5檔案
20
•一個以 HTML 語法編寫的基本網頁
<!doctype html><html><head>
<meta charset="UTF-8"><title> 基本的 HTML5 檔－使用 HTML</title>
</head><body>
<p> 基本的 HTML5 檔內文－使用 HTML</p></body></html>
21
廢除的 TAG
21
Tag名稱 替代方案
applet 改用 embed/object
dir ul
frame, frameset, noframes
改用 iframe與 CSS
isindex 用 form與文字欄位的組合
listing, xmp 改用 pre和 code
noembed 必須處理補救時，可以使用 object
plaintext 用 text/plian的 MIME type
rb 改用 ruby
bgsound audio
22
廢除的 TAG
22
•basefont, big, blink, center, font, marquee, s, spacer, strike, tt, u•改用 CSS 設定
23
23
分類 •tag
•與文件結構有關
•section, article, aside, nav, footer, header, hgroup
•內嵌外部內容 •figure, video, audio, source, canvas, embed
•表單 •keygen, output, progress, meter, mark, ruby/rt/rp, time, command, details, datalist
新增的 TAG
24
描述內容結構的 TAGS
24
HTML5 加入了 header, nav, section, article, aside, footer等的 tag 來描述頁面及檔案結構
這些 tag 對網頁 layout 不具任何意義，若要指定 layout ，需使用 CSS
25
描述內容結構的 TAGS
25
section ： general 的 blockarticle ：獨立的內容，如網誌本文、回應（例如可以做為 RSS 傳送的一個單位）
aside ：跟本文內容較無關，如網誌側欄其它文章的列表
nav ：用來放網站其它頁面的連結
header 、 footer ：與一般網站放置 title 、聯絡資料等習慣相同
26
如何製作相容於各瀏覽器的HTML5 網頁
26
將原有 div tag 中具有特別的意義的，如header 、 footer 、 article等，改以對應的 tag 表示
在 HTML5 中，描述內容結構的新 tag其預設的 display值為 block ，因此為了在舊版瀏覽器可排出一樣的效果，要指定讓這些新 tag 的 CSS display屬性為 blockarticle, aside, figure, footer, header, hgroup, menu, nav, section{ display:block; }加入 HTML5shiv (http://code.google.com/p/html5shiv/)<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->使用 IETester 來驗證頁面是否在 IE6~IE9都相同
27
HTML5 Demo
目前 HTML5 的相關範例很多，但是並非所有的 Browser都支援 !!http://html5demos.com/
設計智慧型手機主要方法
(1).採用應用程式設計法：
– 例如：使用 JAVA 程式來撰寫 android 手機程式。或是 Objective-C 和 Xcode 來撰寫 iphone 程式，或使用 Visual Studio VB.NET 和 silverlight 來撰寫微軟 Window Phone 手機程式。
–缺點：程式技術較困難，無法跨越各種平台、各種廠牌、各種解析度。
設計智慧型手機主要方法
(2).採用網頁程式設計方法：
– 使用 Html5+CSS+javascript ，結合jquery+PhoneGap 。
– 優點：網頁程式較為簡單，寫好的程式可以廣泛應用，可跨越各種平台、各種廠牌
採用網頁程式來設計手機
因為網頁程式較為簡單
寫好的程式可以廣泛應用，可跨越各種平台、各種廠牌
未來可能會造成大流行 !!
