↓ 今日學習重點 ↓
- 了解 HTML 的語法
上一篇文章，我們有建立了一份 HTML 檔案，
那麼這些語法到底是什麼意思呢？讓我們往下看。
HTML、HTML5、HTM 是什麼？
HTML（Hypertext Markup Language）
HTML 是一種標記語言，中文全名為「超文字標示語言」，它使用各種標籤（tags）來定義不同的網頁元素，例如：
文字段落（paragraph）是
<p></p>；第一重要的標題（heading 1）是
<h1></h1>；圖像（image）是
<img>等等。
HTML5
HTML5 是 HTML 的第五個版本，也是目前大家所使用的版本。
它較 4 代新增並改良許多功能。
比如說，HTML5 新增了多媒體，讓網頁可以播放音樂和影片；HTML5 新增了語意化標籤，讓標籤的名稱更有意義，如： <nav></nav> 就是導覽列（navigation），這樣可以讓瀏覽器能快速抓到網頁的重點，也讓學習和開發更簡單。
HTM（Hypertext Markup）
HTM 是 HTML 的一種，通常與舊的網頁文件有關。在早期的網頁開發中，某些操作系統或瀏覽器可能只支援三個字母的副檔名，因此人們可能會使用 .htm 代替 .html。不過，現在已經沒有這個問題了，大部分情況下都是使用 .html 作為副檔名。
HTML 的語法構成
語法架構
HTML 文件不區分大小寫，不過 W3C 協會建議都寫小寫。
而它的標籤的基本語法架構會有：
1. 起始標籤
用大於 >、小於的符號 <，框住標籤的名稱，代表了一個標籤的開始，如：<textarea>。
2. 結束標籤
與起始標籤一樣，只是在標籤名稱前面多了個斜線 /，代表了這個標籤的結束，如：</textarea>。
不過，依據不同標籤的性質，有可能會不需要結束標籤，例如：<input>、<img>。有些人為了區分這種標籤，會在標籤結尾加上一個「斜線」，如：<input/>、<img/>。有沒有加上斜線都是可以運作的。
3. 內容
這個標籤的內容物。
4. 屬性（Attribute）
根據不同標籤的特質，會有不同的屬性可以運用，可以添加許多設定。例如：<textarea rows="5"></textarea> 就是指一個有 5 行高度的文字輸入框。
如果網頁沒有套用 CSS 的話，HTML 會依據瀏覽器預設的樣式呈現。
HTML 是種寬容的語法，如果寫錯了（像是結束標籤忘了寫），依然能夠跑出來，只不過呈現結果可能會不如預期。
巢狀（Nesting）的特性
標籤裡面可以再放進標籤，這樣的結構我們稱之為「巢狀結構（Nesting）」。我們可以透過一層包一層的方式，區分網頁中不同的區塊。
比如說：
側邊區塊
aside裡面，放了一份清單（unordered list）ul，清單內有許多項目（list item）li，每個項目中有連結a；而旁邊的主要內容
main，放了文章article，而文章內放了許多文字段落p。
不過巢狀結構不宜包太多層，因為太多層時會變得很肥大、很難管理，沒有辦法一目瞭然。在爸爸的爸爸們與他們的子子孫孫間徘徊周旋，絕對會頭暈腦脹，改起來會十分痛苦。這個建議也適用於其他語言，如 JS 和 CSS 等。
註解的語法
HTML 有提供註解語法，讓人在開發時可以寫一些筆記在 HTML 中，並且不會被輸出在網頁上。註解的內容是由 <!-- 和 --> 所包起來，只要被包起來的內容都是註解的範圍，所以也可以寫成多行。
雖說不會輸出到網頁上，但是在網頁上按下「右鍵 > 檢視原始碼」（以 Chrome 為例），還是可以被人看到寫了些什麼，所以不建議用這個寫一些敏感資訊（基本上前端的東西在瀏覽器的開發者模式中都可以找得到，所以前端的東西都不建議放敏感資訊）。
有些開發人員會在 HTML 註解中面放一些彩蛋，寫一些隱藏訊息，或用文字符號畫畫，雖然很少數，但發現的時候總覺得很有趣。像寫這篇時，我發現 Firefox 的網站 裡面原來藏了一隻恐龍。XD
大家無聊的話，也可以去看看各大網頁原始碼有沒有藏有彩蛋。XD
今天就先到這裡囉！明天我們要來寫一份簡單的 HTML。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你，若你覺得獲益良多，請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。
