HTML - Quick Guide

HTML代表著ext語言，是編寫網頁最常用的語言。

超文本是指網頁（HTML文檔）連結在一起的方式。因此，網頁上可用的連結稱爲超文本。

顧名思義，HTML是一種標記語言，這意味著您可以使用HTML簡單地「標記」一個文本文檔，其中包含一些標籤，告訴Web瀏覽器如何組織它來顯示。

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

現在，藉助於HTML語言中可用的不同標記，HTML正被廣泛用于格式化web頁面。

Basic HTML Document

在最簡單的形式中，下面是一個HTML文檔的示例−

Live Demo

<!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 Tags

如前所述，HTML是一種標記語言，它使用各種標記來格式化內容。這些標記包含在大括號中。除了少數標記外，大多數標記都有相應的結束標記。例如，<html>有其結束標記<html>和<body>標記有其結束標記<body>等。

上面的HTML文檔示例使用以下標記−

Sr.No Tag & Description

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）建議使用從HTML4開始的小寫標記。

HTML Document Structure

典型的HTML文檔將具有以下結構−

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

我們將在後面的章節中研究所有的頭和體標記，但是現在讓我們看看什麼是文檔聲明標記。

The <!DOCTYPE> Declaration

<！web瀏覽器使用DOCTYPE>聲明標記來了解文檔中使用的HTML的版本。HTML的當前版本是5，它使用了以下聲明−

<!DOCTYPE html>

根據使用的HTML版本，HTML文檔中還可以使用許多其他聲明類型。我們將在討論時看到更多有關此的詳細信息<！DOCTYPE…>標記以及其他HTML標記。

HTML - Basic Tags

Heading Tags

任何文檔都以標題開頭。你可以用不同大小的標題。HTML還有六個級別的標題，它們使用元素<h1>、<h2>、<h3>、<h4>、<h5>、和<h6>。當顯示任何標題時，瀏覽器會在該標題前添加一行，在該標題後添加一行。

Example

Live Demo

<!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>

這將產生以下結果&負;

Paragraph Tag

<p>標記提供了一種將文本結構爲不同段落的方法。文本的每個段落都應該位於開頭標記和結尾標記之間，如下面示例中所示;

Example

Live Demo

<!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>

這將產生以下結果&負;

Line Break Tag

每當您使用<br/>元素時，它後面的任何內容都從下一行開始。這個標記是一個空的元素的例子，在這個元素中，您不需要打開和關閉標記，因爲它們之間沒有任何東西可以插入。

<br/>標記在字符br和正斜槓之間有一個空格。如果省略此空格，則較舊的瀏覽器將無法呈現換行符，而如果您錯過了正斜槓字符，並且只使用<br>它在XHTML中無效。

Example

Live Demo

<!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>

這將產生以下結果&負;

Centering Content

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

Example

Live Demo

<!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>

這將產生以下結果&負;

Horizontal Lines

水平線用於可視地拆分文檔的各個部分。<hr>標記創建從文檔中當前位置到右邊距的行，並相應地打斷該行。

例如，您可能需要在兩個段落之間畫一條線，如下例所示−

Example

Live Demo

<!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中無效

Preserve Formatting

有時，您希望文本遵循HTML文檔中的確切格式。在這些情況下，可以使用預先格式化的標記<pre>。

開始標記和結束標記之間的任何文本都將保留源文檔的格式。

Example

Live Demo

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

這將產生以下結果&負;

嘗試使用相同的代碼，但不要將其放在<pre>..</pre>標記中

Nonbreaking Spaces

假設你想用「12個憤怒的人」這個短語，在這裡，你不想讓瀏覽器把「12個憤怒的人」和「男人」分成兩行;

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

在某些情況下，如果不希望客戶端瀏覽器中斷文本，則應使用非中斷空間實體 ，而不是普通空間。例如，當在一個段落中對「12個憤怒的人」進行編碼時，您應該使用類似於以下代碼的代碼&負;

Example

Live Demo

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

這將產生以下結果&負;

HTML - Elements

HTML元素由起始標記定義。如果元素包含其他內容，則以結束標記結尾，其中元素名稱前面是一個正斜槓，如下所示，帶有幾個標記−

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

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

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

HTML Tag vs. Element

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

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

Nested HTML Elements

允許將一個HTML元素放在另一個HTML元素中;

Example

Live Demo

<!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 - Attributes

我們很少看到HTML標記及其用法，如heading tags<h1>、<h2>、paragraph tag<p>和其他標記。到目前爲止，我們以最簡單的形式使用它們，但是大多數HTML標記也可以有屬性，這些屬性是額外的信息位。

屬性用於定義HTML元素的特性，並放置在元素的開始標記中。所有屬性都由兩部分組成−a代表和a價值

名稱是要設置的屬性。例如，示例中的paragraph<p>元素帶有一個名爲對齊的屬性，您可以使用該屬性指示頁面上段落的對齊方式。

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

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

Example

Live Demo

<!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>

這將顯示以下結果−

Core Attributes

可以在大多數HTML元素（儘管不是全部）上使用的四個核心屬性是−

Id

Title

Class

Style

The Id Attribute

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>

The title Attribute

title屬性爲元素提供建議的標題。它們的title屬性語法與id屬性&minus的解釋相似;

此屬性的行爲將取決於承載它的元素，儘管當光標移到元素上或加載元素時，它通常顯示爲工具提示。

示例

Live Demo

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

這將產生以下結果&負;

現在，試著將光標移到「標題標籤示例」上，您將看到代碼中使用的任何標題都將顯示爲光標的工具提示。

The class Attribute

類屬性用於將元素與樣式表關聯，並指定元素的類。在學習層疊樣式表（CSS）時，您將了解更多關於類屬性的使用。所以現在你可以避開它。

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

class = "className1 className2 className3"

The style Attribute

style屬性允許您在元素中指定層疊樣式表（CSS）規則。

Live Demo

<!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屬性，以及在格式化內容時如何使用它們。

Internationalization Attributes

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

dir

lang

xml:lang

The dir Attribute

dir屬性允許您向瀏覽器指示文本的流動方向。dir屬性可以取兩個值中的一個，如−後面的表中所示;

Value Meaning

ltr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

示例

Live Demo

<!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>

這將產生以下結果&負;

當在<html>標記中使用dir屬性時，它將確定文本在整個文檔中的顯示方式。當在另一個標記中使用時，它僅控制該標記內容的文本方向。

The lang Attribute

lang屬性允許您指示文檔中使用的主語言，但此屬性保留在HTML中只是爲了與早期版本的HTML向後兼容。這個屬性已經被新的XHTML文檔中的xml:lang屬性替換。

lang屬性的值是ISO-639標準雙字符語言代碼。有關語言代碼的完整列表，請查看html語言代碼：iso 639。

示例

Live Demo

<!DOCTYPE html> <html lang = "en"> <head> <title>English Language Page</title> </head> <body> This page is using English Language </body> </html>

這將產生以下結果&負;

The xml:lang Attribute

xml:lang屬性是對lang屬性的XHTML替換。如前一節所述，xml:lang屬性的值應該是一個ISO-639國家代碼。

Generic Attributes

下面是一個包含一些其他屬性的表，這些屬性很容易與許多HTML標記一起使用。

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an HTML element.

bgcolor numeric, hexidecimal, RGB values Places a background color behind an element

background URL Places a background image behind an element

id User Defined Names an element for use with Cascading Style Sheets.

class User Defined Classifies an element for use with Cascading Style Sheets.

width Numeric Value Specifies the width of tables, images, or table cells.

height Numeric Value Specifies the height of tables, images, or table cells.

title User Defined "Pop-up" title of the elements.

我們將看到相關的例子，因爲我們將繼續研究其他HTML標記。有關HTML標記和相關屬性的完整列表，請檢查對HTML標記列表的引用。

HTML - Formatting

如果使用文字處理器，則必須熟悉使文本加粗、斜體或帶下劃線的功能;這只是十個選項中的三個選項，可用於指示文本如何在HTML和XHTML中顯示。

Bold Text

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

Example

Live Demo

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

這將產生以下結果&負;

Italic Text

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

Example

Live Demo

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

這將產生以下結果&負;

Underlined Text

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

Example

Live Demo

<!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 Text

在<strike>…<strike>元素中出現的任何內容都顯示爲刪除線，它是貫穿文本的一條細線，如下圖所示;

Example

Live Demo

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

這將產生以下結果&負;

Monospaced Font

元素的內容用等寬字體書寫。大多數字體被稱爲可變寬度字體，因爲不同的字母具有不同的寬度（例如，字母「m」比字母「i」寬）。但是，在等寬字體中，每個字母的寬度都相同。

Example

Live Demo

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

這將產生以下結果&負;

Superscript Text

<sup>…<sup>元素的內容是用上標寫的;所用的字體大小與它周圍的字符大小相同，但顯示在其他字符上方半個字符的高度。

Example

Live Demo

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

這將產生以下結果&負;

Subscript Text

<sub>…<sub>元素的內容以下標形式寫入;使用的字體大小與周圍的字符相同，但顯示在其他字符下半個字符的高度。

Example

Live Demo

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

這將產生以下結果&負;

Inserted Text

在<ins>..<ins>元素中出現的任何內容都顯示爲插入的文本。

Example

Live Demo

<!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>

這將產生以下結果&負;

Deleted Text

在<del>…<del>元素中出現的任何內容都顯示爲已刪除文本。

Example

Live Demo

<!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>

這將產生以下結果&負;

Larger Text

<big>…<big>元素的內容顯示爲比其周圍文本的其餘部分大一個字體大小，如下所示;

Example

Live Demo

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

這將產生以下結果&負;

Smaller Text

<small>…<small>元素的內容顯示爲比其周圍文本的其餘部分小一個字體大小，如下圖所示;

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html>

這將產生以下結果&負;

Grouping Content

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

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

Example

Live Demo

<!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" bgcolor = "white"> <h5>Content Articles</h5> <p>Actual content goes here.....</p> </div> </body> </html>

這將產生以下結果&負;

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

Example

Live Demo

<!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 - Phrase Tags

短語標記是爲特定目的而設計的，儘管它們的顯示方式與其他基本標記類似，如<b>、<i>、<pre>和<tt>，如前一章所述。本章將帶您瀏覽所有重要的短語標記，讓我們開始逐一查看它們。

Emphasized Text

元素中出現的任何內容都將顯示爲強調文本。

Example

Live Demo

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

這將產生以下結果&負;

Marked Text

與in<mark>…<mark>元素一起出現的任何內容都顯示爲用黃色墨水標記。

Example

Live Demo

<!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 Text

元素中出現的任何內容都顯示爲重要文本。

Example

Live Demo

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

這將產生以下結果&負;

Text Abbreviation

您可以將文本放在「開始」和「結束」標記中進行縮寫。如果存在，title屬性必須包含此完整描述，而不能包含其他內容。

Example

Live Demo

<!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 Element

<acronym>元素允許您指示<acronym>和<acronym>標記之間的文本是一個縮寫。

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

Example

Live Demo

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

這將產生以下結果&負;

Text Direction

<bdo>…<bdo>元素表示雙向覆蓋，用於覆蓋當前文本方向。

Example

Live Demo

<!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>

這將產生以下結果&負;

Special Terms

元素（或HTML Definition元素）允許您指定要引入的特殊術語。它的用法類似於段落中間的斜體字。

通常，您在第一次引入關鍵術語時會使用<dfn>元素。最新的瀏覽器以斜體字體呈現<dfn>元素的內容。

Example

Live Demo

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

這將產生以下結果&負;

Quoting Text

當你想引用另一個來源的文章時，你應該把它放在<blockquote>…<blockquote>標籤之間。

元素中的文本通常從周圍文本的左右邊緣縮進，有時使用斜體字體。

Example

Live Demo

<!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>

這將產生以下結果&負;

Short Quotations

當您要在句子中添加雙引號時，將使用<q>…</q>元素。

Example

Live Demo

<!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>

這將產生以下結果&負;

Text Citations

如果您引用的是文本，則可以指明將其放置在「打開」標記和「關閉」標記之間的源

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

Example

Live Demo

<!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>

這將產生以下結果&負;

Computer Code

任何出現在網頁上的編程代碼都應該放在<code>…<code>標記中。通常，<code>元素的內容以等寬字體顯示，就像大多數編程書籍中的代碼一樣。

Example

Live Demo

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

這將產生以下結果&負;

Keyboard Text

在談論計算機時，如果要告訴讀者輸入一些文本，可以使用<kbd>…<kbd>元素指示應鍵入的內容，如本例所示。

Example

Live Demo

<!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>

這將產生以下結果&負;

Programming Variables

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

Example

Live Demo

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

這將產生以下結果&負;

Program Output

<samp>…<samp>元素表示程序的示例輸出和腳本等。同樣，它主要用於記錄編程或編碼概念。

Example

Live Demo

<!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 Text

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

Example

Live Demo

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

這將產生以下結果&負;

HTML - Meta Tags

HTML允許您以多種方式指定元數據-有關文檔的其他重要信息。元元素可用於包括描述HTML文檔屬性的名稱/值對，如author、expiry date、關鍵字列表、文檔author等。

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

根據要在文檔中保留的信息，可以在文檔中包含一個或多個元標記，但通常，元標記不會影響文檔的物理外觀，因此從外觀角度看，是否包含它們並不重要。

Adding Meta Tags to Your Documents

您可以通過將<meta>標記放在由<head>和<head>標記表示的文檔標題中來向網頁添加元數據。除了核心屬性之外，元標記還可以有以下屬性−

Sr.No Attribute & Description

1
代表

屬性的名稱。可以是任何東西。示例包括，關鍵字，描述，作者，修訂，生成器等。

2
content
指定屬性的值。

3
方案

指定用於解釋屬性值的方案（在content屬性中聲明）。

4
http等效

用於http響應消息頭。例如，可以使用http-equiv刷新頁面或設置cookie。值包括內容類型、過期時間、刷新和設置cookie。

Specifying Keywords

您可以使用<meta>標記指定與文檔相關的重要關鍵字，稍後這些關鍵字將由搜尋引擎在爲網頁編制索引以進行搜索時使用。

Example

下面是一個示例，我們在其中添加HTML、元標記、元數據作爲文檔的重要關鍵字。

Live Demo

<!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>

這將產生以下結果&負;

Document Description

您可以使用<meta>標記對文檔進行簡短描述。這同樣可以用於各種搜尋引擎，同時索引您的網頁搜索目的。

Example

Live Demo

<!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>

Document Revision Date

您可以使用<meta>標記提供有關上次更新文檔的時間的信息。刷新網頁時，此信息可供各種web瀏覽器使用。

Example

Live Demo

<!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>

Document Refreshing

標記可用於指定網頁自動刷新的持續時間。

Example

如果希望頁面每5秒刷新一次，請使用以下語法。

Live Demo

<!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>

Page Redirection

您可以使用<meta>標記將頁面重定向到任何其他網頁。如果要在特定秒數後重定向頁面，也可以指定持續時間。

Example

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

Live Demo

<!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 = http://www.tutorialspoint.com" /> </head> <body> <p>Hello HTML5!</p> </body> </html>

Setting Cookies

Cookies是數據，存儲在計算機上的小文本文件中，它在web瀏覽器和web伺服器之間進行交換，以根據web應用程式的需要跟蹤各種信息。

您可以使用<meta>標記在客戶端存儲cookies，稍後Web伺服器可以使用此信息跟蹤網站訪問者。

Example

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

Live Demo

<!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，並在用戶退出瀏覽器時被刪除。

note
Setting Author Name

可以使用元標記在網頁中設置作者名稱。請參見下面的示例−

Example

Live Demo

<!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>

Specify Character Set

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

Example

默認情況下，Web伺服器和Web瀏覽器使用ISO-8859-1（Latin1）編碼來處理網頁。下面是設置UTF-8編碼的示例−

Live Demo

<!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 encoding−

Live Demo

<!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 - Comments

注釋是一段代碼，任何web瀏覽器都會忽略它。在HTML代碼中添加注釋（尤其是在複雜文檔中）是一種很好的做法，它可以指示文檔的各個部分，並向任何查看代碼的人添加任何其他注釋。注釋可以幫助您和其他人理解您的代碼並提高代碼的可讀性。

HTML注釋放在<之間;！-- ... -->標記。所以，任何與in<一起放置的內容;！-- ... -->標記將被視爲注釋，瀏覽器將完全忽略。

Example

Live Demo

<!DOCTYPE html> <html> <head>  <title>This is document title</title> </head>  <body> <p>Document content goes here.....</p> </body> </html>

這將產生以下結果，而不顯示作爲注釋一部分的內容;

Valid vs Invalid Comments

注釋不嵌套，這意味著不能將注釋放入另一個注釋中。其次，除了作爲結束標記的一部分外，雙短劃線序列「-」可能不會出現在注釋中。還必須確保注釋字符串的開頭沒有空格。

Example

在這裡，給定的注釋是有效的注釋，將被瀏覽器清除。

Live Demo

<!DOCTYPE html> <html> <head> <title>Valid Comment Example</title> </head> <body>  <p>Document content goes here.....</p> </body> </html>

這將產生以下結果&負;

但是，以下行不是有效的注釋，將由瀏覽器顯示。這是因爲左尖括號和感嘆號之間有空格。

Live Demo

<!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>

這將產生以下結果&負;

Multiline Comments

到目前爲止，我們已經看到了單行注釋，但是HTML也支持多行注釋。

您可以通過特殊的開始標記對多行進行注釋<！--以及結束標記-->放在第一行之前和最後一行的末尾，如下面的示例所示。

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>Multiline Comments</title> </head> <body>  <p>Document content goes here.....</p> </body> </html>

這將產生以下結果&負;

Conditional Comments

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

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>Conditional Comments</title>  </head> <body> <p>Document content goes here.....</p> </body> </html>

在這種情況下，您將需要根據不同版本的Internet Explorer應用不同的樣式表，在這種情況下，條件注釋將非常有用。

Using Comment Tag

很少有瀏覽器支持<comment>標記來注釋HTML代碼的一部分。

注意−HTML5中不推薦使用的<注釋>標記。不要使用此元素。

Example

Live Demo

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

如果您使用IE，那麼它將產生以下結果&負;

但如果你不使用IE，那麼它將產生以下結果&負;

Commenting Script Code

儘管您將在單獨的教程中學習使用HTML的Java Script，但這裡必須注意，如果您在HTML代碼中使用Java腳本或VB腳本，建議將該腳本代碼放在適當的HTML注釋中，以便舊瀏覽器能夠正常工作。

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>Commenting Script Code</title> <script>  </script> </head> <body> <p>Hello , World!</p> </body> </html>

這將產生以下結果&負;

Commenting Style Sheets

雖然您將在單獨的教程中學習如何將樣式表與HTML一起使用，但這裡必須注意，如果您在HTML代碼中使用層疊樣式表（CSS），則建議將該樣式表代碼放在適當的HTML注釋中，以便舊瀏覽器能夠正常工作。

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>Commenting Style Sheets</title> <style>  </style> </head> <body> <div class = "example">Hello , World!</div> </body> </html>

這將產生以下結果&負;

HTML - Images

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

Insert Image

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

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

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

Example

爲了嘗試下面的示例，讓我們將HTML文件test.htm和圖像文件test.png放在同一個目錄中−

Live Demo

<!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屬性是一個強制屬性，如果無法顯示圖像，則該屬性指定圖像的備用文本。

Set Image Location

通常我們把所有的圖像放在一個單獨的目錄中。因此，讓我們將HTML文件test.htm保存在主目錄中，並在主目錄中創建一個子目錄image s。

Example

假設我們的圖像位置是「image/test.png」，請嘗試以下示例−

Live Demo

<!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>

這將產生以下結果&負;

Set Image Width/Height

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

Example

Live Demo

<!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>

這將產生以下結果&負;

Set Image Border

默認情況下，圖像周圍會有一個邊框，您可以使用border屬性根據像素指定邊框厚度。厚度爲0表示圖片周圍沒有邊框。

Example

Live Demo

<!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>

這將產生以下結果&負;

Set Image Alignment

默認情況下，圖像將在頁面左側對齊，但您可以使用對齊屬性將其設置在頁面的中心或右側。

Example

Live Demo

<!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>

這將產生以下結果&負;

Free Web Graphics

對於包括模式在內的免費網絡圖形，您可以查看免費網絡圖形

HTML - Tables

HTML表格允許web作者將文本、圖像、連結、其他表格等數據排列成單元格的行和列。

HTML表格使用<table>標記創建，其中<tr>標記用於創建表格行，<td>標記用於創建數據單元格。默認情況下，<td>下的元素是規則的和左對齊的

Example

Live Demo

<!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>

這將產生以下結果&負;

在這裡，邊框是<table>標記的一個屬性，用於在所有單元格中放置邊框。如果不需要邊框，則可以使用border=「0」。

Table Heading

可以使用<th>標記定義表標題。此標記將替換用於表示實際數據單元格的標記。通常，您會將最上面一行作爲表標題，如下所示，否則您可以在任何行中使用<th>元素。默認情況下，<th>標記中定義的標題居中且粗體。

Example

Live Demo

<!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 and Cellspacing Attributes

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

Example

Live Demo

<!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 and Rowspan Attributes

如果要將兩列或多列合併爲一列，則將使用colspan屬性。如果要合併兩個或多個行，則使用rowspan的類似方法。

Example

Live Demo

<!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>

這將產生以下結果&負;

Tables Backgrounds

您可以使用以下兩種方法之一設置表背景−

背景色attribute−您可以爲整個表格設置背景色，也可以僅爲一個單元格設置背景色。

background屬性−您可以爲整個表格或僅爲一個單元格設置背景圖像。

也可以使用border color屬性設置邊框顏色。

注意：HTML5中不推薦使用的bgcolor、background和bordercolor屬性。不要使用這些屬性。

Example

Live Demo

<!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目錄中提供的圖像。

Live Demo

<!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>

這將產生以下結果。此處背景圖像不適用於表的標題。

Table Height and Width

您可以使用寬度和高度屬性設置表格的寬度和高度。可以按像素或可用螢幕面積百分比指定表格寬度或高度。

Example

Live Demo

<!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>

這將產生以下結果&負;

Table Caption

標題標記將用作表的標題或說明，並顯示在表的頂部。在較新版本的HTML/XHTML中不推薦使用此標記。

Example

Live Demo

<!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>

這將產生以下結果&負;

Table Header, Body, and Footer

桌子可以分爲三部分：頭、身和腳。head和foot與word處理的文檔中的header和footer非常相似，每個頁面的header和footer都保持不變，而body是表的主要內容持有者。

分隔桌子的頭、身和腳的三個元素是&負;

<thead>−創建單獨的表格標題。

<tbody>−表示表格的主體。

<tfoot>−創建單獨的表頁腳。

一個表可以包含多個<tbody>元素來指示不同的頁或數據組。但值得注意的是，<thead>和<tfoot>標記應該出現在<tbody>

Example

Live Demo

<!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>

這將產生以下結果&負;

Nested Tables

你可以在另一張桌子裡面用一張桌子。不僅是表，您還可以使用表數據標記中的幾乎所有標記<td>。

Example

下面是在表單元格中使用另一個表和其他標記的示例。

Live Demo

<!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 - Lists

HTML爲web作者提供了三種指定信息列表的方法。所有列表都必須包含一個或多個列表元素。列表可以包含−

<ul>減;無序列表。這將使用普通項目符號列出項目。

<ol>減;有序列表。這將使用不同的數字方案列出您的項目。

<dl>定義列表。這將按照字典中的排列方式排列項目。

HTML Unordered Lists

無序列表是沒有特殊順序或序列的相關項的集合。此列表是使用HTML<ul>標記創建的。列表中的每一項都標有一個項目符號。

Example

Live Demo

<!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>

這將產生以下結果&負;

The type Attribute

您可以使用標記的類型屬性指定您喜歡的項目符號類型。默認情況下，它是一張光碟。以下是可能的選項&負;

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

Example

下面是我們使用<ul type=「square」>

Live Demo

<!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>

這將產生以下結果&負;

Example

下面是我們使用<ul type=「disc」>&減號的示例;

Live Demo

<!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>

這將產生以下結果&負;

Example

下面是我們使用<ul type=「circle」>&負;

Live Demo

<!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 Ordered Lists

如果您需要將項目放入編號列表而不是項目符號列表，則將使用HTML排序列表。此列表是使用<ol>標記創建的。編號從一開始，對於每個用<li>標記的連續有序列表元素，編號將遞增一;。

Example

Live Demo

<!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>

這將產生以下結果&負;

The type Attribute

您可以使用標記的類型屬性指定您喜歡的編號類型。默認情況下，它是一個數字。以下是可能的選項&負;

<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.

Example

下面是我們使用<ol type=「1」>

Live Demo

<!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>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「I」>

Live Demo

<!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>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「i」>

Live Demo

<!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>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「A」>

Live Demo

<!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>

這將產生以下結果&負;

Example

下面是我們使用<ol type=「a」>

Live Demo

<!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>

這將產生以下結果&負;

The start Attribute

您可以使用標記的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.

Example

下面是我們使用<ol type=「i」start=「4」>

Live Demo

<!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 Definition Lists

HTML和XHTML支持一種列表樣式，稱爲定義列表（definition lists），其中的條目像在字典或百科全書中一樣列出。定義列表是表示術語表、術語列表或其他名稱/值列表的理想方式。

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

<dl> − Defines the start of the list

<dt> − A term

<dd> − Term definition

</dl> − Defines the end of the list

Example

Live Demo

<!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 - Text Links

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

超連結允許訪問者通過單擊單詞、短語和圖像在網站之間導航。因此，您可以使用網頁上可用的文本或圖像創建超連結。

注意−我建議您通過一個簡短的教程了解url

Linking Documents

使用HTML標記<A>指定連結;。此標記稱爲「錨定標記」（anchor tag），打開標記和關閉標記之間的任何內容都將成爲連結的一部分，用戶可以單擊該部分以訪問連結的文檔。下面是使用標記的簡單語法。

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

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a> </body> </html>

這將生成以下結果，您可以在其中單擊生成的連結，以訪問教程點的主頁（在本例中）。

The target Attribute

我們在前面的示例中使用了目標屬性。此屬性用於指定打開連結文檔的位置。以下是可能的選項&負;

Sr.No Option & Description

1
空白

在新窗口或選項卡中打開連結文檔。

2
_自我

在同一框架中打開連結文檔。

3
_母公司

在父框架中打開連結文檔。

4
_頂部

在窗口的整個正文中打開連結的文檔。

5
目標幀

打開名爲targetframe的連結文檔。

Example

嘗試下面的示例來理解爲目標屬性提供的幾個選項的基本區別。

Live Demo

<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href = "https://www.tutorialspoint.com/"> </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>

這將產生以下結果，您可以在其中單擊不同的連結，以了解爲目標屬性提供的各種選項之間的差異。

Use of Base Path

連結與同一網站相關的HTML文檔時，不需要爲每個連結提供完整的URL。如果在HTML文檔頭中使用<base>標記，則可以將其刪除。此標記用於爲所有連結提供基本路徑。因此，您的瀏覽器將把給定的相對路徑連接到此基路徑，並生成一個完整的URL。

Example

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

Live Demo

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

這將產生以下結果，您可以單擊生成的連結HTML Tutorial來訪問HTML Tutorial。

Linking to a Page Section

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

注意−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

Setting Link Colors

您可以使用<body>標記的屬性設置連結、活動連結和已訪問連結的顏色。

Example

將以下內容保存在test.htm中，並在任何web瀏覽器中打開它，以查看屬性如何工作。

Live Demo

<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href = "https://www.tutorialspoint.com/"> </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>

這將產生以下結果。只需在點擊前檢查連結的顏色，然後在激活連結和訪問連結時檢查其顏色。

Download Links

您可以創建文本連結以使您的PDF、DOC或ZIP文件可下載。這非常簡單;您只需要給出可下載文件的完整URL，如下所示−

Live Demo

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

這將生成以下連結並用於下載文件。

File Download Dialog Box

有時，您希望提供一個選項，讓用戶單擊某個連結，它將彈出一個「文件下載」框給用戶，而不是顯示實際內容。這非常簡單，可以在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 - Image Links

我們已經了解了如何使用文本創建超文本連結，還學習了如何在網頁中使用圖像。現在，我們將學習如何使用圖像創建超連結。

Example

使用圖像作爲超連結很簡單。我們只需要在超連結中的文本位置使用一個圖像，如下所示;

Live Demo

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

這將生成以下結果，您可以在其中單擊圖像以到達教程點的主頁。

這是使用圖像創建超連結的最簡單方法。接下來我們將看到如何創建滑鼠敏感的圖像連結。

Mouse-Sensitive Images

HTML和XHTML標準提供了一個特性，允許您在單個圖像中嵌入許多不同的連結。可以基於圖像上可用的不同坐標在單個圖像上創建不同的連結。一旦不同的連結附加到不同的坐標，我們就可以單擊圖像的不同部分來打開目標文檔。這種滑鼠敏感的圖像稱爲圖像地圖。

有兩種方法可以創建圖像地圖−

伺服器端圖像映射−這是由<img>標記的is map屬性啓用的，需要訪問伺服器和相關的圖像映射處理應用程式。

客戶端圖像映射−這是使用<img>標記的usemap屬性以及相應的<map>和<area>標記創建的。

Server-Side Image Maps

在這裡，您只需將圖像放在一個超連結中，並使用使其成爲特殊圖像的ismap屬性，當用戶單擊圖像中的某個位置時，瀏覽器將滑鼠指針的坐標以及在<a>標記中指定的URL傳遞給web伺服器。伺服器使用滑鼠指針坐標來確定要傳遞迴瀏覽器的文檔。
使用ismap時，containing<a>標記的ref屬性必須包含伺服器應用程式（如cgi或PHP腳本等）的URL，以便基於傳遞的坐標處理傳入請求。

滑鼠位置的坐標是從圖像左上角開始計算的螢幕像素，從（0,0）開始。前面帶有問號的坐標將添加到URL的末尾。

例如，如果用戶單擊以下圖像左上角的20個像素以上和30個像素以下−

它是由以下代碼片段生成的−

Live Demo

<!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 file處理，您可以將您喜歡的任何文檔連結到這些坐標−

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

這樣，您可以將不同的連結分配給圖像的不同坐標，單擊這些坐標後，您可以打開相應的連結文檔。要了解有關ismap屬性的更多信息，可以檢查如何使用Image ismap？

注意−學習Perl編程時，您將學習CGI編程。您可以使用PHP或任何其他腳本編寫腳本來處理這些傳遞的坐標。現在，讓我們集中學習HTML，稍後您可以重新訪問本節。

Client-Side Image Maps

客戶端圖像映射由<img/>標記的usemap屬性啓用，並由特殊的<map>和<area>擴展標記定義。

將要形成地圖的圖像作爲普通圖像使用<img/>標記插入到頁面中，但它帶有一個名爲usemap的額外屬性。usemap屬性的值是將在<map>標記中用於連結地圖和圖像標記的值。<map>和<area>標記定義了所有圖像坐標和相應的連結。

地圖標記中的<區域>標記指定形狀和坐標，以定義圖像上每個可單擊熱點的邊界。下面是來自圖像地圖的一個例子−

Live Demo

<!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"/>  <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>

這將產生以下結果&負;

Coordinate System

坐標的實際值完全取決於所討論的形狀。這裡是一個總結，後面是詳細的例子;

礦牀b-rect'x-sub-small sub sub到small.A small sub，y-sub-small\u 1/small-small-small-1-small-sub，x-sub-small sub-second base，small sub-small sub-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south-south

x₁和y₁是矩形左上角的坐標;x₂和y₂是右下角的坐標。

圓=x_c，y_c，半徑

x_c和y_c是圓中心的坐標，半徑是圓的半徑。以200,50爲中心、半徑爲25的圓將具有屬性coords=「200,50,25」

poly=x₁，y₁，x₂，y₂，x₃，y₃。。。x_n，y_n

各種x-y對定義多邊形的頂點（點），從一個點到下一個點繪製一條「線」。菱形多邊形的頂點在最寬點處爲20、20和40像素，將具有屬性coords=「20、20、40、40、20、60、0、40」。

所有坐標都相對於圖像的左上角（0,0）。每個形狀都有一個相關的URL。你可以使用任何圖像軟體來知道不同位置的坐標。

HTML - Email Links

在網頁上放置一個HTML電子郵件連結並不困難，但它可能會給您的電子郵件帳戶帶來不必要的垃圾郵件問題。有些人可以運行程序來收集這些類型的電子郵件，然後用它們以各種方式發送垃圾郵件。

你可以有另一個選擇，方便人們給你發送電子郵件。一種選擇是使用HTML表單收集用戶數據，然後使用PHP或CGI腳本發送電子郵件。

一個簡單的例子，請檢查我們的聯繫我們的表單。我們使用此表單獲取用戶反饋，然後使用一個CGI程序收集此信息並將電子郵件發送給給定的電子郵件ID。

注意−您將在HTML表單中了解HTML表單並且您將在另一個教程中了解CGI。

HTML Email Tag

HTML<a>標記提供指定電子郵件地址以發送電子郵件的選項。當使用<a>標記作爲電子郵件標記時，您將使用mailto:email address和ref屬性。下面是使用mailto而不是使用http的語法。

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

此代碼將生成以下連結，可用於發送電子郵件。

Send Email

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

Default Settings

您可以指定默認的電子郵件主題和電子郵件正文以及您的電子郵件地址。下面是使用默認主題和正文的示例。

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

此代碼將生成以下連結，可用於發送電子郵件。

Send Feedback

HTML - Frames

HTML框架用於將瀏覽器窗口分成多個部分，每個部分可以加載單獨的HTML文檔。瀏覽器窗口中的幀集合稱爲幀集。窗口按與表組織方式相似的方式劃分爲框架：行和列。

Disadvantages of Frames

使用框架並沒有什麼缺點，因此不建議在網頁中使用框架;

一些較小的設備常常無法處理幀，因爲它們的螢幕不夠大，無法分割。

有時，由於螢幕解析度不同，您的頁面將在不同的計算機上顯示不同的內容。

瀏覽器的後退按鈕可能無法按用戶希望的那樣工作。

仍有少數瀏覽器不支持幀技術。

Creating Frames

要在頁面上使用框架，我們使用<框架集>標記，而不是<正文>標記。<frameset>標記定義了如何將窗口劃分爲框架。<frameset>標記的行屬性定義水平框架，而列屬性定義垂直框架。每個框架都由<frame>標記表示，它定義了哪些HTML文檔應打開到框架中。

注意−在HTML5中不推薦使用<frame>標記。不要使用此元素。

Example

下面是創建三個水平框架的示例−

Live Demo

<!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>

這將產生以下結果&負;

Example

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

Live Demo

<!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>

這將產生以下結果&負;

The <frameset> Tag Attributes

以下是<框架集>標記減號;的重要屬性;

Sr.No Attribute & Description

1
科爾斯

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

絕對值（像素）。例如，要創建三個垂直框架，請使用cols=「100，500，100」。

瀏覽器窗口的百分比。例如，要創建三個垂直框架，請使用cols=「10%，80%，10%」。

使用通配符。例如，要創建三個垂直框架，請使用cols=「10%，*，10%」。在這種情況下，通配符占據窗口的其餘部分。

作爲瀏覽器窗口的相對寬度。例如，要創建三個垂直框架，請使用cols=「3*，2*，1*」。這是百分比的另一種選擇。可以使用瀏覽器窗口的相對寬度。在這裡，窗戶被分成六分之一：第一列占據窗戶的一半，第二列占據三分之一，第三列占據六分之一。

2
行

此屬性的工作方式與cols屬性類似，並採用相同的值，但它用於指定框架集中的行。例如，要創建兩個水平框架，請使用rows=「10%，90%」。您可以按照上面對列的說明指定每行的高度。

3
邊界

此屬性以像素爲單位指定每個幀的邊框寬度。例如，border=「5」。值爲零表示沒有邊界。

4
框架邊框

此屬性指定是否應在幀之間顯示三維邊框。此屬性的值爲1（是）或0（否）。例如frameborder=「0」不指定邊框。

5
framespacing

此屬性指定幀集中幀之間的空間量。這可以取任何整數值。例如framespacing=「10」表示每個幀之間應該有10個像素的間距。

The <frame> Tag Attributes

以下是<frame>tag−的重要屬性;

Sr.No Attribute & Description

1
src公司

此屬性用於指定應在幀中加載的文件名。它的值可以是任何URL。例如，src=「/html/top_frame.htm」將加載html目錄中可用的html文件。

2
代表

此屬性允許您爲幀命名。它用於指示文檔應加載到哪個框架中。當您希望在一個框架中創建連結，將頁面加載到另一個框架中時，這一點尤其重要，在這種情況下，第二個框架需要一個名稱來將自己標識爲連結的目標。

3
框架邊框

此屬性指定是否顯示該幀的邊框;如果指定了邊框，則它將覆蓋<frameset>標記上的frameborder屬性中給定的值，並且可以採用1（是）或0（否）的值。

4
邊緣寬度

此屬性允許您指定框架邊框的左右兩側與框架內容之間的空間寬度。該值以像素爲單位。例如marginwidth=「10」。

5
瑪吉涅特（Marginheight）

此屬性允許您指定框架邊框頂部和底部及其內容之間的空間高度。該值以像素爲單位。例如marginheight=「10」。

6
北歐化

默認情況下，可以通過在幀的邊框上單擊並拖動來調整任何幀的大小。noresize屬性防止用戶調整幀的大小。例如noresize=「noresize」。

7
滾動

此屬性控制出現在框架上的滾動條的外觀。這將採用「是」、「否」或「自動」值。例如，scrolling=「no」表示它不應該有滾動條。

8
朗格德斯

此屬性允許您提供指向另一頁的連結，該頁包含對框架內容的長描述。例如longdesc=「framedescription.htm」

Browser Support for Frames

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

因此，您必須將<body>元素放置在<noframes>元素中，因爲<frameset>元素應該替換<body>元素，但如果瀏覽器不理解<frameset>元素，則它應該理解<noframes>元素中包含的<body>元素中的內容。
你可以給有舊瀏覽器的用戶放一些好消息。例如，對不起！！您的瀏覽器不支持框架。如上例所示。

Frame's name and target attributes

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

讓我們看看下面的示例，其中test.htm文件包含以下代碼−

Live Demo

<!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文件實現。對於菜單欄中可用的所有三個連結，我們已將目標框架稱爲主頁，因此每當您單擊菜單欄中的任何連結時，都會在主頁中打開可用連結。

跟蹤是菜單的內容

Live Demo

<!DOCTYPE html> <html> <body bgcolor = "#4a7d49"> <a href = "http://www.google.com" target = "main_page">Google</a> <br /> <br /> <a href = "http://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文件的內容−

Live Demo

<!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還可以採用以下值之一&負;

Sr.No Option & Description

1
_自我

將頁面加載到當前框架中。

2
空白

將頁面加載到新的瀏覽器窗口中。打開一扇新窗戶。

3
_母公司

將頁面加載到父窗口中，對於單個框架集，父窗口是主瀏覽器窗口。

4
_頂部

將頁面加載到瀏覽器窗口中，替換任何當前幀。

5
目標幀

將頁面加載到命名的targetframe中。

HTML - Iframes

您可以使用HTML標記定義內聯框架<iframe>。<iframe>標記與<frameset>標記沒有任何關係，相反，它可以出現在文檔中的任何位置。<iframe>標記定義了文檔中的矩形區域，瀏覽器可以在其中顯示單獨的文檔，包括滾動條和邊框。內聯框架用於在當前HTML文檔中嵌入另一個文檔。

The src公司 attribute is used to specify the URL of the document that occupies the inline frame.

Example

下面的示例演示如何使用<iframe>−

Live Demo

<!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>

這將產生以下結果&負;

The <Iframe> Tag Attributes

<i frame>標記的大多數屬性，包括名稱、類、框架邊框、id、longdesc、marginheight、marginwidth、名稱、滾動、樣式、和標題的行爲與<框架>標記的相應屬性完全相同。

注−HTML5中不推薦使用的框架邊框，邊距寬度，長描述，滾動，邊距屬性。不要使用這些屬性。

Sr.No Attribute & Description

1
src公司

此屬性用於指定應在幀中加載的文件名。它的值可以是任何URL。例如，src=「/html/top_frame.htm」將加載html目錄中可用的html文件。

2
代表

此屬性允許您爲幀命名。它用於指示文檔應加載到哪個框架中。當您希望在一個框架中創建連結，將頁面加載到另一個框架中時，這一點尤其重要，在這種情況下，第二個框架需要一個名稱來將自己標識爲連結的目標。

3
框架邊框

此屬性指定是否顯示該幀的邊框;如果指定了邊框，則它將覆蓋<frameset>標記上的frameborder屬性中給定的值，並且可以採用1（是）或0（否）的值。

4
邊緣寬度

此屬性允許您指定框架邊框的左右兩側與框架內容之間的空間寬度。該值以像素爲單位。例如marginwidth=「10」。

5
瑪吉涅特（Marginheight）

此屬性允許您指定框架邊框頂部和底部及其內容之間的空間高度。該值以像素爲單位。例如marginheight=「10」。

6
高度

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

7
滾動

此屬性控制出現在框架上的滾動條的外觀。這將採用「是」、「否」或「自動」值。例如，scrolling=「no」表示它不應該有滾動條。

8
朗格德斯

此屬性允許您提供指向另一頁的連結，該頁包含對框架內容的長描述。例如longdesc=「framedescription.htm」

9
寬度

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

HTML - Blocks

所有的HTML元素可以分爲兩類：塊級元素（a）（b）內聯元素。

Block Elements

塊元素顯示在螢幕上，就好像它們前後都有換行符一樣。例如，<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr/>、<blockquote>和<address>元素都是塊級元素。它們都是從自己的新線開始的，任何跟隨它們的東西都會出現在自己的新線上。

Inline Elements

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

Grouping HTML Elements

我們經常使用兩個重要的標記來對各種其他HTML標記進行分組（i）<div>標記和（ii）<span>標記

The <div> tag

這是非常重要的塊級標記，它在分組其他各種HTML標記和在元素組上應用CSS方面起著很大的作用。即使現在<div>標記也可以用於創建網頁布局，在其中，我們使用<div>標記定義頁面的不同部分（左、右、上等）。此標記不提供塊上的任何視覺更改，但當它與CSS一起使用時，它具有更大的意義。

Example

下面是一個簡單的<div>標記示例。我們將在單獨的一章中學習層疊樣式表（CSS），但是我們在這裡使用它來顯示<div>tag−的用法;

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML div Tag</title> </head> <body>  <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>  <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>

這將產生以下結果&負;

The <span> tag

HTML<span>是一個內聯元素，可用於對HTML文檔中的內聯元素進行分組。此標記也不會對塊提供任何可視更改，但在與CSS一起使用時具有更多含義。

<span>標記與<div>標記的區別在於，<span>標記與內聯元素一起使用，而<div>標記與塊級元素一起使用。

Example

下面是一個簡單的<span>標記示例。我們將在單獨的一章中學習層疊樣式表（CSS），但我們在這裡使用它來顯示<span>標記的用法;

Live Demo

<!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 - Backgrounds

默認情況下，網頁背景爲白色。你可能不喜歡，但別擔心。HTML提供了以下兩種裝飾網頁背景的好方法。

HTML Background with Colors

HTML Background with Images

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

Html Background with Colors

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

注意−HTML5中不推薦使用bgcolor屬性。不要使用此屬性。

下面是將bgcolor屬性與任何HTML標記一起使用的語法。

<tagname bgcolor = "color_value"...>

這個顏色值可以用以下任何格式給出−

 <table bgcolor = "lime" >  <table bgcolor = "#f1f1f1" >  <table bgcolor = "rgb(0,0,120)" >

Example

下面是設置HTML標記背景的示例−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Background Colors</title> </head> <body>  <table bgcolor = "yellow" width = "100%"> <tr> <td> This background is yellow </td> </tr> </table>  <table bgcolor = "#6666FF" width = "100%"> <tr> <td> This background is sky blue </td> </tr> </table>  <table bgcolor = "rgb(255,0,255)" width = "100%"> <tr> <td> This background is green </td> </tr> </table> </body> </html>

這將產生以下結果&負;

Html Background with Images

background屬性還可用於控制HTML元素的背景，特別是頁面正文和表格背景。您可以指定一個圖像來設置HTML頁面或表的背景。

注意−在HTML5中不推薦使用background屬性。不要使用此屬性。

下面是將background屬性與任何HTML標記一起使用的語法。

注意−不推薦使用background屬性，建議使用樣式表進行背景設置。

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

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

Example

下面是設置表格背景圖像的示例。

Live Demo

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

這將產生以下結果&負;

Patterned & Transparent Backgrounds

你可能在不同的網站上看到過許多圖案或透明的背景。這可以通過在背景中使用圖案圖像或透明圖像來實現。

建議在創建模式或透明的GIF或PNG圖像時，儘可能使用最小的尺寸，甚至小到1x1，以避免加載緩慢。

Example

下面是設置表格背景圖案的示例−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body>  <table background = "/images/pattern1.gif" width = "100%" height = "100"> <tr> <td> This background is filled up with a pattern image. </td> </tr> </table>  <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 - Colors

顏色對於給你的網站一個好的外觀和感覺是非常重要的。您可以使用<body>標記在頁面級別指定顏色，也可以使用背景色屬性爲單個標記設置顏色。

<body>標記具有以下屬性，可用於設置不同的顏色−

背景色−設置頁面背景的顏色。

文本設置正文文本的顏色。

alink−爲活動連結或選定連結設置顏色。

連結設置連結文本的顏色。

vlink−爲訪問的連結設置顏色，即爲您已單擊的連結文本設置顏色。

HTML Color Coding Methods

有三種不同的方法可以設置網頁的顏色−

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

十六進位代碼−表示構成顏色的紅色、綠色和藍色的六位數代碼。

顏色十進位或百分比值−此值是使用rgb（）屬性指定的。

現在我們將逐一看到這些著色方案。

HTML Colors - Color Names

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

注意−檢查html顏色名稱的完整列表

W3C Standard 16 Colors

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

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Example

下面是按顏色名稱設置HTML標記背景的示例−

Live Demo

<!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 Colors - Hex Codes

十六進位是一種顏色的6位表示法。前兩位數字（RR）表示紅色值，後兩位是綠色值（GG），最後一位是藍色值（BB）。

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

每個十六進位代碼前面都有一個磅或哈希符號#。下面是使用十六進位表示法的幾種顏色的列表。

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

Example

下面是通過十六進位顏色代碼設置HTML標記背景的示例;

Live Demo

<!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 Colors - RGB Values

此顏色值是使用rgb（）屬性指定的。此屬性接受三個值，分別爲紅色、綠色和藍色。該值可以是0到255之間的整數或百分比。

注意−所有瀏覽器都不支持顏色的rgb（）屬性，因此建議不要使用它。

下面是使用RGB值顯示少數顏色的列表。

Color Color 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)

Example

下面是使用rgb（）值通過顏色代碼設置HTML標記背景的示例−

Live Demo

<!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>

Browser Safe Colors

這是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 - Fonts

字體在提高網站用戶友好性和內容可讀性方面起著非常重要的作用。字體字體和顏色完全取決於用於查看頁面的計算機和瀏覽器，但您可以使用HTML<Font>標記爲網站上的文本添加樣式、大小和顏色。您可以使用<basefont>標記將所有文本設置爲相同的大小、面和顏色。

字體標記有三個屬性，稱爲大小、顏色和面，用於自定義字體。要隨時更改網頁中的任何字體屬性，只需使用<字體>標記。後面的文本將保持更改，直到您使用</font>標記關閉。可以在一個標記中更改一個或所有字體屬性。

注意−不推薦使用字體和基本字體標記，它應該在將來的HTML版本中刪除。所以不應該使用它們，而是建議使用CSS樣式來操作字體。但仍出於學習目的，本章將詳細解釋字體和基本字體標記。

Set Font Size

您可以使用大小屬性設置內容字體大小。接受值的範圍是1（最小）到7（最大）。字體的默認大小是3。

Example

Live Demo

<!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>

這將產生以下結果&負;

Relative Font Size

您可以指定比預設字體大小大多少或小多少。您可以指定爲<font size=「+n」>或<font size=「−n」>

Example

Live Demo

<!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>

這將產生以下結果&負;

Setting Font Face

您可以使用face屬性設置字體，但請注意，如果查看頁面的用戶沒有安裝字體，他們將無法看到它。相反，用戶將看到適用於用戶計算機的默認字體。

Example

Live Demo

<!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>

這將產生以下結果&負;

Specify alternate font faces

訪問者只有在計算機上安裝了您的字體時才能看到您的字體。因此，可以通過列出字體名稱（用逗號分隔）來指定兩個或多個字體名稱。

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

加載頁面時，瀏覽器將顯示可用的第一個字體。如果未安裝任何給定字體，則它將顯示默認字體面Times New Roman。

注意−檢查完整的html標準字體列表。

Setting Font Color

您可以使用color屬性設置您喜歡的任何字體顏色。可以通過顏色名稱或該顏色的十六進位代碼指定所需的顏色。

注意−您可以查看帶有代碼的完整列表。

Example

Live Demo

<!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>

這將產生以下結果&負;

The <basefont> Element

<basefont>元素應該爲文檔的任何部分設置默認的字體大小、顏色和字體，否則這些部分不包含在<font>標記中。您可以使用<字體>元素覆蓋<基本字體>設置。

<basefont>標記還接受顏色、大小和面屬性，它將支持相對字體設置，爲較大的大小指定一個值+1，爲較小的兩個大小指定一個值&負;2。

Example

Live Demo

<!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 <basefont> 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 - Forms

當你想從網站訪問者那裡收集一些數據時，需要HTML表單。例如，在用戶註冊期間，您希望收集諸如姓名、電子郵件地址、信用卡等信息。

表單將接收站點訪問者的輸入，然後將其發送到後端應用程式，如CGI、ASP腳本或PHP腳本等。後端應用程式將根據應用程式中定義的業務邏輯對傳遞的數據執行所需的處理。

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

HTML<form>標記用於創建HTML表單，其語法如下−

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

Form Attributes

除了常見屬性之外，下面是最常用的表單屬性列表−

Sr.No Attribute & Description

1
行動

後端腳本已準備好處理傳遞的數據。

2
方法

用於上載數據的方法。最常用的是GET和POST方法。

3
目標

指定顯示腳本結果的目標窗口或幀。它接受諸如「空白」、「自我」、「父」等值。

4
鑲嵌型

可以使用enctype屬性指定瀏覽器在將數據發送到伺服器之前如何對其進行編碼。可能的值是&負;

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

mutlipart/form data−當您希望以圖像、word文件等文件的形式上載二進位數據時，使用此選項。

注意−有關表單數據上載工作原理的詳細信息，請參閱perl&cgi。

HTML Form Controls

有不同類型的表單控制項可用於使用HTML form−收集數據;

Text Input Controls

Checkboxes Controls

Radio Box Controls

Select Box Controls

File Select boxes

Hidden Controls

Clickable Buttons

Submit and Reset Button

Text Input Controls

表單上使用的文本輸入有三種類型−

單行文本輸入控制項−此控制項用於只需要一行用戶輸入的項目，如搜索框或名稱。它們是使用HTML<input>標記創建的。

密碼輸入控制項−這也是單行文本輸入，但用戶一輸入它就會屏蔽字符。它們也是使用HTMl<input>標記創建的。

多行文本輸入控制項−當要求用戶提供可能超過一個句子的詳細信息時，使用此控制項。多行輸入控制項使用HTML<textarea>標記創建。

Single-line text input controls

此控制項用於只需要一行用戶輸入的項，如搜索框或名稱。它們是使用HTML<input>標記創建的。

Example

下面是一個基本的單行文本輸入示例，用於輸入名字和姓氏−

Live Demo

<!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>

這將產生以下結果&負;

Attributes

下面是用於創建文本欄位的<input>標記的屬性列表。

Sr.No Attribute & Description

1
類型

指示輸入控制項的類型，對於文本輸入控制項，它將設置爲文本。

2
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

3
價值

這可用於在控制項內提供初始值。

4
大小

允許按字符指定文本輸入控制項的寬度。

5
最大長度

允許指定用戶可以在文本框中輸入的最大字符數。

Password input controls

這也是一個單行文本輸入，但一旦用戶輸入，它就會屏蔽字符。它們也使用HTML<input>標記創建，但type屬性設置爲password。

Example

下面是用於獲取用戶密碼的單行密碼輸入的基本示例−

Live Demo

<!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>

這將產生以下結果&負;

Attributes

下面是用於創建密碼欄位的<input>標記的屬性列表。

Sr.No Attribute & Description

1
類型

指示輸入控制項的類型，對於密碼輸入控制項，它將設置爲密碼。

2
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

3
價值

這可用於在控制項內提供初始值。

4
大小

允許按字符指定文本輸入控制項的寬度。

5
最大長度

允許指定用戶可以在文本框中輸入的最大字符數。

Multiple-Line Text Input Controls

當要求用戶提供可能比一句話長的詳細信息時，使用此選項。多行輸入控制項是使用HTML<textarea>標記創建的。

Example

下面是一個多行文本輸入的基本示例，用於獲取項目說明−

Live Demo

<!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>

這將產生以下結果&負;

Attributes

下面是標記的屬性列表。

Sr.No Attribute & Description

1
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

2
行

指示文本區域框的行數。

3
科爾斯

指示文本區域框的列數

Checkbox Control

當需要選擇多個選項時，使用複選框。它們也使用HTML<input>標記創建，但type屬性設置爲複選框。。

Example

下面是一個帶有兩個複選框的表單的HTML代碼示例−

Live Demo

<!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>

這將產生以下結果&負;

Attributes

下面是<checkbox>標記的屬性列表。

Sr.No Attribute & Description

1
類型

指示輸入控制項的類型，對於複選框輸入控制項，它將設置爲複選框。。

2
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

3
價值

選中複選框時將使用的值。

4
已檢查

如果要在默認情況下選擇它，請將其設置爲選中。

Radio Button Control

單選按鈕用於在多個選項中僅需要選擇一個選項時使用。它們也使用HTML<input>標記創建，但type屬性設置爲radio。

Example

下面是帶有兩個單選按鈕的表單的HTML代碼示例−

Live Demo

<!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>

這將產生以下結果&負;

Attributes

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

Sr.No Attribute & Description

1
類型

指示輸入控制項的類型，對於複選框輸入控制項，它將被設置爲單選。

2
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

3
價值

選定單選框時將使用的值。

4
已檢查

如果要在默認情況下選擇它，請將其設置爲選中。

Select Box Control

一種選擇框，也稱爲下拉框，它提供以下拉列表形式列出各種選項的選項，用戶可以從中選擇一個或多個選項。

Example

下面是帶有一個下拉框的表單的HTML代碼示例

Live Demo

<!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>

這將產生以下結果&負;

Attributes

下面是<select>tag−的重要屬性列表;

Sr.No Attribute & Description

1
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

2
大小

這可用於顯示滾動列表框。

3
多重

如果設置爲「多個」，則允許用戶從菜單中選擇多個項目。

以下是<option>tag−的重要屬性列表;

Sr.No Attribute & Description

1
價值

選擇「選擇」框中的選項時將使用的值。

2
選定

指定此選項應爲加載頁時的初始選定值。

3
標籤

標記選項的另一種方法

File Upload Box

如果要允許用戶將文件上載到網站，則需要使用文件上載框（也稱爲文件選擇框）。這也是使用<input>元素創建的，但是type屬性設置爲file。

Example

下面是帶有一個文件上載框的表單的HTML代碼示例−

Live Demo

<!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <input type = "file" name = "fileupload" accept = "image/*" /> </form> </body> </html>

這將產生以下結果&負;

Attributes

以下是文件上傳框的重要屬性列表−

Sr.No Attribute & Description

1
代表

用於給發送到伺服器以便識別和獲取值的控制項命名。

2
接受

指定伺服器接受的文件類型。

Button Controls

在HTML中有多種方法可以創建可點擊的按鈕。您還可以使用<input>標記創建一個可單擊的按鈕，方法是將其type屬性設置爲按鈕。type屬性可以採用以下值−

Sr.No Type & Description

1
提交

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

2
重置

這將創建一個按鈕，自動將窗體控制項重置爲其初始值。

3
按鈕

這將創建一個按鈕，用於在用戶單擊該按鈕時觸發客戶端腳本。

4
圖像

這將創建一個可單擊的按鈕，但我們可以使用圖像作爲按鈕的背景。

Example

下面是帶有三種按鈕的表單的HTML代碼示例−

Live Demo

<!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>

這將產生以下結果&負;

Hidden Form Controls

隱藏的表單控制項用於隱藏頁面內的數據，稍後可以將這些數據推送到伺服器。此控制項隱藏在代碼中，不顯示在實際頁上。例如，下面的隱藏表單用於保留當前頁碼。當用戶單擊「下一頁」時，隱藏控制項的值將發送到web伺服器，並在那裡根據傳遞的當前頁決定下一頁將顯示哪個頁。

Example

下面是顯示隱藏控制項使用情況的HTML代碼示例−

Live Demo

<!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 Multimedia

有時你需要在網頁中添加音樂或視頻。向網站添加視頻或聲音的最簡單方法是包含名爲<embed>的特殊HTML標記。此標記使瀏覽器本身包含多媒體控制項，這些控制項自動提供瀏覽器支持標記和給定的媒體類型。

對於無法識別「嵌入」標記的瀏覽器，您還可以包含一個<noembed>標記。例如，您可以使用<嵌入>顯示您選擇的電影，如果瀏覽器不支持<嵌入>標記，則使用<未嵌入>顯示單個JPG圖像。

Example

下面是一個播放嵌入式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>

The <embed> Tag Attributes

下面是可與<嵌入>標記一起使用的重要屬性列表。

注意：HTML5中不推薦使用的align和autostart屬性。不要使用這些屬性。

Sr.No Attribute & Description

1
對齊

確定如何對齊對象。它可以設置爲中間，左或右。

2
自動啓動

此布爾屬性指示媒體是否應自動啓動。你可以設置爲真或假。

3
循環

指定是否應連續播放聲音（將「循環」設置爲「真」）、特定次數（正值）或根本不播放（false）

4
播放計數

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

5
隱藏的

指定是否應在頁面上顯示多媒體對象。假值表示否，真值表示是。

6
寬度

對象的寬度（像素）

7
高度

對象的高度（像素）

8
代表

用於引用對象的名稱。

9
src公司

要嵌入的對象的URL。

10
音量

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

Supported Video Types

您可以在嵌入標記中使用各種媒體類型，如Flash movies（.swf）、AVI的（.AVI）和MOV的（.MOV）文件類型。

.swf文件是由Macromedia的Flash程序創建的文件類型。

.wmv文件是Microsoft窗口的媒體視頻文件類型。

.mov文件是蘋果的快速電影格式。

.mpeg文件是由Moving Pictures專家組創建的電影文件。

Live Demo

<!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>

這將產生以下結果&負;

Background Audio

您可以使用HTML<bgsound>標記在網頁背景中播放音軌。此標記僅受Internet Explorer支持，大多數其他瀏覽器忽略此標記。當用戶首次下載並顯示宿主文檔時，它將下載並播放音頻文件。每當用戶刷新瀏覽器時，背景聲音文件也將重播。

注意−bgsound標記已棄用，應該在將來的HTML版本中刪除它。所以不應該使用它們，而是建議使用HTML5標記音頻來添加聲音。但仍出於學習目的，本章將詳細介紹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 Object tag

HTML 4引入了<object>元素，它提供了通用對象包含的通用解決方案。<object>。

這裡有幾個例子;

Example - 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>

如果瀏覽器不支持對象標記，這裡的alt屬性將出現在圖片中。

Example - 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>

Example - 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>

Example - 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>

Example - 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 - Marquees

HTML選框是根據設置水平或垂直向下滾動顯示的文本。這是使用HTML<marquees>標記創建的。

注意：在HTML5中，<marquee>標記已棄用。不要使用這個元素，而是可以使用JavaScript和CSS來創建這樣的效果。

Syntax

使用HTML<marquee>標記的簡單語法如下所示;

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

The <marquee> Tag Attributes

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

Sr.No Attribute & Description

1
寬度

指定選框的寬度。這個值可以是10%或20%等。

2
高度

這指定了選框的高度。這個值可以是10%或20%等。

3
direction
這指定了字幕滾動的方向。這可以是一個類似於向上、向下、左或右的值。

4
行爲

這指定了滾動字幕的類型。這可以有一個類似於滾動、滑動和交替的值。

5
滾動延遲

它指定每次跳轉之間的延遲時間。這個值大約是10等。

6
滾動量

指定字幕文本的速度。這個值可以是10等。

7
循環

這指定循環多少次。默認值是無限的，這意味著選取框將無限循環。

8
背景色

這將根據顏色名稱或顏色十六進位值指定背景色。

9
空間

這將指定選框周圍的水平空間。這個值可以是10%或20%等。

10
垂直空間

這將指定選框周圍的垂直空間。這個值可以是10%或20%等。

下面是幾個示例來演示天棚標記的用法。

Examples - 1

Live Demo

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

這將產生以下結果&負;

Examples - 2

Live Demo

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

這將產生以下結果&負;

Examples - 3

Live Demo

<!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>

這將產生以下結果&負;

Examples - 4

Live Demo

<!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 - Header

我們已經了解到，典型的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>標記。

The HTML <title> Tag

HTML<title>標記用於指定HTML文檔的標題。下面是一個給HTML文檔命名的例子−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Title Tag Example</title> </head> <body> <p>Hello, World!</p> </body> </html>

這將產生以下結果&負;

The HTML <meta> Tag

HTML<meta>標記用於提供有關HTML文檔的元數據，其中包括有關頁面過期、頁面作者、關鍵字列表、頁面描述等信息。

下面是HTML文檔中標記的幾個重要用法;

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Meta Tag Example</title>  <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">  <meta name = "description" content = "Simply Easy Learning by Tutorials Point">  <meta name = "author" content = "Tutorials Point">  <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">  <meta http-equiv = "refresh" content = "30">  <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">  <meta name = "robots" content = "noindex, nofollow"> </head> <body> <p>Hello, World!</p> </body> </html>

這將產生以下結果&負;

The HTML <base> Tag

HTML<base>標記用於指定頁面中所有相對URL的基URL，這意味著在定位給定項時，所有其他URL將連接到基URL。

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Base Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> </head> <body> <img src = "/images/logo.png" alt = "Logo Image"/> <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> </body> </html>

這將產生以下結果&負;

The HTML <link> Tag

HTML<link>標記用於指定當前文檔與外部資源之間的關係。下面是一個連結web根目錄中css子目錄中可用的外部樣式表文件的示例−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML link Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> </head> <body> <p>Hello, World!</p> </body> </html>

這將產生以下結果&負;

The HTML <style> Tag

HTML<style>標記用於指定當前HTML文檔的樣式表。下面是在<style>tag−中定義一些樣式表規則的示例;

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML style Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> <style type = "text/css"> .myclass { background-color: #aaa; padding: 10px; } </style> </head> <body> <p class = "myclass">Hello, World!</p> </body> </html>

這將產生以下結果&負;

注意−要了解層疊樣式表的工作原理，請查看css上的單獨教程

The HTML <script> Tag

HTML<script>標記用於包含外部腳本文件或定義HTML文檔的內部腳本。下面是一個使用JavaScript定義簡單JavaScript函數的示例−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <base href = "http://www.tutorialspoint.com/" /> <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 - Style Sheet

層疊樣式表（CSS）描述了文檔在螢幕上的顯示方式、列印方式，或者它們的發音方式。自1994年成立以來，W3C一直在積極地促進Web上樣式表的使用。

層疊樣式表（CSS）提供了簡單有效的替代方法來指定HTML標記的各種屬性。使用CSS，可以爲給定的HTML元素指定許多樣式屬性。每個屬性都有一個名稱和一個值，用冒號（：）分隔。每個屬性聲明都用分號（;）分隔。

Example

首先，讓我們考慮一個HTML文檔示例，它使用<字體>標記和相關屬性來指定文本顏色和字體大小−

注意−字體標記已棄用，應該在將來的HTML版本中刪除它。所以不應該使用它們，而是建議使用CSS樣式來操作字體。但仍出於學習目的，本章將使用一個使用字體標記的示例。

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p><font color = "green" size = "5">Hello, World!</font></p> </body> </html>

我們可以在樣式表的幫助下重新編寫上面的示例，如下所示;

Live Demo

<!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<link>標記將該文件包含在HTML文檔中。

內部樣式表−使用<樣式>標記在HTML文檔的標題部分定義樣式表規則。

內聯樣式表−使用樣式屬性直接與HTML元素一起定義樣式表規則。

在適當的例子的幫助下，讓我們一個接一個地看這三個案例。

External Style Sheet

如果需要將樣式表用於不同的頁面，則始終建議在單獨的文件中定義通用樣式表。級聯樣式表文件的擴展名爲.css，它將使用<link>標記包含在HTML文件中。

Example

假設我們定義了一個樣式表文件style.css，它具有以下規則−

.red { color: red; } .thick { font-size:20px; } .green { color:green; }

這裡我們定義了三個CSS規則，它們將適用於爲HTML標記定義的三個不同類。我建議你不必擔心這些規則是如何定義的，因爲你將在學習CSS的同時學習它們。現在讓我們在下面的HTML文檔中使用上面的外部CSS文件−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel = "stylesheet" type = "text/css" href = "/html/style.css"> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>

這將產生以下結果&負;

Internal Style Sheet

如果只想將樣式表規則應用於單個文檔，則可以使用<樣式>標記將這些規則包含在HTML文檔的標題部分中。

在內部樣式表中定義的規則將覆蓋在外部CSS文件中定義的規則。

Example

讓我們再次編寫上面的示例，但在這裡，我們將使用<style>tag−在同一個HTML文檔中編寫樣式表規則;

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <style type = "text/css"> .red { color: red; } .thick{ font-size:20px; } .green { color:green; } </style> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>

這將產生以下結果&負;

Inline Style Sheet

可以使用相關標記的style屬性將樣式表規則直接應用於任何HTML元素。只有當您有興趣僅對任何HTML元素進行特定更改時，才應執行此操作。

與元素內聯定義的規則將覆蓋在外部CSS文件中定義的規則以及在<style>元素中定義的規則。

Example

讓我們再次編寫上面的示例，但在這裡，我們將使用這些元素的style屬性來編寫樣式表規則和HTML元素。

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <p style = "color:red;">This is red</p> <p style = "font-size:20px;">This is thick</p> <p style = "color:green;">This is green</p> <p style = "color:green;font-size:20px;">This is thick and green</p> </body> </html>

這將產生以下結果&負;

HTML - JavaScript

A腳本是一個小程序，可以向您的網站添加交互性。例如，腳本可以生成彈出的警報框消息，或提供下拉菜單。此腳本可以使用JavaScript或VBScript編寫。

可以使用任何腳本語言編寫各種稱爲事件處理程序的小函數，然後可以使用HTML屬性觸發這些函數。

現在，大多數web開發人員只使用JavaScript和相關的框架，而VBScript甚至不受各種主流瀏覽器的支持。

您可以將JavaScript代碼保存在一個單獨的文件中，然後根據需要將其包含在任何地方，也可以在HTML文檔本身中定義功能。讓我們用合適的例子逐一看這兩個案例。

External JavaScript

如果要定義一個將在各種HTML文檔中使用的功能，那麼最好將該功能保存在單獨的JavaScript文件中，然後將該文件包含在HTML文檔中。JavaScript文件的擴展名爲.js，它將使用<script>標記包含在HTML文件中。

Example

假設我們在script.js中使用JavaScript定義了一個小函數，它有以下代碼−

function Hello() { alert("Hello, World"); }

現在讓我們在下面的HTML文檔中使用上面的外部JavaScript文件−

Live Demo

<!DOCTYPE html> <html> <head> <title>Javascript External Script</title> <script src = "/html/script.js" type = "text/javascript"/></script> </head> <body> <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" /> </body> </html>

這將產生以下結果，您可以嘗試單擊給定的按鈕−

Internal Script

您可以將腳本代碼直接寫入HTML文檔。通常，我們使用<script>標記將腳本代碼保留在文檔的標題中，否則沒有限制，您可以將原始碼放在文檔中除<script>標記之外的任何位置。

Example

Live Demo

<!DOCTYPE html> <html> <head> <title>JavaScript Internal Script</title> <base href = "https://www.tutorialspoint.com/" /> <script type = "text/JavaScript"> function Hello() { alert("Hello, World"); } </script> </head> <body> <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" /> </body> </html>

這將產生以下結果，您可以嘗試單擊給定的按鈕−

Event Handlers

事件處理程序只是簡單定義的函數，可以針對任何滑鼠或鍵盤事件調用。您可以在事件處理程序中定義您的業務邏輯，它可以從一行代碼到1000行代碼不等。

下面的示例說明如何編寫事件處理程序。讓我們在文檔頭中編寫一個簡單的函數EventHandler（）。當任何用戶將滑鼠移到段落上時，我們將調用此函數。

Live Demo

<!DOCTYPE html> <html> <head> <title>Event Handlers Example</title> <base href = "https://www.tutorialspoint.com/" /> <script type = "text/JavaScript"> function EventHandler() { alert("I'm event handler!!"); } </script> </head> <body> <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p> </body> </html>

現在這將產生以下結果。把你的滑鼠移到這條線上，看看結果;

Hide Scripts from Older Browsers

雖然現在大多數（如果不是所有）瀏覽器都支持JavaScript，但有些老的瀏覽器不支持，如果瀏覽器不支持JavaScript，它將向用戶顯示代碼，而不是運行腳本。爲了防止這種情況，您可以簡單地在腳本周圍放置HTML注釋，如下所示。

JavaScript Example: <script type = "text/JavaScript">  </script> VBScript Example: <script type = "text/vbscript">  </script>

The <noscript> Element

您還可以爲其瀏覽器不支持腳本的用戶以及禁用腳本的用戶選擇其瀏覽器提供其他信息。您可以使用<noscript>標記來執行此操作。

JavaScript Example: <script type = "text/JavaScript">  </script> <noscript>Your browser does not support JavaScript!</noscript> VBScript Example: <script type = "text/vbscript">  </script> <noscript>Your browser does not support VBScript!</noscript>

Default Scripting Language

可能會出現這樣的情況：您將包含多個腳本文件，並最終使用多個<script>標記。您可以爲所有腳本標記指定默認腳本語言。這樣可以避免每次在頁面中使用腳本標記時都指定語言。下面是一個例子;

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

請注意，仍然可以通過在腳本標記中指定語言來覆蓋默認值。

HTML - Layouts

網頁布局對於更好地瀏覽你的網站非常重要。設計一個外觀和感覺都很好的網站布局需要相當長的時間。

現在，所有現代網站都在使用基於CSS和JavaScript的框架來創建響應性和動態的網站，但是您可以使用簡單的HTML表或分區標記以及其他格式化標記來創建良好的布局。本章將爲您提供一些示例，說明如何使用純HTML及其屬性爲您的網頁創建一個簡單但有效的布局。

HTML Layout - Using Tables

創建布局的最簡單和最流行的方法是使用HTML<table>標記。這些表是按列和行排列的，因此您可以以任何方式利用這些行和列。

Example

例如，下面的HTML布局示例是使用一個包含3行和2列的表實現的，但是頁眉和頁腳列使用colspan屬性−

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Layout using Tables</title> </head> <body> <table width = "100%" border = "0"> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign = "top"> <td bgcolor = "#aaa" width = "50"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#eee" width = "100" height = "200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table> </body> </html>

這將產生以下結果&負;

Multiple Columns Layout - Using Tables

Example

下面是創建三列布局的示例−

Live Demo

<!DOCTYPE html> <html> <head> <title>Three Column HTML Layout</title> </head> <body> <table width = "100%" border = "0"> <tr valign = "top"> <td bgcolor = "#aaa" width = "20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#b5dcb3" height = "200" width = "60%"> Technical and Managerial Tutorials </td> <td bgcolor = "#aaa" width = "20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <table> </body> </html>

這將產生以下結果&負;

HTML Layouts - Using DIV, SPAN

<div>元素是用於對HTML元素進行分組的塊級元素。雖然<div>標記是塊級元素，但HTML<span>元素用於在內聯級別對元素進行分組。

雖然我們可以用HTML表實現非常好的布局，但是表並不是真正作爲布局工具設計的。表格更適合顯示表格數據。

注意−此示例使用層疊樣式表（CSS），因此在理解此示例之前，您需要更好地了解CSS的工作原理。

Example

在這裡，我們將嘗試使用<div>標記和CSS獲得相同的結果，無論您在前面的示例中使用<table>標記獲得了什麼。

Live Demo

<!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style = "width:100%"> <div style = "background-color:#b5dcb3; width:100%"> <h1>This is Web Page Main title</h1> </div> <div style = "background-color:#aaa; height:200px; width:100px; float:left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style = "background-color:#eee; height:200px; width:350px; float:left;" > <p>Technical and Managerial Tutorials</p> </div> <div style = "background-color:#aaa; height:200px; width:100px; float:right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style = "background-color:#b5dcb3; clear:both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div> </body> </html>

這將產生以下結果&負;

您可以使用DIV、SPAN和CSS創建更好的布局。有關CSS的更多信息，請參閱CSS教程。

Sr.No	Tag & Description
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> 這個標籤代表一個段落。

Start Tag	Content	End Tag
<p>	This is paragraph content.	</p>
<h1>	This is heading content.	</h1>
<div>	This is division content.	</div>
<br />

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title of the elements.

Sr.No	Attribute & Description
1	代表屬性的名稱。可以是任何東西。示例包括，關鍵字，描述，作者，修訂，生成器等。
2	content 指定屬性的值。
3	方案指定用於解釋屬性值的方案（在content屬性中聲明）。
4	http等效用於http響應消息頭。例如，可以使用http-equiv刷新頁面或設置cookie。值包括內容類型、過期時間、刷新和設置cookie。

Sr.No	Option & Description
1	空白在新窗口或選項卡中打開連結文檔。
2	_自我在同一框架中打開連結文檔。
3	_母公司在父框架中打開連結文檔。
4	_頂部在窗口的整個正文中打開連結的文檔。
5	目標幀打開名爲targetframe的連結文檔。

Sr.No	Attribute & Description
1	科爾斯指定框架集中包含多少列以及每列的大小。您可以用以下四種方法之一指定每列的寬度− 絕對值（像素）。例如，要創建三個垂直框架，請使用cols=「100，500，100」。瀏覽器窗口的百分比。例如，要創建三個垂直框架，請使用cols=「10%，80%，10%」。使用通配符。例如，要創建三個垂直框架，請使用cols=「10%，，10%」。在這種情況下，通配符占據窗口的其餘部分。作爲瀏覽器窗口的相對寬度。例如，要創建三個垂直框架，請使用cols=「3，2，1」。這是百分比的另一種選擇。可以使用瀏覽器窗口的相對寬度。在這裡，窗戶被分成六分之一：第一列占據窗戶的一半，第二列占據三分之一，第三列占據六分之一。
2	行此屬性的工作方式與cols屬性類似，並採用相同的值，但它用於指定框架集中的行。例如，要創建兩個水平框架，請使用rows=「10%，90%」。您可以按照上面對列的說明指定每行的高度。
3	邊界此屬性以像素爲單位指定每個幀的邊框寬度。例如，border=「5」。值爲零表示沒有邊界。
4	框架邊框此屬性指定是否應在幀之間顯示三維邊框。此屬性的值爲1（是）或0（否）。例如frameborder=「0」不指定邊框。
5	framespacing 此屬性指定幀集中幀之間的空間量。這可以取任何整數值。例如framespacing=「10」表示每個幀之間應該有10個像素的間距。

Sr.No	Attribute & Description
1	src公司此屬性用於指定應在幀中加載的文件名。它的值可以是任何URL。例如，src=「/html/top_frame.htm」將加載html目錄中可用的html文件。
2	代表此屬性允許您爲幀命名。它用於指示文檔應加載到哪個框架中。當您希望在一個框架中創建連結，將頁面加載到另一個框架中時，這一點尤其重要，在這種情況下，第二個框架需要一個名稱來將自己標識爲連結的目標。
3	框架邊框此屬性指定是否顯示該幀的邊框;如果指定了邊框，則它將覆蓋<frameset>標記上的frameborder屬性中給定的值，並且可以採用1（是）或0（否）的值。
4	邊緣寬度此屬性允許您指定框架邊框的左右兩側與框架內容之間的空間寬度。該值以像素爲單位。例如marginwidth=「10」。
5	瑪吉涅特（Marginheight）此屬性允許您指定框架邊框頂部和底部及其內容之間的空間高度。該值以像素爲單位。例如marginheight=「10」。
6	北歐化默認情況下，可以通過在幀的邊框上單擊並拖動來調整任何幀的大小。noresize屬性防止用戶調整幀的大小。例如noresize=「noresize」。
7	滾動此屬性控制出現在框架上的滾動條的外觀。這將採用「是」、「否」或「自動」值。例如，scrolling=「no」表示它不應該有滾動條。
8	朗格德斯此屬性允許您提供指向另一頁的連結，該頁包含對框架內容的長描述。例如longdesc=「framedescription.htm」

Sr.No	Option & Description
1	_自我將頁面加載到當前框架中。
2	空白將頁面加載到新的瀏覽器窗口中。打開一扇新窗戶。
3	_母公司將頁面加載到父窗口中，對於單個框架集，父窗口是主瀏覽器窗口。
4	_頂部將頁面加載到瀏覽器窗口中，替換任何當前幀。
5	目標幀將頁面加載到命名的targetframe中。

Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

Color	Color HEX
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Color	Color 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)

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

Sr.No	Attribute & Description
1	行動後端腳本已準備好處理傳遞的數據。
2	方法用於上載數據的方法。最常用的是GET和POST方法。
3	目標指定顯示腳本結果的目標窗口或幀。它接受諸如「空白」、「自我」、「父」等值。
4	鑲嵌型可以使用enctype屬性指定瀏覽器在將數據發送到伺服器之前如何對其進行編碼。可能的值是&負; application/x-www-form-urlencoded−這是大多數表單在簡單場景中使用的標準方法。 mutlipart/form data−當您希望以圖像、word文件等文件的形式上載二進位數據時，使用此選項。

Sr.No	Attribute & Description
1	類型指示輸入控制項的類型，對於文本輸入控制項，它將設置爲文本。
2	代表用於給發送到伺服器以便識別和獲取值的控制項命名。
3	價值這可用於在控制項內提供初始值。
4	大小允許按字符指定文本輸入控制項的寬度。
5	最大長度允許指定用戶可以在文本框中輸入的最大字符數。

Sr.No	Attribute & Description
1	類型指示輸入控制項的類型，對於密碼輸入控制項，它將設置爲密碼。
2	代表用於給發送到伺服器以便識別和獲取值的控制項命名。
3	價值這可用於在控制項內提供初始值。
4	大小允許按字符指定文本輸入控制項的寬度。
5	最大長度允許指定用戶可以在文本框中輸入的最大字符數。

Sr.No	Attribute & Description
1	類型指示輸入控制項的類型，對於複選框輸入控制項，它將設置爲複選框。。
2	代表用於給發送到伺服器以便識別和獲取值的控制項命名。
3	價值選中複選框時將使用的值。
4	已檢查如果要在默認情況下選擇它，請將其設置爲選中。

Sr.No	Attribute & Description
1	類型指示輸入控制項的類型，對於複選框輸入控制項，它將被設置爲單選。
2	代表用於給發送到伺服器以便識別和獲取值的控制項命名。
3	價值選定單選框時將使用的值。
4	已檢查如果要在默認情況下選擇它，請將其設置爲選中。

Sr.No	Type & Description
1	提交這將創建一個自動提交表單的按鈕。
2	重置這將創建一個按鈕，自動將窗體控制項重置爲其初始值。
3	按鈕這將創建一個按鈕，用於在用戶單擊該按鈕時觸發客戶端腳本。
4	圖像這將創建一個可單擊的按鈕，但我們可以使用圖像作爲按鈕的背景。

Sr.No	Attribute & Description
1	對齊確定如何對齊對象。它可以設置爲中間，左或右。
2	自動啓動此布爾屬性指示媒體是否應自動啓動。你可以設置爲真或假。
3	循環指定是否應連續播放聲音（將「循環」設置爲「真」）、特定次數（正值）或根本不播放（false）
4	播放計數指定播放聲音的次數。如果您使用IE，這是循環的替代選項。
5	隱藏的指定是否應在頁面上顯示多媒體對象。假值表示否，真值表示是。
6	寬度對象的寬度（像素）
7	高度對象的高度（像素）
8	代表用於引用對象的名稱。
9	src公司要嵌入的對象的URL。
10	音量控制聲音的音量。可以從0（關）到100（滿容量）。

Sr.No	Attribute & Description
1	寬度指定選框的寬度。這個值可以是10%或20%等。
2	高度這指定了選框的高度。這個值可以是10%或20%等。
3	direction *這指定了字幕滾動的方向。這可以是一個類似於向上、向下、左或右的值。*
4	行爲這指定了滾動字幕的類型。這可以有一個類似於滾動、滑動和交替的值。
5	滾動延遲它指定每次跳轉之間的延遲時間。這個值大約是10等。
6	滾動量指定字幕文本的速度。這個值可以是10等。
7	循環這指定循環多少次。默認值是無限的，這意味著選取框將無限循環。
8	背景色這將根據顏色名稱或顏色十六進位值指定背景色。
9	空間這將指定選框周圍的水平空間。這個值可以是10%或20%等。
10	垂直空間這將指定選框周圍的垂直空間。這個值可以是10%或20%等。