勇闖28個關卡學會HTML與HTML5基礎｜FCC前端教程

「經歷」

我自學前端已經有6年多了，自問當時學前端是沒有系統化學習的。一開始邊看文檔，連滾帶爬學HTML和CSS排版，然後深入研究JavaScript，因爲當時最火的就是JQuery，所以用了很長一段時間的JQ。

到了後面遇到有一個項目需要我做APP開發，但是不可能去學IOS開發和安卓開發，因爲項目時間也不可能給我們這麼充裕的學習時間。所以當時的我深入分析了幾個混合APP開發的框架。分析對象包括當時基於AngularJs的Ionic框架和React Native。綜合考慮最後選擇了Ionic，然後自學了Angular2。（過程也是踩過成千上萬的坑學會的）

APP開發的這個過程讓我深入感覺到那時候前端的革命性變化。龐大的前端知識撲面而來，也沒有想到前端已經發展到這樣一個地步。這段時間讓我深刻領會到前端的博大精深，並且被前端這個技術領域深深的吸引住了。

到了後面Vue突然開始火了，各大技術公司都開始使用Vue+Cli腳手架搭建前端應用。越來越多的企業要求使用Vue開發前端應用和WebAPP。熱愛前端的我從來不畏懼需要學更多的知識，既然Vue來勢洶洶，我也開始深入研究和學習Vue開發前端。經過一番折騰Vue也上手了。

至今我依然在不停的學習前端無邊無際的知識和技術。

最近我發現，現在學習技術容易了很多。有各種技術文章、手摸手教學、線上培訓課程和視頻，甚至還有全免費的線上學習課程和練習。相比以前從看文檔，連滾帶爬的在項目中試錯式的學習真的是容易多了。

「前言」

我們都深刻知道，如果想在前端走的更遠更久，基礎知識必須是要牢固的。最近發現一個免費學習編程的網站 freeCodeCamp(🔥) - 官方版（英文） ｜ 中文社區版 。我好學的性格牽動着我的靈魂，忍不住就去研究了一下。我發現裏面的課程確實很全面，而且還有實時和實戰編程練習。就算是對於零基礎的童鞋，也是可以開始學習編程的。

在一個夜深人靜的夜晚，我看着電腦思考人生的時候，我靈機一動，要不我開始寫一個系列的文章和大家一起闖關進攻前端全方位知識點。沒有闖過這些關卡的童鞋，無論前端能力如何，這個可以鍛鍊我們自己，也可以深入知道我們自己的前端水平和差距。想學習前端的童鞋可以從零開始學習，一起排除困難共同打開前端大門！

使用這個免費網站學習編程，每一個知識學習完成後會給大家發放一個證書，然後每一個關鍵學習點之後，還有項目實戰。自從2014年，有超過4萬個freeCodeCamp畢業的童鞋獲得了大企業工作機會。（裏面有提到谷歌，蘋果，微軟，亞馬遜，Spotify等公司）

還有看到一些學員的評價：

• “我在實習的時候，導師就叮囑我在 freeCodeCamp 上做題闖關。技術的精進不僅給了我強大的自信，也讓我得以進入大廠 ThoughtWorks。” — 姜玉珍
• “對於還沒有形成編程思維的新人，即使是 leetcode 上面 easy 級別的算法題目都感到非常有難度，而 freeCodeCamp 的算法題恰好是一個良好的過渡。” — 魏朝欣

無論這些證書是否對我們在中國的企業有一定的價值。但是能獲得多一個證書，沒有什麼不好的呀。廢話不多說了，我們這裏就開始勇闖第一課《基礎HTML與HTML5入門》！

「規則」如何一起闖關

在開始這個闖關的系列之前，講一下我們具體怎麼一起闖關。

首先，如果我是單純在這裏給大家發佈答案，我覺得這些文章就沒有太大意義了。所以我希望在闖關的過程中一起學習到更多的知識，弄懂更深層的技術和用我的相關經驗講說這些知識在工作中的使用場景和小技巧。

---

個人覺得英文版本的操作和體驗都更好，加上英文版本的課題會更新。所以我會在英文版中與大家一起闖關。但是喜歡用中文社區版本也是可以的哦。酸甜苦辣各有所愛，但是效果和課題基本都是一樣的哈。

每一篇文章的大概內容：

1. 首先我們每一篇文章會盡量包含一個大知識點中的N個關卡。每一個知識點的關卡數量不一，所以有時候可能會拆分成幾篇文章來講說。
2. 每一個關卡當中的知識點在freeCodeCamp中有一定的知識材料。但是在一起闖關的文章當中也會做一些詳細的知識補充和一些有趣的理解方式。
3. 每一個較難的關卡，都會在文章當中做詳細的思路，多種實現方式等等的講說，讓我們在每一個關卡中能帶走更多深層的知識點。

freeCodeCamp使用教程

---

課程內容

FCC一共有6大課程，一共大約1800個小時的內容和練習。如果是新人，推薦從第一個開始一個一個闖關學習。如果是老司機，是來這裏學習你需要的知識，那可以隨意選擇你需要的課程開始學習。

• 響應式Web設計（300個小時）
• 算法和數據結構（300個小時）
• 前端庫和框架（300個小時）
• 數據可視化（300個小時）
• API和微服務（300個小時）
• 信息安全和質量保證（300個小時）

最後還有一個是數千個小時的面試題可以提供給我們使勁的刷哦！

進入關卡

首先我們展開第一課看一下：

1. 第1點這裏是基礎知識的文章，可以點擊查看。看完基礎知識之後可以點擊下方的回到第一小節開始闖關！
2. 第2點這裏下面所有的都是練習題，一個一個順着闖關即可。

關卡教程

⚠️注意：
大家闖關之前，推薦大家都先使用GitHub登陸，到時候頒發的證書和闖關進度才能得到保存和跟蹤哦！！！

我們先從左邊 👈 部分的內容開始說明：

1. 簡單講說了這個關卡涉及的知識點
2. 描述關卡的挑戰內容
3. 本關卡的所有目標，點擊測試代碼的時候，完成的會出現 ✅，沒有全部 ✅那就是還有部分我們沒有實現哦。所有 ✅才能通關。

接下來就是說明中間的代碼區：

1. 代碼區，用於編寫我們這個關卡的代碼。
2. 錯誤輸出區域，當我們點擊測試代碼後，如果有錯誤就會顯示在這裏。

最後，最右邊的部分是代碼被編譯後的效果，也就是我們在代碼去編寫的代碼最終會在瀏覽器呈現出來的效果哦。（這裏的效果會在我們編寫代碼的同時觸發變化哦！）

提交代碼/測試成功後：

「知識」闖關基礎知識點

HTML是什麼？
HTML 的全稱是 HyperText Markup Language（超文本標籤語言），它是一種用來描述網頁結構的標籤語言。
它採用一種特殊的語法或符號來組織網頁的內容，元素通常都有開始標籤和結束標籤，例如標題、段落、列表。

更好的理解HTML

對於沒有計算機基礎的童鞋（就算是有）都會覺得有點抽象，不太好理解。我們換一個說法來理解一下：

HTML就等同於我們人體裏面的骨架，一塊一塊骨頭（標籤）組裝起來建立起一個人的骨架和結構。比如說經常可以見到的head，body，footer等標籤，就等同於一個人的頭，身體和腳。那其他的標籤比如h1，h2，div，section和ul，li等標籤就是用來組建我們人體每一個部位的小骨頭。

如果HTML加上了JavaScript（人體中的大腦和肌肉）就可以操控整個人的動作，讓一個人活起來了。但是隻有骨頭和肌肉，這個也太難看了吧？想想都覺得嚇人。所以我們會有皮膚來把這些不太好看的東西藏起來，這個時候就需要在HTML中使用CSS（人體的皮膚）。這樣子我們有好的皮膚加上衣服和化妝品的打扮，這樣纔可以貌美如花嘛對吧？

如果我們上面說的骨頭和骨架，在代碼中又是什麼樣子的呢？我們一起來看看：

<h1>Top level heading: Maybe a page title</h1>

<p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>

<ol>
  <li>Number one on the list</li>
  <li>Number two</li>
  <li>A third item</li>
</ol>

這段代碼被編譯後就會在瀏覽器呈現出這個樣子：

HTML5又是什麼？

HTML這種超文本源自於Web早期和最初的用例。當時頁面都是靜態文檔，並且文檔中也有連接和引用到其他的文檔。通過瀏覽器中的hypertext links（超文本鏈接）在文檔之中跳轉與導航。這樣用戶就可以自由的在文檔之中翱翔，不用在文檔直接搜索查看。

後期web頁面和web應用漸漸變得越來越複雜，W3C更新了HTML的規範來讓所有的瀏覽器更加兼容彼此。爲什麼呢？大家應該都知道市面上有五花八門的各種瀏覽器，如果每一個瀏覽器都對HTML有不同的寫法，不同的規範，那我們做前端開發的，有多少的瀏覽器規範我們就需要學會多少種寫法。不用後浪推上來，已經累死在沙灘上了。

那HTML5其實就是第五版的HTML規範，也是目前最新的版本。

基礎知識弄懂了，我們馬上就來開始闖關吧！GO GO GO！

「第一關」用HTML元素與世界問好

關卡名：Say Hello to HTML Elements

身在技術領域的童鞋們都知道，入門任何語言的開頭都是先與世界問個好（所謂的輸出一個"Hello World"）。所以第一關當然是用HTML元素與世界問好啦！😂

知識點

• 這一關我們看到代碼區域有<h1>hello</h1>這一段代碼，這個就是所謂的HTML元素了！也就是人體中的一小塊骨頭 🦴！。
• HTML中每一個標籤都需要開始與結束標籤：<h1> 爲開始，</h1> 爲結束。
• 開始與結束標籤的區別，就是結束標籤多了/（斜槓）。

過關目標

• 修改開始標籤<h1>與關閉標籤</h1>之間的內容。
• 把內容從Hello改爲Hello World。

學會了什麼？

這關卡主要教會我們：

1. HTML中的開始與結束標籤的格式與規範
2. 標籤的內容是什麼
3. 如何修改標籤內容

答案

「第二關」使用H2元素加入副標題

關卡名：Headline with the h2 Element

接下來的幾個關卡中，我們會慢慢的一步一步的搭建一個HTML5的 “貓星人圖片的網頁應用”。

知識點

• h2元素是常用的副標題，其實就是比h1字體要小的標題，用過WPS或者word文檔的童鞋應該秒懂了。
• 這些標題標籤會告訴瀏覽器去顯示一些默認的標題樣式
• h1一般用於網頁大標題，而h2就是用於副標題。
• 其實在HTML當中還有很多自帶的標題元素，例如h3，h4，h5和h6，每一個代碼一個等級的副標題，這裏數字越大，標題的大小就越小哦。

過關目標

• 在h1標籤後面（第二行）加入一個h2標籤。
• 並且在h2元素中加入CatPhotoApp的文字內容。

過關條件

• 創建一個h2元素
• h2元素必須有一個結束標籤
• h2元素必須含有"CatPhotoApp"的文字內容
• h1元素必須含有"Hello World"的文字內容

學會了什麼？

這關卡主要教會我們：

1. 什麼是副標題
2. HTML有哪些副標題
3. 如何加入副標題

答案

「第三關」段落元素加入信息內容

關卡名：Inform with the Paragraph Element

知識點

• p是paragragh（段落）的縮寫，就是我們在寫文章中的段落一樣，一般都是用來放信息內容的。
• 我們可以用<p>我是一個p標籤</p>，這樣的方式來加入段落元素。

過關目標

• 在我們的h2元素下方加入p元素。
• 在p元素的內容中加入文字"Hello Paragraph"。
• 注意：HTML的規範中說明，所有標籤的英文字母都必須使用小寫！

過關條件

• 代碼中必須有一個規範的p元素。
• p元素中必須含有文字"Hello Paragraph"。
• p元素必須有一個結束標籤。

學會了什麼？

這關卡主要教會我們：

1. p元素是什麼
2. 如何加入信息內容段落

答案

「第四關」加入“佔位”文字

關卡名：Fill in the Blank with Placeholder Text

知識點

• 開發者們用一個傳統，就是在沒有內容的時候，排版時都會用統一的佔位文字“lorem ipsum text”。很多人很好奇，爲什麼都用這個？

Lorem ipsum從15世紀開始就被廣泛地使用在西方的印刷、設計領域中，在電腦排版盛行之後，這段被傳統印刷產業使用幾百年的無意義文字又再度流行。由於這段文字以“Lorem ipsum”起頭，並且常被用於標題的測試中，所以一般稱爲Lorem ipsum，簡稱爲Lipsum。

---

原先大家以爲這段拉丁文只是沒有意義的組合，目的是讓閱讀者不要被文章內容所影響，而只專注於觀察字型或版型，並藉此填滿空間。但根據美國拉丁學者Richard McClintock的研究，Lorem ipsum原來起源於西賽羅《善惡之盡》（De finibus bonorum et malorum）第一章（Liber Primus）的32、33兩節。

• 這段佔位文字用了5個世紀也是夠長情的了，既然我們這些關卡是在搭建一個“貓星人”的應用，那麼我們改爲“kitty ipsum text”。😁

過關目標

• 把p元素的內容替換成這一段佔位文字：“Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.”

過關條件

• p元素需要含有“kitty ipsum text”的首幾個單詞。

學會了什麼？

這關卡主要教會我們：

1. 什麼是“lorem ipsum text”
2. 爲什麼“lorem ipsum text”經常用於設計和排版的佔位文案

答案

「第五關」清除HTML代碼註釋

關卡名：Uncomment HTML

知識點

• 代碼註釋是爲了在代碼中留下備註的一種常用寫法。通常爲了給自己和其他開發者留下有意義的備註，讓大家可以更容易的懂得代碼的作用或者含義。代碼註釋是不會影響代碼的運行，或者是顯示出來給到用戶看到的。
• 代碼註釋還有一個非常使用的目的，就是屏蔽代碼。被註釋的代碼就不會被編譯器運行，這樣被註釋的代碼就不會生效了。
• 不同語言有不同的註釋寫法，HTML的註釋寫法開始是<!--，結束使用-->。例如：<!-- <p> abc </p> -->。

過關目標

• 此關卡的代碼都被註釋掉了，所以所有的代碼都沒有生效。（預覽區可以看到是空白的）
• 我們需要清除掉這裏的註釋，讓h1，h2和p元素生效。

過關條件

• 頁面預覽區需要可以看到h1元素內容
• 頁面預覽區需要可以看到h2元素內容
• 頁面預覽區需要可以看到p元素內容
• 頁面中沒有遺漏結束註釋標籤-->

學會了什麼？

這關卡主要教會我們：

1. 什麼是代碼註釋
2. 代碼註釋有什麼作用
3. 如何清除代碼註釋

答案

「第六關」局部HTML代碼註釋

關卡名：Comment out HTML

知識點

• 上一關我們看到可以把整個代碼註釋掉，但是其實很多時候我們可能需要註釋掉局部的代碼，或者是多段代碼。
• 使用方式也是一樣的，在想開始註釋的地方加入<!---，然後結束的地方加入-->。

⚠️注意：
在註釋代碼的時候要注意的一個點，HTML的元素都是有開始與結束標籤的，註釋的過程中如果我們註釋掉半個元素，那代碼就會有結束沒有開頭了。這樣是會報錯的哦。同等概念，後面我們會學到，HTML元素是可以加入屬性的，屬性也是無法單獨註釋的。

過關目標

• 註釋掉整個h1元素和p元素，h2元素要生效。（也可以說頁面上只能看到h2這個元素的效果）

過關條件

• h1元素應該被註釋掉，頁面看不到該元素效果
• p元素應該被註釋掉，頁面看不到該元素效果
• 頁面預覽區需要可以看到h2元素內容
• 每一段註釋都應該有結束註釋標籤-->
• h1，h2和p元素在代碼中的順序不能變

學會了什麼？

這關卡主要教會我們：

1. 如何局部註釋代碼

答案

「第七關」刪除HTML元素

關卡名：Delete HTML Elements

知識點

• 場景：因爲手機的屏幕高度可呈現的空間不多，所以我們要把h1元素刪除掉。

⚠️注意：
刪除代碼和註釋代碼都有一個一樣的原則。就是開始與結束的標籤不能缺了其中之一，要不代碼就會報錯。所以刪除元素的時候也要注意元素的開始與結束標籤的完整性。

過關目標

• 刪除掉代碼中的h1元素，讓我們的頁面更加整潔和更有空間感。

過關條件

• h1元素應該被完整的被刪除
• 頁面預覽區需要可以看到h2元素內容
• 頁面預覽區需要可以看到p元素內容

學會了什麼？

這關卡主要教會我們：

1. 如何正確的刪除元素

答案

「第八關」HTML5元素

關卡名：Introduction to HTML5 Elements

知識點

• HTML5給我們帶來了更多具備豐富代表性的HTML標籤。這些標籤包括main（主要內容）、header（頭部）、footer（腳步）、nav（導航）、video（視頻）、article（文章）、section（區域/分段內容）和更多。
• 這些標籤給HTML的結構帶來了更多可描述性的意義。就好像人體也有很多代表性的結構與區域名稱，比如說：肱骨、股骨、腕骨、肩胛和不規則骨等等。
• 人體的骨頭要分類，也是爲了讓醫生更好的在大量的骨頭中找到或者描述到具體的那種骨頭。那HTML5中的這些豐富的標籤也是一樣的。他們可以更好的幫助搜索引擎找到對應的內容，加入這些標籤也讓我們的網頁做到更好的搜索引擎優化（SEO）。

什麼是搜素引擎？
我們可以把搜索引擎看作是一本很大很大的書中的目錄。我們想想在現代的互聯網中，全世界有多少個網站或者網頁應用？如果沒有一個目錄讓我們可以搜索，我們怎麼可以找到我們想看的內容或者網站？可以說基本是不可能的！

---

搜索引擎怎麼運作？
那搜索引擎的目錄是怎麼生成的呢？這個世界有一種很厲害的蟲，那就是"爬蟲"。每天搜索引擎的公司會派出成千上萬的爬蟲軍隊出去，在互聯網上到處找網站，然後進入每一個網站中閱讀裏面的內容。然後收集回來的內容會經過做過濾和分析，然後建立關鍵詞等等，最後生成一個搜索目錄。我們經常用的搜索引擎包括：百度搜索，谷歌搜索，搜狗搜素，360搜素等等。

用其中一個標籤來舉例，一個main元素中嵌套了兩個子元素：

<main> 
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

小貼士：這些HTML5的標籤的作用和適用性會在後面的“Applied Accessibility（應用無障礙）”的課程中詳細講說。

過關目標

• 在原有的p元素下方添加一個新的p元素，並且加入這段內容Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
• 然後用一個main元素兩個p元素包裹起來。

過關條件

• 應該有2個p元素，每個都有文字內容
• 每個p元素都有結束標籤
• 第二個p元素的內容含有“Purr jump eat…”這段文字
• 代碼中必須含有main元素
• main元素中必須含有兩個p子元素
• main元素開始必須在第一個p元素之前
• main元素結束必須在第二個p元素之後

學會了什麼？

這關卡主要教會我們：

1. 學到了更多豐富的HTML5標籤
2. 學會使用main元素
3. 學會嵌套元素

答案

「第九關」網站中插入圖片

關卡名：Add Images to Your Website

知識點

• 我們可以通過使用img元素爲我們的網頁插入圖片，然後使用元素中的src屬性來指定圖片地址。

⚠️ 注意：img元素是不需要結束標籤的，它是屬於自動關閉型元素。

• W3C規範中，所有img必須填寫alt屬性（alt是“Alternative”的縮寫，就是“替代”的意思）。當一個圖片無法加載或者顯示時，alt屬性的值就會替代這個圖片顯示出來。
• 另外alt對於搜索引擎優化是有一定的幫助的，因爲這個屬性是用來描述一個圖片的。如果這個圖片是一隻貓，對於搜索引擎的爬蟲會針對圖片的Alt取得關於這個圖片的描述。這樣搜索引擎才能知道這個圖片大概是什麼。

⚠️ 注意：

• 如果圖片是單純爲了裝飾的，那alt就留空：alt=""
• 儘量不要在alt屬性中加入特殊字符（或者符號），除非是必須的

一個完整的img元素例子如下：

<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">

過關目標

• 在main元素中的p元素之前添加img元素。
• img元素的src屬性的值指向https://bit.ly/fcc-relaxing-cat
• 給予img元素的alt屬性一個合適的名字：比如“Kitty” (小貓咪的意思)

過關條件

• 頁面中必須有一個img元素。
• img元素中的src屬性指向一個貓咪的圖片地址。
• img元素中的alt屬性值不能爲空。

學會了什麼？

這關卡主要教會我們：

1. 如何使用img圖片元素
2. 懂得使用src屬性
3. 懂得使用alt屬性

答案

「第十關」使用錨元素實現鏈接跳轉

關卡名：Link to External Pages with Anchor Elements

知識點

• 在HTML當中，a (錨) 元素是用於跳轉頁面，可以是內部頁面或者是外部頁面。（內部指的是本網站內的頁面，外部指的是本網站以外的其他網站的頁面。）
• a 元素需要一個網頁地址的屬性叫href。也需要一個anchor text（錨文字）：

例如：
<a href="https://freecodecamp.org">這個鏈接會跳轉到 freecodecamp.org</a>

• 網頁地址：https://freecodecamp.org
• 錨文字（其實就是跳轉鏈接的文案）：這個鏈接會跳轉到 freecodecamp.org

• 使用以上例子，在瀏覽器中就會顯示一段文字鏈接 “這個鏈接會跳轉到 freecodecamp.org”，點擊該鏈接就會跳轉到https://www.freecodecamp.org這個網址。

額外知識點：
以上例子講說的是跳轉外部鏈接，如果我想跳轉當前網址的子頁面呢？(所謂的內部跳轉，但是其實還可以做到當前頁面的位置跳轉，這個下一個關卡就會學到咯！)

• 比如現在我們當前的頁面是"www.freecodecamp.org"，我們的鏈接想跳轉到“www.freecodecamp.org/learn”。
• 這個時候我們的a元素的href屬性可以這麼寫

<a href="/learn">這個鏈接會跳轉到 freecodecamp.org/learn</a>

過關目標

• 創建一個a元素，鏈接文案爲“cat photos”，並且指定跳轉到http://freecatphotoapp.com

過關條件

• a元素的鏈接文案必須含有“cat photos”
• a元素的跳轉地址必須是http://freecatphotoapp.com。
• a元素必須有結束標籤。

學會了什麼？

這關卡主要教會我們：

1. 如何在網頁中添加鏈接
2. 懂得使用href屬性
3. 懂得如何添加鏈接文案

答案

「第十一關」使用錨元素跳轉內部頁面區域

關卡名：Link to Internal Sections of a Page with Anchor Elements

知識點

• a（錨）元素還可以用於跳轉頁面內部的特定區域。
• 創建一個內部跳轉鏈接，首先我們需要在href屬性的值中綁定一個哈希符號#和一個唯一id屬性。
• id屬性是在HTML中任何一個元素都可以綁定的唯一標識。id屬性可以給予一個元素一個唯一的識別名，讓這個元素可以在HTML中被選擇到。

以下是一個內部跳轉鏈接的例子，其中的...代表被省略的一段代碼。

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

我們來分析一下這個例子：

• 這裏的h2元素被綁定了一個id屬性，名字爲“contacts-header”。
• 我們的a元素鏈接的指定href跳轉地址爲#contacts-header。
• 我們可以看到#後面的名字與h2的id值一致，就是這樣點擊這個鏈接的時候，頁面就會移動到綁定了同一個名字的元素的位置。
• 我們要注意的是id屬性的值，在當前頁面中必須是唯一的。

知識點：
在這個例子裏面，我們可以看到a元素多了一個target屬性。這個屬性在鏈接中是非常常用的。我們經常用的各大電商平臺，我們點擊一個商品的鏈接都會打開一個新窗口，但是有一些鏈接就不會。這種就是用target屬性控制的。

---

target屬性的常用值有：

• _blank：在新窗口中打開被鏈接文檔。
• _self：默認。在相同的框架中打開被鏈接文檔。
• _parent：在父框架集中打開被鏈接文檔。
• _top：在整個窗口中打開被鏈接文檔。
• framename：在指定的框架中打開被鏈接文檔。

過關目標

• 修改我們的外部跳轉鏈接的href屬性爲#footer，並且把鏈接的文案“cat photos”改爲"Jump to Bottom"。
• 移除target="_blank"屬性，因爲這個屬性會讓我們的鏈接在全新的窗口打開這個跳轉鏈接。
• 最後在頁面最底部的footer元素中添加id屬性，屬性值爲"footer"。

過關條件

• 頁面中必須含有一個錨元素
• 頁面中只有一個footer標籤
• a元素的href屬性值必須是#footer
• a元素必須沒有target屬性
• a元素的鏈接文章應該是“Jump to Bottom”
• footer元素的id屬性值必須是"footer"

學會了什麼？

這關卡主要教會我們：

1. 如何在網頁中添加內部鏈接
2. 懂得使用id屬性
3. 懂得使用哈希符號鏈接跳轉

答案

「第十二關」文章中嵌套錨元素

關卡名：Nest an Anchor Element within a Paragraph

知識點

• 我們可以在文字中添加鏈接：

<p>
  Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>

分析一下這個例子的實現原理：

• 首先我們有一個文字段落<p>Here's a ... for you to follow.</p>
• 在這個文字段落中"…“的部分我們加入a (錨) 元素：<a href="http://freecodecamp.org"> ... </a>，這裏我們用a元素包裹了”…"這個文字內容，這樣這個文字內容就會變成一個鏈接，並且可點擊跳轉網頁。（記住這裏需要我們有開始<a>與結束</a>標籤，這樣才能指定這個鏈接的開始與結束區域）
• 這裏a元素中加入target="_blank"可以讓鏈接在新窗口打開，href屬性指定了跳轉鏈接。
• 最後"…“的內容在這個例子裏面就是” link to freecodecamp.org"，也就是鏈接的文案（錨文字）。

過關目標

• 首先在main元素中加入一個新的p元素。
• p元素中的文案寫入"View more cat photos"。
• 使用我們原來的a元素替換這段文案中的“cat photos”，從而把這段文案中的"cat photos"改爲一個鏈接。

過關條件

• a元素的鏈接需要指定跳轉"http://freecatphotoapp.com"
• a元素的鏈接文案應該是“cat photos”
• a元素需要被p元素包裹着，然後main元素中需要一共有3個p元素
• a元素需要被新的p元素包裹着，不能是其他的p元素
• p元素中必須含有“View more ” （more後面需要含有一個空格）
• a元素中不能含有“View more”等文字
• 所有p元素必須有結束標籤
• 所有a元素必須有結束標籤

學會了什麼？

這關卡主要教會我們：

1. 在文章段落中添加鏈接

答案

「第十三關」使用哈希符號創建死鏈接

關卡名：Make Dead Links Using the Hash Symbol

知識點

• 有時候我們需要添加一個死鏈接（顧名思義，就是一個點擊後無效的鏈接，不會觸發頁面跳轉）
• 這種鏈接有幾個用途，第一種在排版的過程中還不知道需要鏈接哪裏，第二種就是後面這個鏈接交給JavaScript處理。（後面的JavaScript關卡中會講到哦）

代碼例子：

<a href="#">死鏈接</a>

過關目標

• 當前的a元素中的href是指向一個鏈接地址"http://freecatphotoapp.com"
• 把href屬性值改爲#，就可以把這個錨元素變成一個死鏈接
• 這裏還需要把target屬性移除掉，要不還是會跳轉頁面的

過關條件

• a元素的href屬性值是#，是一個死鏈接

學會了什麼？

這關卡主要教會我們：

1. 用哈希符號創建死鏈接

答案

「第十四關」把圖片變成鏈接

關卡名：Turn an Image into a Link

知識點

• 我們可以通過用a元素包裹一個元素，讓這個元素變成一個鏈接
• 比較常用的一個例子就是使用a元素包裹一個img元素，這樣就可以把一個圖片變成一個鏈接。（也就是說，點擊這個圖片就可以跳轉頁面了）

代碼例子：

<a href="#">
  <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera.">
</a>

這個例子中，我們希望這個圖片的鏈接是一個"死鏈接"，所以href屬性的值需要使用#。

過關目標

• 用a元素包裹頁面中的img元素
• 改變後，我們在最右邊的預覽區把鼠標放到圖片上方，我們可以看到我們的鼠標從一個“普通鼠標誌”變成一個“點擊手指的標誌”

過關條件

• img元素需要包裹在a元素之中
• 圖片的鏈接必須是一個死鏈接
• 所有的a元素必須有結束標籤

學會了什麼？

這關卡主要教會我們：

1. 給圖片添加鏈接

答案

「第十五關」創建無序列表

關卡名：Create a Bulleted Unordered List

知識點

• HTML當中有特殊的元素用於創建無序列表。
• 無序列表需要使用ul元素包裹着多個li元素，開始標籤爲<ul>，結束標籤爲</ul>。

代碼例子：*

<ul>
  <li>牛奶</li>
  <li>芝士</li>
</ul>

這段代碼就會創建一個無序列表，列表內容有“牛奶”與“芝士”。

過關目標

• 移除代碼中最後兩個p元素。
• 然後添加一個無序列表，列出3個喵咪喜愛的東西。

過關條件

• 創建一個ul元素
• ul元素應該包裹着3個li元素
• ul元素必須有結束標籤
• 所有li元素必須有結束標籤
• li元素中必須有內容，也不能是隻有空格

學會了什麼？

這關卡主要教會我們：

1. 使用ul元素
2. 使用li元素
3. 創建無序列表

答案

「第十六關」創建有序列表

關卡名：Create an Ordered List

知識點

• HTML當中還有一種叫有序列表（就是前面會按照1，2，3，4… 以此類推）
• 需要使用ol元素包裹着多個li元素，開始標籤爲<ol>，結束標籤爲</ol>

代碼例子：

<ol>
  <li>肥豬</li>
  <li>肥牛</li>
</ol>

以上這段代碼會創建一個有序列表，有序的列出“肥豬”和“肥牛”。

過關目標

• 在“Top 3 things cat hate:”的p元素下方加入一個有序列表
• 有序列表中列出3樣喵咪討厭的東西

過關條件

• 有一個有序列表列出3樣喵咪討厭的東西
• 有一個無序列表列出3樣喵咪喜歡的東西
• 只有一個ul元素
• 只有一個ol元素
• ul元素中有3個li元素
• ol元素中有3個li元素
• 所有li元素必須有結束標籤
• 所有li元素的內容不能爲空或者只有空格

學會了什麼？

這關卡主要教會我們：

1. 使用ol元素
2. 創建有序列表

答案

「第十七關」創建文本輸入框

關卡名：Create a Text Field

知識點

接下來的幾個關卡，我們一起來創建一個表單。

什麼是表單？

表單就是一個網頁端的表格，讓用戶在其中填寫信息提交給我們保存起來。在辦理事情的時候，我們經常會需要填寫表格，然後提交給工作人員。在網絡上填寫表格也是一樣的。用戶在表單中填寫表格，然後提交給我們保存起來，工作人員在後臺管理系統就可以對這些表格進行處理了。

• 一個表單就必定會有文字填寫的地方，在HTML中我們會使用input元素來創建一個文本輸入框，給到用戶填寫文字。

代碼例子：

<input type="text">

知識點：

• input元素是一個自我關閉型標籤，所以不需要結束標籤的。
• input元素中有一個type屬性，這個是用來定義這個輸入框的類型，這裏因爲我們需要文本類型，所以就是text。那其他類型有什麼呢？其他的類型在後面的關卡中會講到哦。
• input元素中的name屬性也是非常重要的，後端接受表單的輸入框數據時，用的就是name屬性值來獲取數據的。

過關目標

• 在有序列表的ol元素下方創建一個input元素，type元素值使用“text”

過關條件

• 需要有一個input元素，type屬性值爲text

學會了什麼？

這關卡主要教會我們：

1. 使用input元素創建文本輸入框

答案

「第十八關」文本輸入框中添加佔位文本

關卡名：Add Placeholder Text to a Text Field

知識點

• 佔位文本（Placeholder）也叫輸入框提示語，這段文字會在用戶爲輸入前在輸入框中顯示。

我們可以用以下方式加入佔位文本：

<input type="text" placeholder="這個是佔位文本/提示語">

⚠️ 記住：

input元素是自我結束型元素，不需要結束標籤哦！

過關目標

• 在input元素當中添加placeholder屬性，屬性值爲"cat photo URL"

過關條件

• input元素中有placeholder屬性
• placeholder的屬性值必須爲“cat photo URL”
• input元素不需要有結束標籤
• input元素語法不能有誤

學會了什麼？

這關卡主要教會我們：

1. 在input元素中添加placeholder屬性

答案

「第十九關」創建一個表單元素

關卡名：Create a Form Element

知識點

• 我們知道在現實生活中，提交一個表單/表格，只需要填寫好後遞交給一個人就可以了。但是在網頁中的表單是怎麼提交讓我們保存起來的呢？
• 其實也很簡單，我們首先創建一個form元素來建立一個表單，然後在form元素中添加一個action屬性，並且給他一個提交的地址即可。

小知識：

我們知道現實中我們會把表格提交給工作人員，那在網頁中我們提交給誰呢？我們用一個簡單接地氣的例子來理解一下：

• 首先表格的內容都是電子化數據不是紙質的，那肯定是要提交給一個電子化儲存的地方
• 電子化儲存的地方就是服務器，也就是一臺電腦
• 但是總要有一個人這樣的東西接收我們的表單吧？是的，操控這個服務器的就是後端
• 所以表單的action顧名思義是一個提交動作，表單需要指定給一個“人”來接收，在網絡上就是“服務器地址或者後端地址”
• 我們再想想現實中，工作人員拿到我們的表格，會存放到文件倉庫對吧？那在網絡應用中電子表單的數據放哪裏呢？
• 表單數據提交給到後端之後，後端會拿着這個數據儲存到數據庫中，數據庫也就是文件庫了

通過這個例子大家應該可以能理解表單數據提交和儲存的概念了。也更能懂得這個action背後的基本邏輯是什麼了。

代碼例子：

<form action="/url-where-you-want-to-submit-form-data">
	...
</form>

過關目標

• 把我們的input元素包裹在form元素之中，然後在form元素中加入action屬性值“/submit-cat-photo”

過關條件

• 文本輸入框應該包裹在form元素之中
• form元素需要有action屬性值爲“/submit-cat-photo”
• form元素需要有完整的開始與結束標籤

學會了什麼？

這關卡主要教會我們：

1. 如何完成使用表單
2. 使用表單form元素
3. 懂得action屬性的意義和用法

答案

「第二十關」添加表單提交按鈕

關卡名：Add a Submit Button to a Form

知識點

• 用戶輸入了表單中的信息，但是沒有一個提交的按鈕，這個信息是不會自動提交到服務端的
• 所以我們需要在表單中加入button元素（按鈕元素），並且給它的type屬性一個“submit（提交動作）”的類型
• 用戶點擊這個按鈕就會提交表格中所有輸入框內的信息

過關目標

• 在form元素中的最後添加button元素，類型爲submit

過關條件

• 表單元素中必須含有一個按鈕
• button元素必須有一個type屬性值爲submit
• button元素中的文字內容必須是"Submit"
• button元素必須有結束標籤

學會了什麼？

這關卡主要教會我們：

1. 使用button元素
2. 如果添加提交表單按鈕

答案

「第二十一關」設置一個輸入框爲必填​

關卡名：Use HTML5 to Require a Field

知識點

• 我們可以讓表單中某個特定的輸入框變成必填，如果用戶沒有填寫是無法提交表單的
• 舉例，現在我們需要一個文本輸入框變成必填項，我們只需要在input元素中添加一個require屬性

代碼例子：

<input type="text" required>

⚠️ 注意：input元素中的require屬性是不需要填寫屬性值的，只要加入這個屬性就起效了。

過關目標

• input元素加入required屬性，把輸入框變成一個必填項，用戶如果沒有填寫內容將無法提交表單
• 加入後嘗試在輸入框中沒有填寫內容時點擊"Submit"按鈕，看看HTML5時如何提醒我們必填內容未完成的。

過關條件

• input元素應該有一個required屬性

學會了什麼？

這關卡主要教會我們：

1. 使用input元素中的required屬性
2. 給表單加入必填輸入框

答案

「第二十二關」添加一組單選按鈕

關卡名：Create a Set of Radio Buttons

知識點

• 當我們在表單中詢問用戶一個問題，並且希望用戶只給出多選一的答案。這個時候我們就可以使用單選按鈕。
• 單選按鈕是input元素中其中一種類型。
• 要使用單選按鈕，我們需要把每一個單選的input元素包裹在一個label元素中。這時label元素就會與input元素綁定上。意思就是label中的任何文字，在點擊的時候都可以選中這個選項。
• 所有相關的單選項需要有同一個name屬性值才能把這些單選項組成一組選項。
• 單選項被列爲一組後，才能選擇這組其中一個單選項時，纔會自動去除選中其他這組裏面的選項。

單選按鈕的例子：

<label> 
  <input type="radio" name="indoor-outdoor">內門 
</label>

• 最佳實踐是在label元素上設置一個for屬性，其值與輸入元素的id屬性值相匹配。這允許輔助技術在標籤和子input元素之間創建鏈接關係。例如:

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

過關目標

• 添加一對radio單選按鈕到我們的表單中，每個需要有自己的label元素包裹着。
• 一個選項顯示爲indoor和另外一個選項顯示outdoor。
• 兩個選項的name屬性值都必須是indoor-outdoor，從而把它們組成一組。

過關條件

• 需要有兩個radio元素的單選按鈕
• radio元素的單選按鈕都需要有name屬性值爲indoor-outdoor
• 兩個radio元素的單選按鈕都需要有自己的label元素包裹着
• 每個radio元素都有結束標籤
• 一個單選爲indoor
• 一個單選爲outdoor
• 所有radio元素都必須在form元素之內

學會了什麼？

這關卡主要教會我們：

1. 使用label元素
2. 使用input元素中的radio類型
3. 如何組合一組單選項

答案

「第二十三關」添加一組複選框

關卡名：Create a Set of Checkboxes

知識點

• 表單中，通常用checkbox來建立複選框的表單問題。
• checkbox是input元素的其中一種類型。
• 要使用複選框，我們需要把每一個複選框的input元素包裹在一個label元素中。這時label元素就會與input元素綁定上。意思就是label中的任何文字，在點擊的時候都可以選中這個選項。
• 所有相關的複選框需要有同一個name屬性值才能把這些選項組成一組選項。
• 與單選的原理相同：最佳實踐是在label元素上設置一個for屬性，其值與輸入元素的id屬性值相匹配。這允許輔助技術在標籤和子input元素之間創建鏈接關係

複選框例子：

<label for="loving">
  <input id="loving" type="checkbox" name="personality"> Loving
</label>

過關目標

• 在form元素內添加一組3個checkbox類型的複選框。
• 每一個複選框的input都要有自己的label包裹着。
• 三個複選框都需要使用同一個name屬性值爲personality。

過關條件

• 需要有3個複選框元素。
• 每個複選框元素必須包裹着在自己的label元素內。
• 每一個label元素都需要有結束標籤。
• 所有複選框都需要用同一個name屬性值爲personality。
• 所有複選框都需要添加在form元素之中。

學會了什麼？

這關卡主要教會我們：

1. 使用input元素中的checkbox類型

答案

「第二十四關」複選框與單選框中使用value

關卡名：Delete HTML Elements

知識點

• 當一個表單提交時，表單所有的數據會發送到服務端（後端），這裏也包括我們選擇的選擇框數據。
• checkbox複選框和radio單選框的選中數據也是會一起提交到服務端，那後端怎麼判定我們選中了那些呢？
• 無論是複選還是單選，後端接收到的都是選中的選項輸入框value屬性的值。
• 所有我們需要給每一個checkbox或者radio類型的輸入框一個value屬性。

代碼例子：

<label for="indoor"> 
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>
<label for="outdoor"> 
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor 
</label>

以上例子中，我們有兩個radio單選框類型的輸入框。假設用戶選中了"Outdoor"並且提交了表單，表單數據中會含有indoor-outdoor=outdoor這樣的參數。indoor-outdoor這部分來源於這個輸入框的name屬性，然後outdoor就是用戶選中的選項的value屬性值。

如果我們沒有填寫value屬性值，用戶選中了任何一個選項然後提交表單。後端接收到的數據就是indoor-outdoor=on。這個數據裏面只能告訴我們indoor-outdoor這個選項，用戶有選中一個值，但是是什麼，我們不知道。這樣這個表單的數據就沒有任何意義了。所以我們一定要給每一個選項input元素加入一個value屬性值。

過關目標

• 給每一個radio和checkbox輸入框類型的元素一個value屬性值。
• 這裏value屬性值常規來說我們都是用英文的，在這個例子中因爲我們的選項本身就是英文，所以我們直接用選項名作爲value的值即可。

過關條件

• 其中一個radio的value屬性值需要是”indoor“
• 其中一個radio的value屬性值需要是”outdoor“
• 其中一個checkbox的value屬性值需要是”loving“
• 其中一個checkbox的value屬性值需要是”lazy“
• 其中一個checkbox的value屬性值需要是”energetic“

學會了什麼？

這關卡主要教會我們：

1. 使用value屬性
2. 給radio或者checkbox加上value屬性值
3. 多選項或者單選項數據提交的原理

答案

「第二十五關」默認選中單選框/複選框

關卡名：Check Radio Buttons and Checkboxes by Default

知識點

• 很多時候，表單當中都會有默認選中值。
• 如果我們想默認選中單選項中的其中一個，或者是默認選中複選項中的幾個怎麼實現呢？
• 想默認選中，我們只需要在radio或者checkbox的input元素中添加checked屬性即可（這個也是一個不需要屬性值的屬性）

代碼例子：

<input type="radio" name="test-name" checked>

過關目標

• 把radio單選框組合的第一個單選項設置爲默認選中。
• 把checkbox複選框組合的第一個複選項設置爲默認選中。

過關條件

• 單選框組合的第一個單選項默認被選中
• 複選框組合的第一個複選項默認被選中

學會了什麼？

這關卡主要教會我們：

1. 給radio單選項或者checkbox複選項添加默認選中屬性checked

答案

「第二十六關」將許多元素嵌套在單個div元素中

關卡名：Nest Many Elements within a Single div Element

知識點

• div元素，也稱爲分割元素，是其他元素的通用容器。
• div元素也是最常用的HTML元素之一。
• 與其他非自我結束元素一樣，可以使用div元素來開始，然後在另一行使用</div>來結束。

過關目標

• 嵌套“Things cats love”和“Things cats hate”的兩個列表到div元素之中

提示：把<div>開始標籤放在"Things cats love"的p元素上方，然後</div>結束標籤在</ol>的下方。最後整個div元素把所有內容包裹起來。

過關條件

• p元素內容被包裹在div元素之中
• ul元素內容被包裹在div元素之中
• ol元素內容被包裹在div元素之中
• div元素必須有結束標籤

學會了什麼？

這關卡主要教會我們：

1. 使用div元素分割內容
2. 使用div元素嵌套多個元素

答案

「第二十七關」聲明HTML文檔的Doctype

關卡名：Declare the Doctype of an HTML Document

知識點

到目前爲止，我們闖過的關卡當中包括了特定的HTML元素以及使用。但是那些都是一個完成HTML頁面的其中一部分。其實還有一些元素是每一個HTML頁面都需要存在的。

在文章的頂部我們需要告訴瀏覽器，我們需要使用哪一個版本的HTML。HTML這個語言一直在持續更新升級。各大瀏覽器基本都兼容最新的配置與版本（那就是HTML5）。但是還有一些瀏覽器只兼容一些歷史版本的HTML（例如舊版本的IE瀏覽器）。

• 要告訴瀏覽器我們需要使用那個版本的HTML，我們需要在HTML文件的頭部添加<!DOCTYPE ...>，這裏的...可以寫入HTML的某個版本。如果是HTML5的話，那就是<!DOCTYPE html>即可。
• 在這個聲明的代碼中!和DOCTYPE都是非常重要的，而DOCTYPE也是必須大寫的。然後html這個就無大小寫限制了。
• 跟着這段文件HTML版本聲明就是html元素。所有我們網頁的代碼和元素都必須在html元素內編寫。

HTML代碼例子：

<!DOCTYPE html>
<html>
  <!-- Your HTML code goes here -->
</html>

過關目標

• 在代碼區域第一行，加入DOCTYPE聲明，並且選擇使用HTML5版本。
• 聲明後加入html元素，並且在html元素內嵌套一個h1標題元素。
• h1標題元素內必須含有一個標題文案，文案可以隨意填寫。

過關條件

• 代碼中必須含有<!DOCTYPE html>標籤。
• 代碼中必須含有html元素。
• html元素必須包裹着一個h1元素。

學會了什麼？

這關卡主要教會我們：

1. 如何聲明HTML版本
2. 使用html標籤

答案

「第二十八關」定義HTML文檔的頭部和主體

關卡名：Define the Head and Body of an HTML Document

知識點

• 在標準的HTML文檔結構中，我們需要豐富這個基礎結構的分區。
• 所以在html元素中我們會分出head頭部元素和body主體元素。
• 所有CSS引用，字體引用，網頁標題等等這些網頁定義的內容都是放在head元素之內。
• 然後所有頁面的佈局元素都需要放在body元素之內。

小貼士：

我們用一個一個更好的理解方式，讓我們更容易記住這個規則的原理。

• 如果我們想一下，所有的知識，思想，印象等等就等同於HTML當中的"CSS引用，字體引用，網頁標題"，那東西是不是都應該在我們的腦袋裏面呢？所以呀“CSS引用，字體引用，網頁標題”都應該放在head頭部元素中！
• 我們的骨頭和骨架是不是在我們身體內呢？所以剩下所有的頁面佈局代碼就要放在body主體元素中！

HTML結構代碼例子：

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
    <!-- CSS引用，字體引用，網頁標題等等元素 -->
  </head>
  <body>
    <!-- page contents -->
    <!--頁面的佈局元素 -->
  </body>
</html>

過關目標

• 代碼區域裏面有title頁面標題元素，h1文章標題元素和p文章段落元素。
• 把title元素嵌套到一個head元素中。
• 剩餘的h1和p的內容都嵌套到一個body元素中。

過關條件

• 只有一個head元素
• 只有一個body元素
• head元素需要被html元素包裹着
• body元素需要被html元素包裹着
• title元素需要被head元素包裹着
• h1和p元素都需要被body元素包裹着

學會了什麼？

這關卡主要教會我們：

1. 建立完成的HTML文檔結構

答案

「終」總結

恭喜大家一起闖過28關。我們學習到了HTML與HTML5的基礎知識。雖然說這些都是很基礎的知識，可以說闖過這28關，前端入門級別都還沒有到。但是龐大與偉大的事業和建築物都是從穩固的基礎建立起來的。無論是多麼簡單還是無比困難的任務，我們都需要耐心和細心對待，把每一件小事都做到極致，才能逐步壯大，成功纔會在遠方等着我們。

下一期，我們開始第二課，深入淺出CSS基礎。一起繼續闖關打怪，打開前端技術大門。敬請期待哦！

我是三鑽，一個在技術銀河中等和你們一起來終身漂泊學習。
點贊是力量，關注是認可，評論是關愛！下期再見 👋！

推薦閱讀

• 🔥《前端必看的8個HTML+CSS技巧》 — CSS是一個很獨特的語言。看起來非常簡單，但是某種特殊效果看似簡單，實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧，一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們，重新燃起對前端排版和特效的熱愛和熱情！🔥
• 🔥《帶你體驗Vue2和Vue3開發組件有什麼區別》 — 使用Vue2和Vue3開發一個簡單的表格組件來展示一下Vue2和Vue3開發組件的區別。看完這文章後，你將會有一個概念Vue2和Vue3開發組件時的區別，並且爲Vue3的開發之路做好準備。ღ(◔ڼ◔ღ)ミ
• 🔥《VSCode常用快捷鍵大全｜VSCode高級玩家寶典之第一篇》 — 所以對於個好的程序員，一個好的代碼編輯器可以起到很大的作用，在開發的過程中可以給我們帶來很多便利、幫助、效率和影響。甚至一個好的編輯器可以給開發者日常編程中帶來更高的喜悅感。
• 🔥《VSCode插件大全｜VSCode高級玩家寶典之第二篇》 — VSCode沒有安裝插件，就等同於一把槍沒有安裝配件，打把的時候還是缺失精準度，開槍的時候也會有很重的後坐力。當然沒有插件，也可以很好的編寫代碼，就是沒有那麼強而已。
• 🔥《VSCode配置同步｜VSCode高級玩家寶典之第三篇》 — 有了武功祕籍（快捷鍵）和高深的內功心法（插件），那VSCode是不是應該是無敵了呢？天災難逃，人禍難免，我們電腦可能會壞或者電腦還可能要退休，甚至是我們有多臺電腦的可能。那這個時候我們精心配置的VSCode不是要從頭再來？