HTML 結構與元素

前言

說了這麼多枯燥乏味的東西之後，要正式進入 HTML 的實操和解釋了。

這篇我會盡可能地將 HTML 常用的元素都介紹一下，我本來在思考區塊級元素、行內元素要不要分成兩篇來講，可是我覺得好像沒有那個必要，所以這篇的篇幅可能會長一些，不過會有一些例子和解釋供大家理解元素的作用。

元素的組成

如上圖，元素一般來說是由「起始標籤」、「結束標籤」、「內容」組成。

既然說是「一般來說」，那代表著有意外——空元素，或者稱為自閉合標籤。這種元素只有一個標籤，通常是用來內嵌物件，例如說圖片、輸入框：

<img src="logo.png" alt="logo" />
<input type="text" value="" />

其中，斜線（/）是非必要的，依照我查到的資料來看，如果沒有要支援 XHTML 就不需要加（如果有錯誤，歡迎留言告訴我）。

元素類型

元素的類型很多，依照不同的判斷依據，會有不同的類型分類，但是一般情況下（尤其是在實際開發過程中），我們會將元素分成「區塊級元素」和「行內元素」兩種。

至於其它分類標準，後續有需要，會額外說明，但是有一個很重要的類別，我想要先簡單地說一下——語義元素。

語義元素

語義元素（Semantic Elements）是為了更加清晰地描述網頁內容的結構和意義，讓人類和電腦都能更加容易理解。

常見的語義元素有 header、footer、article、main、section、nav 等，它的特點是看標籤的名字都能大致判斷他是用在什麼地方（這些元素後面會介紹）。

使用這類型元素的優點是能夠提高 HTML 的可讀性，也提升 SEO¹ 效能。

區塊級元素

區塊級元素（Block Element），顧名思義，它是一塊一塊的，在頁面中佔據一整行，前後以換行區隔，一般作為結構化元素使用，例如說段落、列表、導航選單、頁首、頁尾等。

區塊級元素不會在行內元素中，但是可能會在其它區塊級元素中。下面我將常見的區塊級元素分成幾個類別來介紹。

標題及段落類

1. h1、h2、h3、h4、h5、h6：標題元素分成六個等級，以一級（h1）最大、六級（h6）最小。

   複製

   <h1>一級標題</h1>
   <h2>二級標題</h2>
   <h3>三級標題</h3>
   <h4>四級標題</h4>
   <h5>五級標題</h5>
   <h6>六級標題</h6>

2. p：段落元素，一般都用來存放內文。

   複製

   <p>內文</p>

3. hgroup：標題關聯容器元素，通常將 h1 到 h6 和一個或多個 p 組合在一起，用於區分內容。

   複製

   <hgroup>
       <h1>標題</h1>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, odit!</p>
   </hgroup>

語義化類

顧名思義，就是標籤名稱有特殊含義的元素。

1. header：頁首元素，通常包含介紹性的內容，例如 logo、搜索框、標題等。

   複製

   <header>
       <img ssrc="https://picsum.photos/200" alt="logo" />
       <h1>標題</h1>
       <input type="search" name="keyword" id="keyword" placeholder="請輸入關鍵字" />
   </header>

2. footer：頁尾元素，通常包含版權訊息等。

   複製

   <footer>
       <p>Copyright © 2024 <a href="https://iistw.com/" target="_blank">Infinity 資訊</a>. All rights reserved.</p>
   </footer>

3. main：主體容器元素，用來組成頁面中心主題。

   複製

   <main>
       <h1>標題</h1>
       <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A eum doloremque iusto neque voluptate quibusdam deserunt animi eveniet provident consectetur?</p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, rerum ex? Beatae id laudantium debitis, placeat incidunt, culpa ab nemo minima cum libero quibusdam facilis excepturi possimus, ut saepe maxime!</p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, odit!</p>
   </main>

4. section：章節容器元素，通常代表著一個獨立章節或部分，一般來說會有一個標題。

   複製

   <section>
       <h2>標題</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, odit!</p>
   </section>

5. nav：導航欄容器元素，通常用來放置頁面導航選單這類會進行頁面切換的功能元素。

   複製

   <nav>
       <ul>
           <li><a href="#home">首頁</a></li>
           <li><a href="#about">關於我</a></li>
           <li><a href="#contact">聯絡方式</a></li>
       </ul>
   </nav>

6. article：文章內容元素，例如部落格文章、產品卡片、使用者評論可以使用這個元素。

   複製

   <article>
       <img src="https://picsum.photos/300/200" alt="產品圖片" />
       <h2>產品名稱</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, odit!</p>
       <button type="button">立即購買</button>
   </article>

7. aside：側邊欄區塊，通常用來涵蓋與頁面內容幾乎無關的內容，一般來說屬於獨立的內容，就算不顯示也不會影響內容。

   複製

   <aside>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, odit!</p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A eum doloremque iusto neque voluptate quibusdam deserunt animi eveniet provident consectetur?</p>
   </aside>

一般容器類

1. div：區塊元素，不具有任何實際意義，通常在沒有適合的語義元素時使用，因其對 SEO 不友好。

   複製

   <div>
       <img src="https://picsum.photos/300/200" alt="產品圖片" />
       <h2>產品名稱</h2>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, odit!</p>
       <button type="button">立即購買</button>
   </div>

2. pre：預格式化文本元素，將以 HTML 檔案中的原樣呈現，元素內的空格會按照原樣呈現，常被用來展示程式碼。

   複製

   <pre>
   <code>
   function helloWorld() {
   	console.log("Hello, world!");
   }
   </code>
   </pre>

表格類

<table>
    <caption>購物車</caption>
    <thead>
    	<tr>
        	<th>商品</th>
        	<th>數量</th>
        	<th>價格</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>商品 A</td>
        	<td>1</td>
        	<td>NT$ 1,000</td>
        </tr>
    	<tr>
        	<td>商品 B</td>
        	<td>1</td>
        	<td>NT$ 950</td>
        </tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td>小計</td>
        	<td>2</td>
        	<td>NT$ 1,950</td>
        </tr>
    </tfoot>
</table>

1. table：表格元素。
2. thead：表格頭部元素。
3. tbody：表格主體元素。
4. tfoot：表格尾部元素。
5. tr：表格行元素。
6. th：表格頭部單元格元素。
7. td：表格單元格元素。
8. caption：表格的標題元素。

table 內還有一些比較不常用的元素，可以看一下 MDN 的說明。

表單類

1. form：表單容器元素，通常包含了用於提交資料的元件，例如輸入框、日期選擇器、單選框、核選框、下拉式選單等。

   複製

   <form action="" method="post" name="loginForm" id="loginForm">
       <div>
           <label>帳號</label>
           <input type="text" name="username" id="username" required />
       </div>
       <div>
           <label>密碼</label>
           <input type="password" name="password" id="password" required />
       </div>
       <div>
           <input type="submit" value="登入" />
           <input type="reset" value="重設" />
       </div>
   </form>

   form 元素常用的屬性有：

   • name：表單的名稱，非必須的。值不能是空字串，並且必須在它所在的 forms 集合中的中是唯一的。

   • action：處理表單提交的 URL。如果 method 的值是 dialog 將被忽略，也可以透過設定了 formaction 屬性的 button 以及 type 為 submit 或 image 的 input 覆蓋。

   • method：用於提交表單的 HTTP 方法，是枚舉屬性（不區分大小寫）：

     值	說明
     post	使用 POST 方法。表單資料會作為請求的正文發送。
     get（預設）	使用 GET 方法。表單資料會作為網址結構的查詢條件附加在 action 的 URL 上，並導致頁面導向。
     dialog	當 form 元素在 dialog 元素中，提交表單會關閉 dialog 元素。

   • enctype：如果 method 為 post，enctype 會是表單提交的 MIME 類型：

     類型	說明
     application/x-www-form-urlencoded	預設。
     multipart/form-data	如果 form 中有 type 為 file 的 input。
     text/plain	通常用於偵錯、調試。

     可以透過設定了 formenctype 屬性的 button 以及 type 為 submit 或 image 的 input 覆蓋。

   • accept-charset：伺服器接受的空格分隔字元編碼。瀏覽器會按它列出的順序使用它們。預設與頁面相同的編碼。

   • autocapitalize：在 form 元素使用的話就不需要將裡面的元素一個一個設置。具體使用方法可以看一下上一篇「認識 HTML」。

   • autocomplete：指預設情況下，輸入元素是否可以由瀏覽器自動填寫，是枚舉屬性，值是下面之一：

     值	說明
     on	瀏覽器可以自動完成輸入。
     off	瀏覽器可能不會自動完成。（對於可疑的登錄表單，瀏覽器往往會忽略這一點，具體可以看 MDN 說明）

   • novalidate：是布林屬性，表示表單在提交的時候是否需要進行驗證：

     值	說明
     true	提交時需要通過驗證。
     false	提交時不需要通過驗證。

     如果沒有設定，提交時會驗證。可以透過設定了 formnovalidate 屬性的 button 以及 type 為 submit 或 image 的 input 覆蓋。

   • target：指提交表單後顯示回應結果的地方。

     值	說明
     _self（預設）	載入到與當前上下文相同的瀏覽上下文2中。
     _blank	載入到新的未命名瀏覽上下文中。
     _parent	載入到目前瀏覽上下文的父瀏覽上下文中。如果沒有父級，則行為與 _self 相同。
     _top	載入到頂級瀏覽上下文（也就是作為當前上下文的祖先且沒有父級的瀏覽上下文）。如果沒有父級，則行為與 _self 相同。

   其餘的像是 id、class 之類的屬性就不特別說了。

2. fieldset：分組元素，用來將表單內的元素進行分組，常和 legend 一起使用。

   複製

   <form action="" method="post" id="registerForm">
       <fieldset>
           <legend>帳號資訊</legend>
           <label>帳號</label>
           <input type="text" name="username" id="username" required />
           <label>信箱</label>
           <input type="email" name="email" id="email" required />
           <label>密碼</label>
           <input type="password" name="password" id="password" required />
       </fieldset>
       <fieldset>
           <legend>基本資料</legend>
           <label>姓氏</label>
           <input type="text" name="lastName" id="lastName" required />
           <label>名字</label>
           <input type="text" name="firstName" id="firstName" required />
           <label>生日</label>
           <input type="datetime" name="birth" id="birth" required />
           <label>性別</label>
           <select>
               <option value="">請選擇</option>
               <option value="男">男</option>
               <option value="女">女</option>
               <option value="第三性">第三性</option>
           </select>
       </fieldset>
       <div>
           <input type="submit" value="註冊" />
           <input type="reset" value="重設" />
       </div>
   </form>

   它的屬性有：

   • disabled：布林屬性，只要設定了，所有子表單控制件元素都會繼承。

   它還有 form、name 屬性，但是我覺得沒那麼重要，就不特別拿出來講了。一方面是我覺得不太用得到，另一方面是我覺得每一個屬性都列出來，篇幅有點長。

列表類

1. ul：無序列表元素。

   複製

   <ul>
       <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
       <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
       <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
   </ul>

2. ol：有序列表元素。

   複製

   <ol>
       <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
       <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
       <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
   </ol>

   它的屬性：

   • reverse：是一個布林屬性，表示列表是否要倒序排列。

   • type：編號類型：

     值	說明
     a	表示小寫英文字母編號（a、b、c）。
     A	表示大寫英文字母編號（A、B、C）。
     i	表示小寫羅馬數字編號（i、ii、iii）。
     I	表示大寫羅馬數字編號（I、II、III）。
     1（預設）	表示阿拉伯數字編號（1、2、3）。

   • start：是一個阿拉伯整數的屬性，指定編號的起始值。無論編號類型是否被 type 屬性改變。

3. li：列表條目元素，包含在 ul 或 ol 中。

4. dl： 描述列表元素，通常用於展示詞彙列表這類對照表，搭配 dt 和 dd 使用。

   複製

   <dl>
       <dt>類一</dt>
       <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dd>
       <dt>類二</dt>
       <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dd>
       <dt>類三</dt>
       <dd>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dd>
   </dl>

5. dt：描述定義元素。

6. dd：描述說明元素。

物件類

img、video、audio 不是區塊級元素。預設情況下它們不會自動開始新的一行，並且通常與其他行內元素或文本內容一起顯示在同一行上。行內元素不會佔據全寬，僅根據其內容大小來確定所需空間。

1. figure：可附標題內容元素，常和 figcaption 一起使用，例如將 img、figcaption 包在 figure 中，以 figcaption 作為標題。

   複製

   <figure>
   	<img src="https://picsum.photos/200" alt="隨機圖片" />
       <figcaption>隨機圖片</figcaption>
   </figure>
   <figure>
   	<video controls>
           <source src="https://api.iistw.com/blogs/toothless-dance.mp4" type="video/mp4" />
       </video>
       <figcaption>隨機圖片</figcaption>
   </figure>

2. figcaption：figure 內的標題元素。

其它類

1. blockquote：引用元素，通常用於凸顯內容或是引用一段話。

   複製

   <blockquote>
       <p>Tell me and I forget. Teach me and I remember. Involve me and I learn.</p>
       <cite>--Benjamin Franklin</cite>
   </blockquote>

   它有一個 cite 屬性是用來指定引用的源文檔或消息。

2. dialog：對話框元素，他是一個彈窗形式的元素，是用來與使用者進行交互的功能元素。

   複製

   <dialog>
   	<p>Lorem...</p>
   </dialog>

   它的屬性：

   • open：

     布林屬性，表示是可否處於互動的狀態。這個屬性比較特別的是，它沒有值。也就是說只要 dialog 元素擁有這個屬性，就代表為 true 狀態；沒有這個屬性，dialog 處於隱藏狀態。

     雖然可以通過設定這個屬性來決定是否顯示，當時不推薦這個方法（官方說的）。推薦使用 .show() 或 .showModal() 這種方式來操控 dialog 顯示。

3. hr：水平分隔線。

行內元素

行內元素（Inline Element）是指放在區塊級元素中的元素，通常都是一小部分內容組成，它不會產生新的一行，例如超連結、斜體、粗體、底線等。一般來說，只要元素不是區塊級元素，他就是行內元素，而 HTML 的元素實在太多了，我就挑一些重要的講一下，其餘的等到時候需要的時候再拿出來講。

文字樣式及排版類

1. 粗體

   複製

   <p>這是一段非常<b>隨機</b>的文字。</p>
   <p>這是一段非常<strong>隨機</strong>的文字。</p>

   元素使用 b 或 strong，我覺得很直觀，b 你可以記「bold」或是「the bring attention to element」。那麼它們的差別在哪呢？按照官方的解釋，b 就是一般的加粗，而 strong 是有強調性質的。如果要更加細緻的粗細變化，可以使用 CSS 的 font-weight 屬性。

2. 底線

   複製

   <p>這是一段非常<u>隨機</u>的文字。</p>

   元素使用 u ，你可以記「underline」，如果要更加細緻的變化，可以使用 CSS 的 text-decoration 屬性。

3. 斜體

   複製

   <p>這是一段非常<i>隨機</i>的文字。</p>
   <p>這是一段非常<em>隨機</em>的文字。</p>

   可以使用 i 或 em，都會有斜體的效果，但是按照官方給的解釋，em 是有強調性質的。

4. 刪除線

   複製

   <p>這是一段非常<s>隨機</s>的文字。</p>
   <p>這是一段非常<del>隨機</del>的文字。</p>

   可以使用 s 或 del，都會有刪除線的效果，按照官方的解釋，s 比較像是刪除不再相關或不再準確的事，而 del 比較像是修正的概念。

   del 通常會和 ins 做搭配，例如說下面的例子：

   複製

   <p>三乘以七等於<del>二十七</del><ins>二十一</ins>。</p>

5. 上下標

   複製

   <p>這是一段非常<sup>隨機</sup>的文字。</p>
   <p>這是一段非常<sub>隨機</sub>的文字。</p>

   上標是 sub、下標是 sup。

6. 標記

   複製

   <p>這是一段非常<mark>隨機</mark>的文字。</p>

   使用 mark，效果像是使用螢光筆做標記。

7. 換行

   複製

   <p>這是一段非常隨機<br />的文字。</p>

   使用 br，效果像是在 Microsoft Office Word 中使用 [[Shift]] + [[Del]] 換行。

超連結

HTML 提供了一種元素，讓我們不需要透過寫 JavaScript 實現超連結——a。它的記憶方法很簡單，a 元素的全稱是 anchor，翻譯成中文是錨點，他可以是頁與頁、站與站之間的錨點，也能是同一個頁面之間的錨點，甚至 HTML 也賦予了它一些其它作用。

<a href="https://iistw.com/">超連結</a>

上面是超連結最基本的樣子，接下來說說它比較常用的屬性：

• href：

  超連結指向的目標。一般會是下面幾種：

  • 包含文件片段的頁面部分

    複製

    <a href="#chapter1">第一章</a>
    <div id="chapter1">
        <h2>第一章</h2>
        <p>Lorem...</p>
    </div>

  • 包含文字片段的特定文本部分

    複製

    <a href="#:~:text=特定內容">跳轉到包含「特定內容」的位置</a>

    當使用者點擊時，瀏覽器不僅會跳轉到相應的頁面，還會自動滾動到包含該特定文字的位置。此外，如果瀏覽器支援的話，該段文字還會被高亮顯示，讓使用者更容易找到。

    格式是 #:~:text=[prefix-,]textStart[,textEnd][,-suffix]。

    • textStart：必需的。想要高亮顯示的文字的開始部分。
    • textEnd：可選的。如果提供，瀏覽器會將 textStart 到 textEnd 之間的全部文字高亮顯示。
    • prefix 和 suffix：可選的。用來提高定位的精確度。

    不過這個用法我好像還沒遇過？

  • 包含媒體片段的媒體檔

    複製

    <a href="video.mp4#t=10">從第 10 秒開始播放影片</a>

  • 帶有 tel: 的電話號碼

    複製

    <a href="tel:+886987654321">撥打 +886987654321</a>

  • 帶有 mailto: 的電子郵件位址

    複製

    <a href="mailto:[email protected]">發送電子郵件給 [email protected]</a>

  • 帶有 sms: 的 SMS 文字消息

    複製

    <a href="sms:+886987654321">發送 SMS 給 +886987654321</a>

  • 透過 registerProtocolHandler() API 自訂的 URL 方案（瀏覽器預設不支援）

    複製

    <a href="bitcoin:XXX?amount=0.01">支付 0.01 比特幣</a>

    不知道你們有沒有遇過在網頁上點擊一個連結，然後他就問你要不要開啓對應的應用程式？大多透過這個用法實現的。

• target：

  連結的 URL 在哪裡顯示：

  值	說明
  _self（預設）	載入到與當前上下文相同的瀏覽上下文中。
  _blank	載入到新的未命名瀏覽上下文中。
  _parent	載入到目前瀏覽上下文的父瀏覽上下文中。如果沒有父級，則行為與 _self 相同。
  _top	載入到頂級瀏覽上下文（也就是作為當前上下文的祖先且沒有父級的瀏覽上下文）。如果沒有父級，則行為與 _self 相同。

• download：

  讓瀏覽器將連結的 URL 視為下載。是一個布林屬性，不過這個屬性比較特別，它可以選擇要不要設定值。

  值	說明
  有	會作為檔名。/、\ 將會轉換為底線（_）。檔案系統可能會禁止在檔名中使用一些字元，因此瀏覽器會在必要時調整建議的名稱。
  無	瀏覽器將從「Content-Disposition HTTP 標頭」、「URL 的最後一段」、「媒體類型3」中產生一個檔名

• referrerpolicy：

  指定在跳轉時，如何處理 HTTP Referer⁴ 標頭。這個標頭可以告訴目標網站該請求是從哪裡來的。透過設定不同的 referrerpolicy 值，開發者可以控制在不同情況下應該提供多少來源信息給目標網站。

  類型	說明
  no-referrer	不發送 Referer 標頭。
  no-referrer-when-downgrade	在從 HTTPS 到 HTTP 發送請求時不發送 Referer 標頭，但在同等安全等級（HTTPS 到 HTTPS 或HTTP 到 HTTP）的請求中發送完整的 URL。
  origin	只發送當前頁面的協議、主機名和埠號，不包括路徑和查詢字符串。
  origin-when-cross-origin	對於同源請求發送完整的 URL，但對於跨源請求只發送前頁面的協議、主機名和埠號。
  same-origin	只有在請求的目標與當前頁面處於同一源時，才發送 Referer 標頭。
  strict-origin	在從 HTTPS 到 HTTPS 發送請求時將協議、主機名和埠號作為引用方發送，從 HTTPS 到 HTTP 或從 HTTP 到 HTTP 的請求不發送 Referer 標頭。
  strict-origin-when-cross-origin（預設）	對於同源請求發送完整的 URL，對於跨源的 HTTPS 到 HTTPS 請求只發送協議、主機名和埠號，其他情況下不發送 Referer 標頭。
  unsafe-url	無論請求是同源還是跨源，或者是從 HTTPS 到 HTTP 的降級請求，都發送完整的 URL。

按鈕

HTML 提供了兩種按鈕元素，其中一種在表單類會說，這邊先說 button。

<button type="button">點擊</button>

button 是互動式元素，可以透過滑鼠、鍵盤、手指、語音之類的技術觸發。

他有一下屬性（只列出常見的）：

• type：

  是枚舉屬性，值可以是：

  值	說明
  submit（預設）	作為提交表單的按鈕使用，如果元素沒有在 form 中且沒有設定 form 屬性，按鈕沒有作用。
  reset	如果元素在 form 中或有設定 form 屬性，點擊會重置所有表單控制件的值（回復預設狀態）。
  button	沒有預設行為，透過 JavaScript 賦予其作用。

• disabled：

  布林屬性，會阻止點擊後觸發的一切事件，會使元素無法點擊、聚焦。

物件類

1. img

   複製

   <img src="https://picsum.photos/200" alt="隨機圖片" />

   影像嵌入元素。它具有以下屬性（常用的）：

   • src：

     圖像 URL。

   • alt：

     定義可以替換頁面中圖像的文字。

   • loading：

     指示瀏覽器應如何載入影像。

     值	說明
     eager（預設）	立即載入圖像
     lazy	延遲載入圖像，直到圖像達到瀏覽器定義的與可視區域的計算距離。

   • width：

     圖像的固有寬度（以像素為單位）。必須是不帶單位的整數。

   • height：

     圖像的固有高度（以像素為單位）。必須是不帶單位的整數。

   sizes 和 srcset 之後再說，這兩個比較複雜一些，等到了後面開始實戰的時候在講。

2. video

   複製

   <video src="https://api.iistw.com/blogs/toothless-dance.mp4" controls></video>
   <video controls>
       <source src="https://api.iistw.com/blogs/toothless-dance.mp4" type="video/mp4" />
   </video>

   影像嵌入元素。它具有以下屬性（常用的）：

   • src：

     影像 URL。

   • autoplay：

     布林屬性，如果有，會自動播放。現在的瀏覽器一般會預設禁止自動播放，就算有設定這個屬性也一樣，具體可以看「Autoplay guide for media and Web Audio APIs - Web media technologies | MDN」。

   • controls

     布林屬性，如果有，瀏覽器會提供控制器，讓使用者能夠控制影片的播放、暫停、音量等。

   • controlslist：

     它可以讓瀏覽器選擇要禁止哪些控制項。

     值	說明
     nodownload	禁止下載
     nofullscreen	禁止全螢幕
     noremoteplayback	禁止遠端播放

     這個屬性有兼容性問題，有些瀏覽器比較特立獨行一些。

   • disablepictureinpicture：

     禁止畫中畫。

   • disableremoteplayback：

     禁止遠端播放。

   • width：

     圖像的固有寬度（以像素為單位）。必須是不帶單位的整數。

   • height：

     圖像的固有高度（以像素為單位）。必須是不帶單位的整數。

   • loop：

     布林屬性，如果指定，瀏覽器將在到達影片末尾時自動返回開頭。

   • muted：

     布林屬性，如果設置，影片最初將被靜音。

   • poster：

     影片縮圖。如果未指定，則在第一幀可用之前不顯示任何內容，然後第一幀顯示為縮圖。

   • preload：

     枚舉屬性，是否要在影片播放之前載入內容。它可能具有以下值之一：

     值	說明
     none	不預先載入。
     metadata	僅獲取元資料，例如長度。
     auto 或空	預先載入全部。

3. audio

   音訊嵌入元素。它具有以下屬性（常用的）：

   • src：

     音訊 URL。

   • autoplay：

     布林屬性，如果有，會自動播放。

   • controls

     布林屬性，如果有，瀏覽器會提供控制器，讓使用者能夠控制音訊的播放、暫停、音量等。

   • loop：

     布林屬性，如果指定，瀏覽器將在到達音訊末尾時自動返回開頭。

   • muted：

     布林屬性，如果設置，音訊最初將被靜音。

   • preload：

     枚舉屬性，是否要在影片播放之前載入內容。它可能具有以下值之一：

     值	說明
     none	不預先載入。
     metadata	僅獲取元資料，例如長度。
     auto 或空	預先載入全部。

表單類

1. input

   表單輸入元素。它具有以下類型：

   類型	說明
   text（預設）	輸入框。
   email	電子郵件輸入框。在驗證欄位是否合規時，可以判斷是否為電子郵件。且在手機等裝置上會有相關鍵盤。
   password	密碼輸入框。
   search	搜索輸入框。在手機等裝置上會有相關鍵盤。
   number	數字輸入框。在手機等裝置上會有相關鍵盤。
   tel	電話輸入框。在手機等裝置上會有相關鍵盤。
   url	URL 輸入框。在手機等裝置上會有相關鍵盤。
   date	日期輸入框（年、月、日）。
   datetime-local	日期輸入框（年、月、日、小時、分鐘），沒有時區。
   month	日期輸入框（年、月）。
   week	時間輸入框。用於輸入由周年編號和不帶時區的周數組成的日期的控件。
   time	時間輸入框（小時、分鐘）。
   file	檔案選擇器。可以透過 accept 屬性決定可以選擇的檔案類型。
   hidden	不顯示但也會被提交的輸入框。
   radio	單選框。
   checkbox	複選框。
   range	滑桿輸入元素。最大、最小值分別透過 max、min 屬性設定。
   color	色彩選擇器。
   submit	表單提交按鈕。
   image	圖形的 submit 按鈕，透過設定 src 屬性決定圖片。
   reset	重置所有表單控制件的值（回復預設狀態）。（如果元素在 form 中或有設定 form 屬性）
   button	一個沒有預設行為的按鈕，作用與 type 屬性為 button 的 button 元素一樣。

   常用屬性：

   屬性	input 類型	說明
   type	全部	表單控制件的類型。
   name	全部	表單控制件的名字。
   value	全部（除了 image）	表單控制件的預設值。
   placeholder	text、search、url、tel、email、password、number	表單控制件未設置值時顯示的文字。
   required	全部（除了 hidden、range、color）	布林屬性。是否為必要的。
   readonly	全部（除了 hidden、range、color、checkbox、radio）	布林屬性。是否為只讀。
   disabled	全部	是否禁用。
   checked	checkbox``radio	是否選中。
   accept	file	預期檔案類型。
   maxlength	text、search、url、tel、email、password	最大長度（字元數）。
   minlength	text、search、url、tel、email、password	最小長度（字元數）。
   multiple	email、file	布林屬性。是否允許多個值。
   pattern	text、search、url、tel、email、password	值的格式。
   step	date、month、week、time、datetime-local、number、range	每一次向上或向下的單位量。

2. select

   複製

   <select>
       <option value="">請選擇</option>
       <optgroup label="類別一">
       	<option value="A">A</option>
       	<option value="B">B</option>
       </optgroup>
       <optgroup label="類別二">
       	<option value="C">C</option>
       	<option value="D">D</option>
       </optgroup>
   </select>

   下拉選擇器元素。一樣具有：name、required、multiple、disabled 屬性。

   1. option：select 元素的選項。
   2. ``optgroup：將 select元素中的option` 分組。

3. textarea

   複製

   <textarea></textarea>

   多行的輸入框。它具有以下一些比較常用的專屬屬性：

   • cols：

     正整數，預設 20。元素的可見寬度，以平均字元寬度表示。

   • rows：

     正整數，預設 2。元素可見文本行數。

   • wrap：

     告訴元素應該如何包裝元素的值。

     值	說明
     hard	瀏覽器自動插入換行符（CR+LF），使每行不超過元素的寬度。必須指定 cols 屬性才能使其生效。
     soft（預設）	瀏覽器確保輸入值中的所有換行符都是一對換行符（CR+LF），但不會向值添加額外的換行符。
     off	類似 soft 但是會改變外觀（white-space 變成 pre）以便超過的 cols 後不會被換行，並且 textarea 變得可水平滾動。

其它

1. span

   內容跨度元素。它沒有任何實際的意義，唯一的作用是包住元素或文字，以便進行樣式或 JavaScript 的操作，它和 div 非常相似，唯一的差別在 div 是區塊級元素、span 是行內元素。

結語

這一篇說了元素組成的結構，也說了常見的元素，而這些元素都是寫在 body 中的。那麼下一篇要準備講一下 head 中有哪些元素，以及它們代表的意義。

參考資料

1. HTML Standard - Elements: https://html.spec.whatwg.org/multipage/indices.html#elements-3
2. HTML Standard - Element content categories: https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
3. HTML：超文本標記語言 | MDN：https://developer.mozilla.org/zh-TW/docs/Web/HTML