我要成為前端工程師的學習筆記：HTML & CSS 篇 - HTML 基礎語法 Day1

h 標題語法

定義：
< h1 > 到 < h6 > 標籤用於定義 HTML 標題，< h1 > 定義了最重要的標題和 < h6 > 定義最不重要的標題。

• < h1 >：每篇文章只用一個，通常會把 < h1 > 拿來做 Title 設定，搜尋的網址結果也會以 h1 作為標準。
• < h2 >：是最常用的標題，一篇文章標題語法是使用次數最多的，一般應用於 2000 字左右的文章。
• < h3 >：是輔助為主，如果 2000 ~ 5000 字數左右的文章，可用來輔助 < h2 > 一起使用。
• < h4 >：較常出現在側邊欄，比較多使用在【 側邊欄 Side Bar】和 【底部 Footer】的部分。
• < h5 >：有機會在網站底部，h5 就是配合 h4 用的，有的時候 h5 的工作，常常被 h4 取代。
• < h6 >：出場率非常低，比較常用在【註腳 Footer Note】或 版本聲明地方，反正用在不太重要的事情上。

用法：

<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>

畫面呈現：

p 段落標籤

定義：
< p > 標籤是用來描述一段文字的段落 (paragraph)，瀏覽器預設會幫段落做換行和留邊距。

用法：

<p>這是段落一</p>
<p>這是段落二</p>

畫面呈現：

img 插入圖片

定義：
< img > 標籤是用來在 HTML 文件中加入圖片 (images)。

用法：

<img src="https://example.com/media/photo.jpg" with="600" heigh="400" alt="一張圖片">

畫面呈現：

img 標籤屬性：

• src：指定圖片位址 (URL)，這是必要的屬性，一定要寫它。
• width：是用來設定圖片的寬度。
• heigh：是用來設定圖片的高度。
• alt：圖片替代文字，當圖片無法顯示時，瀏覽器會顯示文字，比較重要用途是讓視障人知道圖片是在做什麼。
• title：指定一段文字，在滑鼠移到圖片時，會自動顯示文字。

a 連結標籤

定義：
< a > 標籤是用來建立超連結，連到其他頁面、檔案、Email 地址、或其他 URL 的超連結。

用法：

<a href="https://www.youtube.com/">連結到 YouTube</a>
<a href="https://www.google.com/" target="_blank">連結到 Google</a>

畫面呈現：

a 標籤屬性：
這裡只寫出基本常看到的屬性。

• href：指定一個 URL 看連結要連到哪邊。
• target：指定用什麼方式打開連結。
  target 下屬性值：

  "_self"：預設值，在當前視窗開啟。
  "_blank"：在新視窗開啟。
  "_parent"：在上一層父視窗開啟。
  "_top"：在最頂層父視窗開啟。
  "framename"：指定在哪個框架中開啟。
  

• 錨定連結：跳往同頁面不同區塊的位置。
  用法：

  <a href="#test-Id">連結文字</a>
  

  點上面 test-Id 的連結，會跳到 id="test-Id" 的 HTML 元素區塊。

  跳到這個 HTML 元素區塊
  <div id="test-Id">
  hello
  </div>
  

• 圖片連結：< a > 可以包住其他 HTML 元素，這裡包 img 圖片元素，讓圖片變成一個連結。
  用法：

  <a href="https://example.com/" target="_blank">
  <img src="https://example.com/media/photo.jpg">
  </a>
  

• 電子郵件超連結 mailto：
  用法：

  <a href="mailto:電子郵件信箱">連絡信箱</a>
  例：
  <a href="mailto:example@gmail.com">example 信箱</a>
  

• 電話號碼連結 tel：
  用法：

  <a href="tel:電話號碼">電話號碼</a>
  例：
  <a href="tel:+886987123456">+886-987-123-456</a>
  

  FTP 超連結 ftp:
  用法：

  <a href="ftp://testftpserver.com/">瀏覽 FTP server</a>
  

ul ol li 列表標籤

定義：
顧名思義就在 HTML 是建立項目列表清單，< ul > 標籤是用來表示，無順序列表清單，< ol > 標籤是用來表示，有順序列表清單，以上兩個都是作為列表的容器 (container)， < li > 來描述個別的項目內容。

• 無序列表 (unordered lists) - < ul > < li >
  用法：

  <ul>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
  </ul>
  

  畫面呈現：
  
• 有序列表 (ordered lists) - < ol > < li >
  用法：

  <ol>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
  </ol>
  

  畫面呈現：