標題

<h1>：最高級別的標題，通常用於網頁的主標題。

<h2>：次高級別的標題，用於分區標題或次要主題。

<h3> 到 <h6>：依次遞減的標題級別。

程式碼

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

效果

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

無序列表

程式碼

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

效果

  • 項目1
  • 項目2
  • 項目3

有序列表

程式碼

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

效果

  1. 項目1
  2. 項目2
  3. 項目3

編碼顯示，有下列五種樣式：

<ol type="...">顯示編號
1（預設值）1, 2, 3
AA, B, C
aa, b, c
II, II, III
ii, ii, iii

文字輸入欄

name：後端在處理表單數據可以透過 name 來獲取使用者輸入的值。

placeholder：輸入框的提示或說明，通常在使用者未輸入任何內容時顯示。

程式碼

<input type="text" name="username" placeholder="請輸入使用者名稱">

效果

密碼輸入欄

輸入的內容將會以星號或圓點顯示

程式碼

<input type="password" name="password" placeholder="請輸入密碼">

效果

單選按鈕

程式碼

<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>

效果

複選框

程式碼

<input id="violin" type="checkbox" name="interest" value="violin"> <label for="violin">Violin</label>
<input id="viola" type="checkbox" name="interest" value="viola"> <label for="viola">Viola</label>
<input id="cello" type="checkbox" name="interest" value="cello"> <label for="cello">Cello</label>

效果