HTML 基礎(chǔ)標(biāo)簽實(shí)例

一個(gè)簡(jiǎn)單的 HTML 文件

這個(gè)例子是一個(gè)很簡(jiǎn)單的 HTML 文件，使用了盡可能少的 HTML 標(biāo)簽。它向您演示了 body 元素中的內(nèi)容是如何被瀏覽器顯示的。

簡(jiǎn)單的段落

此例演示：段落元素中的文字如何被瀏覽器顯示。

更多的段落

本例演示段落元素的某些缺省的行為。

“詩(shī)歌”問題

本例演示 HTML 格式化的某些問題。

折行

本例演示在 HTML 文檔中折行的使用。

標(biāo)題

本例演示在 HTML 文檔中顯示標(biāo)題的標(biāo)簽。

居中排列的標(biāo)題

本例演示一個(gè)居中排列的標(biāo)題。

水平線

本例演示如何插入水平線。

隱藏的注釋

本例演示如何在 HTML 源代碼中插入隱藏的注釋。

背景顏色

本例演示如何為 HTML 頁(yè)面添加背景顏色。

例子解釋

HTML 文本格式化實(shí)例

文本格式化

此例演示如何在一個(gè) HTML 文件中對(duì)文本進(jìn)行格式化

預(yù)格式文本

此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。

“計(jì)算機(jī)輸出”標(biāo)簽

此例演示不同的“計(jì)算機(jī)輸出”標(biāo)簽的顯示效果。

地址

此例演示如何在 HTML 文件中寫地址。

縮寫和首字母縮寫

此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。

文字方向

此例演示如何改變文字的方向。

塊引用

此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。

刪除字效果和插入字效果

此例演示如何標(biāo)記刪除文本和插入文本。

例子解釋

HTML 鏈接實(shí)例

創(chuàng)建超級(jí)鏈接

本例演示如何在 HTML 文檔中創(chuàng)建鏈接。

將圖像作為鏈接

本例演示如何使用圖像作為鏈接。

在新的瀏覽器窗口打開鏈接

本例演示如何在新窗口打開一個(gè)頁(yè)面，這樣的話訪問者就無(wú)需離開你的站點(diǎn)了。

鏈接到同一個(gè)頁(yè)面的不同位置

本例演示如何使用鏈接跳轉(zhuǎn)至文檔的另一個(gè)部分

跳出框架

本例演示如何跳出框架，假如你的頁(yè)面被固定在框架之內(nèi)。

創(chuàng)建電子郵件鏈接

本例演示如何如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶端程序后才能工作。）

創(chuàng)建電子郵件鏈接 2

本例演示更加復(fù)雜的郵件鏈接。

例子解釋

HTML 框架實(shí)例

垂直框架

本例演示：如何使用三份不同的文檔制作一個(gè)垂直框架。

水平框架

本例演示：如何使用三份不同的文檔制作一個(gè)水平框架。

如何使用 <noframes> 標(biāo)簽

本例演示：如何使用 <noframes> 標(biāo)簽。

混合框架結(jié)構(gòu)

本例演示如何制作含有三份文檔的框架結(jié)構(gòu)，同時(shí)將他們混合置于行和列之中。

含有 noresize="noresize" 屬性的框架結(jié)構(gòu)

本例演示 noresize 屬性。在本例中，框架是不可調(diào)整尺寸的。在框架間的邊框上拖動(dòng)鼠標(biāo)，你會(huì)發(fā)現(xiàn)邊框是無(wú)法移動(dòng)的。

導(dǎo)航框架

本例演示如何制作導(dǎo)航框架。導(dǎo)航框架包含一個(gè)將第二個(gè)框架作為目標(biāo)的鏈接列表。名為 "contents.htm" 的文件包含三個(gè)鏈接。

內(nèi)聯(lián)框架

本例演示如何創(chuàng)建內(nèi)聯(lián)框架（HTML 頁(yè)中的框架）。

跳轉(zhuǎn)至框架內(nèi)的一個(gè)指定的節(jié)

本例演示兩個(gè)框架。其中的一個(gè)框架設(shè)置了指向另一個(gè)文件內(nèi)指定的節(jié)的鏈接。這個(gè)"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C10"> 進(jìn)行標(biāo)識(shí)。

使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)

本例演示兩個(gè)框架。左側(cè)的導(dǎo)航框架包含了一個(gè)鏈接列表，這些鏈接將第二個(gè)框架作為目標(biāo)。第二個(gè)框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。

例子解釋

HTML 表格實(shí)例

表格

這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。

表格邊框

本例演示各種類型的表格邊框。

沒有邊框的表格

本例演示一個(gè)沒有邊框的表格。

表格中的表頭(Heading)

本例演示如何顯示表格表頭。

空單元格

本例展示如何使用 "&nbsp;" 處理沒有內(nèi)容的單元格。

帶有標(biāo)題的表格

本例演示一個(gè)帶標(biāo)題 (caption) 的表格

跨行或跨列的表格單元格

本例演示如何定義跨行或跨列的表格單元格。

表格內(nèi)的標(biāo)簽

本例演示如何顯示在不同的元素內(nèi)顯示元素。

單元格邊距(Cell padding)

本例演示如何使用 Cell padding 來(lái)創(chuàng)建單元格內(nèi)容與其邊框之間的空白。

單元格間距(Cell spacing)

本例演示如何使用 Cell spacing 增加單元格之間的距離。

向表格添加背景顏色或背景圖像

本例演示如何向表格添加背景。

向表格單元添加背景顏色或者背景圖像

本例演示如何向一個(gè)或者更多表格單元添加背景。

在表格單元中排列內(nèi)容

本例演示如何使用 "align" 屬性排列單元格內(nèi)容,以便創(chuàng)建一個(gè)美觀的表格。

框架(frame)屬性

本例演示如何使用 "frame" 屬性來(lái)控制圍繞表格的邊框。

例子解釋

HTML 列表實(shí)例

無(wú)序列表

本例演示無(wú)序列表。

有序列表

本例演示有序列表。

不同類型的無(wú)序列表

本例演示一個(gè)無(wú)序列表。

不同類型的有序列表

本例演示不同類型的有序列表。

嵌套列表

本例演示如何嵌套列表。

嵌套列表 2

本例演示更復(fù)雜的嵌套列表。

定義列表

本例演示一個(gè)定義列表。

例子解釋

HTML 表單與輸入實(shí)例

文本域(Text fields)

本例演示如何在 HTML 頁(yè)面創(chuàng)建文本域。用戶可以在文本域中寫入文本。

密碼域

本例演示如何創(chuàng)建 HTML 的密碼域。

復(fù)選框

本例演示如何在 HTML 頁(yè)中創(chuàng)建復(fù)選框。用戶可以選中或取消選取復(fù)選框。

單選按鈕

本例演示如何在 HTML 中創(chuàng)建單選按鈕。

簡(jiǎn)單的下拉列表

本例演示如何在 HTML 頁(yè)面中創(chuàng)建簡(jiǎn)單的下拉列表框。下拉列表框是一個(gè)可選列表。

另一個(gè)下拉列表

本例演示如何創(chuàng)建一個(gè)簡(jiǎn)單的帶有預(yù)選值的下拉列表。（譯者注：預(yù)選值指預(yù)先指定的首選項(xiàng)。）

文本域(Textarea)

本例演示如何創(chuàng)建一個(gè)文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字?jǐn)?shù)不受限制。

創(chuàng)建按鈕

本例演示如何創(chuàng)建按鈕。你可以對(duì)按鈕上的文字進(jìn)行自定義。

Fieldset around data

本例演示如何在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框。

表單實(shí)例

帶有輸入框和確認(rèn)按鈕的表單

本例演示如何向頁(yè)面添加表單。此表單包含兩個(gè)輸入框和一個(gè)確認(rèn)按鈕。

帶有復(fù)選框的表單

此表單包含兩個(gè)復(fù)選框和一個(gè)確認(rèn)按鈕。

帶有單選按鈕的表單

此表單包含兩個(gè)單選框和一個(gè)確認(rèn)按鈕。

從表單發(fā)送電子郵件

此例演示如何從表單發(fā)送電子郵件。

例子解釋

HTML 圖像實(shí)例

插入圖像

本例演示如何在網(wǎng)頁(yè)中顯示圖像。

從不同的位置插入圖片

本例演示如何將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁(yè)中。

背景圖片

本例演示如何向 HTML 頁(yè)面添加背景圖片。

排列圖片

本例演示如何在文字中排列圖像。

浮動(dòng)圖像

本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。

調(diào)整圖像尺寸

本例演示如何將圖片調(diào)整到不同的尺寸。

為圖片顯示替換文本

本例演示如何為圖片顯示替換文本。在瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性告訴讀者們失去的信息。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣。

制作圖像鏈接

本例演示如何將圖像作為一個(gè)鏈接使用。

創(chuàng)建圖像映射

本例顯示如何創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個(gè)區(qū)域都是一個(gè)超級(jí)鏈接。

把圖像轉(zhuǎn)換為圖像映射

本例顯示如何把一幅普通的圖像設(shè)置為圖像映射。

例子解釋

HTML 背景實(shí)例

搭配良好的背景和顏色

一個(gè)背景顏色和文字顏色搭配良好的例子，使頁(yè)面中的文字易于閱讀。

搭配得不好的背景和顏色

一個(gè)背景顏色和文字顏色搭配得不好的例子，使頁(yè)面中的文字難于閱讀。

可用性強(qiáng)的背景圖像

背景圖像和文字顏色使頁(yè)面文本易于閱讀的例子。

可用性強(qiáng)的背景圖像 2

另一個(gè)背景圖像和文字顏色使頁(yè)面文本易于閱讀的例子。

可用性差的背景圖像

背景圖像和文字顏色使頁(yè)面文本不易閱讀的例子。

例子解釋

HTML 樣式 (style) 實(shí)例

HTML中的樣式

本例演示如何使用添加到 <head> 部分的樣式信息對(duì) HTML 進(jìn)行格式化。

沒有下劃線的鏈接

本例演示如何使用樣式屬性做一個(gè)沒有下劃線的鏈接。

鏈接到一個(gè)外部樣式表

本例演示如何 <link> 標(biāo)簽鏈接到一個(gè)外部樣式表。

例子解釋

HTML 頭部 (head) 實(shí)例

文檔的標(biāo)題

頭元素內(nèi)部的標(biāo)題信息不會(huì)顯示在瀏覽器窗口中。

一個(gè) target，所有的鏈接

本例顯示如何使用 base 標(biāo)簽使頁(yè)面中的所有標(biāo)簽在新窗口中打開。

例子解釋

HTML 元信息 (meta) 實(shí)例

文檔描述

Meta 元素中的信息可以描述 HTML 文檔。

文檔關(guān)鍵字

Meta 元素中的信息可以描述文檔的關(guān)鍵詞。

重定向

這個(gè)例子演示：在網(wǎng)址已經(jīng)變更的情況下，將用戶重定向到另外一個(gè)地址。

例子解釋

HTML 腳本 (Script) 實(shí)例

插入一段腳本

本例演示如何將腳本插入 HTML 文檔。

運(yùn)行于不支持腳本的瀏覽器

本例演示如何對(duì)付不支持腳本的瀏覽器。

例子解釋