Web - 第二章 | HTML介紹 (二)
在上一篇中我們稍微介紹了一下HTML 是什麼?、HTML元素分析⋯等等，如果還不清楚可以再去看一下這文章 Web - 第二章 | HTML介紹 (一) ，下面將會介紹屬性(Attributes)、解析HTML文件、特殊字元引用方式、HTML註解方式⋯等等。
屬性(Attributes)
我們可以在元素中加入屬性，如上圖加入了一個class="editor-note"。
屬性攜帶著額外的資訊關於那些你不想要顯示實際內容的元素。在這個例子裏面 class 屬性允許你給予元素一個辨識名稱而可以在之後被用於指定這個元素的風格訊息(style information)以及其他的東西。
一個屬性應該要有：
- 一個空白在屬性跟元素名稱之間 (或者在屬性跟前一個屬性之間，如果這個元素已經有一個或者很多個屬性的話)。
- 屬性名稱以及一個等號在屬性名稱的後面。
- 一個屬性值以及開啟和關閉的引號包著它。
至於有哪些屬性可以使用請參考 屬性列表
自己動手試試看
我們可以使用 jsfiddle線上程式碼編輯器 網站。
這邊使用這個元素 <a> ，a代表anchor(錨)，而這個元素則是會讓被它包裹住的內容變成超連結。它可以和很多種屬性搭配，以下舉出幾種:
href: 這個屬性用來設定你想要的超連結網址，當連結被點擊時，瀏覽器會導向的網站。例如: href=”https://morosedog.gitlab.io/"
title: title 屬性用來附加有關連結的其他資訊，像是連結到的網站名稱。例如: title=”J.J.’s Blogs” 。當游標移動到連結上時，就會以提示的方式顯示。
target: target 屬性用來規定要在哪裡打開網頁。例如: target=”_blank” 會開啟新分頁。如果你想要在目前的分頁開啟網站，只要忽略這個屬性即可。
1 | <a href="https://morosedog.gitlab.io/" target="_blank">J.J.'s Blogs</a> |
布林屬性(Boolean attributes)
你有時會看到一些沒有值的屬性，這完全是被允許的。它們叫做布林屬性，他們只能附帶一個值，而這個值一般來說會和屬性類別一樣。以 disabled 屬性來說，你可以把它指派為input元素的屬性，使得輸入文字的框框變得不能輸入文字。
1 | <input type="text" disabled="disabled"> |
你可以把它寫得更簡短(下面的例子中，我們也寫出了沒有disabled屬性的input元素供你參考，讓你更了解兩者的差別):
1 | <input type="text" disabled> |
我們可以看到第一個input，是被disabled的，所以當我滑鼠點擊過去是無法做動作的，反之第二個可以看到，我可以輸入123。
屬性值得引號，要用單引號還是雙引號？ (Single or double quotes?)
在這個章節中，你會發現所有的屬性都是使用雙引號，而你可能會發現其他人的HTML中使用的是單引號。這純粹是個人風格，你可以依照你個人的喜好去使用它們。
下面兩行的意思是相同的:
1 | <a href="https://morosedog.gitlab.io/">J.J.'s Blogs</a> |
注意：你不可以混合使用 “ 開始 ‘ 結束，或是 ‘ 開始 “ 結束。
而最常遇到的狀況是，當屬性值使用了其中一個符號，那就可以使用另一種來包覆他們。
1 | <a href="https://morosedog.gitlab.io/" title="J.J.'s Blogs">J.J.'s Blogs</a> |
解析HTML文件
到這邊應該已經了解HTML個別元素的基礎知識，但若單獨使用這些元素，並不能發揮它們最大的效用。以下將介紹如何與整個HTML結合!
1 |
|
解釋：
| 元素 | 說明 |
|---|---|
| <!DOCTYPE html> | 文件類型(doctype)。 在漫漫時間中，當HTML還年輕的時候(約莫1991左右)，文件類型表示它連結到一系列的規範中，遵守這些規範才會被當作是好的HTML，比如自動化錯誤檢查以及其他有用的東西。然而，現在已經沒有人真正在乎它們了，而它們也確實只是個歷史產物，將它們包含在原始碼中，確保所有事情都正常執行。<!DOCTYPE html> 是字數最少的有效doctype。而你也只需要知道這些就夠了。 |
| <html></html> | <html> 元素包裹住頁面的所有內容，有時也被稱作根元素(root element)。 |
| <head></head> | <head> 元素放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS等等。 |
| <meta charset=”utf-8”> | 這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。 |
| <title></title> | <title> 元素是用來設定網頁名稱的，它會顯示在分頁標籤上，當你將該網頁加入書籤或加入最愛時，則是用來形容這個網站。 |
| <body></body> | <body> 元素含括了所有你想要給網頁瀏覽者看到的內容，不管是文字、圖片、遊戲、可以播放的音樂或其他物件。 |
HTML中的空格(Whitespace)
不管你用多少空格 ，包括空白鍵、換行，HTML的語法分析器都只會留下一個空格。所以說，何必用這麼多空格呢? 其實是為了增加可讀性，適當的排版會使得你的原始碼更容易被理解，千萬不要把你的原始碼擠成一團，讓它們變得雜亂無章。在我們的HTML中，我們將每個巢狀的元素都用兩個空格的方式縮排。原始碼的排版可依照個人喜好使用，例如要用多少空格，但你應該要慎選排版方式。
1 | <p>How do you do?</p> |
自己動手試試看
這邊建議你開始建立屬於自己的HTML。
- 複製下面的HTML範例。
- 開啟一個新的text檔案(文字文件)。
- 將剛複製的HTML範例貼到新開的text檔案裡。
- 將檔案存為 index.html。
1 |
|
題外外：index英文直譯過來的話是目錄的意思。index.html通常為一個網站的首頁，也叫導航頁，也就是在這個頁面上包含了網站上的基本鏈接。
實體引用(Entity references): 引用HTML中的特殊字元
在HTML中， < 、 > 、 " 、 ' 和 & 是特殊字元，它們是HTML語法的一部份。該如何引用這些特殊字元呢? 假如你真的很想要用 & (ampersand)或小於符號 < (less than sign)，而你不想要它們被瀏覽器當成原始碼的時候該怎麼辦呢?
這時候我們就需要用到字元引用(character references)，他們是特別的原始碼，用來表示字元，並且專門在這些情況下使用。每個字元引用都是以&(ampersand)開頭，並以分號 ; (semi-colon)做結尾。
| 字元 | 相應字元 |
|---|---|
| < | < |
| > | > |
| “ | " |
| ‘ | ' |
| & | & |
1 | <p>In HTML, you define a paragraph using the <p> element.</p> |
看到下面的輸出結果，你會發現第一個段落是錯誤的，因為瀏覽器認為第二個
是要開啟新段落。而第二個段落看起來不錯，因為我們將小於及大於符號(angle brackets)換成了字元引用。
HTML 註解
在HTML中，就像大部分的程式語言，提供了一種方式讓我們可以在原始碼中加入註解，註解是會被瀏覽器忽略，並且不會被使用者看到的，目的是要讓你在原始碼中加入註解以說明你的原始碼是如何運作的、各個部分原始碼的作用等等。當你已經六個月沒有編輯某個網頁程式碼，而你完全想不起來你做了什麼的時候，或是當你把你的原始碼交給別人修改時，註解將會是你的好朋友!
試著將你HTML檔案中的一部份內容變成註解，你需要將內容包裹在特殊的符號 之中。
1 | <p>I'm not inside a comment</p> |
在下方的範例中，第一個段落出現在輸出結果中，但第二個段落並沒有出現。
不得不說，在沒看文章之前都屬於會用，我懂的狀態；但是要我去解釋這麼詳細或是嘗試教導別人，我認為是無法的，很多東西是在用了以後再回頭去看詳細的介紹才會領悟得更快的。希望在這樣的努力不懈下，讓自己的知識和經驗不斷累積。
註：以上參考了
MDN web docs 的 Getting started with HTML 文章。
