工程師彙整 - 頁2，共6 - 數位行銷大時代

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

要在HTLM5網頁中達到定位其實並不難,只要按照以下幾個步驟就可以輕鬆辦到!

什麼是地理位置定位 (Geolocation) API?

一般來說，在 HTML5 網頁，前端工程師是可以使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量，一定得先獲得使用者同意才可使用。對於具有GPS（如智慧型手機等）的設備，地理位置更為準確。

用法

使用 Geolocation 的主要方法是 getCurrentPosition，可以讀取到用戶設備的當前地理位置。該語法如下所示：
(※以下的語法通通都是寫在 Javascript裡)

navigator.geolocation.getCurrentPosition();

參數：

1. showLocation（必要項目）：是個函式，於瀏覽器成功判斷出位置後呼叫。

2. ErrorHandler（非必要）：是另一個函式，於發生問題，瀏覽器無法判斷出位置時呼叫。

3. options（非必要）：此參數能讓我們自訂geolocation運作的方式。

呈現數據

一般來說，地理位置定位 (Geolocation API) 可以使用兩種方式呈現：Geodetic(地理測量) 與 Civic(城市)：

1. Geodetic (地理測量) 直接呈現經緯度座標表示位置、水平線上的距離 (如公尺) 表示高度等

2. Civic (城市) 則用能使大多數人理解的方式呈現：城市名表示位置、樓層數表示高度等

屬性	Geodetic	Civic
Position (位置)	25.0,121.6	Taipei (台北)
Elevation (高度)	508 meters (508公尺)	101th floor (101樓)
Heading (以360度表示的方向)	234 degrees (234度)	City Centre (市中心)
Speed (速度)	5km/h (時速5km)	Walking (步行)
Orientation (手機的擺放方向)	45 degrees (45度)	North-East (東北)

菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?

HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道

菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

最近HTML5新增一個Web Storage的功能,真的讓前端工程師省了很多麻煩呢!

在過去的 HTML5 ，前端工程師要在用戶端瀏覽器儲存資料，會使用 cookies。HTML5 新增了 Web Storage 功能，取代了只能儲存 4kb 的 cookies。

Web Storage 的優點 (與 cookies 比較)：

1. 更安全

2. 過往儲存於 cookies 中的資料，會在用戶端瀏覽器與伺服器之間運行：因為每次用戶端瀏覽器送出 request 至伺服器時，cookies 就會跟著被夾帶，就會占用到頻寬，而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器，不會在用戶端瀏覽器與伺服器之間運行，所以就不需要占用網路頻寬。

3. 以往 cookies 最多只能儲存 4KB 的資料，而HTML5Web Storage 的儲存空間大得多，其容量依各個瀏覽器而不同，但是一般都至少有 5MB。

4. 速度更快

Web Storage 有分兩種：sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。

數據的生命期

localStorage：儲存於 localStorage 的資料可永久保存，可以利用跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開，localStorage 仍然會存在，永不逾期，除非被清除。

sessionStorage：sessionStorage 的生命周期只存在於瀏覽器的單一分頁，也就是另開新分頁的話，又是一個新的 sessionStorage。除非另外設定逾期時間，否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript裡

有效範圍

儲存於 local storage 的資料可以跨分頁（tab）運作，session storage 則不行。

用法

sessionStorage 和 localStorage 的語法都比較簡單而且類似。其他資料都是以 key/value pairs 的形式儲存。

儲存資料

localStorage.setItem("Key名稱", "字串值");

取得資料

//this will print the value
alert(localStorage.getItem("Key名稱"));

移除資料

localStorage.removeItem("Key名稱");

移除所有資料

localStorage.clear();

以上的語法是以 localStorage 為例來示範，若是用儲存於 sessionStorage，把以上語法中的「localStorage」替換成「sessionStorage」即可。

挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)

其實要在HTML5中達到拖曳效果很簡單呢!只要按照步驟就可以達成囉!!

數據傳輸DataTransfer

在HTML5中，拖曳動作的目的，最主要是為了對來源和目標元素做操作。為了能夠完成整個操作，就需要在來源元素和目標元素間進行傳輸數據。所以在 HTML5中，前端工程師藉由 Javascript 的 DataTransfer 完成數據傳輸。

我們在上例的 dragstart 時，就設置需要傳輸的數據，在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數：

setData(format, data)：用於添加數據，一般 format 對應於 MIME 類型字符串，常見的有 text/plain、text/html 及 text/uri-list 等，但同時也可以是任意自定義的類型；不幸的是 data 只能是 string 或 file。
getData(format)：用於獲取數據。

現在，我們的目的是要將「Drag Me」元素放到其它藍色的目標元素中，如此就需要傳輸它的 ID ，可以透過以下的 Javascript 語法來實現：

draggable.addEventListener（'dragstart'，（ev）=> { 
  ev.target.style.opacity = “。5” ;

  //設置ID
   ev.dataTransfer.setData（'text / plain'，ev.target.id）; 
}）;

dropzones.forEach（（dropzone）=> { 
  dropzone.addEventListener（'drop'，（ev）=> { 
    ev.preventDefault（）
    ev.target.style.borderStyle = 'solid' ;

    //獲取ID const sourceId = ev.dataTransfer.getData（'text / plain'）    
    ev.target.appendChild（document .getElementById（sourceId））  }）}）;

在 dragstart 時，透過 setData 將 ID 放入 DataTransfer 中
在drop事件中，透過 getData 獲取元素 ID ，並透過 appendChild 加入到藍色的目標元素中。

結果呈現如下：

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

因此，這一個 HTML5 Drag&Drop API 的基礎範例教學就結束了。為了實現這麼一個簡單的拖曳 API 事件，就有 6 個事件要操作。因此從前端工程師入門教學的角度來說，要實現HTML5 中的Drag&Drop API ，其實並不容易。

菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)

自從HTML5中有Drag & Drop這個元素,讓上傳檔案變得超容易的呢!

HTML5 Drag & Drop API-讓元素變得可拖曳

在過去，前端工程師要在網頁裡面實現 Drag & Drop 是很麻煩的!需要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但現在 HTML5 有直接的 Drag & Drop 機制，可以讓前端工程師直接使用 drag and drop 的功能，讓使用者透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。

所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性就可辦到，如下例所示 (讓圖片變得可以拖曳)：

<img draggable="true" />

HTML5 Drag & Drop API 的範例

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

讓元素可拖放-HTML的部分

除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是我們本來是「拖不動」它的。但在 HTML5，只要為它加上 draggable=”true” 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分：

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

在HTML5裡的draggable 屬性上加了 draggable=”true”，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。

See the Pen HTML 5 Drag and Drop-2 by Tedutw (@Tedutw) on CodePen.

Javascript-添加拖曳特效

首先，我們想讓拖曳元素成為半透明。我們可以監聽 dragstart 事件：

draggable.addEventListener（“dragstart”，（ev）=> { 
ev.target.style.opacity = “。5” ; 
}）;

See the Pen HTML 5 Drag and Drop-3 by Tedutw (@Tedutw) on CodePen.

然後我們監聽 dragend ，讓它在拖動結束後還原透明度：

draggable.addEventListener（“dragend”，（ev）=> { 
  ev.target.style.opacity = “” ; 
}};

See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.

接下來，我們希望能讓「Drag Me」元素進入藍色的目標元素時，目標元素變成虛線。於是我們為所有的 dropzone 都監聽了 dragenter 及 dragleave 事件，這樣當我們拖動「Drag Me」元素進入這些藍色的目標元素時，目標元素的邊框就可以變成虛線，直到「Drag Me」元素離開時變回實線：

let dropzones = document.querySelectorAll('.dropzone');
dropzones.forEach((dropzone) => {

  dropzone.addEventListener('dragenter', (ev) => {
    ev.preventDefault();
    dropzone.style.borderStyle = 'dashed';
    return false;
  });

  dropzone.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    return false;
  });

  dropzone.addEventListener('dragleave', (ev) => {
    dropzone.style.borderStyle = 'solid';
  });
});

See the Pen HTML 5 Drag and Drop-5 by Tedutw (@Tedutw) on CodePen.

以上 Javascript 重點如下：

HTML 本身預設為幾乎所有的元素是無法拖曳的，所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。
ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素，所以在 dragenter 中，我們用 dropzone 參數來修改樣式

以上我們完成「拖」的動作，接下來要處理「放」的結果，請見下篇：

挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

不再靠天吃飯!! 用人工智慧養蝦, 精準監控讓蝦子存活率提高,蝦隻更大!!

菜鳥前端工程師的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>

以上在HTML5中代碼呈現結果為：

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教學法寶1-文字排版設定好,人人愛看少不了!

美國NASDAQ上市公司、外商IT教育培訓企業

阿逆母湯!!網路行銷課程沒人看,網頁淪為蚊子館?

人工智慧不會讓你失業,還讓你口袋滿滿哦!

企業們都在部屬AI人工智慧了,你還看不到它的潛力嗎?

菜鳥前端工程師的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>一樣，在HTML5中的<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新手指南(六)-網頁語意元素如何用?

這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!

本日HTML5教學,教你利用CSS當你的網頁化妝師!

程式課程選達內，美上市IT課程教育集團

Java課程助你擠進IT專業職場大門

Python到底是甚麼? 可以幹嘛? 很重要嗎? 有多重要?

人工智慧已經能告訴你眼前的東西了!! 到底是什麼狀況?

菜鳥前端工程師的HTML5新手指南(四)-音訊如何嵌入?

如何用HTLM5語法來把音訊元素嵌入網頁呢?其實以下有幾個小技巧可以跟大家分享!

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

在 HTML5 版本出現之前，在 HTML4中要在網頁中聽音樂或看影片，一般只能透過像是 Flash 之類的外掛。而現在的 HTML5 新增 <audio> 元素提供了可直接在網頁中嵌入影音檔的方式。

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

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

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

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

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

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

<audio> 與 </audio> 標籤中夾帶的「Your browser does not support the audio element.」，中譯為：「你的瀏覽器不支援 audio 元素」，平時不會出現，只會在使用者使用的瀏覽器不支援 <audio> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的音訊檔「.mp3」、「.wav」與「.ogg」。但是微軟的 IE 就不支援副檔名為「.wav」與「.ogg」的音訊檔。此種狀況不常見。

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

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

自動撥放

前端工程師建議，若在 <audio> 標籤中指定「自動撥放(<audio controls autoplay>)」，則嵌入的音訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下： (可點右方的「Result」按鈕看結果，即會自動撥放音檔。音檔歌曲：Dream Theater 「Pull Me Under」片段)

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

重複撥放

假設在 <audio> 標籤中指定「重複撥放(<audio controls loops>)」，則嵌入的音訊檔會在撥放完畢後自動重播。語法如下： (「Result」中的音檔撥放結束後，即會自動重播音檔。音檔歌曲：Dream Theater 「Pull Me Under」片段)

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

HTML5新增元素目錄：

HTML5教學法寶1-文字排版設定好,人人愛看少不了!

本日HTML5教學,教你利用CSS當你的網頁化妝師!

Java課程、UI課程、程式課程、網路行銷課程推薦

透過對的Java課程,讓你從茫然的畢業生中脫穎而出!

SEO優化課程教你簡單明瞭地快速設定好robots meta!!

荷蘭AI人工自駕船,讓你輕鬆地一心多用,眼睛閉著都能開船~

菜鳥前端工程師的HTML5新手指南(三)-影片嵌入怎麼做?

在HTML5中有一個常常應用在撥放影片的video元素,你知道該怎麼用它最好用嗎?

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>標籤作用為叫出影片撥放介面(撥放、全螢幕音量控制等)。假設如上述的例子，影片檔案太大的話，也可以利用HTML5中的<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新手指南(四)-音訊如何嵌入?

HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器

HTML5教學法寶1-文字排版設定好,人人愛看少不了!

達內課程先就業再付款- 中時電子報

達內教育評價-故事背後事實的真相甚麼是這樣?!

認真上Python課程,讓你跟著產業景氣找工作

SEO優化串起網路行銷專家和前端工程師的合作之路

菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?

HTML5元素百百種你都認識了嗎?今天帶你來認識一下什麼是<progress>進度顯示條~

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

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

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

一般前端工程師建議，如上述在HTML5中的 <progress> 標籤為例，最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% (語法：<progress value=”22″ max=”100″>) 。如果希望進度條的進度能隨著網頁實際 loading 進度顯示的話，則必需配合 javascript 來設定。

HTML5新增元素目錄：

HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器

本日HTML5教學,教你利用CSS當你的網頁化妝師!

Java課程、UI課程、程式課程、網路行銷課程推薦

單一技能已被淘汰讓Java課程使你充實自我還能媒合高薪職缺

沃而瑪引進AI人工智慧,掃描貨價偵測價格標示樣樣來!!

再不報名Python課程,正從事這些職業的人就要飯碗不保啦!

菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?

HTML5對於還是菜鳥前端工程師的我真的跟它很不熟,老師今天說HTML可以分成七種內容模組都讓我摸索好久~

一般而言，在 HTML5 的前一代 HTML4 中，元素只分成「inline(行內元素)」與「block(區塊元素)」兩大模型。但前端工程師在實際開發過程中，為了讓許多 block 塊級元素既能水平排列，又要讓這些區塊自成一行，避免後面的元素也浮上來蓋住這簽區塊的狀況下，於是衍生出了inline-block 這個同時兼具「inline(行內元素)」與「block(塊級元素)」特性的屬性。(想了解更多詳情，請見這篇：inline-block 屬性介紹)。可見單單把 HTML 元素劃分為 inline 與 block 兩種模型，已不再符合實際需求了。

HTML5新增元素目錄：

因此前端工程師建議可以在 HTML5 中重新定義了 HTML 元素的分類，一共有七種主要的內容模型：Metadata、Embedded、Flow、Sectioning、Heading、Phrasing 與 Interactive

在HTML5中的七種內容模型間也有一些交集的關係，就是一個元素可同時屬於多個分類如下圖所示:

這七種分類簡介如下:

Metadata (資訊元內容)

Metadata 定義整體文件其餘內容的呈現樣式或行為，Metadata 內容出現在 HTML 檔的 <head> 標籤內

屬於 Metadata 的元素有: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>

Embedded (嵌入型內容)

Embedded 內容將其他資源導入文件。

屬於 Embedded 的元素有: <audio>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>, <video>

Interactive (互動型內容)

interactive 內容為專給使用者互動的元素。

屬於 Interactive 的元素有: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <input><label>, <object>, <select>, <img>, <textarea>

Heading (標題型內容)

顧名思義，標題型內容定義斷落的標題。

屬於 Heading 的元素有: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Phrasing (段落型內容)

Phrasing 內容包含了許多行內等級的元素，與 HTML4 的 inline 行內元素相同。

屬於 Phrasing 的元素有: <img>, <span>, <strong>, <label>, <br>, <small>, <sub>等等。

Flow content (流動型內容)

Flow content 包含了大部分的 HTML5 的元素，文件內大部分的內容皆屬此類。

屬於 Flow content 的元素有: <a>、<abbr>、<address>、<article>、<aside>、<audio>、<b>,<bdo>、<bdi>、<blockquote>、<br>、<button>、<canvas>、<cite>、<code>、<command>、<data>、<datalist>、<del>、<details>、<dfn>、<div>、<dl>、<em>、<embed>、<fieldset>、<figure>、<footer>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<hgroup>、<hr>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<keygen>、<label>、<main>、<map>、<mark>、<math>、<menu>、<meter>、<nav>、<noscript>、<object>、<ol>、<output>、<p>、<pre>、<progress>、<q>、<ruby>、<s>、<samp>、<script>、<section>、<select>、<small>、<span>、<strong>、<sub>、<sup>、<svg>、<table>、<template>、<textarea>、<time>、<ul>、<var>、<video>、<wbr> 還有文字等。

Sectioning content (章節型內容)

Sectioning content 會定義標題 headings、內容 content、導覽列 navigation 與 footer 的範圍

屬於Sectioning content 的元素有: <article>、<aside>、<nav>還有<section>

要在HTLM5網頁中達到定位其實並不難,只要按照以下幾個步驟就可以輕鬆辦到!

什麼是地理位置定位 (Geolocation) API?

用法

呈現數據

推薦閱讀: 菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

最近HTML5新增一個Web Storage的功能,真的讓前端工程師省了很多麻煩呢!

數據的生命期

有效範圍

用法

儲存資料

取得資料

移除資料

移除所有資料

推薦文章: 菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

其實要在HTML5中達到拖曳效果很簡單呢!只要按照步驟就可以達成囉!!

數據傳輸DataTransfer

推薦文章: 菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

自從HTML5中有Drag & Drop這個元素,讓上傳檔案變得超容易的呢!

HTML5 Drag & Drop API-讓元素變得可拖曳

HTML5 Drag & Drop API 的範例

讓元素可拖放-HTML的部分

Javascript-添加拖曳特效

推薦文章: 菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)

在HTML5中有三個關於網頁語意的元素~只要好好善用它們就可以輕鬆達到SEO哦!

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

<header>

<footer>

<nav>

推薦文章: 菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)

在HTML5裡有三個元素很適合用來排版網頁內容!但該怎麼用才能發揮它的最大功效呢?

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

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

<section>元素

<aside>元素

推薦文章: 菜鳥前端工程師的HTML5新手指南(六)-網頁語意元素如何用? 這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!

如何用HTLM5語法來把音訊元素嵌入網頁呢?其實以下有幾個小技巧可以跟大家分享!

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

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

自動撥放

重複撥放

推薦文章: 菜鳥前端工程師的HTML5新手指南(五)-網頁內容元素怎麼用?

在HTML5中有一個常常應用在撥放影片的video元素,你知道該怎麼用它最好用嗎?

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

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

自動撥放

重複撥放

HTML5元素百百種你都認識了嗎?今天帶你來認識一下什麼是<progress>進度顯示條~

推薦文章: 菜鳥前端工程師的HTML5新手指南(三)-影片嵌入怎麼做?

HTML5對於還是菜鳥前端工程師的我真的跟它很不熟,老師今天說HTML可以分成七種內容模組都讓我摸索好久~

Metadata (資訊元內容)

Embedded (嵌入型內容)

Interactive (互動型內容)

Heading (標題型內容)

Phrasing (段落型內容)

Flow content (流動型內容)

Sectioning content (章節型內容)

推薦閱讀: 菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?

推薦閱讀:
菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

推薦文章:
菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

推薦文章:
菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

推薦文章:
菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)

推薦文章:
菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)

推薦文章:
菜鳥前端工程師的HTML5新手指南(六)-網頁語意元素如何用?

這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!

推薦文章:
菜鳥前端工程師的HTML5新手指南(五)-網頁內容元素怎麼用?

推薦文章:
菜鳥前端工程師的HTML5新手指南(三)-影片嵌入怎麼做?

推薦閱讀:
菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?