標籤: HTML5

前端工程師寫網頁的省時利器Emmet(一):快速產生標籤名稱

前端工程師寫網頁的省時利器Emmet(二):快速產生階層

想當個又會工作又懂得享受的前端工程師嗎?那這系列文章就非學不可啦!!(二)

讓前端工程師每天輕鬆開發網頁的神器你非學不可!!學好它就護好肝!!(快速產生階層)

前端工程師必備「Emmet」基礎教學目錄：

父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層（父元素與子元素）之間的關係。想成為前端工程師的同學們未來在處理網頁時，一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式：

父子元素一次輸入

前端工程師在使用 Emment 在設定子元素時非常方便，只要在父子元素間加入 > 符號即可。如下方的動態圖所示：假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置子元素 p，並在 p 中在加上孫元素 ol 與 li 等動作，只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可一次寫完!

兄弟階層一次輸入

承上面「父子元素一次輸入」的範例，若想在 p 的上方放置 h2 標題，但是 h2 標題不屬於 p 的父元素，位階是跟 p 同等的，則 h2 與 p 互為兄弟元素。

上方提到：元素間互為父子關係則用 > 隔開；若為兄弟元素，就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例，若前端工程師想在互為兄弟階層的 h2+p 的階層下，再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做？那就把 h2+p 視為一個群組，用 () 括號的方式包起來，把用括號起來元素視為同一階層來看即可，所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。

上一層

承上面「群組 Grouping」的範例，若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方，新增一個 div 父元素（class name 名為「news_p」以及 id 名為「paragraph2」），就可以在元素間加入＾符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。

本例的 div 元素使用 ^ 符號來往上爬一個階層，如果想要爬兩層的話，就是 ^^ 符號。

想成為前端工程師，這些快速鍵要記得多練習幾次，熟練後才能在編寫HTML 時更有效率。

其他閱讀

前端工程師寫網頁的省時利器Emmet(三):元素與流水編號

前端工程師寫網頁的省時利器Emmet(二):快速產生階層

前端工程師寫網頁的省時利器Emmet(一):快速產生標籤名稱

想當個又會工作又懂得享受的前端工程師嗎?那這系列文章就非學不可啦!!(一)

前端工程師必備「Emmet」基礎教學目錄：

身為一個前端工程師，一定要裝一個「省時神器」 Emmet 外掛，可以大大節省前端工程師在編寫 HTML 及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物，如玩玩喵星人、上上健身房運動等等。

Emmet 支援的網頁編輯器如下圖：

安裝的方式因個網頁編輯器而異，且在網路上皆可以查到，故此省略。以下小編先介紹基本的使用方式：

快速產生標籤名稱（Tag Name）

前端工程師在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的 HTML5 樣板。透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。

假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示：

只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下

有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等

快速產生 className 與 id

我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E

若是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤，則輸入「div.news_p.c1」後按 Ctrl+E

前端工程師省時神器 Emmet 一般預設的元素是 div，所以如果直接輸入英文句號後，寫 class name 的話，就會自動產生一個 div 元素加上指定的 class name。承上例，輸入「.news_p.c1」後按 Ctrl+E

除了 class name，我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤，則輸入「#news_p」後按 Ctrl+E

class name 和 id 可以同時使用，例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤，則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

以上介紹過個常用的 Emmet 標籤快捷縮寫方式，更多的元素縮寫方式都可在 Emmet 官方文件中找到：Emmet cheat sheet

其他閱讀

前端工程師寫網頁的省時利器Emmet(三):元素與流水編號

前端工程師除了RWD外, 還可依需求選擇其他方式來做SEO!!

零基礎入門前端工程師難不難?看完這篇你就知道!!

想成為前端工程師為自己轉換跑道卻又擔心沒有基礎嗎?先耐心看完這篇再下定論吧!!

今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速，前端也成了很重要的崗位之一，前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真的很簡單，很多想要轉行進入 IT 行業的新手會選擇前端工程師。那要怎麼自學?下面就來和小編一起來看一看文章吧~首先我們學習前端，要知道前端的三個大內容，HTML、CSS、JavaScript，其中 HTML 和 CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習 JavaScript 等等。

一、首先我們要理解 HTML、CSS、JavaScript 分別是什麼?

HTML 就相當於一個人，CSS 相當於一個人穿著的衣服，JavaScrip t相當於讓這個人做什麼動作，這樣一形容呢，我們就很好理解了，這個人就是網站，需要有 header 頭，body 身體，footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式，網站裡的動態效果就都是我們的 JavaScript 去實現的。

二、零基礎學前端工程師難學嗎?

想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁，相信你就會知道。我們用到的軟件呢，對於入門級來說我們一般推薦大家用 DreamWeaver，新建一個 HTML 後，出現的界面是這樣的，

下面我們開始輸入原始碼，我們可以看到這裡有這樣的原始碼<body></body>，這個就是我們網頁的身體，我們接下來要輸入的內容都是在這中間輸入的，這個括號表示的標籤，標籤都是一前一後的，成對兒出現的，除了一些特殊的標籤，隨後我們再一一給大家講解。現在我們輸入點內容，看看效果。

我們輸入一個標籤<div><div>，點擊右上角的地球瀏覽一下，會發現彈出了一個空網頁，什麼也沒有，那是因為我們現在只書寫了HTML，還沒有寫CSS，簡單來說就是，我們創建了一個東西在頁面裡，但是還沒有設置這個東西長什麼樣子，現在我們在設置它的樣子，

CSS”>1、我們為了給這個 div 設置樣式，所有先給它起個名字不然，電腦不知道我們要給誰加樣式，class=”aaa” 的意思是起名為aaa

2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS，我們整個網站要加的所有樣式都是寫在這個中間的。

3、我們在style裡寫樣式，電腦首先要知道我們給誰加樣式，所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式，電腦會自動把.(點)後面的名字，跟下面body裡的名字做一個匹配，這樣電腦就知道，哦~原來你是要給這個div加樣式呀，

4、然後我們把要給這個div加的樣式寫在大括號裡，Width:100px; 意思是這個div的寬是100像素，height:100px; 意思是高是100像素，background-color:#FF0000;意思是背景顏色是#FF0000這個顏色，

注意：

(1)這裡我要給大家解釋一下，大家別看這麼多原始碼，這麼多專有名詞，其實軟件有提示，像下面這樣，直接輸入第一個字母後面的專有名詞就出現了，直接選中就行了，連專有名詞都不用背，前端真的很簡單，

輸入 W 和輸入 h，會自動彈出名詞下拉選單

(2)每一個專有名詞都有提示，說到這裡，不會英語的同學就不要給自己找藉口說英語不好，學不會程式設計了。雖然說很簡單，但是要想真真的把前端學好是需要下功夫的，主要就是要堅持。

下面我們繼續，設置好了以後，我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面，那恭喜你，你成功了！

其他閱讀

前端工程師不知道怎麼選擇RWD和AWD? 這邊直接分析給你!!

前端工程師除了RWD外, 還可依需求選擇其他方式來做SEO!!

自學前端工程師課程可行嗎?首先你要了解的是….?

想自學前端工程師課程卻又擔心這個擔心那個?看完這篇文章會有個方向的!!

一、首先我們要理解 HTML、CSS、JavaScript 分別是什麼?

二、零基礎學前端工程師難學嗎?

CSS”>1、我們為了給這個 div 設置樣式，所有先給它起個名字不然，電腦不知道我們要給誰加樣式，class=”aaa” 的意思是起名為aaa

2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS，我們整個網站要加的所有樣式都是寫在這個中間的。

注意：

輸入 W 和輸入 h，會自動彈出名詞下拉選單

下面我們繼續，設置好了以後，我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面，那恭喜你，你成功了！

其他閱讀

前端工程師不知道怎麼選擇RWD和AWD? 這邊直接分析給你!!

前端工程師必備HTML5入門課程(上):關於SVG動畫

前端工程師必備HTML5入門課程(下):關於SVG動畫

關於SVG動畫的HTML5課程下篇在此奉上~上篇忘了看的別忘了去看看喔~

SVG 路徑動畫

前端工程師可以使HTML5裡的<path> 元素來定義路徑。

HTML5 中的 SVG Path 的基本指令列表如下

See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.

(圖片取自：iT邦幫忙)

<path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>

See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.

- M
  起始點的 x,y 座標 (move to)
- L
  從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to)

- H
  從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to)

- V
  從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to)

- C
  從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。向下面圖中的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲線的形狀用，最後一組則是終點座標。

- S
  S 可以從「目前的點」之後，再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是，這個貝茲曲線的形狀，就是這個「目前的點」的鏡射線。聽起來很難理解，前端工程師們看下面的例子就會明白了。
- Q
  Q 就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標就可以了。

- T
  T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。

- Z
  關閉路徑，將「目前的點」的座標與第一個點的座標連接起來 (closepath)

其他閱讀

前端工程師必備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簡介

簡明扼要的HTML5入門課程(十一)上:關於SVG動畫

簡明扼要的HTML5入門課程(十一)下:關於SVG動畫

第十一篇的HTML5入門課有分上下篇喔~這篇是下篇,還沒看過上篇的快去看一下~

SVG 路徑動畫

前端工程師可以使用HTML5裡的<path> 元素來定義路徑。

HTML5 中的 SVG Path 的基本指令列表如下

See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.

(圖片取自：iT邦幫忙)

<path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>

See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.

- M
  起始點的 x,y 座標 (move to)
- L
  從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to)

- H
  從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to)

- V
  從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to)

- C
  從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。向下面圖中的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲線的形狀用，最後一組則是終點座標。

- S
  S 可以從「目前的點」之後，再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是，這個貝茲曲線的形狀，就是這個「目前的點」的鏡射線。聽起來很難理解，前端工程師們看下面的例子就會明白了。
- Q
  Q 就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標就可以了。

- T
  T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。

- Z
  關閉路徑，將「目前的點」的座標與第一個點的座標連接起來 (closepath)

其他閱讀

簡明扼要的HTML5入門課程(十):SVG簡介

簡明扼要的HTML5入門課程(十一)下:關於SVG動畫

簡明扼要的HTML5入門課程(十一)上:關於SVG動畫

HYML5入門課又重新登場了!!第十一篇要介紹的是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簡介

簡明扼要的HTML5入門課程(九)上:Drag and Drop簡介

簡明扼要的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 圓心之ｘ軸座標
– 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入門課程(九)下:Drag and Drop簡介