Web 初學者的第三堂課
HTML5 介紹
照慣例是複習時間
30鐘內完成上禮拜的範例
隨堂測驗
Web 歷史簡介
互聯網的歷史
互聯網進化史
HTML5 的誕生
自W3C於1999年發佈HTML4後，Web世界快速發展，一片繁榮。
人們一度認為HTML標準不需要升級了。
一些致力於發展Web App的公司另行成立了WHATWG組織，直到2007年，W3C從WHATWG接手相關工作，重新開始發展HTML5。
寬頻的普及
和電腦性能的增強，人們不再滿足於單純的通過網路看新聞、收發郵件、串流影音和網頁遊戲。
HTML標準沒有把握住產業的變化及時演進，瀏覽器產品也未升級，這塊新需求被瀏覽器插件滿足了，那就是Flash。這個部署在億萬瀏覽器裡的商業插件儼然成為事實標準。
網路演進
What's new in HTML5
- WebAPP
- Stream
- Graph
HTML5 的差異
- 語法
- 符號編碼
- Doctype
- MathML和SVG
新增的東西
- section
- article
- main
- aside
- header
- footer
- nav
- figure
- figcaption
- template
新增的東西
- meter
- time
- bdi
- wbr
- canvas
- datalist
- audio
- video
- source
- embed
- mark
- progress
新增的屬性
- tel
- search
- url
- date
- time
- number
- range
- color
廢棄的元素
- tel
- search
- url
- date
- time
- number
- range
- color
想知道更多？
去看 w3 的定義文件吧！
跟以往不同的標籤定義
- B 元素現在是加強表示的文字，但並不表達額外的重要性
- Strong 元素代表了重要性，而非著重強調
- I 元素現在代表了一段需要使用不同的語氣或聲調的文字
以往常見的架構
HTML5 推薦的新架構
HTML5 推薦的新架構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<article>
<section></section>
<section></section>
<section></section>
</article>
<aside></aside>
</main>
<footer></footer>
</body>
</html>HTML5與HTML4的區別
HTML5 Migration
HTML5 New Elements
28 HTML5 Features
HTML5 的支援程度
HTML5 API
HTML5 API
- Fullscreen API
- Page Visibility API
- getUserMedia API
- Battery API
- Link Prefetching
The HTML 5
JavaScript API Index
HTML5 API 練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Where Am I</title>
<link rel="stylesheet" href="">
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<p id="geo"></p>
</main>
<footer></footer>
<script>
navigator.geolocation.getCurrentPosition(function (pos){
geo.textContent = "經度：" + pos.coords.latitude
+ " 緯度：" + pos.coords.longitude;
});
</script>
</body>
</html>