HTML 實例

目錄: 1、HTML 基礎標簽實例; 2、HTML 文本格式化實例; 3、HTML 鏈接實例; 4、HTML 框架實例; 5、HTML 表格實例; 6、HTML 列表實例; 7、HTML 表單與輸入實例; 8、表單實例; 9、HTML 圖像實例; 10、HTML 背景實例; 、HTML

HTML 基礎標簽實例

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

例子解釋

HTML 文本格式化實例

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

例子解釋

HTML 鏈接實例

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

例子解釋

HTML 框架實例

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

例子解釋

HTML 表格實例

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

例子解釋

HTML 列表實例

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

例子解釋

HTML 表單與輸入實例

文本域(Text fields): 本例演示如何在 HTML 頁面創(chuàng)建文本域。用戶可以在文本域中寫入文本。
密碼域: 本例演示如何創(chuàng)建 HTML 的密碼域。
復選框: 本例演示如何在 HTML 頁中創(chuàng)建復選框。用戶可以選中或取消選取復選框。
單選按鈕: 本例演示如何在 HTML 中創(chuàng)建單選按鈕。
簡單的下拉列表: 本例演示如何在 HTML 頁面中創(chuàng)建簡單的下拉列表框。下拉列表框是一個可選列表。
另一個下拉列表: 本例演示如何創(chuàng)建一個簡單的帶有預選值的下拉列表。（譯者注：預選值指預先指定的首選項。）
文本域(Textarea): 本例演示如何創(chuàng)建一個文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數不受限制。
創(chuàng)建按鈕: 本例演示如何創(chuàng)建按鈕。你可以對按鈕上的文字進行自定義。
Fieldset around data: 本例演示如何在數據周圍繪制一個帶標題的框。
帶有輸入框和確認按鈕的表單: 本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
帶有復選框的表單: 此表單包含兩個復選框和一個確認按鈕。
帶有單選按鈕的表單: 此表單包含兩個單選框和一個確認按鈕。
從表單發(fā)送電子郵件: 此例演示如何從表單發(fā)送電子郵件。

例子解釋

HTML 圖像實例

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