- Jun 03 Mon 2019 17:00
前端工程師HTML5歸類出的內容第七部分
- May 31 Fri 2019 23:30
新手前端工程師需要的 HTML5 入門課 (六)
踏入前端工程師領域必備的九堂 HTML5 課(六)-progress載入進度顯示條
- May 31 Fri 2019 22:45
前端工程師HTML5歸類出的內容第六部分
難道HTML5應證了,科技始終來自於人性嗎?居然有更快速的方法在網頁中插入影片檔了!!
HTML5新增video元素-終於可以撥放影片了!
在 HTML5 版本出現之前，網頁排版只有<div>和<span>兩個元素，早就已經無法應付現今功能越來越完備的網頁 —— 甚至連撥放影音的元素都沒有。在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。 而 HTML5 中的 <video> 元素提供了前端工程師可直接在網頁中嵌入影片檔的方式。 要在 HTML5 中使用 <video> 元素嵌入影片檔的語法與結果範例如下：See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen.
- May 30 Thu 2019 21:18
前端工程師HTML5歸類出的內容第五部分
- May 30 Thu 2019 21:10
新手前端工程師需要的 HTML5 入門課 (五)
踏入前端工程師領域必備的九堂 HTML5 課(五)-video影片嵌入
- May 29 Wed 2019 21:02
新手前端工程師需要的 HTML5 入門課 (四)
踏入前端工程師領域必備的九堂 HTML5 課(四)-audio音訊嵌入元素
- May 29 Wed 2019 20:47
前端工程師HTML5歸類出的內容第四部分
HTML5應有盡有?連下載的進度條都有!! 到底怎麼用就讓我們看下去!!
- May 28 Tue 2019 20:44
前端工程師HTML5歸類出的內容第三部分
之前介紹過HTML5的排版元素了,以為這樣就結束了嗎?沒那麼簡單,接下來我們還要來看另外三個!!
為什麼 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>
以上代碼呈現結果為：
- May 28 Tue 2019 20:41
新手前端工程師需要的 HTML5 入門課 (三)
踏入前端工程師領域必備的九堂 HTML5 課(三)-article,section與aside元素排版
- May 27 Mon 2019 20:41
前端工程師HTML5歸類出的內容第二部分
