HackMD[HTML] 前端學習筆記 (1) - 基本結構與網頁元素
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
上網瀏覽網頁對現代人來說是一件很自然的事情，雖然輸入網址就可以跳轉到我們想去的頁面、頁面也能在幾秒內載入完整內容，但這背後的過程又是如何呢？
網頁的原理
瀏覽網頁的過程可以拆分為以下幾個階段：
- 使用者在瀏覽器中輸入路徑，向網路伺服器發送請求HTML文件
- 伺服器回傳對應的HTML文件給瀏覽器
- 瀏覽器開始解析HTML並產生內容、解析CSS產生排版與樣式、解析JavaScript並產生網頁元素與使用者的互動機制…等等
- 產生出我們看到的網頁畫面
而上述的HTML文件中，記載了我們在瀏覽器中看見的圖文內容，它是不好閱讀的，因為裡面的內容都被許多不同的標籤所包住，例如：
<body>
<h1 class="title">今日待辦事項</h1>
<h2 class="date">2020/10/21</h2>
<div class="content">
<ul>
<li>遛狗</li>
<li>寫作業</li>
<li>倒垃圾</li>
</ul>
</div>
</body>
因此我們需要工具來為我們解析這些HTML文件，輸出成我們視覺上看了舒服、有結構性，且不含網頁標籤的內容。而這工具就是網頁瀏覽器，HTML做為共通標記語言，可在不同的瀏覽器上行使。
以下是常見的網頁的基本結構圖：
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
(取自w3schools.com)
特別須注意的是，最後的網頁僅會呈現出白色的內容區塊，其他都是對網頁的架構或屬性設定，並不會在瀏覽器中顯示。
什麼是HTML
HTML為HyperText Markup Language的縮寫。Markup Language 並非程式語言，是為「標記語言」，專門把內容結構化、資訊化。 在HTML中，幾乎每一個網頁元素都被 開始標籤<> 與 結束標籤</> 包圍，只有少數例外。這些括號都是「標記」，Markup Language 便是把一些東西像螢光筆畫記一樣的標記起來，去賦予它屬性和意義。
我們在製作網頁時使用HTML，把網頁的所有內容拆解成最小單位─網頁元素(elements)，並且透過標記屬性的方式，將其內容結構和資訊重要性做階層式的安排。在以上例子中可以看到許多網頁元素，<h1>元素代表大標題、<h2>為次標(有<h1>~<h6>，6種階層)，<div>為區塊，<ul>、<li>為子彈清單等等。
而我們也可以在元素中的標籤中加入屬性，首先在元素後以空格隔開，並用=""去賦予屬性內容，以下舉例：
<a href="http://www.facebook.com" target="_blank">臉書網址</a>
上述例子就是 <a> 超連結的標籤，在起始標籤中空格賦予屬性，href="連結網址"(導向某一目標網址)，target="_blank"(另開新分頁)。
<div class="title">標題</div>
上述例子就是在<div>標籤中設立一個class屬性，並為之命名賦予特性，之後在CSS進行樣式調整時若要選擇這一標籤則用選擇器 .title {} 即可對該元素進行編輯。
HTML結構
而HTML中有嚴格的巢狀關係，網頁中每一項元素最終都必須被起始標籤與結束標籤包住。而父元素與子元素如何判別，是依照標籤的前後順序決定階層。
<div class="content">
<ul>
<li>遛狗</li>
<li>寫作業</li>
<li>倒垃圾</li>
</ul>
</div>
由上述HTML可知，<div>為<ul>的父元素，而<li>則為<ul>的子元素。嚴格的巢狀關係意味著：任何元素的起始與結束標籤必須為 「對稱」且「閉合」，不能有交錯的情形發生。現在讓我們來觀察一份完整HTML文件的結構：
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
(取自w3schools.com)
一份完整的HTML文件由 <html></html>作為最外層包裹住整個網站的內容與設定。而 <head></head>中通常為網站的標頭，經常含有網站名稱、導覽列等等元素。<body></body>中則放入了整個網站的內容資訊，不管是文字、圖片、超連結，都可以放在這組標籤中，被瀏覽器呈現出來。
通常一份正式的 HTML文件中，在<html></html>標籤之前還會再加上<!DOCTYPE html>的宣告，這是作為宣告文件類型，告訴瀏覽器這份HTML是什麼版本，才能正確呈現網頁的內容。但通常在程式編譯器例如 CodePen、Visual Studio Code中，都可以透過快速鍵來設定直接帶入預設值。
HTML常用元素
以下幾個為網頁內容中最基本的幾個元素分類：
文字排版
標題
<h>，依照<h1>~<h6>的順序決定標題的權重。
<h1>第一順位</h1>
<h2>第二順位</h2>
<h3>第三順位</h3>
<h4>第四順位</h4>
<h5>第五順位</h5>
<h6>第六順位</h6>
以上的標籤在HTML上呈現的結果如下圖右：
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
段落
<p>，用來包裹純文字的段落。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
斷行
<br>，顧名思義，用來在文字中插入斷行。***注意：<br>沒有結尾標籤。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
水平線
<hr>，插入水平線。***注意：<hr>也沒有結尾標籤。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
超連結與圖片
超連結
<a>，在標籤中可以加上屬性，例如<a href="目標網址" target="_blank"(開啟新分頁)>等。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
圖片
<img>，在標籤中可以加上屬性，例如<img src="圖片網址路徑" alt="替代文字">。***注意：<img>沒有結尾標籤。
- 替代文字：可作為無障礙設計，當圖片原始路徑失效時，或是瀏覽器無法顯示圖片，透過替代文字可以讓使用者知道原本放置的圖片是什麼。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
註解
<!-- --> 當想要在HTML文件中作註解時，只要使用<!--跟-->將註解包圍起來就可以了。而註解中的文字也不會在瀏覽器上呈現。
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
結語
HTML還有許多其他用途的標籤，將放在下一篇介紹，屆時會再介紹網頁內容分割的方式與其常用的標籤。
作為一篇學習筆記，或許會有許多謬誤之處，還請麻煩協助勘誤，留言指教，謝謝！
