菜鳥前端工程師的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優化串起網路行銷專家和前端工程師的合作之路

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

菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?
菜鳥前端工程師的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新增元素目錄:

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

 

 

 

 

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


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


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


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


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


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


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

只會用PS就落伍了!Python畫出皮卡丘才夠屌!

只靠Python就能畫出皮卡丘?我聽都沒聽過,直到看到這篇文章就服了…

只會用PS就落伍了!Python畫出皮卡丘才夠屌!
只會用PS就落伍了!Python畫出皮卡丘才夠屌!


前陣子上映的名偵探皮卡丘劇照

還記得前陣子上映的動畫電影「名偵探皮卡丘」票房成績不俗,賣座程度僅次於「復仇者聯盟-終局之戰」。雖然電影中的那隻皮卡丘是以「賤萌」的形式呈現,但卻也激起許多工程師小時候時看「神奇寶貝」中,那隻呆萌的皮卡丘的回憶。在大陸就有熱血的 Python 工程師使用 Python 的 「海龜」 Turtle 繪圖模塊,畫起皮卡丘來,而且還畫得唯妙唯肖的!先看看以下的效果吧:



大陸網友文摘菌用Python來畫皮卡丘,畫得唯妙唯肖 (圖片來源:https://mp.weixin.qq.com)

步驟:先選好畫板大小、設置好畫筆顏色、粗細,再定位好位置後,開始畫鼻子、頭、耳朵、眼睛、嘴、身體、手腳、尾巴。Python 的 Turtle graphics 模塊,中文直譯為「海龜繪圖」,是提供給兒童學習程式語言用的模組。想像螢幕上有一隻帶著畫筆的海龜在 X,Y 軸平面座標上,從座標 (0,0) 出發。你給牠下指令「turtle.forward(15)」,牠就會往前走 15 像素的距離,接者你下指令「turtle.right(25)」,牠就會朝向順時針 25 度的方向轉彎。不斷對著海龜重複著這類型的指令,海龜就能完成一幅圖畫。


透過定位下指令移動畫筆位置的海龜繪圖(Turtle graphics)模塊

上圖用 Python 繪製的皮卡丘,就是靠著不斷的指定座標,定位與方向而完成的。以下提供這個範例的部分 Python 程式碼以供參考:

import turtle as t

def infoPrt():
    print('coordinate: ' + str(t.pos()))
    print('angle: ' + str(t.heading()))

t.pensize(3)
t.hideturtle()
t.colormode(255)
t.color("black")
t.setup(700, 650)
t.speed(10)
t.st()
#t.dot()
t.pu()
#t.goto(-150,100)
t.goto(-210,86)
t.pd()
infoPrt()

# 头
print('头')
t.seth(85)
t.circle(-100,50)
#t.seth(78)
#t.circle(-100,25)
infoPrt()

t.seth(25)
t.circle(-170,50)
infoPrt()

# 右耳
print('右耳')
t.seth(40)
#t.circle(-250,52)
t.circle(-250,30)
infoPrt()
# 右耳尖
t.begin_fill()
# 左
t.circle(-250,22)
#t.fillcolor("pink")
# 右
t.seth(227)
t.circle(-270, 15)

prePos = t.pos()
infoPrt()
# 尾巴
t.pu()
t.setpos(p_tail)
t.pd()

t.begin_fill()
t.seth(50)
t.fd(25)
t.seth(-50)
t.fd(30)
p_tail1=t.pos
t.seth(-140)
t.fd(36)
t.end_fill()
t.seth(39)

# 右尾和h1
t.fd(72)

# 右尾和v1
t.seth(125)
t.fd(48)

# 右尾和h2
t.seth(40)
t.fd(53)

# 右尾和v2
t.seth(88)
t.fd(45)

# 右尾和h3
t.seth(35)
t.fd(105)
# 右尾和v3
t.seth(105)
t.circle(850, 8)
#t.fd(105)
t.seth(215)
#t.fd(125)
t.circle(850, 11)
t.seth(280)
t.fd(110)
t.seth(220)
t.fd(50)
t.seth(309)
t.fd(56)

以上只提供部分代碼,因為完整的多達 360 行。其實使用 Turtle 海龜模組畫圖,原理非常簡單,只要先定位好座標再畫出曲線即可。難的是每個部位的位置如何定位。Python 初學者不想畫那麼複雜的話,可先學習只畫出皮卡丘的臉即可 (如下圖)。作法參考另一位網友的 CSDN 博客文章: 「教大家用python画皮卡丘的脸」。


Python初學者可先學習畫出皮卡丘的臉 (圖片來源:https://blog.csdn.net/hl_zmfh/article/details/83215693)

其實除了 Python 以外, Java 也有Turtle 海龜繪圖功能哦。有興趣的人可以挑戰用 Java 畫皮卡丘看看,你會有意想不到的收穫哦!

 

推薦文章:
程式語言大不同!軟體工程師淺談Python跟Java區別~


全球前十大AI領頭羊,告訴你Python課程有多重要!


想要自學Python?首先你要先懂它是誰!


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


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


網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?


Python課程不僅能拍電影,還能當咖啡師,超多才多藝!

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

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

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

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

HTML5新增元素目錄:

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

因此前端工程師建議可以在 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>

 

 

 

 

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


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


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


達內教育海外合作企業


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


原來在SEO優化的世界裡也有任性的”反派角色”!?


人工智慧:為商業導向而研發或為改善人民生活而存在?

蒙娜麗莎不僅會笑還會眨眼睛?!全靠人工智慧辦到了!

蒙娜麗莎不僅會笑還會眨眼睛?!全靠人工智慧辦到了!
蒙娜麗莎不僅會笑還會眨眼睛?!全靠人工智慧辦到了!

生活中因為人工智慧真的多了很多樂趣呢!讓蒙娜麗莎除了微笑還會眨眼睛說話呢!

在過去,AI 機器學習研究人員開發了一套系統,它可以利用靜態的人臉照片/肖像呈現逼真的動作。有了這樣的系統,每一張人像照片都可以變成動畫,彷彿畫中的肖像都變成活生生的人一樣!

日前三星人工智慧研究中心(Samsung AI Center)發表的論文中,就描述了這套系統,該論文已經上傳到 Arxiv (註:一個收集物理學、數學、電腦科學等論文預印本的網站)。該系統使用了新的方法,將「來源臉孔(就是人在做動作時的頭部特寫)」影片上的特徵與「目標臉孔」的數據對應,讓目標臉孔做出來源臉孔的動作。如以下影片所示:

這些三星駐莫斯科的研究人員在這篇論文也表示,只需要一位人臉的模型,就可以利用人工智慧來使一個圖像呈現出說話、做各種表情的影片。雖然效果還稱不上是完美,但也足夠假以亂真了。不過在讓這些肖像「活過來」的前提,是需要擁有大量的臉部數據資料。數據越多,表情及動作就越逼真。

運用AI人工智慧,可以讓愛因斯坦或是瑪麗蓮夢露等名人的照片、甚至是世界名畫「蒙娜麗莎」,呈現栩栩如生的動作,有了生動的表情及動作,就彷彿活過來了一樣。如下圖的蒙娜麗莎合成動畫,就使用了三個不同的「來源臉孔」的影片。最終的成果都有很大的差異。

 

而且,這個系統還運用了所謂的「生成對抗網絡(GAN)」,也就是利用機器學習來讓兩個模型相互對抗,第一個模型彷彿製造贗品的「工匠」,試圖欺騙第二個「鑒别者」模型:我們現在手上有真實的data,「工匠」要做的事就是要做出這個data的「贗品」,而「鑒别者」則是要分辨給他的data是真的還是假的,並且會給出一個回饋。「工匠」根據「鑒别者」給的回饋來「訓練」他的工藝,也就是調整模型的數值;一旦「工匠」將其數值調整到「鑒别者」分誤以為是真的data時,就可以說我們訓練出了一個能夠模擬真正data的模型。

但是在這些研究人員提供的其他例子中,有些生成的結果,質量是差強人意的。例如有些例子的來源影片是取自於新聞,結果生成出來的目標影片竟然也有來源影片下方的新聞跑馬燈,跑馬燈上的字幕是用亂碼填充的。雖說如此,但是這個系統,能達到如此的效果對目前技術來說,已經算是不錯了。不過現在這個系統仍只適用於臉部,你還不能讓蒙娜麗莎跳舞。人工智慧機器學習仍然有很大的進步空間。

 

 

 

推薦文章:

人工智慧寫的文章比人寫的還要好?!記者作家難道要失業了?

 

AI人工智慧訓練師其實就在你身邊!而且只靠你我常用的IG?!

 

人工智慧造的喵星人,長相令人笑到噴飯!

 

達內教育海外合作企業

 

網路行銷課程又多了新角色!這個最近爆紅的APP你還沒下載嗎?

 

SEO優化學得如何?本篇詳細舉例,讓你輕鬆理解!

 

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

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!
工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

想轉行當前端工程師其實沒那麼難?遵照以下步驟以下步驟照著做,讓你夢想不再是空想!

今天要跟大家分享的文章是2019年教你正確的網頁前端學習路線! 很多人想要轉職成為網頁前端工程師,但是尚未找到適合自己的學習方法。為此達內教育前端工程師課程的老師就和大家分享了這篇正確的網頁前端學習路線,一起來一看究竟!

第一步:把握HTML/CSS

這是前端工程師要會的基本的網站的構建元素,是所有網頁設計/開發者都必須要學會的語言。並且HTML/CSS也很簡單易學,沒得挑!

第二步:學會使用基本工具

文本編輯器:例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器:Photoshop、Illustrator 等
FTP/SSH 工具:Filezilla、PuTTY 等
網頁瀏覽器:Chrome、Firefox 等
雲端硬碟:Dropbox、Google Drive 等

第三步:進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型:String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步:搭建基本網站

使用如 Hostgator、Hostmonster 等虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師前端工程師

現階段的你可以:
1. 建立簡單的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合,無法獨立架站)

接下來你還需要進修的有:
1. HTML/CSS框架:如 Bootstrap 
2. 熟悉網頁後端的程式語言:PHP (建議初學者用)、Ruby 等
3. JavaScript 框架:如 React、Angular 等
4. 數據庫:如 MySQL

第六步:HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步:網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言,但是對程式語言初學者較難入手)
Python (簡單易學,但是尚未如 PHP 般普及,不過隨著 AI 的爆紅 Python 也越來越普及。

第八步:數據庫(專注於一個!)

關係型數據庫:如 MySQL 
非機構化數據庫:如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步:有必要時,精進一些進階的前端技能:

SSH & Basic Command Line
CSS 預編譯器:如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步:應用

VPS 虛擬專用伺服器 
應用雲端平台:如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步:恭喜你,成為一名全端工程師/後端工程師/網頁開發者了!

可以架設網站/網頁開發
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師,或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能):精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架:路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能):基於 PHP 的 CMS 網站

WordPress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組,不過功能有限,適合需要快速架站的場合。

第十四步 (選修技能):行動 App 開發

其實你不需要進修 Java 和 C 語言,只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App

以上就是前端工程師課程老師為大家分享的前端學習路線的文章,希望本篇文章能夠對想要學習網頁前端技術的初學者們有所幫助。想要了解更多Web學習方法記得關注達內教育評價。最後祝大家都能夠順利學成,成為一名優秀的網頁前端工程師。

 

 

推薦文章:
如何成為前端工程師?首先你要先具備…


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


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


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


厭世代正風行?來上Java課程可以幫你扭轉困境!


Python課程搭配產業知識,科技不再冰冷無趣


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

達內教育更進階!正式與Adobe·ACA 國際認證簽約成功!

達內教育更進階!正式與Adobe·ACA 國際認證簽約成功!
達內教育更進階!正式與Adobe·ACA 國際認證簽約成功!

達內教育跟國際級品牌正式簽約合作,可見它的教育品質真的很讓人放心!

最近上網想學平面設計,搜尋相關的課程介紹,無意中刷到達內教育評價還有他們公司最近發生的事情~

日前,美國納斯達克上市的教育集團達內教育集團在完成了與 Adobe-ACA 國際認證合作的簽約儀式。達內教育集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師都出席了此次簽約儀式。

雙方代表表示,就在之前早已達成的合作意見,達內教育為與之展開深度交流,緊緊圍繞後續全校推廣工作如何更有效實施展開密切溝通。四川文化藝術學院希望藉助 Adobe 國際品牌、Adobe 國際認證的獨特優勢,以及達內教育評價在 Photoshop平面設計網頁設計等數位藝術職業教育領域的經驗和成就,以及達內教育集團已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質,規劃在數位藝術領域宣傳和推廣 Adobe 國際認證,引進國際資源,培養國際數位藝術人才。

 

 

 

推薦文章:
2018百度品牌數字資產榜揭曉,達內教育上榜!

 

程式語言百百種,最好最實用的在達內教育通通找得到!!

 

看完這篇,你需要的達內教育都幫你準備好了!!

 

達內教育開幕 培養台灣IT人才進入全球企業

 

前端工程師入門:網頁顏色代碼對照表

 

RWD和AWD是啥?差別又是什麼?前端工程師課程大解密!

 

AI人工智慧進駐零售業;貨架管理快,狠,準!!!