Elaine's Blog 朝著 senior 前進的工程師

常用且語義化的 HTML

2019-07-09
前端

什麼是 HTML？

  • 名詞
    • 元素 Element
    • 標籤 Tag
    • 內容 Content
    • 屬性 Attribute

HTML 文件的架構

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
    <link rel="shortcut icon" href="./favicon.ico" />
  </head>
  <body>
    <img src="./images/firefox.png" alt="My test image" />
  </body>
</html>
  • <!DOCTYPE>
    • 聲明表示文檔類型，並幫助瀏覽器能夠正確顯示網頁
    • 它只能出現一次，在頁面的頂部
    • HTML5 <!DOCTYPE html>
  • <html>
    • HTML 頁面的根元素

  • <head>

    • 裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的
    • 例如顯示於搜尋結果的關鍵字、頁面說明、CSS 等等
  • <body>
    • 包含了所有會顯示於網頁瀏覽者眼前的內容
  • <meta charset="utf-8">
    • 指定了你的文件使用 utf-8 這種字元編碼
  • <title>
    • 網頁標題

標題

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
<h5>很少用到</h5>
<h6>這個也是</h6>

段落

<p>This is a single paragraph</p>
  • <p>
    • 段落
  • <br>
    • 換行
  • <hr>
    • 水平線

文字格式 (目前不常用，通常用 CSS 設定字型樣式)

  • <b>
    • 粗體
  • <i>
    • 斜體
  • <sub>
    • 下標文字
  • <sup>
    • 上標文字
<p>正常的文字</p>
<p><b>粗體的文字</b></p>
<p><i>斜體的文字</i></p>
<p>這是<sub>下標的文字</sub> 還有 <sup>上標的文字</sup></p>

圖片

<img src="./images/firefox-icon.png" alt="My test image" />
  • src 屬性
    • 檔案來源，可以放相對路徑或是絕對路徑
  • alt 屬性
    • 無法正確看到圖片時，代替說明文字
    • 通常發生：
      • 許多視能障礙的網頁瀏覽者，會使用「Screen Readers」這樣的工具，利用說明文字（alt text）來了解網頁要呈現的圖片內容。
      • 就是有些東西出錯了。例如，你誤植了圖片來源的路徑，你可能就會看到類似以下的文字：

列表

  • <ul>
    • 無順序性 (Unordered lists)
  • <ol>
    • 有順序性（Ordered lists）
  • <li>
    • 每個項目則分別放在 (list item) 裡面
<ul>
  <li>陳奕迅</li>
  <li>李榮浩</li>
  <li>周杰倫</li>
</ul>
<ol>
  <li>陳奕迅</li>
  <li>李榮浩</li>
  <li>周杰倫</li>
</ol>

連結

<a href="http://google.com/">這裡是谷歌</a>
  • href 屬性
    • 連結
    • 可以是相對路徑、絕對路徑、或是錨點 #
  • target 屬性
    • _blank
      • 打開一個新分頁
    • _self
      • 在同一分頁下跳轉至新的頁面
      • 預設值

按鈕

<button>我是一顆按鈕</button>
  • disabled 屬性
    • 是否禁用

表格

  • <table>
    • 把內容包起來
  • <tr>
    • table row 列
  • <th>
    • table header 標題
  • <td>
    • table data
  • rowspan 屬性
    • 合併列
  • colspan 屬性
    • 合併行
<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>奕迅</td>
    <td>陳</td>
    <td>30</td>
  </tr>
  <tr>
    <td>杰倫</td>
    <td>周</td>
    <td>20</td>
  </tr>
  <tr>
    <td>榮浩</td>
    <td>李</td>
    <td>10</td>
  </tr>
</table>

塊

  • <div>
    • block
    • 以塊的形式展現，總是獨占一行，將後面的元素擠到新的一行
  • <span>
    • inline
    • 不會自動換行，inline 元素通常被 block 元素嵌在裡面

表單

  • <form>
    • 表單區域
    • action 屬性
      • 將表單提交到哪個頁面
    • method 屬性
      • 指定表單提交的 HTTP 方式，只有支援 get 或 post 方法
  • <label>
    • 標籤
    • for 屬性
      • 點擊會連結對應 <input> 的 id
  • <input>
    • 輸入框
    • type 屬性
      • text
        • 文字
      • password
        • 密碼
      • radio
        • 單選按鈕
      • checkbox
        • 可複選框
      • submit
        • 當成提交按鈕
      • hidden
        • 藏起來
      • datetime-local
        • 日期時間
      • date
        • 日期
      • file
        • 檔案
      • color
        • 顏色
      • number
        • 數字
    • name 屬性
      • 讓後端判斷是什麼欄位名稱
    • disabled 屬性
      • 是否禁用
    • value 屬性
      • 輸入框的值
    • placeholder 屬性
      • 佔位符，value 沒東西的時候會顯示這個東西
    • readOnly 屬性
      • type="text" 和 type="password" 才有效
      • 是否為只可以讀，不可寫
      • 和 disabled 差別在於使用表單傳送給後端時，readOnly 可以順利過去
    • maxlength 屬性
      • 限制字數
    • max 屬性
      • type="number" 和 type="date" 才有效
      • 允許輸入的最大值
    • min 屬性
      • type="number" 和 type="date" 才有效
      • 允許輸入的最小值
    • pattern 屬性
      • 輸入內容正規式
    • required 屬性
      • 是否為必填欄位
    • checked 屬性
      • type="radio" 和 type="checkbox" 才有效
  • <textarea>
    • 多行輸入框，大部分的屬性和 <input> 差不多
    • <textarea> 有關閉標籤 </textarea>，但沒有 value 屬性
    • rows 屬性
      • 幾列
    • cols 屬性
      • 幾行
  • <select>
    • 選擇器，需搭配 <option> 一起使用
    • multiple 屬性
      • 多選
  • <option>
    • 選擇器的選項，必須包在 <select> 裡
    • selected 屬性
      • 選定某個選項
    • disabled 屬性
      • 是否禁用該選項

id 與 class

  • id 是唯一性的、不可重覆的
    • #myid
    • 常用於 JavaScript 搜尋 DOM 元素
  • class 是可被拿來被重覆使用的
    • .myclass
    • 常用於設定樣式

layout

  • <header> - 頭部，固定會重覆出現的導覽、LOGO、站名等
  • <nav> - 導覽列，像是選單之類用來導引使用到網站各個地方的
  • <section> - 章節，表示相關但是不同的段落
  • <article> - 文章，意指一篇完整而可獨立抽出來閱讀的文章
  • <main>
    • 主要區，每個頁面中只能有一個
  • <aside> - 側邊欄，網頁中非主要區域的地方，常見放廣告及導覽、全站檢索的地方
  • <footer> - 尾部，包括頁尾，像是法律資訊、作者訊息等等

為什麼要語義化？

  1. 去掉或樣式丟失的時候能讓頁面呈現清晰的結構
  2. 螢幕閱讀器（如果訪客有視障）會完全根據你的標記來「讀」你的網頁
  3. PDA、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些裝置對 CSS 的支援較弱）
  4. 搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重
  5. 便於團隊開發和維護

寫 HTML 時，應注意什麼？

  1. 儘可能少的使用無語義的標籤 <div> 和 <span>
  2. 在語義不明顯時，既可以使用 <div> 或者 <p> 時，儘量用 <p>，因為 <p> 在預設情況下有上下間距，對相容特殊終端有利
  3. 不要使用純樣式標籤，如：<b>、<font>、<u> 等，改用 css 設定
  4. 需要強調的文字，可以包含在 <strong>(取代<b>) 或者 <em>(取代<i>)
  5. 使用表格時，表頭用 <thead>，主體部分用 <tbody> 包住，尾部用 <tfoot> 包住，表頭和一般單元格要區分開，表頭用 <th>，單元格用 <td>
  6. 每個 <input> 對應的說明文字都需要使用 <label>，並且通過為 <input> 設定 id 屬性，在 <lable> 中設定 for="targetId" 來讓說明文字和相對應的 <input> 關聯起來
  7. 使用小寫的標籤 <section>，而不是 <Section>、<SECTION>
  8. 記得寫關閉的標籤 <p> 對應 </p>
  9. 空的 html 元素，如 <img>，可以也可以關閉 <img src="xxx" />
  10. 使用小寫的屬性 <div class="menu">，而不是 <div CLASS="menu">
  11. 雖然可以 <table class=mytable>，但建議屬性還是加上引號 <table class="mytable">
  12. <img> 記得加上 alt 屬性
  13. 不用過多的空白 <link rel = "stylesheet" href = "styles.css">，而是 <link rel="stylesheet" href="styles.css">
  14. 避免一行有過長的程式碼，通常一行控制在 80 個字內
  15. 記得寫 <title>

瀏覽器對 HTML 的容錯機制

  1. <a> 包 <a>

    <a>
  parent
  <a>
    child
  </a>
</a>

    Chrome 瀏覽器會解析成

    <a>
  parent
</a>
<a>
  child
</a>

  2. <table> 包 <table>

    <table>
  <table>
    <tr>
      <td>inner table</td>
    </tr>
  </table>

  <tr>
    <td>outer table</td>
  </tr>
</table>

    Chrome 瀏覽器會解析成

    <table></table>
<table>
  <tbody>
    <tr>
      <td>inner table</td>
    </tr>
  </tbody>
</table>
outer table

  3. 不存在的標籤

    <mytag></mytag>
<p>這裡也可以正常顯示</p>

  4. 沒有寫關閉標籤會自動加上 (但最好還是避免出現這樣的程式碼)

    <p>忘了寫關閉標籤也可以正常顯示</p>

參考資料

上一篇 DDoS 分散式阻斷服務攻擊

下一篇 開始第一個 React App

Content