月份: 2019 年 5 月

前端工程師必備HTML5入門課程:網頁內容相關語意元素

簡明扼要的HTML5入門課程(一):七個內容模組簡介

簡明扼要的HTML5入門課程(六):載入進度的顯示條

HTML5的新增元素比HTML4多了很多,其中一樣就是今天要介紹的載入進度顯示條~

和 HTML4比起來，HTML5 新增的元素可說是應有盡有。其中還包括 <progress> 元素，讓前端工程師可以用來顯示網頁的載入進度、或是上載、下載的進度等等。

如果想要在 HTML5 中使用 <progress> 元素載入進度條 (progress bar) 的語法與結果範例如下：

See the Pen progress bar by Tedutw (@Tedutw) on CodePen.

上述的 <progress> 標籤，最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% (語法：<progress value=”22″ max=”100″>) 的。如果希望進度條的進度能隨著網頁實際 loading 進度顯示的話，就需要配合 javascript 來設定。

HTML5新增元素目錄：

其他閱讀

簡明扼要的HTML5入門課程(四):嵌入音訊元素audio

簡明扼要的HTML5入門課程(五):嵌入影片元素video

前端工程師必備HTML5入門課程:載入進度的顯示條

前端工程師必備HTML5入門課程:網頁內容相關語意元素

HTML5語意元素姊妹篇登場!!這篇要介紹的是和網頁內容有關係的語意元素!!有興趣的同學請自取~

更簡單、更有利於 SEO – HTML5新增的語意元素

在前一篇提過： HTML4 的時代，網頁排版只有兩種元素：<div>和<span>，早已無法應付近十年來越來越複雜多元的網頁排版。前端工程師只好將這些元素「延伸」以便排版，因此常常看到有<div id=”header”>這樣子冗長的標籤。因此 HTML5 提供了一系列語意元素（Semantic Elements）來取代上述的「延伸」用法，像上述的例子在 HTML5 就可以用 <header> 來取代，既精簡又更利於 Google 的搜尋引擎爬蟲理解，因此對 SEO 有例。

既上篇介紹的<header>、<nav>和<footer>等 HTML5 網頁語意元素之後，本篇要介紹的是與網頁內容相關的<article>、<section>和<aside>。

<article>-最具資格的<div>的接班人

Article 是一個獨立的區塊，使用的方式如同 HTML4 的<div> (或說是用來取代<div>的也不為過)，因為<article>可以在網頁的各地方單獨地被使用、部屬。語意元素定義網頁的標頭，通常放置網站標題。

與<div>一樣，<article>的應用範圍很廣，它包含的內容可以是一篇論壇貼文、一則網路新聞報導、一個部落格的入口、一則意見回覆、一個具互動功能的網頁小工具 (widget 或是 gadget) 等其他獨立的內容區塊。

與<div>一樣，<article>也有在後面加入「id」或是「class」的延伸用法，則 article 標籤則分別看起來就會是「<article id=”…:>…</article>」與「<article class=”…:>…</article>」。

<article>
   這是article區塊 
   <h1>區塊中標題</h1> 
   <p>區塊中內容</p>
</article>

See the Pen article by Tedutw (@Tedutw) on CodePen.

<article>標籤可用於網頁文章中。一個<article>標籤就相當於文章中的一段。

<section>元素

Section 是一個邏輯性的的區塊，可以將一篇文章的內容作分段。一個<section>即為一段內容

<section>裡面也可包含段標、文圖內容等等。常常與<article>一起搭配使用，如下所示：

<article>
   <h1>Welcome</h1>
   <section>
      <h1>Heading</h1>
      <p>content or image</p>
   </section>
</article>

See the Pen article & section by Tedutw (@Tedutw) on CodePen.

如果想要把多個<section>歸類在同一個區塊的話，那就使用<article>來包覆多個<section>吧！

<aside>元素

aside 區塊的內容，一般來說是與主條目關連，但是又不那麼直接相關的附加內容。時常以「網頁側欄」的形式出現，如下面所示：

See the Pen Basic html5 layout example by Tedutw (@Tedutw) on CodePen.

<aside>可以和<section>被同一個<article>所包覆

HTML5新增元素目錄：

其他閱讀

前端工程師必備HTML5入門課程:嵌入音訊元素audio

簡明扼要的HTML5入門課程(三):網頁內容相關語意元素

簡明扼要的HTML5入門課程(五):嵌入影片元素video

上一篇HTML5入門課介紹了嵌入音訊的元素,今天要來介紹的是嵌入影片的元素!!要學起來喔~

HTML5新增video元素-終於可以撥放影片了!

在 HTML5 版本出現之前，網頁排版只有<div>和<span>兩種元素而已，早已無法應付現今功能越來越齊全的網頁 —— 甚至連撥放影音的元素都沒有。在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。而 HTML5 中的 <video> 元素提供了可直接在網頁中嵌入影片檔的方式。
要在 HTML5 中使用 <video> 元素嵌入影片檔的語法與結果範例如下：

See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen.

上述的<vidio controls>標籤作用為叫出影片撥放介面(撥放、全螢幕音量控制等)。若如上述的例子，影片檔案太大的話，也可以在<vidio>標籤內指長寬，範例如下:

See the Pen video element pt.1-width&height by Tedutw (@Tedutw) on CodePen.

<source src=”…”>元素可以指定撥放的影片檔 URL，後方的「type=”video/mp4″」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 mp4 檔。以下為檔案類型與媒體種類 (media type) 的對照：

檔案類型	媒體種類 (media type)
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 支援的音訊檔案有三種：MP4、WebM 與 OGG。
<video> 與 </video> 標籤中夾帶的「Video is not supported by your browser」，中譯為：「你的瀏覽器不支援 video 元素」，平時不會出現，只會在當使用者使用的瀏覽器不支援 <video> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的視訊檔「.mp4」、「.webm」與「.ogg」。但是 IE 與 Safari 瀏覽器就就不支援副檔名為「.webm」與「.ogg」的視訊檔。

<video> 標籤中的「自動撥放」與「重複撥放」指令

上述提到，<video> 標籤可以讓音訊控制面板 (功能有撥放、暫停與音量控制) 顯現。除此之外，前端工程師還可以為 <video> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。

自動撥放

如果在 <video> 標籤中指定「自動撥放(<video controls autoplay>)」的話，則嵌入的視訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放視訊。)

See the Pen video element pt.2-auto by Tedutw (@Tedutw) on CodePen.

重複撥放

如果在 <video> 標籤中指定「重複撥放(<video controls loops>)」的話，則嵌入的視訊檔會在影片撥放完畢後自動重播。語法如下： (「Result」中的影片撥放結束後，即會自動重播視訊。)

See the Pen video element pt.2-loop by Tedutw (@Tedutw) on CodePen.

HTML5新增元素目錄：

其他閱讀

簡明扼要的HTML5入門課程(四):嵌入音訊元素audio

簡明扼要的HTML5入門課程(六):載入進度的顯示條

前端工程師必備HTML5入門課程:嵌入影片元素video

前端工程師必備HTML5入門課程:用新的元素排版俐落又精簡!

HTML5的新元素能讓排版起來更為精簡俐落!!也能加強SEO的效果!!這麼好用的招塊一起學起來!!

為何 HTML5 需要增加這些語意元素?

過往在 HTML4 的時代，前端工程師使用<div>和<span> 兩個元素進行網頁排版的工作。但是因為網頁排版本身就有分成標題、選單、導覽列、側欄等區塊，不只兩種元素。因此常常看到有 <div id=”header”>、 <div class=”nav”>等元素搭配 id 和 class 的「延伸」用法，既冗長又麻煩。

因此在 HTML5 提供了一系列簡單俐落的語意元素（Semantic Elements）來取代，包括<header>、<nav>、<main>、<footer>等。像是 HTML4 的<div id=”header”>在 HTML5 上就可以俐落的使用<header>來取代。不但在寫法上看起來精簡，也讓 Google 的網頁爬蟲更快辨識到網頁的標題、內容、目錄等，因此也有增強網頁 SEO 的效果。以下就針對這些語意元素（Semantic Elements，也被稱為語意標籤，就是「有意義的元素」）來分別作說明：

<header>

header語意元素定義網頁的標頭，通常放置網站標題。

在 HTML4 中， header 元素的寫法如下：

<div id="header">

在 HTML5 就不用那麼麻煩，只要單單使用<header>標籤來取代即可。範例如下：

<!doctype html>
<html>
  <head></head>
  <body>
     <header>
       <h1><header></h1>網頁標題
    </header>
  </body>
</html>

以上代碼呈現結果為：

See the Pen header by Tedutw (@Tedutw) on CodePen.

<footer>

footer語意元素使用時機很廣泛，通常都至於網頁的最下方。

以下資訊常常會出現在<footer>…</footer>標籤內：
-聯絡資訊
-隱私權政策 (Private Policy)
-社群連結 icon 按鈕圖示 (如Facebook、Twitter、IG等)
-服務條款 (Terms of Service)
-版權聲明 (Copyright Information)
-網站地圖 (Sitemap)

<nav>

nav 標籤常出現在<header>標籤下方，或是最左、最右邊(有些部落格網站會這樣編排)，標籤內容為網頁的選單、導覽。範例如下

最後，綜合本文的<header>、<footer>、<nav>標籤，呈現結果如下：

HTML5 各標籤 (header、nav、article、aside 與 footer) 在頁面上的位置

以上的頁面，原始碼如下所示：

<DOCTYPE! html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic html layout example</title>
</head>
<body>
<!--header-->
  <header>
    <h1>< header ><p>可放置頁面主要標題、LOGO 等</p></h1>
  </header>
 <!--nav--> 
  <nav>
    < nav ><p>此網頁的導覽區塊</p>
    <ul>
    </ul>
  </nav>
  <article>
    < article ><p>內容區</p>
    <section>< section ><p>網頁內容的區塊-1</p></section>
  </article>
  <aside>
    < aside ><p>側邊欄位可放置額外資訊、相關連結等</p>
  </aside>
 <!--footer-->
  <footer>
    < footer ><p>頁腳處，可在此聲明版權、使用規範等等</p>
  </footer>
</body>
</html>

HTML5新增元素目錄：

其他閱讀

前端工程師必備HTML5入門課程:載入進度的顯示條

前端工程師必備HTML5入門課程:網頁內容相關語意元素

簡明扼要的HTML5入門課程(三):網頁內容相關語意元素

簡明扼要的HTML5入門課程(四):嵌入音訊元素audio

今天的HTML5入門課要來教大家如何不用外掛程式直接加入音檔使用,快學起來吧!!

HTML5新稱audio元素-終於可以撥放音樂了!

要在 HTML5 中使用 <audio> 元素嵌入音訊檔的語法與結果範例如下：

See the Pen audio element pt.1 by Tedutw (@Tedutw) on CodePen.

上述的<audio controls>標籤作用為叫出音訊控制面板，像是撥放、暫停與音量。

檔案類型	媒體種類 (media type)
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

HTML5 支援的音訊檔案有三種：MP3、WAV 與 OGG。

<audio> 標籤中的「自動撥放」與「重複撥放」指令

自動撥放

See the Pen audio element pt.2-auto by Tedutw (@Tedutw) on CodePen.

重複撥放

See the Pen audio element pt.2-loop by Tedutw (@Tedutw) on CodePen.

HTML5新增元素目錄：

其他閱讀

簡明扼要的HTML5入門課程(五):嵌入影片元素video

簡明扼要的HTML5入門課程(六):載入進度的顯示條

前端工程師必備HTML5入門課程:嵌入影片元素video

前端工程師必備HTML5入門課程:載入進度的顯示條

天天在用HTML5的前端工程師知道有個新增元素叫progress嗎?快來看看下面的介紹吧!!

如果想要在 HTML5 中使用 <progress> 元素載入進度條 (progress bar) 的語法與結果範例如下：

See the Pen progress bar by Tedutw (@Tedutw) on CodePen.

HTML5新增元素目錄：

其他閱讀

前端工程師必備HTML5入門課程:網頁內容相關語意元素

簡明扼要的HTML5入門課程(一):七個內容模組簡介

簡明扼要的HTML5入門課程(三):網頁內容相關語意元素

今天的HTML5入門課承上篇網頁語意元素之後,今天要來介紹網頁內容相關的語意~趕緊看下去吧!!

更簡單、更有利於 SEO – HTML5新增的語意元素

既上篇介紹的<header>、<nav>和<footer>等 HTML5 網頁語意元素之後，本篇要介紹的是與網頁內容相關的<article>、<section>和<aside>。

<article>-最具資格的<div>的接班人

<article>
   這是article區塊 
   <h1>區塊中標題</h1> 
   <p>區塊中內容</p>
</article>

See the Pen article by Tedutw (@Tedutw) on CodePen.

<article>標籤可用於網頁文章中。一個<article>標籤就相當於文章中的一段。

<section>元素

Section 是一個邏輯性的的區塊，可以將一篇文章的內容作分段。一個<section>即為一段內容

<section>裡面也可包含段標、文圖內容等等。常常與<article>一起搭配使用，如下所示：

<article>
   <h1>Welcome</h1>
   <section>
      <h1>Heading</h1>
      <p>content or image</p>
   </section>
</article>

See the Pen article & section by Tedutw (@Tedutw) on CodePen.

如果想要把多個<section>歸類在同一個區塊的話，那就使用<article>來包覆多個<section>吧！

<aside>元素

aside 區塊的內容，一般來說是與主條目關連，但是又不那麼直接相關的附加內容。時常以「網頁側欄」的形式出現，如下面所示：

See the Pen Basic html5 layout example by Tedutw (@Tedutw) on CodePen.

<aside>可以和<section>被同一個<article>所包覆

HTML5新增元素目錄：

其他閱讀

簡明扼要的HTML5入門課程(二):用新的元素排版俐落又精簡!

簡明扼要的HTML5入門課程(四):嵌入音訊元素audio

前端工程師必備HTML5入門課程:七個內容模組簡介

前端工程師必備HTML5入門課程:嵌入影片元素video

用了新的HTML5新增元素audio後是不是覺得很方便啊~今天這篇是姊妹篇~要來介紹的是嵌入影片的元素!!

HTML5新增video元素-終於可以撥放影片了!

See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen.

See the Pen video element pt.1-width&height by Tedutw (@Tedutw) on CodePen.

檔案類型	媒體種類 (media type)
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

<video> 標籤中的「自動撥放」與「重複撥放」指令

自動撥放

See the Pen video element pt.2-auto by Tedutw (@Tedutw) on CodePen.

重複撥放

See the Pen video element pt.2-loop by Tedutw (@Tedutw) on CodePen.

HTML5新增元素目錄：

其他閱讀

前端工程師必備HTML5入門課程:載入進度的顯示條