HTML 100 個實例

學習 HTML 100 個實例

HTML 基礎標籤實例

一個簡單的HTML 文件
這個例子是一個很簡單的HTML 文件,使用了盡可能少的HTML 標籤。它向您演示了body 元素中的內容是如何被瀏覽器顯示的。
簡單的段落
此例演示:段落元素中的文字如何被瀏覽器顯示。
更多的段落
本例演示段落元素的某些缺省的行為。
“詩歌”問題
本例演示HTML 格式化的某些問題。
折行
本例演示在HTML 文檔中折行的使用。
標題
本例演示在HTML 文檔中顯示標題的標籤。
居中排列的標題
本例演示一個居中排列的標題。
水平線
本例演示如何插入水平線。
隱藏的註釋
本例演示如何在HTML 源代碼中插入隱藏的註釋。
背景顏色
本例演示如何為HTML 頁面添加背景顏色。

例子解釋

HTML 文本格式化實例

文本格式化
此例演示如何在一個HTML 文件中對文本進行格式化
預格式文本
此例演示如何使用pre 標籤對空行和空格進行控制。
“計算機輸出”標籤
此例演示不同的“計算機輸出”標籤的顯示效果。
地址
此例演示如何在HTML 文件中寫地址。
縮寫和首字母縮寫
此例演示如何實現縮寫或首字母縮寫。
文字方向
此例演示如何改變文字的方向。
塊引用
此例演示如何實現長短不一的引用語。
刪除字效果和插入字效果
此例演示如何標記刪除文本和插入文本。

例子解釋

HTML 鏈接實例

創建超級鏈接
本例演示如何在HTML 文檔中創建鏈接。
將圖像作為鏈接
本例演示如何使用圖像作為鏈接。
在新的瀏覽器窗口打開鏈接
本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開你的站點了。
鏈接到同一個頁面的不同位置
本例演示如何使用鏈接跳轉至文檔的另一個部分
跳出框架
本例演示如何跳出框架,假如你的頁面被固定在框架之內。
創建電子郵件鏈接
本例演示如何如何鏈接到一個郵件。(本例在安裝郵件客戶端程序後才能工作。)
創建電子郵件鏈接 2
本例演示更加複雜的郵件鏈接。

例子解釋

HTML 框架實例

垂直框架
本例演示:如何使用三份不同的文檔製作一個垂直框架。
水平框架
本例演示:如何使用三份不同的文檔製作一個水平框架。
如何使用<noframes> 標籤
本例演示:如何使用<noframes> 標籤。
混合框架結構
本例演示如何製作含有三份文檔的框架結構,同時將他們混合置於行和列之中。
含有noresize=」noresize」 屬性的框架結構
本例演示noresize 屬性。在本例中,框架是不可調整尺寸的。在框架間的邊框上拖動鼠標,你會發現邊框是無法移動的。
導航框架
本例演示如何製作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為」contents.htm」 的文件包含三個鏈接。
內聯框架
本例演示如何創建內聯框架(HTML 頁中的框架)。
跳轉至框架內的一個指定的節
本例演示兩個框架。其中的一個框架設置了指向另一個文件內指定的節的鏈接。這個」link.htm」文件內指定的節使用<a name=」C10″> 進行標識。
使用框架導航跳轉至指定的節
本例演示兩個框架。左側的導航框架包含了一個鏈接列表,這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。

例子解釋

HTML 表格實例

表格
這個例子演示如何在HTML 文檔中創建表格。
表格邊框
本例演示各種類型的表格邊框。
沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
空單元格
本例展示如何使用」 」 處理沒有內容的單元格。
帶有標題的表格
本例演示一個帶標題(caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內的標籤
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本例演示如何使用Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用Cell spacing 增加單元格之間的距離。
向表格添加背景顏色或背景圖像
本例演示如何向表格添加背景。
向表格單元添加背景顏色或者背景圖像
本例演示如何向一個或者更多表格單元添加背景。
在表格單元中排列內容
本例演示如何使用」align」 屬性排列單元格內容,以便創建一個美觀的表格。
框架(frame)屬性
本例演示如何使用」frame」 屬性來控制圍繞表格的邊框。

例子解釋

HTML 列表實例

無序列表
本例演示無序列表。
有序列表
本例演示有序列表。
不同類型的無序列表
本例演示一個無序列表。
不同類型的有序列表
本例演示不同類型的有序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更複雜的嵌套列表。
定義列表
本例演示一個定義列表。

例子解釋

HTML 表單與輸入實例

文本域(Text fields)
本例演示如何在HTML 頁面創建文本域。用戶可以在文本域中寫入文本。
密碼域
本例演示如何創建HTML 的密碼域。
複選框
本例演示如何在HTML 頁中創建複選框。用戶可以選中或取消選取複選框。
單選按鈕
本例演示如何在HTML 中創建單選按鈕。
簡單的下拉列表
本例演示如何在HTML 頁面中創建簡單的下拉列錶框。下拉列錶框是一個可選列表。
另一個下拉列表
本例演示如何創建一個簡單的帶有預選值的下拉列表。(譯者註:預選值指預先指定的首選項。)
文本域(Textarea)
本例演示如何創建一個文本域(多行文本輸入控件)。用戶可以在文本域中寫入文本。在文本域中,可寫入的字符字數不受限制。
創建按鈕
本例演示如何創建按鈕。你可以對按鈕上的文字進行自定義。
Fieldset around data
本例演示如何在數據周圍繪製一個帶標題的框。

表單實例

帶有輸入框和確認按鈕的表單
本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
帶有復選框的表單
此表單包含兩個複選框和一個確認按鈕。
帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。
從表單發送電子郵件
此例演示如何從表單發送電子郵件。

例子解釋

HTML 圖像實例

插入圖像
本例演示如何在網頁中顯示圖像。
從不同的位置插入圖片
本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。
背景圖片
本例演示如何向HTML 頁面添加背景圖片。
排列圖片
本例演示如何在文字中排列圖像。
浮動圖像
本例演示如何使圖片浮動至段落的左邊或右邊。
調整圖像尺寸
本例演示如何將圖片調整到不同的尺寸。
為圖片顯示替換文本
本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時,替換文本屬性告訴讀者們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。
製作圖像鏈接
本例演示如何將圖像作為一個鏈接使用。
創建圖像映射
本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。
把圖像轉換為圖像映射
本例顯示如何把一幅普通的圖像設置為圖像映射。

例子解釋

HTML 背景實例

搭配良好的背景和顏色
一個背景顏色和文字顏色搭配良好的例子,使頁面中的文字易於閱讀。
搭配得不好的背景和顏色
一個背景顏色和文字顏色搭配得不好的例子,使頁面中的文字難於閱讀。
可用性強的背景圖像
背景圖像和文字顏色使頁面文本易於閱讀的例子。
可用性強的背景圖像 2
另一個背景圖像和文字顏色使頁面文本易於閱讀的例子。
可用性差的背景圖像
背景圖像和文字顏色使頁面文本不易閱讀的例子。

例子解釋

HTML 樣式(style) 實例

HTML中的樣式
本例演示如何使用添加到<head> 部分的樣式信息對HTML 進行格式化。
沒有下劃線的鏈接
本例演示如何使用樣式屬性做一個沒有下劃線的鏈接。
鏈接到一個外部樣式表
本例演示如何<link> 標籤鏈接到一個外部樣式表。

例子解釋

HTML 頭部(head) 實例

文檔的標題
頭元素內部的標題信息不會顯示在瀏覽器窗口中。
一個target,所有的鏈接
本例顯示如何使用base 標籤使頁面中的所有標籤在新窗口中打開。

例子解釋

HTML 元信息(meta) 實例

文檔描述
Meta 元素中的信息可以描述HTML 文檔。
文檔關鍵字
Meta 元素中的信息可以描述文檔的關鍵詞。
重定向
這個例子演示:在網址已經變更的情況下,將用戶重定向到另外一個地址。

例子解釋

HTML 腳本(Script) 實例

插入一段腳本
本例演示如何將腳本插入HTML 文檔。
運行於不支持腳本的瀏覽器
本例演示如何對付不支持腳本的瀏覽器。

例子解釋

 

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *