iT邦幫忙

DAY 5
4

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 5

MIS2000Lab.的「HTML5 認證考試,從零開始」#5-- HTML5超簡易入門

  • 分享至 

  • xImage
  •  

上一篇文章:http://ithelp.ithome.com.tw/question/10157050

根據維基百科的說明:

2004年由Web Hypertext Application Technology Working Group(WHATWG)提出
名為Web Applications 1.0,即是HTML 5草案的前身,再於2007年獲W3C接納並成立了新的HTML工作團隊。

在2008年1月22日第一份正式草案發行。......資料來源 http://zh.wikipedia.org/wiki/HTML5

HTML5新功能如下:

 用來增加文檔的語義結構(semantic structure)的新元素。

 新的表單控制項和內建的驗證功能。

 支援原生(native)的audio和video,這樣用戶就不必依賴於瀏覽器plug-in元件(不用外掛程式)。

 在<canvas>元素和相關的JavaScript API提供了網頁一個自由的區域進行繪製,而JavaScript命令做繪圖,匯入與匯出。

 支援檔案上傳到Web Server。

 支援拖放(dragging and dropping)頁面上的元素。

 當瀏覽器處於離線狀態,仍支援Web應用程序繼續運行。

 支援local data storage,功能面遠超過傳統的Cookie。

==== HTML5文件架構 ====

下圖列出幾個重點:

 <nav>用來作為導覽(navigation)。如下圖最上方,可以經由導覽列連回首頁。建議只放置主要的導覽標題到<nav>裡面。

 <article>表示文章的主體部分,可以獨立展示的Blog文章(或一篇新聞)、網友針對這篇文章的評論、或是分類目錄。

 <section>用來表示文章內容的一部份,以下圖為例,一篇文章裡面有兩個<section>段落。

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091813542a04d562c31_resize_600.jpg[/img]

==== 可編輯的<article> ====

根據O’REILLY出版的「HTML5 Cookbook」一書的說明,

<artcle>的內容如果允許編輯,請改為<article contenteditable>。

這樣的功能早在IE 5.5就有支援,當初是希望做成「所見即所得(WYSIWYG)」的瀏覽器。

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091826542a04e231557_resize_600.jpg[/img]

如下圖

在<header>裡面放了兩份標題與導覽 <nav>。

[img=415,342]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091837542a04edc74b7_resize_600.jpg[/img]

在<header>裡面也常見到另一個<hgroup>,用來將表頭標題增加更多訊息。

通常會用<h1>~<h6>來制訂標題文字的大小,<h1>文字最大而<h6>最小。

==== 日期時間 與 圖片 ====

首先介紹日期與時間的<time>

<time datetime="2014-08-08T09:00:00-0500"> 9am today in New York </time>

請搭配ISO(國際標準組織)的日期與時間格式。

再來是圖片的部分,

<figure>代表圖片區塊。

底下會有<figcaption>表示圖片的”標題”。

請注意<figcaption>與<img alt=”圖片取代文字”>兩者的差異。

[img=415,216]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091849542a04f9c6616_resize_600.jpg[/img]

==== details,折疊與隱藏 ====

<details>必須搭配<summary>才能在折疊(隱藏)時,做一個摘要的說明。

不過,IE 11瀏覽器看不到這效果,

我改用 Chrome瀏覽器來觀看。

[img=415,252]http://ithelp.ithome.com.tw/upload/images/20140930/20140930091858542a050274db3_resize_600.jpg[/img]

不要走開,馬上回來

下一篇文章 http://ithelp.ithome.com.tw/question/10157369

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#4--超入門的CSS 與 selector
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#6-- CSS樣式、Box Model與HTML5
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
kevin3372000
iT邦新手 3 級 ‧ 2014-09-30 19:05:49

HTML5 有很多 tag 因為開發者不熟悉 spec 而誤用,造成 SEO 不佳。建議使用前先讀官方 Spec 。

我之前曾經寫過一篇 SEO 的文章,歡迎各位參考:http://blog.cgmlife.net/posts/2014/05/23/seo-tutorial

0
mis2000lab
iT邦好手 1 級 ‧ 2014-10-01 09:14:06

非常感謝您的文章,很受用 :-)

0
kmo67143
iT邦新手 5 級 ‧ 2021-02-08 17:29:15

看不到範例,請教觀看方式...?

我要留言

立即登入留言