HTML 實例
HTML 基礎標簽實例
- 一個簡單的 HTML 文件
- 這個例子是一個很簡單的 HTML 文件，使用了盡可能少的 HTML 標簽。它向您演示了 body 元素中的內容是如何被瀏覽器顯示的。
- 簡單的段落
- 此例演示：段落元素中的文字如何被瀏覽器顯示。
- 更多的段落
- 本例演示段落元素的某些缺省的行為。
- “詩歌”問題
- 本例演示 HTML 格式化的某些問題。
- 折行
- 本例演示在 HTML 文檔中折行的使用。
- 標題
- 本例演示在 HTML 文檔中顯示標題的標簽。
- 居中排列的標題
- 本例演示一個居中排列的標題。
- 水平線
- 本例演示如何插入水平線。
- 隱藏的注釋
- 本例演示如何在 HTML 源代碼中插入隱藏的注釋。
- 背景顏色
- 本例演示如何為 HTML 頁面添加背景顏色。
HTML 文本格式化實例
HTML 鏈接實例
- 創(chuàng)建超級鏈接
- 本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
- 將圖像作為鏈接
- 本例演示如何使用圖像作為鏈接。
- 在新的瀏覽器窗口打開鏈接
- 本例演示如何在新窗口打開一個頁面，這樣的話訪問者就無需離開你的站點了。
- 鏈接到同一個頁面的不同位置
- 本例演示如何使用鏈接跳轉至文檔的另一個部分
- 跳出框架
- 本例演示如何跳出框架，假如你的頁面被固定在框架之內。
- 創(chuàng)建電子郵件鏈接
- 本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）
- 創(chuàng)建電子郵件鏈接 2
- 本例演示更加復雜的郵件鏈接。
HTML 框架實例
- 垂直框架
- 本例演示：如何使用三份不同的文檔制作一個垂直框架。
- 水平框架
- 本例演示：如何使用三份不同的文檔制作一個水平框架。
- 如何使用 <noframes> 標簽
- 本例演示：如何使用 <noframes> 標簽。
- 混合框架結構
- 本例演示如何制作含有三份文檔的框架結構，同時將他們混合置于行和列之中。
- 含有 noresize="noresize" 屬性的框架結構
- 本例演示 noresize 屬性。在本例中，框架是不可調整尺寸的。在框架間的邊框上拖動鼠標，你會發(fā)現(xiàn)邊框是無法移動的。
- 導航框架
- 本例演示如何制作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。
- 內聯(lián)框架
- 本例演示如何創(chuàng)建內聯(lián)框架（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 列表實例
HTML 表單與輸入實例
- 文本域(Text fields)
- 本例演示如何在 HTML 頁面創(chuàng)建文本域。用戶可以在文本域中寫入文本。
- 密碼域
- 本例演示如何創(chuàng)建 HTML 的密碼域。
- 復選框
- 本例演示如何在 HTML 頁中創(chuàng)建復選框。用戶可以選中或取消選取復選框。
- 單選按鈕
- 本例演示如何在 HTML 中創(chuàng)建單選按鈕。
- 簡單的下拉列表
- 本例演示如何在 HTML 頁面中創(chuàng)建簡單的下拉列表框。下拉列表框是一個可選列表。
- 另一個下拉列表
- 本例演示如何創(chuàng)建一個簡單的帶有預選值的下拉列表。（譯者注：預選值指預先指定的首選項。）
- 文本域(Textarea)
- 本例演示如何創(chuàng)建一個文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數(shù)不受限制。
- 創(chuàng)建按鈕
- 本例演示如何創(chuàng)建按鈕。你可以對按鈕上的文字進行自定義。
- Fieldset around data
- 本例演示如何在數(shù)據(jù)周圍繪制一個帶標題的框。
表單實例
- 帶有輸入框和確認按鈕的表單
- 本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
- 帶有復選框的表單
- 此表單包含兩個復選框和一個確認按鈕。
- 帶有單選按鈕的表單
- 此表單包含兩個單選框和一個確認按鈕。
- 從表單發(fā)送電子郵件
- 此例演示如何從表單發(fā)送電子郵件。
HTML 圖像實例
- 插入圖像
- 本例演示如何在網(wǎng)頁中顯示圖像。
- 從不同的位置插入圖片
- 本例演示如何將其他文件夾或服務器的圖片顯示到網(wǎng)頁中。
- 背景圖片
- 本例演示如何向 HTML 頁面添加背景圖片。
- 排列圖片
- 本例演示如何在文字中排列圖像。
- 浮動圖像
- 本例演示如何使圖片浮動至段落的左邊或右邊。
- 調整圖像尺寸
- 本例演示如何將圖片調整到不同的尺寸。
- 為圖片顯示替換文本
- 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者們失去的信息。為頁面上的圖像都加上替換文本屬性是個好習慣。
- 制作圖像鏈接
- 本例演示如何將圖像作為一個鏈接使用。
- 創(chuàng)建圖像映射
- 本例顯示如何創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。
- 把圖像轉換為圖像映射
- 本例顯示如何把一幅普通的圖像設置為圖像映射。
HTML 背景實例
- 搭配良好的背景和顏色
- 一個背景顏色和文字顏色搭配良好的例子，使頁面中的文字易于閱讀。
- 搭配得不好的背景和顏色
- 一個背景顏色和文字顏色搭配得不好的例子，使頁面中的文字難于閱讀。
- 可用性強的背景圖像
- 背景圖像和文字顏色使頁面文本易于閱讀的例子。
- 可用性強的背景圖像 2
- 另一個背景圖像和文字顏色使頁面文本易于閱讀的例子。
- 可用性差的背景圖像
- 背景圖像和文字顏色使頁面文本不易閱讀的例子。
HTML 樣式 (style) 實例
- HTML中的樣式
- 本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進行格式化。
- 沒有下劃線的鏈接
- 本例演示如何使用樣式屬性做一個沒有下劃線的鏈接。
- 鏈接到一個外部樣式表
- 本例演示如何 <link> 標簽鏈接到一個外部樣式表。
HTML 頭部 (head) 實例
- 文檔的標題
- 頭元素內部的標題信息不會顯示在瀏覽器窗口中。
- 一個 target，所有的鏈接
- 本例顯示如何使用 base 標簽使頁面中的所有標簽在新窗口中打開。