在這篇 JavaScript 全端開發學習筆記｜HTML 入門 的文章中，我會先將 HTML 這個在網頁架設相當基本的語言跟大家做說明，同時會附上一些可以供大家做練習的題目，主要都是我先前在學的時候，有跟著練習過的一些概念。最後也會附上一些付費和免費的學習資源，希望能讓大家更有系統和方向的學習 HTML。
因此這篇文章會以以下架構進行撰寫：
- HTML 簡介｜何謂超文本標記語言？
- 基本語法教學｜附上練習用 Side Project & 程式碼分享
- 學習資源統整
HTML：超文本標記語言
雖然我個人覺得並不是很重要，但還是跟大家科普一下 HTML 的全稱： Hypertext Markup Language，翻譯過來叫「超文字標記語言」。這裡要注意的是，他是 markup language，而不是 programming language，在分類上 HTML 並不是「程式語言」（是不是小失望，但別急，繼續看下去）
超文本就是今天俗稱的網頁，前網頁時代的人只看過紙上的「文字 (text)」，所以遇到網頁這種可以連來連去的文件，就稱為「超文字 (hypertext)」，這是一個很有時代感的用詞。
而「標記語言 (markup language)」是一種專門把內容結構化、資訊化的語言，markup 這個字描述了類似螢光筆劃記的感覺，把文字標記起來，賦予某種特性。用白話文來講 HTML 的重要性，就是打造網頁的基石，架設網頁的第一件事就是要先將內容給準備好，寫好你的 HTML。
這裡讓我們看個例子：下方左邊的圖片是我們期待呈現的排版結果，文件裡有不同層級的標題、有段落文字，還有一小段用粗體強調的文字。而右邊圖中的藍色標記就是 HTML 標籤，我們可以用 HTML 標籤把文件的結構呈現出來。
圖片來源：ALPHA Camp
HTML 標籤基本語法
在有了初步的概念之後，接下來我們要進到較為實際的部分：HTML 的基本語法。在開始學習之前，建議大家可以先去註冊 CodePen 這個好用的平台，可以讓使用者免費的在上面撰寫 HTML/CSS 的語法，並且檢視撰寫的情況究竟如何，是個許多開發者愛用的工具。
【延伸閱讀】註冊 CodePen 教學
在點開你的 CodePen 帳號之後，大概會出現下方的頁面，之後便可以在上方 HTML 欄位撰寫相關的程式碼，等到之後學到進階的 CSS 和 JavaScript 後，便可以搭配使用去進行切版、讓網頁動起來等功能，但這部分還為時過早，我就不多加贅述。
接著我會介紹一些常見的 HTML 元素，去認識和內容整理直接相關的 HTML 標籤。在這裡大家可以試著玩一下 CodePen，快速認識常用的標籤，熟悉開發環境（建議搭配 CodePen 一起使用，會更具體知道目前的進展）
段落文字：p
這是當我們想強調「一段文字」會使用的標籤，他的寫法是 <p>要填寫的內容<p>，被包起來的內容就自動換行了。可以看到下方的案例，我將兩段文字分別寫入不同的<p>裡，在旁邊跑出來的結果就會被自動換行「分段」，這就是段落文字的標籤應用。
斷行：br
如果不打算強調「文字段落」的感覺，只是很單純想換行，可以使用 <br> 標籤，這個標籤是 break 的意思，我們看一下下面的範例：
簡單的插入<br>標籤做換行-文字換行了，而且行與行之間的距離比 <p>標籤小。
標題
在 HTML 規格裡為你準備了六級標籤，分別用 <h1> 到 <h6> 依序表示：
不同層級的標題大小不同，很明顯 h1 最大，然後依序變小。愈有意義的資訊，就應該使用愈高的標題層級。
項目清單
除了標題與內文以外，有時候還會需要舉例，列出幾點類似的觀點整理在一塊，在網頁語言中當然也有相對應的存在，讓我們看下面的範例。我用本文文字作為例子，運用這個 <ol>跟 <li>的語法來表現出列點的效果。
這個 <ol> 跟辦公室辦公的 OL 是完全不ㄧ樣的概念，<ol> 是 ordered list 的縮寫，而 <li> 就是 list。工程師為了讓程式語言兼具可讀性和短小精悍，因此電腦語言中往往存在許多「縮寫」。
當你使用 <ol> 標籤的時候，它會自動幫你在每個內文的前面加上數字索引！如果你今天不想要數字，你也可以使用另一個叫做 <ul> 的標籤，可以將數字變成小黑點。
超連結
我們可以使用 <a> 在文件中加上超連結，超連結 (hyperlink) 就是會連到另一個網頁的入口，它需要和 href 屬性搭配使用，我們看下列範例：
<a> 是 anchor 的縮寫，也就是「錨點」，剛問世時都叫他「超連結」。網頁上的內容可以互相連來連去，這種互相串聯的特質叫做 hyper，超文字、超連結等用語裡的「超」都是在對譯這個 hyper。現代人對這種功能沒那麼驚奇了，叫他「連結」就好。
<a> 需要和 href 屬性搭配使用，href 是 hyper reference 的縮寫，代表「超連結的參照位址」，這都是正經八百的用語，總之我們需要用 href 屬性設定目標網址。
有了連結還不夠，我們還可以加點圖片，讓畫面好看一點，這對網頁而言也是小菜一碟，讓我們看看下列的範例（這裡我是用 ALPHA Camp 提供的資料）準備好一張書桌圖片給你試玩：https://bit.ly/2OHjuJJ
alt屬性用來設定圖片的替代內容 (alternative)，當瀏覽器無法成功顯示圖片時，就會直接提供這種替代內容。平常可以空白沒關係，但如果是專業的網站就需要考慮無障礙使用，當使用者用語音撥放網站內容時，就會把圖片的 alt 屬性內容念出來。
分割區塊：div
<div> 代表 division，也就是一個分割區塊。這個標籤本身沒有暗示「裡面放了什麼內容」，但我們常常用 <div> 把元素「打包」在一起。做為一個「區塊」，被 <div> 會佔滿一整行，因此當我們在輸入內容的時候，可以利用這個標籤來作區塊的分配。
註解
想要在 .html 文件裡寫點筆記，但又不想干擾程式碼時，就可以使用註解 (comment)，HTML 的註解是用 <!-- 和 --> 來包圍一段內容，或是將程式碼反白按 CTRL+/ 也都可以喔！這個功能對於想給部分程式碼作筆記以免忘記當初撰寫時的邏輯是相當有幫助的！
Side Project 練習｜試著用 HTML 輸出以下的內容吧！
這部分會提供當時我在 ALPHA Camp 裡練習時用到的範例，讓大家可以更有實際操作的感覺。以下是提供的文字檔：
我要學會 HTML！
動手做是最好的學習方法。
清單 Lists
這是沒有順序的項目符號清單
以 ul 元素來定義清單
用 li 標示個別項目
這是有數字順序的清單
以 ol 元素來定義清單
一樣用 li 標示個別項目
圖片
我的書桌照片
祝你學習愉快！
ALPHA Camp
你可以到 w3schools 瞭解更多 HTML！
而這是我們想像中呈現的樣子，我們也提示了會用到的標記：
進階工具推薦｜開發者工具
最後也跟大家分享一個有趣的工具，是個叫做「開發者工具」的功能，你可以去隨便挑一個網頁，在挑選的網頁中按右鍵 or CTRL+Shift+I，會出現看起來很工程師的頁面，這時就可以觀察裡面的程式碼來查看其網頁架構，會讓你在學習上有更多的對照！（可參考下方圖片操作範例）
推薦學習資源
不用多說，我就是從這地方學程式語言的，所以相當推薦大家去試試看。這篇文章一半以上的靈感和內容都是參考這裡面的教材，更別提若有助教的引導、老師的影片輔助，絕對會讓你學得更快更紮實。
2️⃣ HTML 新手網站基礎教學
這個網站也是我在規劃這篇文章的內容時有參考過的其中之一，個人覺得以免費資源來說相當完整，可以再搭配 youtube 裡一些教學影片來輔助，會讓你學得更快。
結語
HTML 真的是非常簡單且容易入門的基礎語法，但對於初學者來說，那種逐漸看得懂工程師世界東西的新鮮感是非常強烈的，能看懂網頁的結構並利用開發者工具去看其他網頁架設真的是很新鮮的體驗。但還是要說，這部份真的是基礎中的基礎，有九成以上的人在這裡不會碰到任何阻礙，因此那怕你到現在都覺得很輕鬆也別高興得太早，程式語言的世界還廣著，要持續學習才行。
