什麼!!居然有適合寫Python和Java時聽的音樂?!

什麼!!居然有適合寫Python和Java時聽的音樂?!
什麼!!居然有適合寫Python和Java時聽的音樂?!

想不到還有用Python和Java時專屬的音樂庫!!快記下來吧!!

工程師們,你在寫 PythonJava 程式時還在聽最新流行的歌嗎?小心這些動聽的歌曲會觸動你而讓你分心!你可能會想從座位上起來打節奏、翩翩起舞;或是太過於放鬆而打瞌睡;或是讓你想起過往某些事情,腦中就開始上演小劇場..。http://musicforprogramming.net/ 是專為工程師打造的線上音樂網站,該網站經過精挑細選而選出了 55 張音樂專輯,每張專輯長度大約在 60 分鐘左右,只要打開網站、選好專輯、按下 Play 播放即可收聽。

使用說明:

1. 進入網站 http://musicforprogramming.net/ ,你會發現網頁的設計採 Geek 風格,是模擬工程師們編寫原始碼時的的畫面。如下圖中紅框內所示,目前網站內有 55 張音樂專輯可選 (且還在陸續新增中)。你先在你想要聽的專輯按滑鼠左鍵兩下。

2. 此時如下圖中紅框內所示,你所選的音樂專輯會連同 Play 播放鍵、暫停鍵、向前 30 秒以及向後 30 秒的按鍵出現在右上方,你在 Play 播放鍵的位置用滑鼠左擊兩下就可以聽了。

除了聽合適的音樂能增加工作效率之外,Google 還釋出可生成歌曲的 Python 函式庫 Magenta,採用 AI 人工智慧機器學習演算法 TensorFlow,來進行音樂創作。(參考文章:AI 人工智慧必學 Python 的八大理由) 有人在網路上分享使用 Python 合成音樂的影片如下:

 
 
 
 
其他閱讀
工程師們口中的Python到底是甚麼? 很重要嗎?

從七大點告訴你Python和Java有何不同!!

什麼!!Python也可以用來畫皮卡丘?!到底是怎麼辦到的?

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

 

Python工程師要是連這個單字都唸錯就太掉漆了!!

Python工程師要是連這個單字都唸錯就太掉漆了!!
Python工程師要是連這個單字都唸錯就太掉漆了!!

身為Python工程師的大家有用正確的英文來唸屬於自己專業的英文單字嗎?

為何我們會想寫這篇文章?

最近達內教育有結業的學員,本來專精英文,現在在業界任職程式設計師。他反應常常看見工程師將英文單字的發音發錯,且錯的單字發音幾乎一樣,像是 R&D 唸成 RD 等。因此筆者就蒐集「常被唸錯的英文單字」資料,並寫了這篇文章,發現無論是職場上的工程師、或是還在學習的學生、甚至是其他岡位上的人員經常把這些跟程式設計有關的英文單字唸錯。因此將這些單字整理如來如下:

Spam

請唸成[spæm]

無論是垃圾郵件或是垃圾信都可以稱做 Spam, 有些人會看到中間的 a 就發「啊」的音,於是就變成了「斯棒」。其實這個字要唸成 [spæm],同理,人名 Pam 不要唸成「胖」、交通堵塞 traffic jam 的「jam」與人名 Sam,中間的 a 都要以「[æ]」來發音。

R&D

請唸成「R and D」而不是「RD」

R&D 是 research and development(研究與開發)的縮寫,就是研發人員。請不要唸成「RD」,「RD」是「路(road)」的縮寫。

Safari

請唸成[sə’farɪ]

重音在第二音節的 Safari 是蘋果電腦的網頁瀏覽器。他原本的意思是指在非洲大草原上,觀賞動物或打獵的旅行。許多台灣人會唸成重音第一音節,是錯誤的。

feature phone

請唸成「feature[fitʃɚ]」 phone 而不要誤唸成「future[ˋfjutʃɚ]」 phone

雖然目前智慧型手機當道,但是純粹只能用來打電話及收發簡訊的「feature phone(功能型手機)」仍然有它的市場。台灣也有幾間公司在代工這類型手機的,只是無意之間常聽到裡面的工程師誤把「feature phone(功能型手機)」 誤唸成「future phone(未來手機)」。

parameter

請唸成[pəˋræmətɚ]

parameter 是「參數」、「向量」的意思,重音在第二音節。請不要再把重音放在第一音節唸了。

product

請唸成[‘pradəkt]

這是大家都熟悉的一個單字,是「產品」的意思,但是後面的 ct 的氣音請別忽略掉,否則聽起來就像「Prada」

Amazon

請唸成[ˈæməzɑːn]、[ˈæməzən]

亞馬遜公司的美式發音比較相近「A-me攢」,重音第一音節,許多台灣人都誤唸成「阿嬤zone」或是「阿妹zone」。

Skype、App

請唸成[skaip]、[æp]

Skype 字尾的「E」不發音,請別誤唸成「死該~痞」了!而 App 要唸成[æp]才到位。

CNN

請唸成[si͵ɛn’ɛn]而不是[‘si’ən’ən]

這個字的重音在第三音節。這類組合字母的縮寫,重音都要放在最後一個字母,同理 HBO 的重音也在 O。

Python

請唸成[p’ɑɪθɑn](美式)或是[p’ɑɪθən]

Python 是 AI 人工智慧產業的必備語言,網路上也經常有關於 Python 正確發音到底是「派桑」還是「派森」的爭論。其實這兩種發音都正確 只是「派桑[p’ɑɪθɑn]」偏向美式、而「派森[p’ɑɪθən]」是英式發音。

請大家學好學滿不要再念錯了喔~

 

 

 

其他閱讀

 

 

用Python或Java寫程式時不要再聽流行歌了~改聽這些吧~

用Python或Java寫程式時不要再聽流行歌了~改聽這些吧~
用Python或Java寫程式時不要再聽流行歌了~改聽這些吧~

你還在用Python和Java寫程式時聽流行歌嗎?這可是很容易讓你分心的喔~

工程師們,你在寫 PythonJava 程式時還在聽最新流行的歌嗎?小心這些動聽的歌曲會觸動你而讓你分心!你可能會想從座位上起來打節奏、翩翩起舞;或是太過於放鬆而打瞌睡;或是讓你想起過往某些事情,腦中就開始上演小劇場..。http://musicforprogramming.net/ 是專為工程師打造的線上音樂網站,該網站經過精挑細選而選出了 55 張音樂專輯,每張專輯長度大約在 60 分鐘左右,只要打開網站、選好專輯、按下 Play 播放即可收聽。

使用說明:

1. 進入網站 http://musicforprogramming.net/ ,你會發現網頁的設計採 Geek 風格,是模擬工程師們編寫原始碼時的的畫面。如下圖中紅框內所示,目前網站內有 55 張音樂專輯可選 (且還在陸續新增中)。你先在你想要聽的專輯按滑鼠左鍵兩下。

2. 此時如下圖中紅框內所示,你所選的音樂專輯會連同 Play 播放鍵、暫停鍵、向前 30 秒以及向後 30 秒的按鍵出現在右上方,你在 Play 播放鍵的位置用滑鼠左擊兩下就可以聽了。

除了聽合適的音樂能增加工作效率之外,Google 還釋出可生成歌曲的 Python 函式庫 Magenta,採用 AI人工智慧 機器學習演算法 TensorFlow,來進行音樂創作。(參考文章:AI 人工智慧必學 Python 的八大理由) 有人在網路上分享使用 Python 合成音樂的影片如下:

 
 
 
 
其他閱讀

工程師們口中的Python到底是甚麼? 很重要嗎?

從七大點告訴你Python和Java有何不同!!

什麼!!Python也可以用來畫皮卡丘?!到底是怎麼辦到的?

暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

 

連Python工程師都有可能唸錯的英文?你唸對了嗎?

連Python工程師都有可能唸錯的英文?你唸對了嗎?
連Python工程師都有可能唸錯的英文?你唸對了嗎?

今天要來幫Python工程師和大家上一堂英文發音課!!一起看下去吧!!

為何我們會想寫這篇文章?

最近達內教育有結業的學員,本來專精英文,現在在業界任職程式設計師。他反應常常看見工程師將英文單字的發音發錯,且錯的單字發音幾乎一樣,像是 R&D 唸成 RD 等。因此筆者就蒐集「常被唸錯的英文單字」資料,並寫了這篇文章,發現無論是職場上的工程師、或是還在學習的學生、甚至是其他岡位上的人員經常把這些跟程式設計有關的英文單字唸錯。因此將這些單字整理如來如下:

Spam

請唸成[spæm]

無論是垃圾郵件或是垃圾信都可以稱做 Spam, 有些人會看到中間的 a 就發「啊」的音,於是就變成了「斯棒」。其實這個字要唸成 [spæm],同理,人名 Pam 不要唸成「胖」、交通堵塞 traffic jam 的「jam」與人名 Sam,中間的 a 都要以「[æ]」來發音。

R&D

請唸成「R and D」而不是「RD」

R&D 是 research and development(研究與開發)的縮寫,就是研發人員。請不要唸成「RD」,「RD」是「路(road)」的縮寫。

Safari

請唸成[sə’farɪ]

重音在第二音節的 Safari 是蘋果電腦的網頁瀏覽器。他原本的意思是指在非洲大草原上,觀賞動物或打獵的旅行。許多台灣人會唸成重音第一音節,是錯誤的。

feature phone

請唸成「feature[fitʃɚ]」 phone 而不要誤唸成「future[ˋfjutʃɚ]」 phone

雖然目前智慧型手機當道,但是純粹只能用來打電話及收發簡訊的「feature phone(功能型手機)」仍然有它的市場。台灣也有幾間公司在代工這類型手機的,只是無意之間常聽到裡面的工程師誤把「feature phone(功能型手機)」 誤唸成「future phone(未來手機)」。

parameter

請唸成[pəˋræmətɚ]

parameter 是「參數」、「向量」的意思,重音在第二音節。請不要再把重音放在第一音節唸了。

product

請唸成[‘pradəkt]

這是大家都熟悉的一個單字,是「產品」的意思,但是後面的 ct 的氣音請別忽略掉,否則聽起來就像「Prada」

Amazon

請唸成[ˈæməzɑːn]、[ˈæməzən]

亞馬遜公司的美式發音比較相近「A-me攢」,重音第一音節,許多台灣人都誤唸成「阿嬤zone」或是「阿妹zone」。

Skype、App

請唸成[skaip]、[æp]

Skype 字尾的「E」不發音,請別誤唸成「死該~痞」了!而 App 要唸成[æp]才到位。

CNN

請唸成[si͵ɛn’ɛn]而不是[‘si’ən’ən]

這個字的重音在第三音節。這類組合字母的縮寫,重音都要放在最後一個字母,同理 HBO 的重音也在 O。

Python

請唸成[p’ɑɪθɑn](美式)或是[p’ɑɪθən]

Python 是 AI 人工智慧產業的必備語言,網路上也經常有關於 Python 正確發音到底是「派桑」還是「派森」的爭論。其實這兩種發音都正確 只是「派桑[p’ɑɪθɑn]」偏向美式、而「派森[p’ɑɪθən]」是英式發音。

請大家學好學滿不要再念錯了喔~

 

 

 

其他閱讀

 

 

有了它前端工程師不再超時工作Emmet:元素與流水編號

有了它前端工程師不再超時工作Emmet:元素與流水編號
有了它前端工程師不再超時工作Emmet:元素與流水編號

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(元素與流水編號)

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。如果要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花去不少時間。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

Emmet快捷複製法
再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

Emmet快捷複製法-2

編號

有時前端工程師在輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

Emmet中快速產生編號
若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們輸入「li.list-$$*5」以及「li.list-$$$*5」

Emmet中快速產生00編號

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet中設定起始編號範例
Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

Emmet中設定反向編號
 
 
 
 
 
其他閱讀
 

有了它前端工程師不再超時工作Emmet:快速產生階層

有了它前端工程師不再超時工作Emmet:快速產生階層
有了它前端工程師不再超時工作Emmet:快速產生階層

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(快速產生階層)

不再爆肝工作的前端工程師都用它Emmet:快速產生階層

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

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

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

父子元素一次輸入

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

Emmet-父子元素一次輸入

兄弟階層一次輸入

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

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

Emmet-兄弟階層一次輸入

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

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

Emmet-如何設群組

上一層

承上面「群組 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 即可。

Emmet上一層的範例

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

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

 

 

 

其他閱讀

 

 

前端工程師寫網頁的省時利器Emmet(四):顯示文字與屬性值

前端工程師寫網頁的省時利器Emmet(四):顯示文字與屬性值
前端工程師寫網頁的省時利器Emmet(四):顯示文字與屬性值

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

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需等到元素展開後才補上內文就更棒了!這個功能 Emmet 也有!不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。


}

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生。

要是想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

Emmet-自訂屬性
如果想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂屬性與顯示文字
如果想要多增加一些屬性值,只要在同一個 [] 中括號中,把每個屬性值用空格隔開就可以啦。就像在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂多個屬性與顯示文字
 
 
 
 
其他閱讀

 

有了它前端工程師不再超時工作Emmet:快速產生標籤名稱

有了它前端工程師不再超時工作Emmet:快速產生標籤名稱
有了它前端工程師不再超時工作Emmet:快速產生標籤名稱

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(快速產生標籤名稱)

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

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

前端工程師必備之 Emmet 支援的網頁瀏覽器
安裝的方式因個網頁編輯器而異,且在網路上皆可以查到,故此省略。以下小編先介紹基本的使用方式:

快速產生標籤名稱 (Tag Name)

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

Emmet中快速產生HTML5樣板
假設我們要產生一個 p 元素,那麼我們只要直接輸入 p 後,再按下 Ctrl+E 鍵,就能自動產生起始元素及結束元素。如下所示:

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

起始元素與結束元素-2
有些元素還會帶入跟該元素有關的屬性,例如:iframe、a 或是 img 等

有些元素還會帶入跟該元素有關的屬性

快速產生 className 與 id

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

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

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

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

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

className和id可以同時使用
以上介紹過個常用的 Emmet 標籤快捷縮寫方式,更多的元素縮寫方式都可在 Emmet 官方文件中找到:Emmet cheat sheet

 

 

 

其他閱讀

 

 

 

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

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

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

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。如果要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花去不少時間。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

Emmet快捷複製法
再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

Emmet快捷複製法-2

編號

有時前端工程師在輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

Emmet中快速產生編號
若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們輸入「li.list-$$*5」以及「li.list-$$$*5」

Emmet中快速產生00編號

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet中設定起始編號範例
Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

Emmet中設定反向編號
 
 
 
 
 
其他閱讀

 

有了它前端工程師不再超時工作Emmet:顯示文字與屬性值

有了它前端工程師不再超時工作Emmet:顯示文字與屬性值
有了它前端工程師不再超時工作Emmet:顯示文字與屬性值

前端工程師準時下班輕鬆工作不再是夢想~只要學會了它!!(顯示文字與屬性值)

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需等到元素展開後才補上內文就更棒了!這個功能 Emmet 也有!不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。


}

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生。

要是想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

Emmet-自訂屬性
如果想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂屬性與顯示文字
如果想要多增加一些屬性值,只要在同一個 [] 中括號中,把每個屬性值用空格隔開就可以啦。就像在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

Emmet-自訂多個屬性與顯示文字
 
 
 
 
其他閱讀