搜尋

HTML 縮排與註解

在撰寫 HTML 的時候,常常會需要使用「縮排」和「註解」,縮排可以讓 HTML 裡的不同段落和不同元素更為清楚,註解可以替 HTML 加上說明,這篇教學將會介紹 HTML 裡縮排與註解的用法。

所有範例可使用 JS BinCodePenJSFiddle 進行線上實作,或使用筆記本編輯,不用安裝任何軟體 ( 參考:使用 HTML 編輯器 )

縮排

有些程式語言 ( 例如 JavaScript ) 是使用大括號讓程式「位於不同的區塊,執行各自的程式」,有些語言 ( 例如 Python ) 是使用「縮排」來實現這項功能,然而 HTML 是屬於採用「標籤」區分不同區塊的「標記語言」,就算沒有縮排,只要在相同的標籤裡,就會屬於同樣的區塊或同一個元素。

在撰寫 HTML 時,通常會建議使用 2 個空白當作縮排,縮排的好處會讓整個編輯版面更加清楚明瞭,況且現在程式編輯器都有針對縮排做預設的處理,只要按下 Enter 換行,通常就會進行自動縮排。

舉例來說,雖然下方的兩組 HTML 所呈現的內容一模一樣,有縮排的 HTML 就可以很容易得去理解內容架構。

沒縮排:

<table><tr><th>title</th><td>hello</td></tr><tr><th>title</th><td>hello</td></tr></table>

有縮排:

<table>
  <tr>
    <th>title</th>
    <td>hello</td>
  </tr>
  <tr>
    <th>title</th>
    <td>hello</td>
  </tr>
</table>

註解

註解是在 HTML 中「不會被顯示和執行的內容」,只要是包覆在 <!----> 裡的內容,都屬於註解,註解的功能主要用來輔助說明,或在某些特定情況下,可以透過 JavaScript 來讀取註解的內容。

以下方的程式碼為例,網頁開啟後,只有 h1 標籤的內容會顯示,其他 h2 和 ul 標籤的內容都屬於註解,不會顯示。

<h1>hello world</h1>
<!-- <h2>I am oxxo</h2> -->
<!--
<ul>
  <li>apple</li>
  <li>ball</li>
</ul>
-->

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片