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
  • email
  • date
  • time
  • number
  • range
  • color

廢棄的元素

  • tel
  • search
  • url
  • email
  • 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>

下禮拜開始

CCS 基礎教學

Web 初學者的第三堂課

By Albert Hsieh

Web 初學者的第三堂課

大同大學資訊創意研究社系列社課

  • 932