HTML5簡介

2015/10/07 阮韞澂

HTML5

HTML5

2014年10月完成

新標準

最新

最潮

最屌

HTML5

  • 不進行樣式設定
  • 可表達語意
  • 包含canvas等強大的新功能

HTML5語意

  • 將整個網頁作為一篇完整的文章
  • 以特殊的標籤標示語意
  • 可透過HTML結構了解內容
  • 使CSS排版更自然
  • 可幫助機器閱讀(搜尋引擎等)

HTML5語意

Try It!

參考前一頁範例，做出符合HTML5語意的網頁

Demo

HTML5特殊元素

  • mark
  • dialog
  • details
  • 其他

<mark>

  • 使用mark標籤強調文字
  • 預設黃底黑字
  • IE9以下不支援IE嘛

This is a <mark>mark</mark>.
						

This is a mark.

<dialog>

  • 使用dialog標籤顯示對話視窗
  • 浮動於頁面中央
  • 搭配JS操控使用
  • Firefox與IE不支援

<dialog open>這是個對話視窗</dialog>
這是個對話視窗

<details>

  • 使用details標籤產生可摺疊內容
  • 在details中使用summary標籤表示摘要
  • Firefox與IE不支援

<details>
	<summary>這是摘要</summary>
	<p>這裡是詳細內容</p>
</details>
						



	這是摘要
	
這裡是詳細內容

Try It!


<dailog open>
	<details>
		<summary><mark>//柱姐很重要</mark></summary>
		<p>城市不能沒有柱姐</p>
	</details>
</dailog>

參考以上範例，在網頁中使用HTML5標籤

Demo

屬性


<tagname attributename="value"></tagname>
  • 標示於標籤中
  • 表示該元素的額外屬性

屬性

  • 選擇題

<tagname attributename="value"></tagname>
  • 是非題

<tagname attributename></tagname>

屬性

  • 多重屬性

<tagname attribute1="value" attribute2 attribute3="value"></tagname>

全域屬性

常用全域屬性

  • id為一個代表該元素的唯一名稱
  • class功能類似id，但可重複，也可同時有多個class
  • id與class可供JS、CSS或其他HTML元素使用
  • 使用hidden則不會顯示
  • style用於設定CSS
  • 設定contenteditable則該元素內容可編輯

<meta>

  • 使用name與content屬性儲存其他參考資訊
  • keywords,author,descrption等
  • 幫助搜尋引擎

Try It!


<head>
	<meta name="keywords" content="HTML5,meta,meta-data">
	<meta name="author" content="ntnucic">
	<meta name="descrption" content="A slide that introduce HTML5 meta tag.">
	...

參考以上範例，在網頁中加上參考資訊

超連結


<a href="http://ntnucic.github.io/104/">NTNUCIC104社課</a>
  • 對其他網頁或檔案進行連結
  • 內容為顯示文字
  • 以href屬性表示目標
  • 使用網址或相對路徑
  • inline元素

相對路徑

  • 同層資料夾 ./abc.html
  • ./可忽略
  • 往下一層資料夾 123/abc.html
  • 往上一層資料夾 ../abc.html
  • 瀏覽層級會受到系統權限限制

Try It!


<nav>
	<a href="http://ntnucic.github.io/104/">NTNUCIC104社課</a>
	<a href="../../index.html">NTNUCIC104社課</a>
	<a href="../20150930-Intro/index.html">HTML簡介</a>
	<a href="./index.html">HTML5</a>
	<a href="index.html">HTML5</a>
</nav>

參考以上範例，在網頁中使用超連結

Demo

超連結目標


<a href="http://ntnucic.github.io/104/" target="_blank">NTNUCIC104社課</a>
  • 使用target屬性決定連結開啟位置
  • 開啟於同頁面 _self
  • 開啟於新分頁 _blank
  • _self為預設值
  • 舊版HTML可用於指定頁框

Try It!


<nav>
	<a href="http://ntnucic.github.io/104/">NTNUCIC104社課</a>
	<a href="http://ntnucic.github.io/104/" target="_self">NTNUCIC104社課</a>
	<a href="http://ntnucic.github.io/104/" target="_blank">NTNUCIC104社課</a>
</nav>

參考以上範例，在超連結上設定開啟目標

Demo

超連結下載


<a href="http://ntnucic.github.io/104/" download>NTNUCIC104社課</a>
  • 自動下載瀏覽器無法開啟的檔案(壓縮檔等)
  • 使用download屬性強迫下載目標
  • 若給予值表示下載後檔名
  • IE無法使用不意外

Try It!


<nav>
	<a href="../../index.html">NTNUCIC104社課</a>
	<a href="index.zip">NTNUCIC104社課</a>
	<a href="../../index.html" download>NTNUCIC104社課</a>
	<a href="../../index.html" download="123.html">NTNUCIC104社課</a>
</nav>

參考以上範例，設定下載檔案的超連結

Demo

錨點


<h1 id="title">Anchor</h1>
...
<a href="#title">跳到標題</a>
  • 使用#指定設定好的id
  • 頁面捲至指定元素所在位置
  • 可用於不同網頁(url#id)

Try It!


<h1 id="title">Anchor</h1>
...
<a href="#title">To Title</a>
<a href="#footer">To Footer</a>
<a href="anchor.html#footer" target="_blank">To Another Page's Footer</a>
...
<footer id="footer">footer</footer>

參考以上範例，在網頁中使用錨點

Demo

Image


<img src="image1.jpg" alt="A Image" width="304" height="228">
  • src表示圖片位置
  • 使用相對路徑或網址
  • alt為替代文字
  • 使用width與height設定寬高
  • width與height只設定一個則等比例縮放
  • width與height可用CSS代替

Try It!


<img src="HTML5.png" alt="HTML5 Logo">

參考以上範例，在網頁中插入圖片

Demo

Figure


<figure>
	<img src="HTML5.png" alt="HTML5 Logo">
	<figcaption>Fig1. - A HTML5 Logo</figcaption>
</figure>
  • 一組figure代表一組插圖
  • img表示插圖
  • figcaption為插圖的說明

Try It!


<figure>
	<img src="HTML5.png" alt="HTML5 Logo">
	<figcaption>Fig1. - A HTML5 Logo</figcaption>
</figure>

參考以上範例，將圖片改為一組插圖

Demo

圖片連結


<a href="../../index.html">
	<img src="HTML5.png">
</a>
  • 在超連結中加入圖片等元素
  • 該元素成為超連結的一部份

Try It!


<a href="../../index.html">
	<img src="HTML5.png">
</a>

參考以上範例，將圖片作為超連結

Demo

Audio


<audio src="audioExample.mp3" controls autoplay loop>Not Support!</audio>
  • 使用audio元素插入音訊
  • 可播放MP3、Wav、Ogg
  • 使用src屬性或source元素指定來源檔案
  • 設定controls屬性顯示控制面板
  • 設定autoplay屬性載入後自動播放
  • 設定loop屬性結束後從頭循環播放
  • 標籤內文字於瀏覽器不支援時顯示IE9以下

Try It!


<audio src="audioExample.mp3" controls autoplay loop>Not Support!</audio>

參考以上範例，在網頁中插入音訊

Demo

Video


<video src="Wildlife.mp4" controls muted poster="HTML5.png"></video>
  • 使用video元素插入視訊
  • 用法與audio相似
  • 可播放MP4、WebM、Ogg
  • 設定muted屬性靜音也可用於audio...
  • 使用poster屬性設定影片縮圖
  • 載入時、播放前、無法播放時顯示縮圖

Try It!


<video src="Wildlife.mp4" controls poster="HTML5.png"></video>

參考以上範例，在網頁中插入視訊

Demo

Source


<video controls poster="HTML5.png">
	<source src="Wildlife1.mp4">
	<source src="Wildlife.mp4">
	<source src="Wildlife2.mp4">
	Not Support!
</video>
  • 使用source元素指定複數來源
  • 可用於audio和video
  • 無法播放時瀏覽器依照順序切換來源

Try It!


<video controls poster="HTML5.png">
	<source src="Wildlife1.mp4">
	<source src="Wildlife.mp4">
	<source src="Wildlife2.mp4">
	Not Support!
</video>

參考以上範例，使用source指定video或audio的來源

Demo

HomeWork

建立一個個人網頁，並符合以下條件：

  • 自我介紹
  • 個人資訊
  • 插圖
  • 背景音樂
  • 超連結
  • 其他內容
  • 符合HTML5語意

作業或任何問題可mail至ryans610@gmail.com
或是於FB社團發文