• <!DOCTYPE html> - 這是在告訴系統這個檔案是HTML格式的文件，可以看到他的語法是用<>包起來並自成一個單元，類別屬於單一標籤。
• <html lang="en">...</html> - 與前面不一樣，這邊是由起始標籤<html>與結束標籤</html>構成，屬於容器標籤，用來標示出文件的內容範圍，屬性lang用來描述網站使用的語言，在瀏覽器搜尋時設定目標語言就會參考這個來過濾。
• <head>...</head> - 標頭檔區域裡面會描述關於此網站的一些相關資訊(metadata)，其中包含編碼方式、文件標題、作者資訊、關鍵字以及其他參考檔案(CSS, Javascript)的位置。
• <body>...</body> - body就是網頁內容撰寫的地方，裡面通常會是無數層不同功能的標籤所構成，有些是真正顯示出來的內容，有些是為了之後的CSS排版方便而創造。

• <title>...</title> - 使用於head，網頁在瀏覽器顯示的名稱就是定義於此，本網站的title是"HTML 初學筆記"。
• <meta $key=$val> - 使用於head，功能相當多元，可以設定不同屬性或說明，例如:
  • charset="UTF-8" - 定義HTML文件的編碼方式，UTF-8能支援絕大部分的文字編碼並且維持相對較小的編碼長度，且大部分的瀏覽器都有支援，因此被廣泛採用。
  • name="viewport" content="width=device-width, initial-scale=1.0" - 設定可視區域，主要是為了手機等行動裝置設定的，網頁要讓不同尺寸的螢幕都能正常顯示需要下點功夫，而這邊定義了兩個屬性: 指定螢幕寬度為裝置寬度，畫面初始縮放比例為100%。
  • name="description" content="XXX" - 提供關於網頁的描述給瀏覽器顯示，就是搜尋時顯示在標題底下的那一小段文字，可以寫點吸人眼球的內容。
• <header>...</header> - 使用於body，與前面的head不同，這裡指的是顯示在文件最上方頁首區域，也就是網頁logo以及連結<nav>呈現的地方。
• <main>...</main> - 使用於body，主要顯示內容的地方，內部會再細分成多個<section>, <aside>, <article>，用以呈現大小章節。
• <h1>...</h1> - 使用於body，定義出章節的標題，本章節的標題為"常用標籤"，根據預設字體尺寸由大到小又可分成h1~h6，如果寫在不同層級的section，也會顯示出不一樣的大小。
• <p>...</p> - 使用於body，定義出章節的段落 (paragraph)，也就是內文撰寫的地方，將一段文字包在一個區間並提供段落之間的間距控制等，文章內不可或缺的標籤。
• <img $key=$val> - 使用於body，用以在網頁中顯示圖片，具備多種屬性可以設定，常見:
  • width="XXXpx" - 設定圖片的寬度，單位px，設定寬度後，高度會等比例調整，所以會跟height二選一，兩個同時設定的話則會得到失真的圖片。
  • src="XXX" - 設定圖片來源，可以提供一段網址(ex: unsplash)，或是網站伺服器本地圖片。
  • alt="XXX" - 當圖片顯示不出來時 (網址過期、圖檔遭刪、格式不支援) 就會改顯示此文字，至少能讓人知道本來要顯示什麼。
• <ul>... </ul> & <li>... </li> - 使用於body，呈現項目符號 (bullet)，也就是本章節的那些黑色小圓圈，ul定義出項目的範圍，每組li則是一個項目，所以整個格式會是:

  HTML
  Copy
  <ul>
      <li>...</li> <!--項目1-->
      <li>...</li> <!--項目2-->
      <li>...</li> <!--項目3-->
  </ul>

• <a href=$link> - 使用於body，a代表anchor - 提供超連結的功能，$link可以是外部網址，也可以是本網站內部的其他頁面/章節，當使用者點擊後就會跳轉到指定的網頁。

• 頁首: 放置連結與logo、網站名稱等資訊。
• 頁尾: 通常會放一些聯絡方式/地址，但目前我沒什麼可以放XD。
• 左側欄位: 提供文章章節以及閱讀進度等。
• 右側欄位: 提供news或推薦相關文章等。
• 主要內文: 以多個section組成，每個section又包含一個title/image加上多個paragraph。

也許你有注意到<div>標籤，他雖然沒有語意上的意義，但他可是排版用神器!!!

HTML
Copy
<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <title>MyWeb</title> <!--網頁名稱-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header> <!--頁首區域-->
            <h1> Header </h1>
        </header>
        <div>
            <aside> <!--左側區域-->
                <h1> Aside </h1>
            </aside>

            <main>  <!--主要內文區域-->
                <h1>Title</h1>
                <section> <!--介紹，顯示一張lego圖片-->
                    <img width="200px" src="https://images.unsplash.com/photo-1560961911-a21c4f35443f?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="這是一張lego積木">
                    <p> Paragraph Introduce </p>
                </section>

                <section> <!--第一段落-->
                    <h1>Section Title 1</h1>
                    <p>Paragraph 1</p>
                    <p>Paragraph 2</p>
                </section>
            </main>

            <aside> <!--右側區域-->
                <h1> Aside </h1>
            </aside>
        </div>
        <footer> <!--頁尾區域-->
            <h1>Footer</h1>
        </footer>
    </body>
</html>