學習 HTML 100 個實例
HTML 基礎標籤實例
- 一個簡單的HTML 文件
- 這個例子是一個很簡單的HTML 文件，使用了盡可能少的HTML 標籤。它向您演示了body 元素中的內容是如何被瀏覽器顯示的。
- 簡單的段落
- 此例演示：段落元素中的文字如何被瀏覽器顯示。
- 更多的段落
- 本例演示段落元素的某些缺省的行為。
- “詩歌”問題
- 本例演示HTML 格式化的某些問題。
- 折行
- 本例演示在HTML 文檔中折行的使用。
- 標題
- 本例演示在HTML 文檔中顯示標題的標籤。
- 居中排列的標題
- 本例演示一個居中排列的標題。
- 水平線
- 本例演示如何插入水平線。
- 隱藏的註釋
- 本例演示如何在HTML 源代碼中插入隱藏的註釋。
- 背景顏色
- 本例演示如何為HTML 頁面添加背景顏色。
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 列表實例
HTML 表單與輸入實例
- 文本域(Text fields)
- 本例演示如何在HTML 頁面創建文本域。用戶可以在文本域中寫入文本。
- 密碼域
- 本例演示如何創建HTML 的密碼域。
- 複選框
- 本例演示如何在HTML 頁中創建複選框。用戶可以選中或取消選取複選框。
- 單選按鈕
- 本例演示如何在HTML 中創建單選按鈕。
- 簡單的下拉列表
- 本例演示如何在HTML 頁面中創建簡單的下拉列錶框。下拉列錶框是一個可選列表。
- 另一個下拉列表
- 本例演示如何創建一個簡單的帶有預選值的下拉列表。（譯者註：預選值指預先指定的首選項。）
- 文本域(Textarea)
- 本例演示如何創建一個文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數不受限制。
- 創建按鈕
- 本例演示如何創建按鈕。你可以對按鈕上的文字進行自定義。
- Fieldset around data
- 本例演示如何在數據周圍繪製一個帶標題的框。
表單實例
- 帶有輸入框和確認按鈕的表單
- 本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
- 帶有復選框的表單
- 此表單包含兩個複選框和一個確認按鈕。
- 帶有單選按鈕的表單
- 此表單包含兩個單選框和一個確認按鈕。
- 從表單發送電子郵件
- 此例演示如何從表單發送電子郵件。
HTML 圖像實例
- 插入圖像
- 本例演示如何在網頁中顯示圖像。
- 從不同的位置插入圖片
- 本例演示如何將其他文件夾或服務器的圖片顯示到網頁中。
- 背景圖片
- 本例演示如何向HTML 頁面添加背景圖片。
- 排列圖片
- 本例演示如何在文字中排列圖像。
- 浮動圖像
- 本例演示如何使圖片浮動至段落的左邊或右邊。
- 調整圖像尺寸
- 本例演示如何將圖片調整到不同的尺寸。
- 為圖片顯示替換文本
- 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。
- 製作圖像鏈接
- 本例演示如何將圖像作為一個鏈接使用。
- 創建圖像映射
- 本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。
- 把圖像轉換為圖像映射
- 本例顯示如何把一幅普通的圖像設置為圖像映射。
HTML 背景實例
- 搭配良好的背景和顏色
- 一個背景顏色和文字顏色搭配良好的例子，使頁面中的文字易於閱讀。
- 搭配得不好的背景和顏色
- 一個背景顏色和文字顏色搭配得不好的例子，使頁面中的文字難於閱讀。
- 可用性強的背景圖像
- 背景圖像和文字顏色使頁面文本易於閱讀的例子。
- 可用性強的背景圖像 2
- 另一個背景圖像和文字顏色使頁面文本易於閱讀的例子。
- 可用性差的背景圖像
- 背景圖像和文字顏色使頁面文本不易閱讀的例子。
HTML 樣式(style) 實例
- HTML中的樣式
- 本例演示如何使用添加到<head> 部分的樣式信息對HTML 進行格式化。
- 沒有下劃線的鏈接
- 本例演示如何使用樣式屬性做一個沒有下劃線的鏈接。
- 鏈接到一個外部樣式表
- 本例演示如何<link> 標籤鏈接到一個外部樣式表。
HTML 元信息(meta) 實例