前進前端工程師之HTML5入門課程-SVG基本圖形動畫

前進前端工程師之HTML5入門課程-SVG基本圖形動畫
前進前端工程師之HTML5入門課程-SVG基本圖形動畫

HTML5之於前端工程師,就好像水之魚一樣,密不可分!其中SVG基本圖形動畫可是一定要會的!

 

SVG 基本圖形動畫

前端工程師常常會使用 <animate> 元素來繪製 SVG 動畫。

今天我們先來學如何繪製一個方形,並且將動作設定在三秒鐘內往右移動,然後會重複相同的動作 3 次。HTML5 原始碼與結果呈現如以下所示:

See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.

以上所有的 HTML5 標籤分析如下:

  • <attributeName>
    屬性名稱,就是當你指定了這個屬性,就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移,水平移動的座標為 x,所以該例中 attributeName 為 x。若為垂直移動的話,attributeName 則為 y。
  • <from>
    動畫開始時的屬性值。
  • <to>
    結束動畫時的屬性值。
  • <dur>
    動畫持續時間。
  • <repeatCount>
    動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3;若要動畫無限重複的話, repeatCount 則設為 indefinite。
  • <fill (freeze | remove)>
    這裡的 fill 不代表填色,而是指定動畫結束時的屬性,屬性可選 freeze 或是 remove,remove 是預設值,也就是動畫結束之後,圖形返回原本的狀態,而 freeze 則是在動畫結束後,固定在結束的狀態。

 

 

 

 

 

推薦文章:
前進前端工程師之HTML5入門課程-SVG 路徑動畫


SEO無痛該怎麼做?資深前端工程師教你對的方法!


頂尖前端工程師必備技能之一-掌握RWD基礎概念


愛因斯坦也得過這種病? 專屬成功人士的疾病Python學員們知道嗎?


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


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


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

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

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

在學HTML5的時候,常常聽到前輩說SVG圖檔比點陣圖還好用,到底該怎麼用呢?

何謂 SVG?

在以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是以點陣圖模式呈現,但是目前時下最流行的 RWD 響應式網頁是可以隨著螢幕調整網頁布局,點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮,因此HTML5的向量的 SVG 是不錯的解決方法。

SVG(Scalable Vector Graphics,可縮放向量圖形)是 W3C 制定的開放性網路標準之一,此圖片格式再網頁中能以向量格式呈現圖片。網頁設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔,在放在網頁中。運用方式其實就跟 .jpg、.png、.gif 等圖片檔一樣,但不同的是 SVG 檔不會因尺寸的改變而失真,日後要修改時也可直接開啟檔案修改,相當方便。

如何置入 SVG 影像到網頁中?

如同 .jpg、.png、.gif 的方式,SVG 圖檔使用 img 標籤被置入到 HTML5 檔中,如下方所示:

<img src="image.svg" alt="" height="300" />

使用 SVG 畫圖形

要用 SVG 畫出簡單的圖形,首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性,如下例所示:

<svg width="1000" height="1000"></svg>

在此我們先舉「畫圓形」為例子,如下所示:

<svg width="2000" height="2000">
   <circle cx="80" cy="80" r="50" fill="magenta" />
</svg>
  • – cx 圓心之x軸座標
  • – cy 圓心之 y 軸座標
  • – r 半徑
  • – fill 填滿色彩
  • – stroke 圓形外框

結果如下所示:

See the Pen svg circle by Tedutw (@Tedutw) on CodePen.

同理, SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」,半徑與圓心的屬性都要換成長與寬,原始碼與結果如下所示:

See the Pen svg rect by Tedutw (@Tedutw) on CodePen.

同理可證, SVG 標籤改成「line」,x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標,原始碼與結果如下所示:

See the Pen svg line by Tedutw (@Tedutw) on CodePen.

三邊以上的摺線,前端 工程師可用 SVG 「polyline」(多點折線)標籤,並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示:

See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.

SVG 繪製橢圓形 (ellipse) ,標籤屬性的下法與上述的「circle」類似,差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義,原始碼與結果如下所示:

See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.

三邊以上的形狀,用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示::

See the Pen svg polygon by Tedutw (@Tedutw) on CodePen.

 

 

 

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


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


前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


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


從七大點告訴你Python和Java有何不同!!


網頁設計AWD 要怎麼做才能對 SEO 無痛呢?這就告訴你!

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

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?
菜鳥前端工程師的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新手指南(十一)-SVG圖檔超好用?


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


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


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


不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!


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


沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

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

菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?
菜鳥前端工程師的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」 即可。

 

 

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


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


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


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


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


前端工程師學CSS字體單位-絕對單位篇


前端工程師和網頁設計師必學-了解整體網站的規劃流程

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

菜鳥前端工程師的HTML5新手指南(八)-拖曳元素介紹(下)
菜鳥前端工程師的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教學第一招-工欲善其事,必須要有免費的網頁編輯器


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


達內教育海外合作企業


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


網頁變成蚊子館,網路行銷課程沒人點開?


URL網址到底暗藏什麼玄機?它跟SEO優化又有什麼關係!?

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

菜鳥前端工程師的HTML5新手指南(七)-拖曳元素介紹(上)
菜鳥前端工程師的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 參數來修改樣式

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

 

 

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


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


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


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


中國IT教育領導品牌 達內教育集團第一家海外授權中心


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


在做SEO優化時,讓測試頁不被搜尋到的方法是..

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

菜鳥前端工程師的HTML5新手指南(六)-網頁語意元素如何用?
菜鳥前端工程師的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各標籤在頁面上的位置

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新增元素目錄:

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條

 

 

 

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


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


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


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


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


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


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

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

菜鳥前端工程師的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>一樣,在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新增元素目錄:

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條

 

 

 

 

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

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


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


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


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


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


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

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

菜鳥前端工程師的HTML5新手指南(四)-音訊如何嵌入?
菜鳥前端工程師的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新增元素目錄:

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條

 

 

 

 

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


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


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


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


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


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


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

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

菜鳥前端工程師的HTML5新手指南(三)-影片嵌入怎麼做?
菜鳥前端工程師的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教學法寶1-文字排版設定好,人人愛看少不了!

 

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

 

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

 

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

 

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