HTML 快速指南

上一頁
下一頁

HTML - 概述

HTML 代表超文字標記語言 (HyperText Markup Language)，是編寫網頁最常用的語言。

  • 超文字指的是網頁（HTML文件）相互連結的方式。因此，網頁上的連結稱為超文字。

  • 顧名思義，HTML 是一種標記語言，這意味著你使用 HTML 來簡單地用標籤“標記”文字文件，告訴 Web 瀏覽器如何構建它以進行顯示。

最初，HTML 的開發目的是定義文件的結構，例如標題、段落、列表等等，以便於在研究人員之間共享科學資訊。

現在，HTML 被廣泛用於藉助 HTML 語言中提供的不同標籤來格式化網頁。

基本的 HTML 文件

最簡單的形式，下面是一個 HTML 文件的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
	
</html>

HTML 標籤

如前所述，HTML 是一種標記語言，它使用各種標籤來格式化內容。這些標籤用尖括號括起來<標籤名稱>。除少數標籤外，大多數標籤都有相應的閉合標籤。例如，<html>有其閉合標籤</html>，<body>標籤有其閉合標籤</body>標籤等。

上面的 HTML 文件示例使用了以下標籤：

序號 標籤和描述
1 <!DOCTYPE...>

此標籤定義文件型別和 HTML 版本。
2 <html>

此標籤包含完整的 HTML 文件，主要包括由 <head>...</head> 表示的文件頭部和由 <body>...</body> 標籤表示的文件主體。
3 <head>

此標籤表示文件的頭部，其中可以包含其他 HTML 標籤，例如 <title>、<link> 等。
4 <title>

<title> 標籤用於在 <head> 標籤內指定文件標題。
5 <body>

此標籤表示文件的主體，其中包含其他 HTML 標籤，例如 <h1>、<div>、<p> 等。
6 <h1>

此標籤表示標題。
7 <p>

此標籤表示一個段落。

要學習 HTML，你需要學習各種標籤並瞭解它們在格式化文字文件時的行為。學習 HTML 很簡單，使用者只需學習不同標籤的使用方法即可格式化文字或影像以製作精美的網頁。

全球資訊網聯盟 (W3C) 建議從 HTML 4 開始使用小寫標籤。

HTML 文件結構

典型的 HTML 文件將具有以下結構：

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

我們將在後續章節中學習所有頭部和主體標籤，但現在讓我們看看文件宣告標籤是什麼。

<!DOCTYPE> 宣告

<!DOCTYPE> 宣告標籤用於讓 Web 瀏覽器理解文件中使用的 HTML 版本。當前的 HTML 版本是 5，它使用以下宣告：

<!DOCTYPE html>

根據使用的 HTML 版本，HTML 文件中可以使用許多其他宣告型別。在討論 <!DOCTYPE...> 標籤以及其他 HTML 標籤時，我們將看到更多詳細資訊。

HTML - 基本標籤

標題標籤

任何文件都以標題開頭。您可以為標題使用不同的尺寸。HTML 還有六個級別的標題，它們使用元素<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。在顯示任何標題時，瀏覽器會在該標題之前和之後新增一行。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

這將產生以下結果：

段落標籤

<p>標籤提供了一種將文字組織成不同段落的方法。每一段文字都應該放在一個起始 <p> 標籤和一個結束 </p> 標籤之間，如下例所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

這將產生以下結果：

換行標籤

每當你使用<br />元素時，其後的任何內容都將從下一行開始。此標籤是空元素的一個示例，你不需要起始和結束標籤，因為它們之間沒有任何內容。

<br /> 標籤在字元br和正斜槓之間有一個空格。如果你省略此空格，舊版瀏覽器將難以渲染換行符，而如果你錯過了正斜槓字元而只使用<br>，則在 XHTML 中無效。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

這將產生以下結果：

居中內容

您可以使用<center>標籤將任何內容放在頁面或任何表格單元格的中心。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

這將產生以下結果：

水平線

水平線用於視覺上分割文件的各個部分。<hr>標籤從文件中的當前位置建立一條到右邊緣的線，並相應地換行。

例如，你可能希望在兩個段落之間新增一條線，如下面的示例所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

這將產生以下結果：

同樣，<hr />標籤是空元素的一個示例，你不需要起始和結束標籤，因為它們之間沒有任何內容。

<hr />元素在字元hr和正斜槓之間有一個空格。如果你省略此空格，舊版瀏覽器將難以渲染水平線，而如果你錯過了正斜槓字元而只使用<hr>，則在 XHTML 中無效。

保留格式

有時，你希望文字遵循其在 HTML 文件中的確切格式。在這些情況下，您可以使用預格式化標籤<pre>。

起始<pre>標籤和結束</pre>標籤之間的任何文字都將保留源文件的格式。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

這將產生以下結果：

嘗試在不將其放在<pre>...</pre>標籤內的相同程式碼

不換行空格

假設你想使用短語“12 Angry Men”。在這裡，你不會希望瀏覽器將“12, Angry”和“Men”拆分成兩行：

An example of this technique appears in the movie "12 Angry Men."

在不希望客戶端瀏覽器換行的情況下，應使用不換行空格實體&nbsp;代替普通空格。例如，在段落中編碼“12 Angry Men”時，應使用類似於以下程式碼的內容：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

這將產生以下結果：

HTML - 元素

HTML 元素由起始標籤定義。如果元素包含其他內容，則它以結束標籤結束，其中元素名稱前面帶有正斜槓，如下所示：

起始標籤 內容 結束標籤
<p> 這是段落內容。 </p>
<h1> 這是標題內容。 </h1>
<div> 這是分割槽內容。 </div>
<br />

所以這裡<p>....</p>是一個HTML元素，<h1>...</h1>是另一個HTML元素。有些HTML元素不需要閉合，例如<img.../>、<hr />和<br />元素。這些被稱為空元素。

HTML文件由這些元素組成的樹構成，它們指定了HTML文件的構建方式以及應將哪種內容放置在HTML文件的哪個部分。

HTML標籤與元素

HTML元素由一個起始標籤定義。如果元素包含其他內容，則以一個結束標籤結尾。

例如，<p>是段落的起始標籤，</p>是同一段落的結束標籤，但<p>這是一個段落</p>是一個段落元素。

巢狀HTML元素

完全允許將一個HTML元素放在另一個HTML元素內：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

這將顯示以下結果：

HTML - 屬性

我們已經看到了一些HTML標籤及其用法，例如標題標籤<h1>,<h2>，段落標籤<p>和其他標籤。到目前為止，我們以最簡單的形式使用它們，但是大多數HTML標籤也可以具有屬性，這些屬性是額外的資訊。

屬性用於定義HTML元素的特性，並放置在元素的起始標籤內。所有屬性都由兩部分組成：一個名稱和一個值。

  • 名稱是您要設定的屬性。例如，示例中的段落<p>元素包含一個名為align的屬性，您可以使用它來指示段落在頁面上的對齊方式。

  • 值是您希望將屬性的值設定為，並且始終放在引號內。下面的示例顯示了align屬性的三個可能值：left、center和right。

屬性名稱和屬性值不區分大小寫。但是，全球資訊網聯盟（W3C）在其HTML 4建議中建議使用小寫屬性/屬性值。

示例

線上演示 
<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

這將顯示以下結果：

核心屬性

可以在大多數HTML元素（儘管並非所有元素）上使用的四個核心屬性是：

  • Id
  • Title
  • Class
  • Style

Id屬性

HTML標籤的id屬性可用於唯一標識HTML頁面中的任何元素。您可能想要在元素上使用id屬性有兩個主要原因：

  • 如果元素帶有id屬性作為唯一識別符號，則可以識別該元素及其內容。

  • 如果網頁（或樣式表）中存在兩個同名的元素，則可以使用id屬性來區分具有相同名稱的元素。

我們將在單獨的教程中討論樣式表。現在，讓我們使用id屬性來區分下面顯示的兩個段落元素。

示例

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Title屬性

title屬性為元素提供建議的標題。title屬性的語法與id屬性的語法類似：

此屬性的行為將取決於攜帶它的元素，儘管它通常在游標移到元素上方或元素載入時顯示為工具提示。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

這將產生以下結果：

現在嘗試將游標移到“帶有標題的標題標籤示例”上，您將看到在程式碼中使用的任何標題都將作為游標的工具提示顯示。

Class屬性

class屬性用於將元素與樣式表關聯，並指定元素的類。學習級聯樣式表（CSS）時，您將瞭解class屬性的更多用途。所以現在您可以避免它。

屬性的值也可以是空格分隔的類名列表。例如：

class = "className1 className2 className3"

Style屬性

style屬性允許您在元素內指定級聯樣式表（CSS）規則。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

這將產生以下結果：

在這一點上，我們沒有學習CSS，所以讓我們繼續學習，而不用過多地關注CSS。在這裡，您需要了解什麼是HTML屬性以及如何在格式化內容時使用它們。

國際化屬性

有三個國際化屬性，可用於大多數（儘管並非所有）XHTML元素。

  • dir
  • lang
  • xml:lang

Dir屬性

dir屬性允許您指示瀏覽器文字的流動方向。dir屬性可以取兩個值中的一個，如下表所示：

值 含義
ltr 從左到右（預設值）
rtl 從右到左（對於從右到左閱讀的語言，如希伯來語或阿拉伯語）

示例

線上演示 
<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

這將產生以下結果：

當dir屬性用於<html>標籤內時，它決定了整個文件中文字的呈現方式。當用在其他標籤內時，它只控制該標籤內容的文字方向。

Lang屬性

lang屬性允許您指示文件中使用的主要語言，但此屬性僅為了向後相容HTML的早期版本而保留在HTML中。在新XHTML文件中，此屬性已被xml:lang屬性取代。

lang屬性的值是ISO-639標準的兩位語言程式碼。檢視HTML語言程式碼：ISO 639以獲取完整的語言程式碼列表。

示例

線上演示 
<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

這將產生以下結果：

Xml:lang屬性

xml:lang屬性是lang屬性的XHTML替代品。xml:lang屬性的值應如上一節所述為ISO-639國家/地區程式碼。

通用屬性

這是一個表，其中包含一些其他屬性，這些屬性可以很容易地與許多HTML標籤一起使用。

屬性 選項 功能
align right, left, center 水平對齊標籤
valign top, middle, bottom 垂直對齊HTML元素內的標籤。
bgcolor 數字、十六進位制、RGB值 在元素後面放置背景顏色
background URL 在元素後面放置背景影像
id 使用者定義 命名一個元素以用於級聯樣式表。
class 使用者定義 對元素進行分類以用於級聯樣式表。
width 數值 指定表格、影像或表格單元格的寬度。
height 數值 指定表格、影像或表格單元格的高度。
title 使用者定義 元素的“彈出”標題。

在我們繼續學習其他HTML標籤時，我們將看到相關的示例。有關HTML標籤和相關屬性的完整列表，請檢視對HTML標籤列表的引用。

HTML - 格式化

如果您使用文字處理器，您一定熟悉使文字加粗、斜體或下劃線的功能；這只是十種可用選項中的三種，用於指示文字在HTML和XHTML中的顯示方式。

粗體文字

出現在<b>...</b>元素中的任何內容都將以粗體顯示，如下所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

斜體文字

出現在<i>...</i>元素中的任何內容都將以斜體顯示，如下所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

下劃線文字

出現在<u>...</u>元素中的任何內容都將顯示下劃線，如下所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

刪除線文字

出現在<strike>...</strike>元素中的任何內容都將顯示刪除線，即文字上的細線，如下所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

等寬字型

<tt>...</tt>元素的內容以等寬字型編寫。大多數字體被稱為可變寬度字型，因為不同的字母具有不同的寬度（例如，字母“m”比字母“i”寬）。但是，在等寬字型中，每個字母的寬度相同。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

上標文字

<sup>...</sup>元素的內容以上標編寫；使用的字型大小與周圍的字元相同，但顯示在其他字元上方半個字元的高度。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

下標文字

<sub>...</sub>元素的內容以下標編寫；使用的字型大小與周圍的字元相同，但顯示在其他字元下方半個字元的高度。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

插入文字

出現在<ins>...</ins>元素中的任何內容都將顯示為插入文字。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

這將產生以下結果：

刪除文字

出現在<del>...</del>元素中的任何內容都將顯示為刪除文字。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

這將產生以下結果：

較大的文字

<big>...</big>元素的內容顯示的字型大小比周圍的其他文字大一號，如下所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

較小的文字

<small>...</small>元素的內容顯示的字型大小比周圍的其他文字小一號，如下所示：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

這將產生以下結果：

分組內容

<div>和<span>元素允許您將多個元素組合在一起以建立頁面的節或子節。

例如，您可能希望將頁面上的所有腳註放在<div>元素內，以指示<div>元素中的所有元素都與腳註相關。然後，您可以將樣式附加到此<div>元素，以便它們使用一組特殊的樣式規則顯示。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

這將產生以下結果：

另一方面，<span>元素只能用於對內聯元素進行分組。因此，如果您有一部分句子或段落需要組合在一起，您可以按如下方式使用<span>元素。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

這將產生以下結果：

這些標籤通常與CSS一起使用，允許您將樣式附加到頁面的某個部分。

HTML - 短語標籤

短語標籤已針對特定用途而設計，儘管它們的顯示方式與其他基本標籤（如<b>、<i>、<pre>和<tt>）類似，您在上一章中已經看到過。本章將引導您瞭解所有重要的短語標籤，讓我們開始逐一瞭解它們。

強調文字

出現在<em>...</em>元素中的任何內容都將顯示為強調文字。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Emphasized Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <em>emphasized</em> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

標記文字

出現在<mark>...</mark>元素中的任何內容都將顯示為用黃色墨水標記。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Marked Text Example</title>
   </head>
	
   <body>
      <p>The following word has been <mark>marked</mark> with yellow</p>
   </body>
	
</html>

這將產生以下結果：

強文字

出現在<strong>...</strong>元素中的任何內容都將顯示為重要文字。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Strong Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strong>strong</strong> typeface.</p>
   </body>
	
</html>

這將產生以下結果：

文字縮寫

您可以透過將文字放在起始<abbr>和結束</abbr>標籤內來縮寫文字。如果存在，title屬性必須包含此完整描述，且僅此而已。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

這將產生以下結果：

首字母縮寫詞元素

<acronym>元素允許您指示<acronym>和</acronym>標籤之間的文字是首字母縮寫詞。

目前，主要瀏覽器不會更改<acronym>元素內容的外觀。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

這將產生以下結果：

文字方向

<bdo>...</bdo>元素代表雙向覆蓋，它用於覆蓋當前文字方向。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

這將產生以下結果：

特殊術語

<dfn>...</dfn> 元素（或 HTML 定義元素）允許您指定您正在介紹一個特殊術語。它的用法類似於段落中間的斜體字。

通常，您會在第一次介紹關鍵詞時使用 <dfn> 元素。大多數最新的瀏覽器會將 <dfn> 元素的內容呈現為斜體字型。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

這將產生以下結果：

引用文字

當您想引用其他來源的段落時，應將其放在<blockquote>...</blockquote>標籤之間。

<blockquote> 元素內的文字通常會從周圍文字的左右邊緣縮排，有時還會使用斜體字型。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

這將產生以下結果：

短引用

當您想在一個句子中新增雙引號時，可以使用<q>...</q>元素。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

這將產生以下結果：

文字引用

如果您正在引用文字，您可以透過將其放在一個開始的<cite>標籤和結束的</cite>標籤之間來指示來源。

正如您在印刷出版物中所期望的那樣，<cite> 元素的內容預設情況下以斜體文字呈現。

示例

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

這將產生以下結果：

計算機程式碼

任何要在網頁上顯示的程式設計程式碼都應放在<code>...</code>標籤內。通常，<code>元素的內容以等寬字型呈現，就像大多數程式設計書籍中的程式碼一樣。

示例

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

這將產生以下結果：

鍵盤文字

當您談論計算機時，如果您想告訴讀者輸入一些文字，您可以使用<kbd>...</kbd>元素來指示應該輸入的內容，例如本例所示。

示例

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

這將產生以下結果：

程式設計變數

此元素通常與<pre>和<code>元素一起使用，以指示該元素的內容是一個變數。

示例

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

這將產生以下結果：

程式輸出

<samp>...</samp>元素表示程式、指令碼等的示例輸出。同樣，它主要用於記錄程式設計或編碼概念。

示例

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

這將產生以下結果：

地址文字

<address>...</address>元素用於包含任何地址。

示例

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

這將產生以下結果：

HTML - 元標籤 (meta)

HTML 允許您以多種方式指定元資料——關於文件的其他重要資訊。META 元素可用於包含描述 HTML 文件屬性的名稱/值對，例如作者、過期日期、關鍵字列表、文件作者等。

<meta>標籤用於提供此類附加資訊。此標籤是一個空元素，因此沒有結束標籤，但它在其屬性中攜帶資訊。

您可以根據要在文件中保留的資訊在文件中包含一個或多個 meta 標籤，但總的來說，meta 標籤不會影響文件的物理外觀，因此從外觀的角度來看，包含它們與否無關緊要。

向文件中新增 Meta 標籤

您可以透過將 <meta> 標籤放在由<head>和</head>標籤表示的文件標題內來向網頁新增元資料。除了核心屬性外，meta 標籤還可以具有以下屬性：

序號 屬性和描述
1

name

屬性的名稱。可以是任何內容。示例包括關鍵字、描述、作者、修改日期、生成器等。
2

content

指定屬性的值。
3

scheme

指定一個方案來解釋屬性的值（如 content 屬性中宣告的那樣）。
4

http-equiv

用於 http 響應訊息頭。例如，http-equiv 可用於重新整理頁面或設定 Cookie。值包括 content-type、expires、refresh 和 set-cookie。

指定關鍵字

您可以使用 <meta> 標籤指定與文件相關的重要的關鍵字，搜尋引擎以後會在索引您的網頁以進行搜尋時使用這些關鍵字。

示例

以下是一個示例，我們在此新增 HTML、Meta 標籤、元資料作為關於文件的重要關鍵字。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

這將產生以下結果：

文件描述

您可以使用 <meta> 標籤簡要描述文件。各種搜尋引擎在索引您的網頁以進行搜尋時也可以使用它。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

文件修訂日期

您可以使用 <meta> 標籤提供有關上次更新文件的時間的資訊。各種 web 瀏覽器在重新整理您的網頁時可以使用此資訊。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

文件重新整理

<meta> 標籤可用於指定網頁自動重新整理後的持續時間。

示例

如果希望您的頁面每 5 秒重新整理一次，請使用以下語法。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

頁面重定向

您可以使用 <meta> 標籤將頁面重定向到任何其他網頁。如果要經過一定時間後重定向頁面，您也可以指定持續時間。

示例

以下是在 5 秒後將當前頁面重定向到另一個頁面的示例。如果要立即重定向頁面，請不要指定content屬性。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = https://tutorialspoint.tw" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

設定 Cookie

Cookie 是儲存在您計算機上的小型文字檔案中的資料，它在 web 瀏覽器和 web 伺服器之間交換，以便根據您的 web 應用程式需求跟蹤各種資訊。

您可以使用 <meta> 標籤在客戶端儲存 Cookie，web 伺服器以後可以使用此資訊來跟蹤網站訪問者。

示例

以下是在 5 秒後將當前頁面重定向到另一個頁面的示例。如果要立即重定向頁面，請不要指定content屬性。

線上演示 
<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

如果您不包含過期日期和時間，則 Cookie 被視為會話 Cookie，使用者退出瀏覽器時將被刪除。

注意 - 您可以檢視 PHP 和 Cookie 教程以瞭解有關 Cookie 的完整詳細資訊。

設定作者姓名

您可以使用 meta 標籤在網頁中設定作者姓名。請參見下面的示例：

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

指定字元集

您可以使用 <meta> 標籤指定網頁中使用的字元集。

示例

預設情況下，Web 伺服器和 Web 瀏覽器使用 ISO-8859-1 (Latin1) 編碼來處理網頁。以下是如何設定 UTF-8 編碼的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

要使用繁體中文字元提供靜態頁面，網頁必須包含一個 <meta> 標籤來設定 Big5 編碼：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

HTML - 註釋

註釋是任何 web 瀏覽器都會忽略的一段程式碼。最好在 HTML 程式碼中添加註釋，尤其是在複雜的文件中，以指示文件的部分以及任何其他對檢視程式碼的任何人有用的說明。註釋可以幫助您和其他人理解您的程式碼，並提高程式碼的可讀性。

HTML 註釋位於<!-- ... -->標籤之間。因此，在 <!-- ... --> 標籤中放置的任何內容都將被視為註釋，並將被瀏覽器完全忽略。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

這將產生以下結果，而不會顯示作為註釋一部分給出的內容：

有效與無效註釋

註釋不能巢狀，這意味著不能將註釋放在另一個註釋內。其次，雙破折號序列“--”不能出現在註釋內，除非它是作為結束 --> 標籤的一部分。您還必須確保註釋字串的開頭沒有空格。

示例

此處，給定的註釋是一個有效註釋，將被瀏覽器清除。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

這將產生以下結果：

但是，以下行不是有效的註釋，瀏覽器將顯示它。這是因為左角括號和感嘆號之間有一個空格。

線上演示 
<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

這將產生以下結果：

多行註釋

到目前為止，我們已經看到了單行註釋，但是 HTML 也支援多行註釋。

您可以透過在第一行之前和最後一行結尾處放置特殊的開始標籤 <!-- 和結束標籤 --> 來註釋多行，如下面的示例所示。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

這將產生以下結果：

條件註釋

條件註釋僅在 Windows 上的 Internet Explorer (IE) 中有效，但其他瀏覽器會忽略它們。它們從 Explorer 5 開始受支援，您可以使用它們向不同版本的 IE 提供條件指令。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

您會遇到需要根據不同版本的 Internet Explorer 應用不同樣式表的情況，在這種情況下，條件註釋將很有用。

使用註釋標籤

有一些瀏覽器支援 <comment> 標籤來註釋 HTML 程式碼的一部分。

注意 - <comment> 標籤在 HTML5 中已棄用。請不要使用此元素。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

如果您使用的是 IE，則會產生以下結果：

但如果您不使用 IE，則會產生以下結果：

註釋指令碼程式碼

雖然您將在單獨的教程中學習使用 HTML 的 JavaScript，但在此您必須注意，如果您在 HTML 程式碼中使用 Java Script 或 VB Script，則建議將該指令碼程式碼放在正確的 HTML 註釋中，以便舊瀏覽器可以正常工作。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

這將產生以下結果：

註釋樣式表

雖然您將在單獨的教程中學習使用 HTML 的樣式表，但在此您必須注意，如果您在 HTML 程式碼中使用層疊樣式表 (CSS)，則建議將該樣式表程式碼放在正確的 HTML 註釋中，以便舊瀏覽器可以正常工作。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

這將產生以下結果：

HTML - 圖片

影像對於美化以及以簡單的方式在網頁上描述許多複雜的概念非常重要。本教程將引導您完成在網頁中使用影像的簡單步驟。

插入影像

您可以使用<img>標籤在網頁中插入任何影像。以下是使用此標籤的簡單語法。

<img src = "Image URL" ... attributes-list/>

<img> 標籤是一個空標籤，這意味著它只能包含屬性列表，並且沒有結束標籤。

示例

要嘗試以下示例，讓我們將 HTML 檔案 test.htm 和影像檔案 test.png 保留在同一目錄中：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

這將產生以下結果：

您可以根據自己的喜好使用 PNG、JPEG 或 GIF 影像檔案，但請確保在src屬性中指定正確的影像檔名。影像名稱始終區分大小寫。

alt屬性是必填屬性，它指定影像的替代文字，如果影像無法顯示。

設定影像位置

通常我們將所有影像儲存在單獨的目錄中。因此，讓我們將 HTML 檔案 test.htm 儲存在我們的主目錄中，並在主目錄中建立一個子目錄images，我們將在此處儲存我們的影像 test.png。

示例

假設我們的影像位置是“image/test.png”，請嘗試以下示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

這將產生以下結果：

設定影像寬度/高度

您可以使用width和height屬性根據需要設定影像寬度和高度。您可以根據畫素或實際大小的百分比來指定影像的寬度和高度。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

這將產生以下結果：

設定影像邊框

預設情況下，影像周圍會有一個邊框，您可以使用 border 屬性以畫素為單位指定邊框粗細。厚度為 0 表示圖片周圍沒有邊框。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

這將產生以下結果：

設定影像對齊

預設情況下，影像將對齊在頁面的左側，但是您可以使用align屬性將其設定為居中或右側。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

這將產生以下結果：

免費網路圖形

有關免費網路圖形（包括圖案），您可以檢視 免費網路圖形

HTML - 表格

HTML 表格允許 web 作者將資料（如文字、影像、連結、其他表格等）排列到單元格的行和列中。

HTML 表格是使用<table>標籤建立的，其中<tr>標籤用於建立表格行，<td>標籤用於建立資料單元格。<td>下的元素是常規的，預設情況下左對齊。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

這將產生以下結果：

此處，border 是 <table> 標籤的一個屬性，用於在所有單元格周圍新增邊框。如果不需要邊框，可以使用 border = "0"。

表格標題

表格標題可以使用<th> 標籤定義。此標籤將替換 <td> 標籤，後者用於表示實際的資料單元格。通常，您會將頂行設定為表格標題，如下所示，或者您可以在任何行中使用 <th> 元素。在 <th> 標籤中定義的標題預設情況下居中且為粗體。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Header</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
   
</html>

這將產生以下結果：

單元格填充和單元格間距屬性

有兩個屬性，cellpadding 和 cellspacing，用於調整表格單元格中的空白。cellspacing 屬性定義表格單元格之間的間距，而 cellpadding 表示單元格邊框與其內容之間的距離。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
	
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>
   </body>
	
</html>

這將產生以下結果：

Colspan 和 Rowspan 屬性

如果要將兩列或多列合併為一列，可以使用colspan 屬性。類似地，如果要合併兩行或多行，可以使用rowspan。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

這將產生以下結果：

表格背景

您可以透過以下兩種方式之一設定表格背景：

  • bgcolor 屬性 - 您可以為整個表格或單個單元格設定背景顏色。

  • background 屬性 - 您可以為整個表格或單個單元格設定背景影像。

您還可以使用bordercolor 屬性設定邊框顏色。

注意 - bgcolor、background 和 bordercolor 屬性在 HTML5 中已被棄用。請勿使用這些屬性。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

這將產生以下結果：

這是一個使用background 屬性的示例。這裡我們將使用 /images 目錄中提供的影像。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

這將產生以下結果。此處背景影像未應用於表格的標題。

表格高度和寬度

您可以使用width 和height 屬性設定表格的寬度和高度。您可以以畫素為單位或以可用螢幕區域的百分比來指定表格的寬度或高度。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

這將產生以下結果：

表格標題

caption 標籤將作為表格的標題或說明，顯示在表格頂部。此標籤在較新版本的 HTML/XHTML 中已被棄用。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

這將產生以下結果：

表格頭部、主體和腳註

表格可以分為三個部分：頭部、主體和腳註。頭部和腳註類似於文字處理文件中的頁首和頁尾，每個頁面都相同，而主體是表格的主要內容容器。

用於分隔表格頭部、主體和腳註的三個元素是：

  • <thead> - 建立單獨的表格頭部。

  • <tbody> - 指示表格的主體。

  • <tfoot> - 建立單獨的表格腳註。

一個表格可以包含多個 <tbody> 元素來指示不同的頁面或資料組。但值得注意的是，<thead> 和 <tfoot> 標籤應該出現在 <tbody> 之前。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

這將產生以下結果：

巢狀表格

您可以在一個表格內使用另一個表格。不僅是表格，您幾乎可以在表格資料標籤 <td> 內使用所有標籤。

示例

以下是使用另一個表格和在表格單元格內使用其他標籤的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

這將產生以下結果：

HTML - 列表

HTML 為網頁作者提供了三種指定資訊列表的方式。所有列表都必須包含一個或多個列表元素。列表可能包含：

  • <ul> - 無序列表。這將使用普通專案符號列出專案。

  • <ol> - 有序列表。這將使用不同的數字方案來列出您的專案。

  • <dl> - 定義列表。這將以與字典中相同的順序排列您的專案。

HTML 無序列表

無序列表是相關專案的一個集合，這些專案沒有特殊的順序或序列。此列表是使用 HTML <ul> 標籤建立的。列表中的每個專案都用專案符號標記。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

這將產生以下結果：

type 屬性

您可以對 <ul> 標籤使用type 屬性來指定您喜歡的專案符號型別。預設情況下，它是一個實心圓點。以下是可能的選項：

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

示例

以下是一個使用 <ul type = "square"> 的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

這將產生以下結果：

示例

以下是一個使用 <ul type = "disc"> 的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

這將產生以下結果：

示例

以下是一個使用 <ul type = "circle"> 的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

這將產生以下結果：

HTML 有序列表

如果需要將專案放在編號列表而不是專案符號列表中，則將使用 HTML 有序列表。此列表是使用<ol> 標籤建立的。編號從一開始，並且每個連續的有序列表元素（用 <li> 標記）遞增 1。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

這將產生以下結果：

type 屬性

您可以對 <ol> 標籤使用type 屬性來指定您喜歡的編號型別。預設情況下，它是一個數字。以下是可能的選項：

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

示例

以下是一個使用 <ol type = "1"> 的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

這將產生以下結果：

示例

以下是一個使用 <ol type = "I"> 的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果：

示例

以下是一個使用 <ol type = "i"> 的示例。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果：

示例

以下是一個使用 <ol type = "A" > 的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果：

示例

以下是一個使用 <ol type = "a"> 的示例。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果：

start 屬性

您可以對 <ol> 標籤使用start 屬性來指定所需的編號起點。以下是可能的選項：

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

示例

以下是一個使用 <ol type = "i" start = "4" > 的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

這將產生以下結果：

HTML 定義列表

HTML 和 XHTML 支援一種稱為定義列表的列表樣式，其中條目像在字典或百科全書中一樣列出。定義列表是呈現詞彙表、術語列表或其他名稱/值列表的理想方式。

定義列表使用以下三個標籤。

  • <dl> - 定義列表的開始
  • <dt> - 術語
  • <dd> - 術語定義
  • </dl> - 定義列表的結束

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

這將產生以下結果：

HTML - 文字連結

網頁可以包含各種連結，這些連結可以將您直接帶到其他頁面，甚至可以帶到給定頁面的特定部分。這些連結稱為超連結。

超連結允許訪問者透過單擊網頁上的文字、短語和影像在網站之間導航。因此，您可以使用網頁上提供的文字或影像建立超連結。

注意 - 我建議您閱讀關於理解 URL的簡短教程

連結文件

連結是使用 HTML 標籤 <a> 指定的。此標籤稱為錨點標籤，<a> 標籤和 </a> 標籤之間的任何內容都成為連結的一部分，使用者可以單擊該部分以到達連結的文件。以下是使用 <a> 標籤的簡單語法。

<a href = "Document URL" ... attributes-list>Link Text</a>

示例

讓我們嘗試以下示例，該示例在您的頁面上鍊接 https://tutorialspoint.tw：

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://tutorialspoint.tw" target = "_self">Tutorials Point</a>
   </body>
	
</html>

這將產生以下結果，您可以單擊生成的連結以到達 Tutorials Point 的主頁（在此示例中）。

target 屬性

我們在之前的示例中使用了target 屬性。此屬性用於指定開啟連結文件的位置。以下是可能的選項：

序號 選項 & 說明
1

_blank

在新視窗或選項卡中開啟連結文件。
2

_self

在同一框架中開啟連結文件。
3

_parent

在父框架中開啟連結文件。
4

_top

在視窗的整個主體中開啟連結文件。
5

targetframe

在名為targetframe的框架中開啟連結文件。

示例

嘗試以下示例以瞭解 target 屬性的幾個選項之間的基本區別。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://tutorialspoint.tw/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

這將產生以下結果，您可以單擊不同的連結以瞭解為 target 屬性提供的各種選項之間的區別。

基本路徑的使用

當您連結與同一網站相關的 HTML 文件時，不需要為每個連結提供完整的 URL。如果在 HTML 文件標題中使用<base> 標籤，則可以擺脫它。此標籤用於為所有連結提供基本路徑。因此，您的瀏覽器將給定的相對路徑與該基本路徑連線起來，並將建立一個完整的 URL。

示例

以下示例使用 <base> 標籤來指定基本 URL，稍後我們可以使用所有連結的相對路徑，而不是為每個連結提供完整的 URL。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://tutorialspoint.tw/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

這將產生以下結果，您可以單擊生成的HTML 教程連結以到達 HTML 教程。

現在給定的 URL <a href = "/html/index.htm" 被視為 <ahref = "https://tutorialspoint.tw/html/index.htm"

連結到頁面部分

您可以使用name 屬性建立指向給定網頁特定部分的連結。這是一個兩步過程。

注意 - name 屬性在 HTML5 中已被棄用。請勿使用此屬性。請改用id 和title 屬性。

首先，建立一個連結到您想在網頁中到達的位置，並使用 <a...> 標籤對其命名，如下所示：

<h1>HTML Text Links <a name = "top"></a></h1>

第二步是建立一個超連結來連結文件以及您想要到達的位置：

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

這將生成以下連結，您可以單擊生成的轉到頂部連結以到達 HTML 文字連結教程的頂部。

Go to the Top

設定連結顏色

您可以使用 <body> 標籤的link、alink 和vlink 屬性設定連結、活動連結和已訪問連結的顏色。

示例

將以下內容儲存在 test.htm 中，並在任何 Web 瀏覽器中開啟它，以檢視link、alink 和vlink 屬性的工作方式。

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://tutorialspoint.tw/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

這將產生以下結果。只需檢查單擊連結之前的顏色，然後檢查啟用連結時的顏色以及訪問連結後的顏色。

下載連結

您可以建立文字連結以使您的 PDF、DOC 或 ZIP 檔案可下載。這非常簡單；您只需要提供可下載檔案的完整 URL，如下所示：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://tutorialspoint.tw/page.pdf">Download PDF File</a>
   </body>
	
</html>

這將生成以下連結，並用於下載檔案。

檔案下載對話方塊

有時您可能希望提供一個選項，使用者單擊連結後，它會向用戶彈出“檔案下載”框，而不是顯示實際內容。這非常容易實現，並且可以使用 HTTP 響應中的 HTTP 頭來實現。

例如，如果您想使檔名檔案可從給定連結下載，則其語法如下。

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

注意 - 有關 PERL CGI 程式的更多詳細資訊，請閱讀教程PERL 和 CGI。

HTML - 圖片連結

我們已經瞭解瞭如何使用文字建立超文字連結，並且我們還學習瞭如何在網頁中使用影像。現在，我們將學習如何使用影像建立超連結。

示例

將影像用作超連結很簡單。我們只需要在超連結中使用影像代替文字，如下所示：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://tutorialspoint.tw" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

這將產生以下結果，您可以單擊影像以到達 Tutorials Point 的主頁。

這是使用影像建立超連結的最簡單方法。接下來，我們將瞭解如何建立滑鼠感應影像連結。

滑鼠感應影像

HTML 和 XHTML 標準提供了一個功能，允許您在一個影像中嵌入許多不同的連結。您可以根據影像上提供的不同座標在單個影像上建立不同的連結。一旦將不同的連結附加到不同的座標，我們就可以單擊影像的不同部分來開啟目標文件。這種滑鼠感應影像稱為影像地圖。

建立影像地圖有兩種方法：

  • 伺服器端影像地圖 - 這是由 <img> 標籤的ismap 屬性啟用的，需要訪問伺服器和相關的影像地圖處理應用程式。

  • 客戶端影像對映 − 這使用``標籤的`usemap`屬性建立，以及相應的``和``標籤。

伺服器端影像對映

你只需將你的影像放在一個超連結中，並使用ismap屬性，這使其成為一個特殊的影像，當用戶點選影像中的某個位置時，瀏覽器會將滑鼠指標的座標以及``標籤中指定的URL傳遞到Web伺服器。伺服器使用滑鼠指標座標來確定將哪個文件傳回瀏覽器。

當使用ismap時，包含``標籤的href屬性必須包含伺服器應用程式（如cgi或PHP指令碼等）的URL，以根據傳遞的座標處理傳入的請求。

滑鼠位置的座標是從影像左上角開始計算的螢幕畫素，從(0,0)開始。座標前面加一個問號，新增到URL的末尾。

例如，如果使用者點選以下影像左上角向右20畫素，向下30畫素的位置−

該影像由以下程式碼片段生成−

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

那麼瀏覽器會將以下搜尋引數傳送到Web伺服器，這些引數可以由ismap.cgi指令碼或map檔案處理，你可以將任何你喜歡的文件連結到這些座標−

/cgi-bin/ismap.cgi?20,30

這樣，你可以將不同的連結分配給影像的不同座標，當點選這些座標時，你可以開啟相應的連結文件。要了解更多關於ismap屬性的資訊，你可以檢視如何使用影像ismap？

注意 − 你將在學習Perl程式設計時學習CGI程式設計。你也可以使用PHP或任何其他指令碼編寫你的指令碼以處理這些傳遞的座標。現在，讓我們專注於學習HTML，稍後你可以重新訪問此部分。

客戶端影像對映

客戶端影像對映由``標籤的usemap屬性啟用，並由特殊的``和``擴充套件標籤定義。

將形成地圖的影像作為普通影像插入頁面中，使用``標籤，除了它帶有一個名為usemap的額外屬性。usemap屬性的值將在``標籤中使用，以連結地圖和影像標籤。``標籤以及``標籤定義所有影像座標和相應的連結。

``標籤內的``標籤指定形狀和座標，以定義影像上每個可點選熱點的邊界。這是一個來自影像地圖的示例−

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

這將產生以下結果：

座標系

coords的實際值完全取決於所討論的形狀。以下是一個總結，隨後是詳細示例−

  • rect = x1 , y1 , x2 , y2

    x1和y1是矩形左上角的座標；x2和y2是右下角的座標。

  • circle = xc , yc , radius

    xc和yc是圓心的座標，radius是圓的半徑。一個以200,50為中心，半徑為25的圓的屬性為coords = "200,50,25"

  • poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

    各種x-y對定義多邊形的頂點（點），從一個點到下一個點畫一條“線”。一個菱形多邊形，其頂點位於20,20，最寬處為40畫素，其屬性為coords = "20,20,40,40,20,60,0,40"。

所有座標都是相對於影像左上角(0,0)。每個形狀都有一個相關的URL。你可以使用任何影像軟體來了解不同位置的座標。

HTML - 郵件連結

在網頁上放置HTML電子郵件連結並不難，但這可能會給你的電子郵件帳戶造成不必要的垃圾郵件問題。有些人可以執行程式來收集這些型別的電子郵件，然後以各種方式將其用於垃圾郵件。

你可以有另一種選擇來方便人們向你傳送電子郵件。一種選擇是使用HTML表單收集使用者資料，然後使用PHP或CGI指令碼傳送電子郵件。

一個簡單的例子，檢視我們的聯絡我們表單。我們使用此表單獲取使用者反饋，然後我們使用一個CGI程式來收集這些資訊並向給定的電子郵件ID傳送電子郵件。

注意 − 你將在HTML表單中學習HTML表單，你將在我們的另一個教程Perl CGI程式設計中學習CGI。

HTML電子郵件標籤

HTML<a>標籤為你提供了指定電子郵件地址以傳送電子郵件的選項。在使用<a>標籤作為電子郵件標籤時，你將使用mailto: 電子郵件地址以及href屬性。以下是使用mailto代替http的語法。

<a href = "mailto: abc@example.com">Send Email</a>

此程式碼將生成以下連結，你可以用它來發送電子郵件。

Send Email

現在，如果使用者點選此連結，它將啟動安裝在使用者計算機上的一個電子郵件客戶端（如Lotus Notes、Outlook Express等）。使用此選項傳送電子郵件還存在另一個風險，因為如果使用者沒有在其計算機上安裝電子郵件客戶端，則無法傳送電子郵件。

預設設定

你可以指定預設的電子郵件主題和電子郵件正文以及你的電子郵件地址。以下是使用預設主題和正文的示例。

<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>

此程式碼將生成以下連結，你可以用它來發送電子郵件。

Send Feedback

HTML -框架

HTML框架用於將瀏覽器視窗分成多個部分，每個部分可以載入單獨的HTML文件。瀏覽器視窗中的一組框架稱為框架集。視窗的劃分方式與表格的組織方式類似：分為行和列。

框架的缺點

使用框架有一些缺點，因此不建議在網頁中使用框架−

  • 一些較小的裝置往往無法處理框架，因為它們的螢幕不夠大，無法進行分割。

  • 有時由於不同的螢幕解析度，你的頁面在不同的計算機上顯示方式會有所不同。

  • 瀏覽器的後退按鈕可能無法按使用者期望的那樣工作。

  • 仍然有一些瀏覽器不支援框架技術。

建立框架

要在頁面上使用框架，我們使用<frameset>標籤而不是<body>標籤。<frameset>標籤定義瞭如何將視窗劃分為框架。<frameset>標籤的rows屬性定義水平框架，cols屬性定義垂直框架。每個框架由<frame>標籤指示，它定義哪個HTML文件應在框架中開啟。

注意 − <frame>標籤在HTML5中已棄用。不要使用此元素。

示例

以下是如何建立三個水平框架的示例−

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

這將產生以下結果：

示例

讓我們將上面的例子改成如下，這裡我們用cols替換了rows屬性並改變了它們的寬度。這將垂直建立所有三個框架−

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

這將產生以下結果：

<frameset>標籤屬性

以下是<frameset>標籤的重要屬性−

序號 屬性和描述
1

cols

指定框架集中包含多少列以及每列的大小。你可以透過以下四種方式之一指定每列的寬度−

畫素的絕對值。例如，要建立三個垂直框架，請使用cols = "100, 500, 100"。

瀏覽器視窗的百分比。例如，要建立三個垂直框架，請使用cols = "10%, 80%, 10%"。

使用萬用字元。例如，要建立三個垂直框架，請使用cols = "10%, *, 10%"。在這種情況下，萬用字元佔用視窗的其餘部分。

作為瀏覽器視窗的相對寬度。例如，要建立三個垂直框架，請使用cols = "3*, 2*, 1*"。這是百分比的替代方法。你可以使用瀏覽器視窗的相對寬度。這裡視窗被分成六分之一：第一列佔用視窗的一半，第二列佔用三分之一，第三列佔用六分之一。
2

rows

此屬性的工作方式與cols屬性相同，並採用相同的值，但它用於指定框架集中的行。例如，要建立兩個水平框架，請使用rows = "10%, 90%"。你可以按照上面針對列解釋的方式指定每行的高度。
3

border

此屬性以畫素為單位指定每個框架邊框的寬度。例如，border = "5"。值為零表示沒有邊框。
4

frameborder

此屬性指定是否應在框架之間顯示三維邊框。此屬性的值為1（是）或0（否）。例如，frameborder = "0"指定沒有邊框。
5

framespacing

此屬性指定框架集中的框架之間的空間量。這可以採用任何整數值。例如，framespacing = "10"表示每個框架之間應有10畫素的間距。

<frame>標籤屬性

以下是<frame>標籤的重要屬性−

序號 屬性和描述
1

src

此屬性用於給出應在框架中載入的檔名。它的值可以是任何URL。例如，src = "/html/top_frame.htm"將載入html目錄中可用的HTML檔案。
2

name

此屬性允許你為框架命名。它用於指示應將文件載入到哪個框架中。當你想要在一個框架中建立連結並將頁面載入到另一個框架中時，這尤其重要，在這種情況下，第二個框架需要一個名稱來標識自己是連結的目標。
3

frameborder

此屬性指定是否顯示該框架的邊框；如果給定，它將覆蓋<frameset>標籤中給定的frameborder屬性的值，這可以取值為1（是）或0（否）。
4

marginwidth

此屬性允許你指定框架邊框的左右側與框架內容之間的空間寬度。該值以畫素為單位給出。例如marginwidth = "10"。
5

marginheight

此屬性允許你指定框架邊框的頂部和底部與其內容之間的空間高度。該值以畫素為單位給出。例如marginheight = "10"。
6

noresize

預設情況下，你可以透過單擊並拖動框架的邊框來調整任何框架的大小。noresize屬性可防止使用者調整框架的大小。例如noresize = "noresize"。
7

scrolling

此屬性控制出現在框架上的捲軸的外觀。這取值為“yes”、“no”或“auto”。例如，scrolling = "no"表示它不應有捲軸。
8

longdesc

此屬性允許你提供指向另一個頁面的連結，該頁面包含框架內容的詳細描述。例如longdesc = "framedescription.htm"

瀏覽器對框架的支援

如果使用者使用的是任何舊瀏覽器或任何不支援框架的瀏覽器，則應向用戶顯示<noframes>元素。

因此，你必須在<noframes>元素內放置一個<body>元素，因為<frameset>元素應該替換<body>元素，但是如果瀏覽器不理解<frameset>元素，那麼它應該理解包含在<noframes>元素中的<body>元素中的內容。

你可以為使用舊瀏覽器的使用者提供一些不錯的訊息。例如，對不起！你的瀏覽器不支援框架。如上例所示。

框架的名稱和目標屬性

框架最常用的用途之一是在一個框架中放置導航欄，然後將主頁面載入到單獨的框架中。

讓我們看看下面的例子，test.htm檔案有以下程式碼−

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

這裡，我們建立了兩列，用於填充兩個框架。第一個框架寬度為 200 畫素，將包含由menu.htm檔案實現的導航選單欄。第二列填充剩餘空間，將包含頁面的主要部分，它由main.htm檔案實現。對於選單欄中可用的所有三個連結，我們都將目標框架指定為main_page，因此，每當您單擊選單欄中的任何連結時，可用的連結都將在主頁面中開啟。

以下是 menu.htm 檔案的內容

線上演示 
<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "https://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "https://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

以下是 main.htm 檔案的內容：

線上演示 
<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

當我們載入test.htm檔案時，會產生以下結果：

現在您可以嘗試單擊左側面板中可用的連結並檢視結果。targetattribute還可以取以下值：

序號 選項 & 說明
1

_self

將頁面載入到當前框架中。
2

_blank

將頁面載入到新的瀏覽器視窗中。開啟一個新視窗。
3

_parent

將頁面載入到父視窗中，對於單個框架集而言，父視窗就是主瀏覽器視窗。
4

_top

將頁面載入到瀏覽器視窗中，替換任何當前框架。
5

targetframe

將頁面載入到名為 targetframe 的目標框架中。

HTML - 內聯框架 (iframe)

您可以使用 HTML 標籤<iframe>定義內聯框架。<iframe>標籤與<frameset>標籤沒有直接關係，它可以出現在文件中的任何位置。<iframe>標籤定義文件內的一個矩形區域，瀏覽器可以在其中顯示單獨的文件，包括捲軸和邊框。內聯框架用於將另一個文件嵌入到當前 HTML 文件中。

src屬性用於指定佔據內聯框架的文件的 URL。

示例

以下是一個示例，說明如何使用<iframe>：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
	
   <body>
      <p>Document content goes here...</p>
      
      <iframe src = "/html/menu.htm" width = "555" height = "200">
         Sorry your browser does not support inline frames.
      </iframe>
      
      <p>Document content also go here...</p>
   </body>
	
</html>

這將產生以下結果：

<Iframe> 標籤屬性

<iframe>標籤的大多數屬性，包括name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style,和title的行為與<frame>標籤的相應屬性完全相同。

注意 - frameborder, marginwidth, longdesc, scrolling, marginheight 屬性在 HTML5 中已棄用。請勿使用這些屬性。

序號 屬性和描述
1

src

此屬性用於給出應在框架中載入的檔名。它的值可以是任何URL。例如，src = "/html/top_frame.htm"將載入html目錄中可用的HTML檔案。
2

name

此屬性允許你為框架命名。它用於指示應將文件載入到哪個框架中。當你想要在一個框架中建立連結並將頁面載入到另一個框架中時，這尤其重要，在這種情況下，第二個框架需要一個名稱來標識自己是連結的目標。
3

frameborder

此屬性指定是否顯示該框架的邊框；如果給定，它將覆蓋<frameset>標籤中給定的frameborder屬性的值，這可以取值為1（是）或0（否）。
4

marginwidth

此屬性允許你指定框架邊框的左右側與框架內容之間的空間寬度。該值以畫素為單位給出。例如marginwidth = "10"。
5

marginheight

此屬性允許你指定框架邊框的頂部和底部與其內容之間的空間高度。該值以畫素為單位給出。例如marginheight = "10"。
6

height

此屬性指定<iframe>的高度。
7

scrolling

此屬性控制出現在框架上的捲軸的外觀。這取值為“yes”、“no”或“auto”。例如，scrolling = "no"表示它不應有捲軸。
8

longdesc

此屬性允許你提供指向另一個頁面的連結，該頁面包含框架內容的詳細描述。例如longdesc = "framedescription.htm"
9

width

此屬性指定<iframe>的寬度。

HTML - 塊

所有 HTML 元素可以分為兩類：(a) 塊級元素 (b) 內聯元素。

塊級元素

塊級元素在螢幕上顯示時，其前後都會有換行符。例如，<p>，<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<ul>，<ol>，<dl>，<pre>，<hr />，<blockquote>和<address>元素都是塊級元素。它們都從自己的新行開始，它們後面的任何內容都出現在它們自己的新行上。

內聯元素

另一方面，內聯元素可以出現在句子中，並且不必出現在自己的新行上。<b>，<i>，<u>，<em>，<strong>，<sup>，<sub>，<big>，<small>，<li>，<ins>，<del>，<code>，<cite>，<dfn>，<kbd>和<var>元素都是內聯元素。

分組 HTML 元素

我們經常使用兩個重要的標籤來組合各種其他 HTML 標籤：（i）<div>標籤和（ii）<span>標籤

<div> 標籤

這是一個非常重要的塊級標籤，它在分組各種其他 HTML 標籤和對元素組應用 CSS 方面發揮著重要作用。現在，<div>標籤也可以用於建立網頁佈局，我們使用<div>標籤定義頁面的不同部分（左、右、頂部等）。此標籤不會對塊進行任何視覺更改，但在與 CSS 一起使用時意義更大。

示例

以下是一個簡單的<div>標籤示例。我們將在單獨的章節中學習層疊樣式表 (CSS)，但我們在這裡使用它來演示<div>標籤的用法：

線上演示 
<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

這將產生以下結果：

<span> 標籤

HTML <span> 是一個內聯元素，它可以用來在 HTML 文件中組合內聯元素。此標籤也不會對塊進行任何視覺更改，但在與 CSS 一起使用時意義更大。

<span>標籤和<div>標籤的區別在於，<span>標籤用於內聯元素，而<div>標籤用於塊級元素。

示例

以下是一個簡單的<span>標籤示例。我們將在單獨的章節中學習層疊樣式表 (CSS)，但我們在這裡使用它來演示<span>標籤的用法：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

這將產生以下結果：

HTML - 背景

預設情況下，您的網頁背景顏色為白色。您可能不喜歡它，但不用擔心。HTML 提供了以下兩種很好的方法來裝飾您的網頁背景。

  • 使用顏色設定 HTML 背景
  • 使用影像設定 HTML 背景

現在讓我們使用適當的示例逐一檢視這兩種方法。

使用顏色設定 HTML 背景

bgcolor屬性用於控制 HTML 元素的背景，特別是頁面主體和表格背景。

注意 - bgcolor 屬性在 HTML5 中已棄用。請勿使用此屬性。

以下是使用任何 HTML 標籤使用 bgcolor 屬性的語法。

<tagname bgcolor = "color_value"...>

此 color_value 可以使用以下任何格式給出：

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

示例

以下是如何設定 HTML 標籤背景的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

這將產生以下結果：

使用影像設定 HTML 背景

background屬性也可以用於控制 HTML 元素的背景，特別是頁面主體和表格背景。您可以指定一個影像來設定 HTML 頁面或表格的背景。

注意 - background 屬性在 HTML5 中已棄用。請勿使用此屬性。

以下是使用任何 HTML 標籤使用 background 屬性的語法。

注意 - background 屬性已棄用，建議使用樣式表進行背景設定。

<tagname background = "Image URL"...>

最常用的影像格式是 JPEG、GIF 和 PNG 影像。

示例

以下是如何設定表格背景影像的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

這將產生以下結果：

圖案化和透明背景

您可能在各種網站上看到過許多圖案或透明背景。這隻需在背景中使用圖案影像或透明影像即可實現。

建議在建立圖案或透明 GIF 或 PNG 影像時，使用盡可能小的尺寸，甚至小到 1x1，以避免載入緩慢。

示例

以下是如何設定表格背景圖案的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

這將產生以下結果：

HTML - 顏色

顏色對於使您的網站具有良好的外觀和感覺非常重要。您可以使用<body>標籤在頁面級別指定顏色，也可以使用bgcolor屬性為各個標籤設定顏色。

<body>標籤具有以下屬性，可用於設定不同的顏色：

  • bgcolor - 設定頁面的背景顏色。

  • text - 設定正文文字的顏色。

  • alink - 設定活動連結或選定連結的顏色。

  • link - 設定連結文字的顏色。

  • vlink - 設定已訪問連結的顏色 - 即您已單擊的連結文字的顏色。

HTML 顏色編碼方法

有以下三種不同的方法可以在您的網頁中設定顏色：

  • 顏色名稱 - 您可以直接指定顏色名稱，例如綠色、藍色或紅色。

  • 十六進位制程式碼 - 一個六位數程式碼，表示構成顏色的紅色、綠色和藍色的數量。

  • 顏色十進位制或百分比值 - 此值使用 rgb( ) 屬性指定。

現在我們將逐一檢視這些配色方案。

HTML 顏色 - 顏色名稱

您可以指定直接的顏色名稱來設定文字或背景顏色。W3C 列出了 16 個基本顏色名稱，這些名稱將透過 HTML 驗證器驗證，但主要瀏覽器支援超過 200 個不同的顏色名稱。

注意 - 檢視HTML 顏色名稱的完整列表。

W3C 標準 16 種顏色

以下是 W3C 標準 16 種顏色名稱的列表，建議使用它們。

黑色 灰色 銀色 白色
黃色 青檸色 水綠色 紫紅色
紅色 綠色 藍色 紫色
栗色 橄欖色 海軍藍 藍綠色

示例

以下是使用顏色名稱設定 HTML 標籤背景的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result.</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML 顏色 - 十六進位制程式碼

十六進位制是顏色的 6 位數表示。前兩位數字 (RR) 表示紅色值，接下來的兩位是綠色值 (GG)，最後兩位是藍色值 (BB)。

十六進位制值可以從任何圖形軟體（如 Adobe Photoshop、Paintshop Pro 或 MS Paint）中獲取。

每個十六進位制程式碼前面都會有一個井號或雜湊符號 #。以下是使用十六進位制表示法的幾種顏色的列表。

顏色 顏色十六進位制
  #000000
  #FF0000
  #00FF00
  #0000FF
  #FFFF00
  #00FFFF
  #FF00FF
  #C0C0C0
  #FFFFFF

示例

以下是使用十六進位制顏色程式碼設定 HTML 標籤背景的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

HTML 顏色 - RGB 值

此顏色值使用rgb( )屬性指定。此屬性採用三個值，每個值分別代表紅色、綠色和藍色。該值可以是 0 到 255 之間的整數或百分比。

注意 -並非所有瀏覽器都支援顏色的 rgb() 屬性，因此建議不要使用它。

以下是一個列表，顯示使用 RGB 值的幾種顏色。

顏色 顏色 RGB
  rgb(0,0,0)
  rgb(255,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(255,255,0)
  rgb(0,255,255)
  rgb(255,0,255)
  rgb(192,192,192)
  rgb(255,255,255)

示例

以下是使用 rgb() 值使用顏色程式碼設定 HTML 標籤背景的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

瀏覽器安全顏色

以下是 216 種顏色列表，這些顏色被認為是最安全的、與計算機無關的顏色。這些顏色從十六進位制程式碼 000000 到 FFFFFF 不等，並且所有具有 256 色調色盤的計算機都將支援它們。

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

HTML - 字型

字型在提高網站使用者友好性和內容可讀性方面起著非常重要的作用。字型和顏色完全取決於用於檢視頁面的計算機和瀏覽器，但是您可以使用HTML <font>標籤來新增樣式、大小和顏色到您網站上的文字。您可以使用<basefont>標籤將所有文字設定為相同的大小、字型和顏色。

font標籤具有三個屬性，稱為size、color和face，用於自定義字型。要隨時更改網頁中任何字型屬性，只需使用<font>標籤即可。接下來的文字將保持更改狀態，直到您使用</font>標籤關閉為止。您可以在一個<font>標籤中更改一個或所有字型屬性。

注意 −font和basefont標籤已棄用，並且應該在HTML的未來版本中刪除。因此，不應使用它們，建議使用CSS樣式來操作字型。但出於學習目的，本章將詳細解釋font和basefont標籤。

設定字型大小

您可以使用size屬性設定內容字型大小。可接受值的範圍是從1（最小）到7（最大）。字型的預設大小為3。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

這將產生以下結果：

相對字型大小

您可以指定比預設字型大小大多少或小多少。您可以像<font size = "+n">或<font size = "−n">那樣指定。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

這將產生以下結果：

設定字型

您可以使用face屬性設定字型，但請注意，如果檢視頁面的人沒有安裝該字型，他們將無法看到它。使用者將看到適用於使用者計算機的預設字型。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

這將產生以下結果：

指定備選字型

只有當訪問者在其計算機上安裝了該字型時，他們才能看到您的字型。因此，可以透過列出字型名稱（用逗號分隔）來指定兩種或多種字型替代方案。

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

頁面載入後，其瀏覽器將顯示第一個可用的字型。如果沒有安裝任何給定的字型，則將顯示預設字型Times New Roman。

注意 − 檢視HTML標準字型的完整列表。

設定字型顏色

您可以使用color屬性設定任何您喜歡的字型顏色。您可以透過顏色名稱或該顏色的十六進位制程式碼來指定您想要的顏色。

注意 − 您可以檢視帶有程式碼的HTML顏色名稱的完整列表。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

這將產生以下結果：

<basefont> 元素

<basefont>元素應該為文件中未包含在<font>標籤內的任何部分設定預設字型大小、顏色和字型。您可以使用<font>元素來覆蓋<basefont>設定。

<basefont>標籤也採用color、size和face屬性，它將透過將size的值設定為+1（更大）或−2（更小兩個尺寸）來支援相對字型設定。

示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

這將產生以下結果：

HTML - 表單

當您想要從網站訪問者那裡收集一些資料時，需要使用HTML表單。例如，在使用者註冊期間，您可能想要收集姓名、電子郵件地址、信用卡等資訊。

表單將接收來自網站訪問者的輸入，然後將其釋出到後端應用程式，例如CGI、ASP指令碼或PHP指令碼等。後端應用程式將根據應用程式中定義的業務邏輯對傳遞的資料執行必要的處理。

有各種可用的表單元素，例如文字欄位、文字區域欄位、下拉選單、單選按鈕、複選框等。

HTML <form>標籤用於建立HTML表單，其語法如下：

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

表單屬性

除了常用屬性外，以下是最常用的表單屬性列表：

序號 屬性和描述
1

action

準備好處理您傳遞資料的後端指令碼。
2

method

用於上傳資料的方法。最常用的方法是GET和POST方法。
3

target

指定顯示指令碼結果的目標視窗或框架。它採用_blank、_self、_parent等值。
4

enctype

您可以使用enctype屬性指定瀏覽器在將資料傳送到伺服器之前如何對其進行編碼。可能的值為：

application/x-www-form-urlencoded − 這是大多數表單在簡單場景中使用的標準方法。

multipart/form-data − 當您想要上傳二進位制資料（例如影像、word檔案等）時使用此方法。

注意 − 您可以參考Perl & CGI，瞭解表單資料上傳的工作原理。

HTML表單控制元件

您可以使用不同的表單控制元件來使用HTML表單收集資料：

  • 文字輸入控制元件
  • 複選框控制元件
  • 單選按鈕控制元件
  • 選擇框控制元件
  • 檔案選擇框
  • 隱藏控制元件
  • 可點選按鈕
  • 提交和重置按鈕

文字輸入控制元件

表單中使用了三種類型的文字輸入：

  • 單行文字輸入控制元件 − 此控制元件用於只需要一行使用者輸入的專案，例如搜尋框或名稱。它們是使用HTML <input>標籤建立的。

  • 密碼輸入控制元件 − 這也是單行文字輸入，但它會在使用者輸入後立即遮蔽字元。它們也是使用HTML <input>標籤建立的。

  • 多行文字輸入控制元件 − 當用戶需要提供超過一句的詳細資訊時使用。多行輸入控制元件是使用HTML <textarea>標籤建立的。

單行文字輸入控制元件

此控制元件用於只需要一行使用者輸入的專案，例如搜尋框或名稱。它們是使用HTML <input>標籤建立的。

示例

這是一個用於獲取名字和姓氏的單行文字輸入的基本示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

這將產生以下結果：

屬性

以下是用於建立文字欄位的<input>標籤的屬性列表。

序號 屬性和描述
1

type

指示輸入控制元件的型別，對於文字輸入控制元件，它將設定為text。
2

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
3

value

這可以用來在控制元件中提供初始值。
4

size

允許以字元為單位指定文字輸入控制元件的寬度。
5

maxlength

允許指定使用者可以輸入到文字框中的最大字元數。

密碼輸入控制元件

這同樣是單行文字輸入，但它會在使用者輸入後立即遮蔽字元。它們也是使用HTML <input>標籤建立的，但type屬性設定為password。

示例

這是一個用於獲取使用者密碼的單行密碼輸入的基本示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

這將產生以下結果：

屬性

以下是用於建立密碼欄位的<input>標籤的屬性列表。

序號 屬性和描述
1

type

指示輸入控制元件的型別，對於密碼輸入控制元件，它將設定為password。
2

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
3

value

這可以用來在控制元件中提供初始值。
4

size

允許以字元為單位指定文字輸入控制元件的寬度。
5

maxlength

允許指定使用者可以輸入到文字框中的最大字元數。

多行文字輸入控制元件

當用戶需要提供超過一句的詳細資訊時使用。多行輸入控制元件是使用HTML <textarea>標籤建立的。

示例

這是一個用於獲取專案說明的多行文字輸入的基本示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

這將產生以下結果：

屬性

以下是<textarea>標籤的屬性列表。

序號 屬性和描述
1

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
2

rows

指示文字區域框的行數。
3

cols

指示文字區域框的列數。

複選框控制元件

當需要選擇多個選項時使用複選框。它們也是使用HTML <input>標籤建立的，但type屬性設定為checkbox。

示例

這是一個包含兩個複選框的表單的HTML程式碼示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

這將產生以下結果：

屬性

以下是<checkbox>標籤的屬性列表。

序號 屬性和描述
1

type

指示輸入控制元件的型別，對於複選框輸入控制元件，它將設定為checkbox。
2

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
3

value

如果選中複選框，將使用該值。
4

checked

如果要預設選中它，則設定為checked。

單選按鈕控制元件

當在許多選項中只需要選擇一個選項時使用單選按鈕。它們也是使用HTML <input>標籤建立的，但type屬性設定為radio。

示例

這是一個包含兩個單選按鈕的表單的HTML程式碼示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

這將產生以下結果：

屬性

以下是單選按鈕的屬性列表。

序號 屬性和描述
1

type

指示輸入控制元件的型別，對於複選框輸入控制元件，它將設定為radio。
2

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
3

value

如果選中單選框，將使用該值。
4

checked

如果要預設選中它，則設定為checked。

選擇框控制元件

選擇框，也稱為下拉框，它提供了一種以下拉列表的形式列出各種選項的方法，使用者可以從中選擇一個或多個選項。

示例

這是一個包含一個下拉框的表單的HTML程式碼示例

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

這將產生以下結果：

屬性

以下是<select>標籤的重要屬性列表：

序號 屬性和描述
1

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
2

size

這可以用來顯示一個滾動列表框。
3

multiple

如果設定為“multiple”，則允許使用者從選單中選擇多個專案。

以下是<option>標籤的重要屬性列表：

序號 屬性和描述
1

value

如果選中選擇框中的選項，將使用該值。
2

selected

指定此選項應在頁面載入時初始選擇的的值。
3

label

標記選項的另一種方法

檔案上傳框

如果您想允許使用者將檔案上傳到您的網站，則需要使用檔案上傳框，也稱為檔案選擇框。這也是使用<input>元素建立的，但type屬性設定為file。

示例

這是一個包含一個檔案上傳框的表單的HTML程式碼示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

這將產生以下結果：

屬性

以下是檔案上傳框的重要屬性列表：

序號 屬性和描述
1

name

用於為控制元件命名，該名稱將傳送到伺服器以進行識別並獲取值。
2

accept

指定伺服器接受的檔案型別。

按鈕控制元件

HTML中有各種方法可以建立可點選按鈕。您還可以透過將<input>標籤的type屬性設定為button來建立可點選按鈕。type屬性可以採用以下值：

序號 型別和說明
1

submit

這將建立一個自動提交表單的按鈕。
2

reset

這將建立一個自動將表單控制元件重置為其初始值的按鈕。
3

button

這將建立一個按鈕，使用者單擊該按鈕時會觸發客戶端指令碼。
4

圖片

這建立一個可點選的按鈕，但我們可以使用圖片作為按鈕的背景。

示例

這是一個包含三種類型按鈕的表單的 HTML 程式碼示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

這將產生以下結果：

隱藏表單控制元件

隱藏表單控制元件用於隱藏頁面內的資訊，這些資訊稍後可以推送到伺服器。此控制元件隱藏在程式碼中，不會出現在實際頁面上。例如，以下隱藏表單用於儲存當前頁碼。當用戶點選下一頁時，隱藏控制元件的值將被髮送到 Web 伺服器，伺服器將根據傳遞的當前頁碼決定接下來顯示哪個頁面。

示例

這是一個顯示隱藏控制元件用法的 HTML 程式碼示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

這將產生以下結果：

HTML - 嵌入多媒體

有時您需要在網頁中新增音樂或影片。向網站新增影片或聲音最簡單的方法是包含名為<embed>的特殊 HTML 標籤。此標籤會導致瀏覽器本身自動包含多媒體控制元件，前提是瀏覽器支援<embed>標籤和給定的媒體型別。

您還可以為不識別<embed>標籤的瀏覽器包含<noembed>標籤。例如，您可以使用<embed>顯示您選擇的電影，如果瀏覽器不支援<embed>標籤，則可以使用<noembed>顯示單個 JPG 圖片。

示例

這是一個播放嵌入式 MIDI 檔案的簡單示例：

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

<embed> 標籤屬性

以下是可與<embed>標籤一起使用的重要屬性列表。

注意 −align和autostart屬性在 HTML5 中已棄用。請勿使用這些屬性。

序號 屬性和描述
1

align

確定如何對齊物件。它可以設定為居中、左或右。
2

autostart

此布林屬性指示媒體是否應自動啟動。您可以將其設定為 true 或 false。
3

loop

指定聲音是否應連續播放（將 loop 設定為 true）、播放特定次數（正值）或根本不播放（false）。
4

playcount

指定播放聲音的次數。如果您使用的是 IE，這是loop的替代選項。
5

hidden

指定是否應在頁面上顯示多媒體物件。false 值表示否，true 值表示是。
6

width

物件的寬度（以畫素為單位）
7

height

物件的高度（以畫素為單位）
8

name

用於引用物件的名稱。
9

src

要嵌入的物件的 URL。
10

volume

控制聲音的音量。可以從 0（關閉）到 100（全音量）。

支援的影片型別

您可以在 embed 標籤中使用各種媒體型別，例如 Flash 電影（.swf）、AVI（.avi）和 MOV（.mov）檔案型別。

  • .swf 檔案 − 是 Macromedia Flash 程式建立的檔案型別。

  • .wmv 檔案 − 是 Microsoft 的 Windows Media Video 檔案型別。

  • .mov 檔案 − 是 Apple 的 Quick Time Movie 格式。

  • .mpeg 檔案 − 是“動態影像專家小組”建立的電影檔案。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

這將產生以下結果：

背景音訊

您可以使用 HTML <bgsound> 標籤在網頁背景中播放音軌。此標籤僅受 Internet Explorer 支援，大多數其他瀏覽器都會忽略此標籤。當用戶第一次下載並顯示主機文件時，它會下載並播放音訊檔案。每當使用者重新整理瀏覽器時，背景聲音檔案也會重新播放。

注意 − bgsound 標籤已棄用，預計將在 HTML 的未來版本中刪除。因此，不應使用它們，建議使用 HTML5 標籤 audio 來新增聲音。但出於學習目的，本章仍將詳細解釋 bgsound 標籤。

此標籤只有兩個屬性loop和src。這兩個屬性的含義與上面解釋的相同。

這是一個播放小型 MIDI 檔案的簡單示例：

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

這將生成空白螢幕。此標籤不顯示任何元件，並保持隱藏狀態。

Internet Explorer 也只能處理三種不同的聲音格式檔案：wav（PC 的本機格式）；au（大多數 Unix 工作站的本機格式）；以及 MIDI（一種通用的音樂編碼方案）。

HTML 物件標籤

HTML 4 引入了<object>元素，它提供了一種通用的物件包含解決方案。<object>元素允許 HTML 作者指定使用者代理呈現物件所需的一切。

以下是一些示例：

示例 - 1

您可以按如下方式將 HTML 文件嵌入 HTML 文件本身：

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

如果瀏覽器不支援object標籤，則alt屬性將發揮作用。

示例 - 2

您可以按如下方式將 PDF 文件嵌入 HTML 文件：

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

示例 - 3

您可以使用<param>標籤指定與文件相關的某些引數。以下是如何嵌入 wav 檔案的示例：

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

示例 - 4

您可以按如下方式新增 Flash 文件：

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

示例 - 5

您可以按如下方式將 Java Applet 新增到 HTML 文件：

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

classid屬性標識要使用的 Java 外掛版本。您可以使用可選的codebase屬性來指定是否以及如何下載 JRE。

HTML - 跑馬燈

HTML 跑馬燈是水平或垂直滾動顯示在網頁上的滾動文字片段，這取決於設定。這是透過使用 HTML <marquee>標籤建立的。

注意 − <marquee>標籤在 HTML5 中已棄用。請勿使用此元素，您可以使用 JavaScript 和 CSS 來建立此類效果。

語法

使用 HTML <marquee>標籤的簡單語法如下：

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

<marquee> 標籤屬性

以下是可與<marquee>標籤一起使用的重要屬性列表。

序號 屬性和描述
1

width

這指定了跑馬燈的寬度。這可以是 10 或 20% 等值。
2

height

這指定了跑馬燈的高度。這可以是 10 或 20% 等值。
3

direction

這指定了跑馬燈滾動的方向。這可以是向上、向下、向左或向右等值。
4

behavior

這指定了跑馬燈的滾動型別。它可以具有scroll、slide和alternate等值。
5

scrolldelay

這指定了每次跳轉之間的延遲時間。這將具有 10 等值。
6

scrollamount

這指定了跑馬燈文字的速度。這可以具有 10 等值。
7

loop

這指定了迴圈的次數。預設值為 INFINITE，這意味著跑馬燈會無限迴圈。
8

bgcolor

這指定了背景顏色（顏色名稱或顏色十六進位制值）。
9

hspace

這指定了跑馬燈周圍的水平空間。這可以是 10 或 20% 等值。
10

vspace

這指定了跑馬燈周圍的垂直空間。這可以是 10 或 20% 等值。

以下是一些演示跑馬燈標籤用法的示例。

示例 - 1

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
	
</html>

這將產生以下結果：

示例 - 2

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
	
</html>

這將產生以下結果：

示例 - 3

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>
      <marquee direction = "right">This text will scroll from left to right</marquee>
   </body>
	
</html>

這將產生以下結果：

示例 - 4

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee direction = "up">This text will scroll from bottom to up</marquee>
   </body>
	
</html>

這將產生以下結果：

HTML - 頭部

我們已經瞭解到，典型的 HTML 文件將具有以下結構：

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

本章將更詳細地介紹由 HTML <head>標籤表示的頭部部分。<head>標籤是各種重要標籤的容器，例如<title>、<meta>、<link>、<base>、<style>、<script>和<noscript>標籤。

HTML <title> 標籤

HTML <title>標籤用於指定 HTML 文件的標題。以下是如何為 HTML 文件指定標題的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

這將產生以下結果：

HTML <meta> 標籤

HTML <meta>標籤用於提供有關 HTML 文件的元資料，其中包括有關頁面過期、頁面作者、關鍵詞列表、頁面描述等的資訊。

以下是 HTML 文件中<meta>標籤的一些重要用法：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

這將產生以下結果：

HTML <base> 標籤

HTML <base>標籤用於為頁面中的所有相對 URL 指定基本 URL，這意味著在查詢給定專案時，所有其他 URL 將連線到基本 URL。

例如，所有給定的頁面和影像將在使用基本 URL https://tutorialspoint.tw/目錄作為字首後進行搜尋：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://tutorialspoint.tw/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

這將產生以下結果：

但是，如果您將基本 URL 更改為其他內容，例如，如果基本 URL 是 https://tutorialspoint.tw/home，則影像和其他給定連結將變為 https://tutorialspoint.tw/home/images/logo.png 和 https://tutorialspoint.tw/html/index.htm

HTML <link> 標籤

HTML <link>標籤用於指定當前文件和外部資源之間的關係。以下是如何連結 Web 根目錄中css子目錄中可用的外部樣式表文件的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://tutorialspoint.tw/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

這將產生以下結果：

HTML <style> 標籤

HTML <style>標籤用於指定當前 HTML 文件的樣式表。以下是在<style>標籤內定義一些樣式表規則的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://tutorialspoint.tw/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

這將產生以下結果：

注意 − 要了解級聯樣式表的工作原理，請檢視css中提供的單獨教程。

HTML <script> 標籤

HTML <script>標籤用於包含外部指令碼檔案或定義 HTML 文件的內部指令碼。以下是一個使用 JavaScript 定義簡單 JavaScript 函式的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "https://tutorialspoint.tw/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

這將產生以下結果，您可以在其中嘗試單擊給定的按鈕：

注意 − 要了解 JavaScript 的工作原理，請檢視javascript中提供的單獨教程。

HTML - 樣式表

級聯樣式表 (CSS) 描述瞭如何在螢幕上、列印輸出中或可能如何朗讀文件。自 1994 年成立以來，W3C 一直積極推廣在 Web 上使用樣式表。

層疊樣式表 (CSS) 提供了指定 HTML 標籤各種屬性的簡便有效的方法。使用 CSS，您可以為給定的 HTML 元素指定許多樣式屬性。每個屬性都有一個名稱和一個值，用冒號 (:) 分隔。每個屬性宣告用分號 (;) 分隔。

示例

首先，讓我們考慮一個使用 `` 標籤和相關屬性來指定文字顏色和字型大小的 HTML 文件示例：

注意 − `` 標籤已棄用，預計將在未來版本的 HTML 中移除。因此不應使用它們，建議使用 CSS 樣式來操作字型。但出於學習目的，本章將使用 `` 標籤的示例。

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

我們可以使用樣式表如下重寫上面的示例：

線上演示 
<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

這將產生以下結果：

您可以在 HTML 文件中以三種方式使用 CSS：

  • 外部樣式表 − 在單獨的 .css 檔案中定義樣式表規則，然後使用 HTML `` 標籤將該檔案包含在您的 HTML 文件中。

  • 內部樣式表 − 使用 `