HTML 速查表

上一頁
下一頁

這份 HTML 速查表是 HTML 教程 的摘要。在這裡，您可以找到有關 HTML 概念的快速資訊，從基本結構到高階元素。

基本的 HTML 結構

以下是 HTML 文件的基本結構

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage's Page Title</title>
  </head>
  <body>
    <!-- Webpage's content goes here -->
  </body>
</html>

標題標籤

以下是六個 HTML 標題標籤，其中<h1>是網頁的主標題，<h6>是最小的標題，字型最小

標題 1 (<h1> 標籤)

<h1>Heading 1</h1>

標題 2 (<h2> 標籤)

<h2>Heading 2</h2>

標題 3 (<h3> 標籤)

<h3>Heading 3</h3>

標題 4 (<h4> 標籤)

<h4>Heading 4</h4>

標題 5 (<h5> 標籤)

<h5>Heading 5</h5>

標題 6 (<h6> 標籤)

<h6>Heading 6</h6>

段落

<p>標籤用於將內容放在 段落 中。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis mattis nisi, at facilisis nunc tempus sed. Duis sagittis odio ac neque tempor iaculis. Fusce et arcu consequat, pretium lectus ut, venenatis leo. Phasellus libero enim, semper ut luctus a, pretium in turpis. Donec eget ultricies arcu, et suscipit nisi. Ut et neque posuere, lacinia dui vitae, varius tellus. Mauris placerat, leo sed pretium viverra, massa ante ultricies orci, quis vehicula ex elit et ligula. Nullam ac lectus semper, aliquet neque sit amet, cursus urna. Aenean faucibus dignissim orci sed malesuada. Maecenas arcu erat, aliquam eget lacus non, malesuada consectetur tellus. Fusce non eros et dui ultrices consequat. Vivamus rutrum lobortis purus, ut cursus massa malesuada vel.</p>
<p>Morbi sollicitudin luctus velit, eget maximus ex accumsan at. Sed interdum felis a erat tempor, et hendrerit sapien lacinia. Maecenas imperdiet lacinia ante ut congue. Vestibulum vehicula vulputate dolor non hendrerit.</p>

文字格式化標籤

1. <b>

此標籤使包含的文字顯示為粗體。

<p><b>This is bold text</b></p>

2. <i>

此標籤用於使包含的文字顯示為斜體。

<p><i>This is italic text</i></p>

3. <u>

<u>標籤為文字新增下劃線。

<p><u>This is underlined text</u></p>

4. <strong>

<strong>標籤用於語義上重要的文字。

<p><strong>This is important bold text</strong></p>

5. <em>

<em>標籤用於強調文字。

<p><em>This is emphasized italic text</em></p>

5. <sub>

<sub>標籤用於下標文字。

<p>H<sub>2</sub>O</p>

6. <sup>

<sup>標籤用於上標文字。

<p>x<sup>2</sup> (x squared)</p>

7. <strike>

<strike>標籤顯示帶有刪除線的文字。

<p><strike>This is strikethrough text</strike></p>

8. <mark>

<mark>標籤用於高亮顯示或標記文字。

<p><mark>This text is highlighted</mark></p>

列表標籤

HTML 提供了兩種列表標籤：<ul> 和 <ol>。<ul>標籤顯示無序列表（顯示專案符號），<ol>標籤顯示有序列表（顯示數字）。

無序列表

<ul>標籤定義一個 無序列表，它用專案符號顯示列表項。

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ul>

有序列表

<ol>標籤定義一個 有序列表，它用數字顯示列表項。

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
</ol>

連結 (錨點) 標籤

要使用文字、圖片或任何其他 HTML 元素連結不同的內部或外部網頁，請使用<a>標籤。<a>標籤定義錨點連結。

<a>標籤的屬性：

  • href：用於定義目標頁面的連結。
  • title：用於放置滑鼠懸停在連結上時要顯示的文字。
  • target：用於定義要在何處開啟連結（在同一標籤頁或在新標籤頁中）。
<p>Open TutorialsPoint by clicking on the following link:</p>
<p><a href="https://tutorialspoint.tw/" target="_blank" title="Open TutorialsPoint">Open TutorialsPoint</a></p>

容器標籤

HTML 容器標籤用作父元素以包含其他 HTML 標籤。這些標籤用於在網頁上定義多個部分。

有很多容器標籤，例如<div>、<span>、<p>等。

<div> 標籤

<div> 標籤定義網頁上的分割槽（或塊）。

<div>
  <p>Paragraph inside div</p>
  <ul>
    <li>Item 1</li>
    <li>Item 1</li>
 </ul>
</div>

<span> 標籤

<span> 標籤可以在其中包含各種元素。當您想將特定樣式應用於文字的一部分時，可以使用它。

<p>Hello, World: This is <span style="background-color:#f40;color:#fff;padding:8px;">HTML Cheatsheet</span>.</p>

<p> 標籤

<p> 標籤也可以用作容器標籤，您可以在其中使用其他標籤，例如<span>、<a>、<button>等。

<p>Take a variable <span class="tp-codespan">x</span> and assign <strong>100</strong> in it.</p>

<pre> 標籤

<pre> 標籤用於保留格式，也可以用於在網頁上顯示程式設計程式碼。

<pre>
Hello World
    Hello World
        Hello World
            Hello World
        Hello World
    Hello World
Hello World    
</pre>

<code> 標籤

<code> 標籤用於顯示原始碼。

<code>#include <stdio.h></code>

圖片

<img> 標籤在網頁上插入圖片。以下是<img>標籤的屬性：

  • src：定義圖片的源（路徑）。
  • alt：定義當找不到圖片時要在網頁上顯示的替代文字。
  • title：定義滑鼠懸停在圖片上時顯示的標題。

閱讀更多： HTML 圖片

<img src="/html/images/html-mini-logo.jpg" alt="logo" title="logo"/>

表格

HTML <table> 標籤用於以表格格式顯示資料。以下標籤與<table>標籤一起使用：

  • <thead>：定義表頭。
  • <tbody>：定義表體。
  • <tr>：定義表格中的一行。
  • <th>：定義<tr>標籤內的表格單元格（稱為表頭）。
  • <td>：定義<tr>標籤內的表格單元格（稱為表格資料）。
  • <caption>：定義表格的標題。

表格結構

表格結構如下：

<table>
    <caption>Table Structure</caption>
    <thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  </tbody>
</table>

表格標籤屬性

以下是可與<table>標籤一起使用的常用屬性。

注意：這些屬性在 HTML5 中已被棄用。

屬性 描述 示例 狀態
border 定義表格邊框的粗細。 <table border="1"> 已棄用
cellpadding 定義表格單元格內的填充。 <table cellpadding="10"> 已棄用
cellspacing 定義表格單元格之間的間距。 <table cellspacing="5"> 已棄用
width 定義表格的寬度。 <table width="100%"> 已棄用
height 定義表格的高度。 <table height="300"> 已棄用
align 定義表格的對齊方式。 <table align="center"> 已棄用
bgcolor 定義表格的背景顏色。 <table bgcolor="#f0f0f0"> 已棄用
summary 提供表格用途的摘要。 <table summary="Sales data for Q1"> 已棄用
bordercolor 定義表格邊框的顏色。 <table border="1" bordercolor="blue"> 已棄用

引用和引文元素

以下是引用和引文標籤：

1. <blockquote> 和 <cite> 標籤

<blockquote>定義引用文字，<cite>定義作品的標題。

<blockquote>
Education is the most powerful weapon which you can use to change the world.
</blockquote>

<p><cite>Programming in ANSI C</cite> was written by E. Balagurusamy.</p>

2. <q> 標籤

<q> 標籤用於定義簡短的引用。

<p>Here is: <q>Live as if you were to die tomorrow</q></p>

3.<abbr> 標籤

<abbr> 標籤用於定義縮寫或首字母縮寫。

<p>The <abbr title="HyperText Markup Language">HTML</abbr> was founded in 1993.</p>

4. <address> 標籤

<address> 標籤用於定義聯絡資訊。

<address>
Written by SUDHIR SHARMA.<br>
Visit us at:<br>
tutorialspoint.com<br>
Madhapur, Hyderabad<br>
India
</address>

5. <bdo> 標籤

<bdo> 標籤用於覆蓋當前文字方向。

<bdo dir="rtl">HTML stands for Hyper Text Markup Language</bdo>

註釋

使用<!--和-->在 HTML 文件中添加註釋。

<!--This is comment-->

實體

1. 字元實體

HTML 字元實體可以與&（&號）一起使用。

<p>This is RIGHT ARROW: →</p>
<p>This is LEFT ARROW: ←</p>
<p>This is BLACK SUN WITH RAYS: ☀</p>
<p>This WHITE UP POINTING INDEX: ☝</p>

2. 不換行空格

使用&nbsp;實體顯示不換行空格。

<p>ABC        XYZ</p>

3. 小於號和大於號

要顯示小於號和大於號字元，可以使用&lt;和&gt;。

<p>The <BODY> tag defines body of the webpage.</p>

HTML 快速參考

查詢不同 HTML 標籤、元素、屬性等的快速參考。

   

基本標籤

以下是HTML文件的基本必備標籤

標籤 描述 示例
<html>..</html> 此標籤用作HTML文件的根元素，將所有其他元素封裝在其中。
<head>..</head> 'head'標籤包含有關文件的元資訊，這些資訊不會直接顯示在頁面上。
<body>..</body> 設定文件的可見部分。
<title>..</title> 將文件名稱放在標題欄中，在收藏頁面時，這就是被收藏的內容，並在瀏覽器的標籤頁上顯示。

主體屬性

眾所周知，body部分是任何網站的主要部分。一些屬性可以應用於<body>標籤。強烈建議不要將這些屬性用於開發實際網站，而只用於電子郵件簡報。

屬性 描述 示例
<body bgcolor=""> HTML bgcolor 設定文件的背景顏色，使用顏色名稱或十六進位制值。
<body text=""> HTML text 屬性用於定義正文內文字的顏色，預設值為黑色。
<body link=""> 用於設定正文內超連結的顏色，使用顏色名稱或十六進位制值。
<body vlink=""> 用於指定已訪問超連結的顏色，使用顏色名稱或十六進位制值。
<body alink=""> 定義活動連結的顏色（滑鼠點選時）。

文字標籤

以下是使文字美觀易讀的不同文字標籤

標籤和屬性 描述 示例
<pre>..</pre> HTML pre 標籤用於建立預格式化的文字。
<h1>..</h1> 到 <h6>..</h6> 建立不同大小的標題——H1=最大，H6=最小
<b>..</b> b 標籤用於建立粗體文字（應使用<strong>代替）。
<i>..</i> 建立斜體文字（應使用<em>代替）。
<tt>..</tt> 用於建立打字機風格的文字。
<code>..</code> 用於定義原始碼，通常是等寬字型。
<cite>..</cite> 建立引用，通常以斜體處理。
<address>..</address> 建立地址部分，通常以斜體處理。
<em>..</em> 強調一個詞（通常以斜體處理）。
<strong>..</strong> 強調一個詞（通常以粗體處理）
<font size="">..</font> 設定字型大小 - 1 到 7（建議使用 CSS 代替）。
<font color="">..</font> 用於定義字型顏色（應使用 CSS 代替）。
<font face="">..</font> 定義使用的字型（應使用 CSS 代替）。

HTML連結，也稱為超連結，是全球資訊網的一項基本功能。它們允許使用者在不同的網頁、網站或同一文件的不同部分之間導航。

屬性 描述 示例
<a href="URL">可點選文字</a> 建立一個指向統一資源定位符的超連結。
<a href="mailto:email_address">可點選文字</a> 建立一個指向指定電子郵件地址的超連結。
<a name="NAME"> 在文件中建立一個目標位置
<a href="#NAME">可點選文字</a> 建立一個指向該目標位置的連結。

文字和佈局

HTML中的文字和佈局涉及使用各種標籤來定義文字的結構、外觀和語義含義。以下是一些最常用的HTML文字格式化標籤。

標籤 描述 示例
<p>..</p> P標籤用於在文件中定義一個新段落
<br> br標籤用於在兩行之間插入換行符。
<blockquote>..</blockquote> 將內容放在引號中 - 從兩側縮排文字。
<div>..</div> div標籤用於使用CSS格式化塊內容。
<span>..</span> span標籤用於使用CSS格式化內聯內容和塊內容。

列表

在HTML中，列表用於對一組相關專案進行分組。主要有三種類型的列表：**有序列表**、**無序列表**和**描述列表**。每種列表都有不同的用途，並使用特定的HTML標籤進行標記。

標籤 描述 示例
<ul>..</ul> HTML中的ul標籤用於建立無序列表，即沒有編號的列表。
<ol start="">..</ol> ol標籤用於建立有序列表（start=xx，其中xx是一個計數數字）。
<li>..</li> li標籤定義無序列表和有序列表中的每個專案。
<dl>..</dl> dl標籤用於建立一個定義列表，一個標題及其定義。
<dt> dt標籤定義定義列表的標題元素。
<dd> dd標籤定義定義列表的定義元素。

水平線和影像屬性

以下是自定義水平線（例如大小、寬度）和影像（包括源、對齊方式、邊框、尺寸等）的屬性。

屬性 描述 示例
<hr> Hr標籤用於在文件中插入水平線。
<hr size=""> 設定水平線的大小（高度）。
<hr width=""> 定義規則的寬度（百分比或絕對畫素長度）。
<hr noshade> 建立沒有陰影的水平線（此屬性在HTML5中已棄用）。
<img src="URL" /> 新增影像，它是一個位於URL的單獨檔案。
<img src="URL" align=""> 將影像左/右/中/下/上/中對齊（使用CSS）。
<img src="URL" border=""> 設定圍繞影像的邊框大小（使用CSS）。
<img src="URL" height=""> 設定影像的高度，以畫素或螢幕寬度的百分比表示。
<img src="URL" width=""> 定義影像的寬度，以畫素或螢幕寬度的百分比表示。
<img src="URL" alt=""> 為無法處理影像的瀏覽器設定替代文字（ADA 規定）。

表單

HTML表單是Web開發中最重要的元件之一。下表包含與在HTML中設計表單相關的常用標籤和屬性

標籤和屬性 描述 示例
<form>..</form> HTML中的form標籤用於定義使用者可提交的應用程式表單。
<select multiple name="" size=""> </select> 建立一個可滾動的選擇選單。Size設定在使用者需要滾動之前可見的選單項數量。
<select name=""> </select> 建立一個下拉選單，預設大小為0。
<option> Option標籤用於定義下拉列表中的每個專案。
<textarea name="" cols="x" rows="y"></textarea> 建立一個文字框區域。Columns設定寬度，rows設定高度。
<input type="checkbox" name="" value=""> 帶有checkbox的input type用於建立一個複選框，允許使用者從一組選項中選擇一個或多個選項。
<input type="checkbox" name="" value="" checked> 建立一個預先選中的複選框，用於某些值。
<input type="radio" name="" value=""> 帶有radio屬性的input type用於在HTML中建立單選按鈕。
<input type="radio" name="" value="" checked> 建立一個預先選中的單選按鈕。
<input type="text" name="" size=""> 定義一個單行文字區域。Size設定長度（以字元為單位）。
<input type="submit" value=""> 用於在表單末尾新增提交按鈕。Value設定提交按鈕中的文字。
<input type="image" name="" src="" border="" alt=""> 使用影像建立提交按鈕。它有助於將按鈕隱藏在影像中。
<input type="reset"> 重置按鈕用於表單中，清除所有使用者輸入並將表單欄位重置為其預設值。

表格

表格用於以結構化形式呈現資料。使用表格進行資料佈局，使用CSS進行頁面佈局。

標籤 描述 示例
<table>..</table> HTML中的表格用於以表格格式組織和顯示資料，由行和列組成。
<tr>..</tr> table標籤內的tr標籤用於定義表格中的每一行。
<td>..</td> tr標籤內的td標籤用於定義行中的每個單元格。
<th>..</th> 設定表格標題（一個帶有粗體居中文字的普通單元格）。

表格屬性

有時普通的表格不足以表示我們想要呈現的資料。因此，需要在表格元素上使用一些屬性，以便表格看起來更好。將這些屬性用於電子郵件簡報，並使用CSS裝飾表格以獲得更好的效果。

屬性 描述 示例
<table border=""> 設定表格單元格周圍邊框的寬度。
<table cellspacing=""> 定義表格單元格之間的間距。
<table cellpadding=""> 設定單元格邊框與其內容之間的間距。
<table width=""> 指定表格的寬度，以畫素或百分比表示。
<tr align=""> 設定行內單元格的對齊方式（左/中/右）。
<td align=""> 設定單元格的對齊方式（左/中/右）。
<tr valign=""> 定義行內單元格的垂直對齊方式（上/中/下）。
<td valign=""> 設定單元格的垂直對齊方式（上/中/下）。
<td rowspan=""> 定義單元格應跨越的行數（預設值=1）。
<td colspan=""> 設定單元格應跨越的列數。
<td nowrap> 防止單元格內的行被換行以適應。

HTML5輸入標籤屬性

這些屬性是在HTML5釋出後新新增的，input標籤起著重要的作用。並非所有瀏覽器都支援這些屬性。因此，最好在使用之前進行驗證。

屬性 描述 示例
<input type="email" name=""> input type email用於接受電子郵件地址格式的文字。
<input type="url" name=""> 帶有值url的input type用於專門接受URL。
<input type="number" name=""> input type number用於接受單行數字。
<input type="range" name=""> 為一系列數字定義單行文字框。
<input type="date/month/week/time" name=""> 生成一個單行文字框，其中顯示日期/月份/星期/時間的日曆。
<input type="search" name=""> 設定用於搜尋的單行文字框。
<input type="color" name=""> 定義用於選擇顏色的單行文字框。

列印頁面
上一頁
下一頁
廣告