Site Loader
HTML5教學之靈活運用網頁設計

學好HTML5教學裡的標籤,讓你要操作.設計網頁都不會卡卡的,如此一來,便可以將網頁的樣子完美呈現

HTML 5 新增的標記

目前的 HTML 5 是 HTML 的最新標準,HTML 5 加了許多標記,更有益於網頁的排版、結構更加明顯,此設計符合最初設計的目的為了要集合網路上許多分散的資源,透過標記結構化的串在同一個網頁中。

在列出 HTML 5 新增的標記前,讓我們先看一下上方 HTML 5 的語義架構圖,再配合新增的標籤,會比較快理解。

圖片內的標籤有:

<section> 定義一個大的段落

<article> 定義段落裡的一篇文章

<aside> 網頁內容以外的項目,大多都是側邊攔目

<figure> 定義內體內容的區塊

<figcaption> 定義媒體區塊的標題文字

<figcaption> 定義媒體區塊的標題文字

<header> 定義段落中的標題,不是<head>喔

<footer> 定義頁尾的資訊

<nav> 定義導覽列的內容

在一般網路行銷課程所教的新增的標記中, HTML5教學 裡面的多媒體功能也是受到矚目的。它簡化了以往在HTML處理影音多媒體資料的型態,以往是需要把影片上傳到像 Youtube 等第三方影音平台,在用嵌入的方式來撥放影片。若是使用HTML 5,則可以使用<video>標籤,在自己的網站上完成所有動作:不需要再將影片上傳到第三方影音平台才能在自己的網站上撥放了!典型的標記格式如下:

<video width=”800″ height=”500″ autoplay controls>
<source src=”https://www.tedu.tw/video/達內教育UI課程學員就業分享-李雅青.mp4″ type=”video/mp4″> 
</video>

其<source>標籤指定了要撥放的影片位置,可以指定為自己網站中的影片或是網站的任一個影片URL(包含Youtube的影片),在標記中可以透過 autoplay 指定他自動撥放。也可以加上 control 按鈕,讓影篇撥放時多了可以控制影片的按鈕。以上的 <video> 顯示影片如下:

除了影片功能外,另一個受歡迎的功能叫做 <canvas>標籤,主要是讓我們在網頁上設定一個區塊而透過 Javascript 程式在上面自由作圖。

當然,尚有許多HTML5教學中的其他標籤和屬性,是值得網路行銷人員深入學習的網路行銷課程。不過本系列目的是介紹出現率超過 80% 的 HTML 標籤,讓行銷人員對 HTML 的標籤有初步的了解與認識。而或許還不是網路行銷人員的你對標籤有基本的認識後,有沒有對SEO的工作躍躍欲試呀!!!

推薦閱讀:

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

搶救低薪大作戰,再不來上Java課程就來不及了!

學了網路行銷課程,教你以卵擊石打造高效能工作

新世代SEO你不能不知 六部曲-學網路行銷課程標記 Schema 就可以

新世代SEO你不能不知 五部曲-從網路行銷課程學到”視覺性”的客群

達內IT教育來台設點 媒合學員就業

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *