踏入前端工程師領域必備的九堂 HTML5 課(八)-Geolocation API(地理位置定位)簡介
目前分類：HTML5教學 (106)
- Jun 04 Tue 2019 19:30
新手前端工程師需要的 HTML5 入門課 (八)
- Jun 03 Mon 2019 19:00
新手前端工程師需要的 HTML5 入門課 (七)
踏入前端工程師領域必備的九堂 HTML5 課(七)-Web Storage 瀏覽器儲存簡介
- 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歸類出的內容第二部分
- May 27 Mon 2019 20:31
新手前端工程師需要的 HTML5 入門課 (二)
- May 24 Fri 2019 20:08
新手前端工程師需要的 HTML5 入門課 (一)
踏入前端工程師領域必備的九堂 HTML5 課(一)-7個內容模組Content Models簡介
- May 23 Thu 2019 01:07
HTML5歸類出的七大內容(一):內容概論介紹
HTML5有些模型已經不符合實際需要,所以前端工程師居然重新歸論出七大內容!!
- May 13 Mon 2019 22:18
前端工程師須知的RWD秘訣(上):現代化網頁開發的優劣?
前端工程師因為網路的演變,越來越多有效率的方法發展網頁,又有人大方分享了,讓我們看下去!
- May 09 Thu 2019 21:40
前端工程師不藏私大公開(八):流動圖片是會動的圖片嗎?
- May 08 Wed 2019 21:17
前端工程師不藏私大公開(七):天啊!!液態布局其實是喝的?
有一些專有名詞常常讓前端工程師覺得疑惑,看似容易瞭解卻常深奧!!
- May 08 Wed 2019 17:39
前端工程師必學的RWD八堂課(八) | 流動圖片
前端工程師寫不出RWD找不到工作! 關於RWD你必須要懂的八件事(八)
- May 07 Tue 2019 19:46
前端工程師不藏私大公開(六):還不懂媒體查詢嗎?落伍了!!
前面介紹了一些前端工程師必知的語法,還是對媒體查詢懵懵懂懂嗎?沒關係,繼續看下去!!
