HTML 學習筆記

Undefined443發表於2024-06-10
HTML筆記

統一資源定位符 (Uniform Resource Locator, URL)：[協議名]://[使用者名稱]:[密碼]@[主機名]:[埠]/[路徑]?[查詢引數]#[片段ID]

Introduction To HTML

命名格式

  • 全部小寫
  • 用短橫線作為分隔符，而不是空格或下劃線

目錄結構

最基本、最常見的結構：

  • index.html 主頁
  • images 圖片資料夾
  • styles 樣式表資料夾
  • scripts 指令碼資料夾

配置本地伺服器

# 在網站根目錄下操作
python -m http.server 7800 # 預設埠為 8000

現在可以透過瀏覽器轉到 localhost:7800 來訪問此伺服器。

透過 GitHub 釋出網站

在 GitHub 新建庫，命名為 yourname.github.io（全小寫），並將網站檔案加入庫即可。此時可透過 yourname.github.io 訪問你的網站。

HTML 標籤的語法格式

<開始標籤 屬性="xxx">內容</結束標籤>

HTML 標籤也稱為 HTML 元素

自閉合標籤

有些 HTML 標籤沒有單獨的結束標籤，而是在開始標籤中新增 / 來進行閉合。

自閉合標籤也稱為“空元素”（empty elements）

<img src="./IMG.png" />
<hr />
<br />
<input type="text" placeholder="xxx" />

塊級元素

塊級元素最主要的特點是它們自己獨佔一行。塊級元素最具代表性的就是 <div>，此外還有 <p>, <nav>, <aside>, <header>, <footer>, <section>, <article>, <ul>, <address>, <h1> ~ <h6> 等。

塊級元素的主要特徵如下所示：

  • 不管是否使用換行標籤，塊級元素總是在新行上開始；
  • 塊級元素的寬度、高度以及外邊距和內邊距等都可以控制；
  • 如果省略塊級元素的寬度，那麼它的寬度預設為當前瀏覽器視窗的寬度；
  • 塊級元素中可以包含其它的內聯元素和塊級元素。

內聯元素

內聯元素也可以稱為行內元素，內聯元素中最常用的是 <span>，此外還有 <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> 和 <var> 等。

內聯元素的主要特徵如下所示：

  • 內聯元素和其他元素會在同一行上顯示；
  • 內聯元素的寬、高以及外邊距和內邊距都不可以改變；
  • 內聯元素的寬度就是其中內容的寬度，且不可以改變；
  • 內聯元素中只能容納文字或者其他內聯元素。

對於內聯元素的使用，需要注意如下幾點：

  • 設定寬度 width 無效；
  • 設定高度 height 無效，但可以透過 line-height 來設定行高；
  • 可以設定 margin 外邊距，但只對左右外邊距有效，上下無效；
  • 設定 padding 內邊距時，只有左右 padding 有效，上下則無效，需要注意的是元素範圍是增大了，但是對元素周圍的內容是沒影響的；
  • 可以透過 display 屬性將元素在內聯元素和塊級元素之間進行切換。

無語義元素

有時候你可能只想將一組元素作為一個單獨的實體來使用。為了應對這種情況，HTML 提供了 <div> 和 <span> 元素。應配合使用 class 屬性提供一些標籤，使這些元素能易於查詢。

警告：<div> 非常便利但容易被濫用。由於它們沒有語義值，會使 HTML 程式碼變得混亂。要小心使用，只有在沒有更好的語義方案時才選擇它，而且要儘可能少用， 否則文件的升級和維護工作會非常困難。

HTML 通用屬性

id
用來賦予某個標籤唯一的識別符號。當我們用 CSS 或者 JavaScript 來操作這個標籤時，可以透過 id 屬性來找到這個標籤。
class
同樣是為標籤定義一個識別符號，不過這個識別符號可以不唯一。我們可以為多個標籤定義相同的 class 屬性，也可以為一個標籤定義多個 class 屬性。
<div class="class1 class2 class3"></div>
<p class="content">some text</p>
<div class="content">xxx</div>
title
當滑鼠移動到標籤上時，就會顯示 title 的值。
style
使用 style 屬性我們可以在 HTML 標籤內部為標籤定義 CSS 樣式，例如設定文字的顏色、字型等。
<p style="color:red;">red text</p>
<img src="xxx" style="height:50px;">
<div style="paddding:10px;border:2px solid #999;text-align:center;">some text</div>

布林屬性

有時你會看到沒有值的屬性，它是合法的。這些屬性被稱為布林屬性，他們只能有跟它的屬性名一樣的屬性值。例如 disabled 屬性，它們可以標記表單輸入使之變為不可用。

<input type="text" disabled>

<!-- 相當於下面 -->
<input type="text" disabled="disabled">

實體引用

原義字元 等價字元引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;
空格 &nbsp;

<head> 裡有什麼

<meta> 元素

Metadata——後設資料
用於描述資料的資料
新增作者和描述

許多 <meta> 元素包含了 name 和 content 屬性：

  • name 指定了 meta 元素的型別； 說明該元素包含了什麼型別的資訊。
  • content 指定了實際的後設資料內容。
<!-- 新增作者和描述 -->
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications.">

description 也被使用在搜尋引擎顯示的結果頁中。

可以在 Google's webmaster toos 中進行配置使你的站點對搜尋引擎更友好。

許多網站有自己編寫的後設資料協議，用於向某些網站提供可使用的特定資訊。

為你的站點增加自定義圖示

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

大多數瀏覽器也支援 .gif 或 .png 格式的圖示

為文件設定主語言

<html lang="zh-CN">

<!-- 也可以為文件的分段設定不同的語言 -->
<p>日語例項: <span lang="jp">ご飯が熱い。</span>.</p>

HTML 超連結

<a href="xxx" title="xxx" target="_blank">顯示內容</a>

<a href="#">回到頂部</a>

<!-- 將影像轉換為連結 -->
<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="連結至 Mozilla 主頁的 Mozilla 標誌">
</a>

<!-- 連結到文件片段 -->
<!-- 先給要連結到的元素分配一個 id 屬性 -->
<h2 id="Mailing_address">郵寄地址</h2>

<!-- 然後在 URL 的結尾使用雜湊標記 '#' 指向該 id -->
<p>要提供意見和建議，請將信件郵寄至 <a href="contacts.html#Mailing_address">我們的地址</a>。</p>

<!-- 在同一文件下可以省略 URL -->
<p>本頁面底部可以找到 <a href="#Mailing_address">公司郵寄地址</a>。</p>
target 屬性
指明新頁面的開啟方式。絕大部分情況下，target 屬性要麼不寫，保持預設的 _self（在當前標籤頁開啟），要麼將它的值設定為 _blank（在新標籤頁開啟）。
download 屬性
指示瀏覽器下載 URL。若提供了屬性值，則屬性值將作為預填充檔名。

電子郵件連結

使用 mailto 協議的 URL

<a href="mailto:nowhere@mozilla.org">向 nowhere 發郵件</a>

當點選該連結時，將建立一個新的電子郵件並將收件人預設為 nowhere@mozilla.org

除了電子郵件地址，您還可以提供其他資訊。事實上，任何標準的郵件頭欄位都可以被新增到你提供的郵件 URL。 其中最常用的是主題 (subject)、抄送 (cc) 和主體 (body) 。每個欄位及其值被指定為查詢項。

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

使用 ? 來分隔主 URL 與引數值，以及使用 & 來分隔 mailto: 中的各個引數。這是標準的 URL 查詢標記方法。

文字格式

C 語言中文網：文字格式化

根據 HTML5 的規範，標題應該用 <h1>~<h6> 標籤定義，被強調的文字應該用 <em> 標籤定義，重要的文字應該用 <strong> 標籤定義，被標記的或者高亮顯示的文字應該用 <mark> 標籤定義。

只用於改變字型樣式而沒有特定語義的元素稱為表象元素，應儘量避免使用這類元素。

列表

有序列表
<!-- ordered list -->
<ol>

  <!-- list item -->
  <li>item1</li>
  <li>itme2</li>
</ol>
  • 不建議在 <ol> 中直接使用除 <li> 之外的其他標籤。
  • 無序列表只需用 <ul> 替換 <ol> 即可。
定義列表
<!-- definition list -->
<dl>

  <!--definition term，用於定義一個術語-->
  <dt>標題 1</dt>

  <!-- definition description，用於解釋術語 -->
  <dd>描述文字 1</dd>
  <dt>標題 2</dt>
  <dd>描述文字 2</dd>
</dl>

C 語言中文網：使用 CSS 修改列表樣式

引用

塊引用

使用 <blockquote> 元素將引用內容包裹起來，並且在 cite 屬性裡用 URL 來指向引用的資源。

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
行內引用

使用 <q> 元素將引用內容包裹起來，並且在 cite 屬性裡用 URL 來指向引用的資源。

<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
  for short quotations that don't require paragraph breaks.</q></p>

瀏覽器會將其作為普通文字放入引號內表示引用。

<q> 元素旨在用於不需要分段的短引用。

引文

cite 屬性的內容不會被瀏覽器顯示。若想要確保使用者可以找到引用來源，更好的方法是為 <cite> 元素附上鍊接：

<p>quotation</q> -- <a href="URL"><cite>MDN q page</cite></a>.</p>

縮寫

<p>我們使用 <abbr title="超文字標記語言（Hyper text Markup Language）">HTML</abbr> 來組織網頁文件。</p>

<p>第 33 屆 <abbr title="夏季奧林匹克運動會">奧運會</abbr> 將於 2024 年 8 月在法國巴黎舉行。</p>

標記聯絡方式

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

<!-- 這種形式也可以 -->
<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

展示計算機程式碼

  • <code>：用於標記計算機通用程式碼。
  • <pre>：用於保留空白符。
  • <var>：用於標記具體變數名。
  • <kbd>：用於標記鍵盤（或其他型別）輸入。
  • <samp>：用於標記計算機程式的輸出。
<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，別點我了。');
}</code></pre>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一個段落元素。</p>

<p>請不要使用 <code><font></code> 、 <code><center></code> 等表象元素。</p>

<pre>$ ping mozilla.org
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

標記時間和日期

<time datetime="2016-01-20">2016年1月20日</time>

標記日期和時間 | MDN

HTML 文件結構

<!-- 文件型別宣告 -->
<!DOCTYPE html>

<!-- HTML 頁面的根標籤 -->
<html lang="zh-cn">

  <!-- 儲存頁面的一些後設資料 -->
  <head>

    <!-- 指明網頁的編碼，可省略 -->
    <meta charset="UTF-8">

    <!-- 定義網頁的標題 -->
    <title>HTML 演示</title>
  </head>

  <!-- 定義網頁的內容 -->
  <body>
  
    <!-- 頁首 -->
    <header>
      <!-- 導航欄 -->
      <nav>

      </nav>
    </header>

    <!-- 主內容 -->
    <main>
      <article>

      </article>

      <!-- 邊欄 -->
      <aside>

      </aside>
    </main>

    <footer>

    </footer>
  </body>
</html>

佈局元素

  • <header>：頁首。
  • <nav>：導航欄。
  • <main>：主內容。主內容中還可以有各種子內容區段，可用 <article>、<section> 和 <div> 等元素表示。
  • <aside>：側邊欄，經常巢狀在 <main> 中。
  • <footer>：頁尾。

文件與網站結構 | MDN

註釋規範

單行註釋

註釋內容前後各一個空格，註釋位於要註釋程式碼的上面，獨佔一行。

<!-- Comment Text -->
<div>...</div>

模組註釋

用於描述模組開始與結束的位置。模組與模組之間空一行。

<!-- S Comment Text A -->
<div class="mod_a">
  ...
</div>
<!-- E Comment Text A -->

<!-- S Comment Text B -->
<div class="mod_b">
  ...
</div>
<!-- E Comment Text B -->

巢狀模組註釋

當模組註釋內再出現模組註釋時，為了突出主要模組，巢狀模組不再使用，而只在內部模組結束的位置進行單行註釋。

<!-- S Comment Text A -->
<div class="mod_a">

  <div class="mod_b">
    ...
  </div>
  <!-- /mod_b -->

  <div class="mod_c">
    ...
  </div>
  <!-- /mod_c -->

</div>

多媒體與嵌入

圖片

<img src="./IMG.png" alt="description" width="150" height="100">

<!-- 使用 CSS 來改變圖片尺寸 -->
<img src="./IMG.png" alt="description" style="width:150px; height:100px;">

關於 width 和 height 屬性的建議：

  • 一般建議為圖片設定 width 和 height 屬性，以便瀏覽器可以在載入圖片之前為其分配足夠的空間，否則圖片載入過程中可能會導致您的網站佈局失真或閃爍。
  • 但是您不應該使用 HTML 屬性來改變圖片的大小。如果要改變圖片的尺寸，請使用 CSS。
  • 如果您的頁面使用響應式佈局（自適應佈局），建議在上傳圖片之前裁剪好尺寸，而不要設定 width 和 height 屬性，這樣圖片能夠跟隨螢幕寬度自動改變尺寸，從而不會變形，或者超出螢幕寬度。

警告： 大多數圖片是有版權的。不要在你的網頁上使用一張圖片，除非：

  • 你是圖片版權所有者
  • 你有圖片版權所有者明確的、書面上的使用授權
  • 你有充分的證據證明這張圖片是公共領域內的

侵犯版權是違法並且不道德的。此外，在得到授權之前永遠不要把你的 src 屬性指向其他人網站上的圖片。這被稱為"盜鏈（hotlinking）"。同樣，盜取其他人的頻寬也是違法的。而且這會降低你的頁面的載入速度，而且圖片可能會在不受你控制的情況下被移走或用別的令人尷尬的東西替換掉。

為圖片搭配說明文字

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一隻恐龍頭部和軀幹的骨架，它有一個巨大的頭，長著鋒利的牙齒。"
     width="400"
     height="341">
  <figcaption>曼徹斯特大學博物館展出的一隻霸王龍的化石</figcaption>
</figure>

<figcaption> 元素告訴瀏覽器和其他輔助的技術工具這段說明文字描述了 <figure> 元素的內容.

<figure> 裡不一定要是一張圖片，也可以是幾張圖片、一段程式碼、音影片、方程、表格或別的。

CSS 背景圖片

為頁面中的所有段落設定一個背景圖片：

p {
  background-image: url("images/dinosaur.jpg");
}

響應式圖片

解析度切換：不同的尺寸

我們想要顯示相同的圖片內容，僅僅依據裝置來顯示更大或更小的圖片。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
srcset 屬性
定義可選擇的影像集，以及每個影像的寬度（畫素）。注意寬度的單位是 w。
sizes 屬性
定義了一組媒體條件，以及當媒體條件為真時影像將填充的槽的寬度。最後一個槽的寬度是預設值，沒有媒體條件。槽的寬度的單位可以是 px，em 或 vw。
解析度切換：相同的尺寸
<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

img {
  width: 320px;
}

瀏覽器將計算顯示器的解析度，然後選擇 srcset 提供的最適合的影像。如果顯示器具有標準/低解析度，一個顯示器畫素表示一個 CSS 畫素，將載入 320w 版本影像（1x 是預設值，不用寫出來）。如果顯示器有高解析度，兩個或更多的顯示器畫素表示一個 CSS 畫素，將載入 640w 版本的影像。

透過 tinypng.com 最佳化圖片大小

解析度切換 | MDN

美術設計

當網站在狹窄的螢幕上觀看時，顯示一幅圖片的包含了重要細節的裁剪版本，第二個被裁剪的圖片會在像平板電腦這樣的中等寬度的螢幕裝置上顯示，這就是眾所周知的美術設計問題。

<picture>
  <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="預設Logo">
</picture>

在 <picture> 標籤中包含零個或多個 <source> 標籤，透過 <source> 標籤中的 media 屬性設定匹配條件（允許哪個版本的圖片顯示），透過 srcset 屬性定義圖片的路徑。另外，在 <picture> 標籤的最後還需要定義一個 <img> 標籤，表示預設選項。

美術設計 | MDN

影像對映

影像對映允許您在一個圖片中定義超連結，實現思想就是在影像中劃分一些區域，並在這些區域中定義超連結。

<img src="logo.png" usemap="#objects" alt="C語言中文網 Logo">

<!-- map 標籤的 name 屬性對應的是 img 標籤的 usemap 屬性 -->
<map name="objects">
  <area shape="rect" coords="x1,y1,x2,y2" href="http://xxx" alt="description">
  <area shape="circle" coords="x,y,radius" href="http://xxx" alt="description">
  <area shape="poly" coords="x1,y1,x2,y2,...,xn,yn" href="http://xxx" alt="description">
</map>

影片和音訊

影片使用 <video> 標籤，音訊使用 <audio> 標籤。兩者的使用方法是類似的。

<video src="rabbit320.webm" controls>
  <p>你的瀏覽器不支援 HTML5 影片。可點選<a href="rabbit320.mp4">此連結</a>觀看</p>
</video>
controls 屬性
為音影片新增瀏覽器提供的控制元件介面
<video> 標籤內的內容
這個叫做後備內容。當瀏覽器不支援 <video> 標籤的時候，就會顯示這段內容。

使用多個播放源以提高相容性

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的瀏覽器不支援 HTML5 影片。可點選<a href="rabbit320.mp4">此連結</a>觀看</p>
</video>

瀏覽器將會檢查 <source> 標籤，並且播放第一個與其自身 codec 相匹配的媒體。你的影片應當包括 WebM 和 MP4 兩種格式，這兩種在目前已經足夠支援大多數平臺和瀏覽器。如果不指定 type 屬性，瀏覽器會嘗試載入每一個檔案，直到找到一個能正確播放的格式，這樣會消耗掉大量的時間和資源。

其他 <video> 屬性

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的瀏覽器不支援 HTML5 影片。可點選<a href="rabbit320.mp4">此連結</a>觀看</p>
</video>

其他 <video> 屬性 | MDN

顯示音軌文字 | MDN

其他嵌入技術

透過 <iframe> 元素，可以將一個 web 頁嵌入到另一個網頁。很多影片網站，如 YouTube，Bilibili，以及 Google Map 都支援嵌入。通常在分享介面可以找到需要的程式碼。可透過 width 和 height 屬性設定 iframe 的大小。

透過 <object> 元素嵌入 PDF 檔案：

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

其他嵌入技術 | MDN

HTML 表格

<table border="1" style="border-collapse:collapse;">
  <caption>表格標題</caption>

  <!-- table row -->
  <tr>

    <!-- table header -->
    <th>名稱</th>
    <th>官網</th>
    <th>性質</th>
  </tr>
  <tr>

    <!-- table data -->
    <td>百度</td>
    <td>https://www.baidu.com/</td>
    <td>搜尋</td>
  </tr>
  <tr>

    <!-- 行合併 -->
    <td rowspan="2">谷歌</td>
    <td>https://www.google.com/</td>
    <td rowspan="2">搜尋</td>
  </tr>
  <tr>
    <td>https://www.google.com.hk/</td>
  </tr>
  <tr>

    <!-- 列合併 -->
    <td colspan="3">谷歌是全世界最好的搜尋引擎</td>
  </tr>
</table>

<th> 用法和 <td> 是一樣的，除了它表示為標題，不是普通的單元格。

定義列的樣式

在 <table> 標籤下 （thead 標籤前），使用 <colgroup> 和 <col> 標籤來定義列的樣式：

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

一個 <col> 對應一列，這個表格有兩列，因此這裡有兩個 <col>。

將樣式應用到多列

使用 span 屬性，指定要將樣式應用到表格多少列。

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

新增表格標題

在 <table> 標籤下插入 <caption> 標籤：

<table>
  <caption>Dinosaurs in the Jurassic period</caption>

  ...
</table>

表格結構化

使用 <thead>，<tbody>，和 <tfoot> 標籤包圍表頭，內容和表尾。

表格結構化有利於更好地將 CSS 應用到表格上。

<tbody> 是隱式包含在表格中的。

scope 屬性

為了幫助螢幕閱讀器更好地理解標題單元格，應該為 <th> 元素增加 scope 屬性，說明該標題是列標題還是行標題。螢幕閱讀裝置會識別這種結構化的標記，並一次讀出整列或整行。

你可以這樣定義列標題：

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

以及這樣的行標題：

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

scope 屬性還有兩個可選的值：colgroup 和 rowgroup。這些用於多個列或行的標題。

id 和 header 屬性

scope 屬性也可以用 id 和 header 屬性替換：

  1. 為每個 <th> 元素新增一個 id 屬性
  2. 為每個 <td> 元素新增一個 header 屬性，屬性值包含它從屬的所有標題的 id，用空格分隔。
<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>

這會給表格中每個單元格的位置一個明確的定義。像一個電子表格一樣，透過 headers 屬性來定義單元格屬於哪些行或列。為了讓它工作良好，表格同時需要列和行標題。

表單

<!-- 表單中其他標籤 -->
<form action="URL" method="GET|POST">
</form>
  • action 屬性指明將表單提交到哪個頁面（跳轉到哪個頁面）
  • method 屬性表示使用哪個方式提交資料
    • GET：使用者點選提交按鈕後，提交的資訊會被顯示在位址列中。如果提交的資訊中包含密碼，則不建議這種方式。
    • POST：資料會傳到後臺，不顯示在位址列中。

C 語言中文網：表單控制元件

相關文章