HTML 實(shí)例
HTML 基礎(chǔ)標(biāo)簽實(shí)例
- 一個(gè)簡單的 HTML 文件
- 這個(gè)例子是一個(gè)很簡單的 HTML 文件，使用了盡可能少的 HTML 標(biāo)簽。它向您演示了 body 元素中的內(nèi)容是如何被瀏覽器顯示的。
- 簡單的段落
- 此例演示：段落元素中的文字如何被瀏覽器顯示。
- 更多的段落
- 本例演示段落元素的某些缺省的行為。
- “詩歌”問題
- 本例演示 HTML 格式化的某些問題。
- 折行
- 本例演示在 HTML 文檔中折行的使用。
- 標(biāo)題
- 本例演示在 HTML 文檔中顯示標(biāo)題的標(biāo)簽。
- 居中排列的標(biāo)題
- 本例演示一個(gè)居中排列的標(biāo)題。
- 水平線
- 本例演示如何插入水平線。
- 隱藏的注釋
- 本例演示如何在 HTML 源代碼中插入隱藏的注釋。
- 背景顏色
- 本例演示如何為 HTML 頁面添加背景顏色。
HTML 文本格式化實(shí)例
- 文本格式化
- 此例演示如何在一個(gè) HTML 文件中對文本進(jìn)行格式化
- 預(yù)格式文本
- 此例演示如何使用 pre 標(biāo)簽對空行和空格進(jìn)行控制。
- “計(jì)算機(jī)輸出”標(biāo)簽
- 此例演示不同的“計(jì)算機(jī)輸出”標(biāo)簽的顯示效果。
- 地址
- 此例演示如何在 HTML 文件中寫地址。
- 縮寫和首字母縮寫
- 此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。
- 文字方向
- 此例演示如何改變文字的方向。
- 塊引用
- 此例演示如何實(shí)現(xiàn)長短不一的引用語。
- 刪除字效果和插入字效果
- 此例演示如何標(biāo)記刪除文本和插入文本。
HTML 鏈接實(shí)例
- 創(chuàng)建超級鏈接
- 本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
- 將圖像作為鏈接
- 本例演示如何使用圖像作為鏈接。
- 在新的瀏覽器窗口打開鏈接
- 本例演示如何在新窗口打開一個(gè)頁面，這樣的話訪問者就無需離開你的站點(diǎn)了。
- 鏈接到同一個(gè)頁面的不同位置
- 本例演示如何使用鏈接跳轉(zhuǎn)至文檔的另一個(gè)部分
- 跳出框架
- 本例演示如何跳出框架，假如你的頁面被固定在框架之內(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)整尺寸的。在框架間的邊框上拖動鼠標(biāo)，你會發(fā)現(xiàn)邊框是無法移動的。
- 導(dǎo)航框架
- 本例演示如何制作導(dǎo)航框架。導(dǎo)航框架包含一個(gè)將第二個(gè)框架作為目標(biāo)的鏈接列表。名為 "contents.htm" 的文件包含三個(gè)鏈接。
- 內(nèi)聯(lián)框架
- 本例演示如何創(chuàng)建內(nèi)聯(lián)框架（HTML 頁中的框架）。
- 跳轉(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)識。
- 使用框架導(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)
- 本例演示如何顯示表格表頭。
- 空單元格
- 本例展示如何使用 " " 處理沒有內(nèi)容的單元格。
- 帶有標(biāo)題的表格
- 本例演示一個(gè)帶標(biāo)題 (caption) 的表格
- 跨行或跨列的表格單元格
- 本例演示如何定義跨行或跨列的表格單元格。
- 表格內(nèi)的標(biāo)簽
- 本例演示如何顯示在不同的元素內(nèi)顯示元素。
- 單元格邊距(Cell padding)
- 本例演示如何使用 Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。
- 單元格間距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加單元格之間的距離。
- 向表格添加背景顏色或背景圖像
- 本例演示如何向表格添加背景。
- 向表格單元添加背景顏色或者背景圖像
- 本例演示如何向一個(gè)或者更多表格單元添加背景。
- 在表格單元中排列內(nèi)容
- 本例演示如何使用 "align" 屬性排列單元格內(nèi)容,以便創(chuàng)建一個(gè)美觀的表格。
- 框架(frame)屬性
- 本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
HTML 列表實(shí)例
HTML 表單與輸入實(shí)例
- 文本域(Text fields)
- 本例演示如何在 HTML 頁面創(chuàng)建文本域。用戶可以在文本域中寫入文本。
- 密碼域
- 本例演示如何創(chuàng)建 HTML 的密碼域。
- 復(fù)選框
- 本例演示如何在 HTML 頁中創(chuàng)建復(fù)選框。用戶可以選中或取消選取復(fù)選框。
- 單選按鈕
- 本例演示如何在 HTML 中創(chuàng)建單選按鈕。
- 簡單的下拉列表
- 本例演示如何在 HTML 頁面中創(chuàng)建簡單的下拉列表框。下拉列表框是一個(gè)可選列表。
- 另一個(gè)下拉列表
- 本例演示如何創(chuàng)建一個(gè)簡單的帶有預(yù)選值的下拉列表。（譯者注：預(yù)選值指預(yù)先指定的首選項(xiàng)。）
- 文本域(Textarea)
- 本例演示如何創(chuàng)建一個(gè)文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字?jǐn)?shù)不受限制。
- 創(chuàng)建按鈕
- 本例演示如何創(chuàng)建按鈕。你可以對按鈕上的文字進(jìn)行自定義。
- Fieldset around data
- 本例演示如何在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框。
表單實(shí)例
- 帶有輸入框和確認(rèn)按鈕的表單
- 本例演示如何向頁面添加表單。此表單包含兩個(gè)輸入框和一個(gè)確認(rèn)按鈕。
- 帶有復(fù)選框的表單
- 此表單包含兩個(gè)復(fù)選框和一個(gè)確認(rèn)按鈕。
- 帶有單選按鈕的表單
- 此表單包含兩個(gè)單選框和一個(gè)確認(rèn)按鈕。
- 從表單發(fā)送電子郵件
- 此例演示如何從表單發(fā)送電子郵件。
HTML 圖像實(shí)例
- 插入圖像
- 本例演示如何在網(wǎng)頁中顯示圖像。
- 從不同的位置插入圖片
- 本例演示如何將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁中。
- 背景圖片
- 本例演示如何向 HTML 頁面添加背景圖片。
- 排列圖片
- 本例演示如何在文字中排列圖像。
- 浮動圖像
- 本例演示如何使圖片浮動至段落的左邊或右邊。
- 調(diào)整圖像尺寸
- 本例演示如何將圖片調(diào)整到不同的尺寸。
- 為圖片顯示替換文本
- 本例演示如何為圖片顯示替換文本。在瀏覽器無法載入圖像時(shí)，替換文本屬性告訴讀者們失去的信息。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣。
- 制作圖像鏈接
- 本例演示如何將圖像作為一個(gè)鏈接使用。
- 創(chuàng)建圖像映射
- 本例顯示如何創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個(gè)區(qū)域都是一個(gè)超級鏈接。
- 把圖像轉(zhuǎn)換為圖像映射
- 本例顯示如何把一幅普通的圖像設(shè)置為圖像映射。
HTML 背景實(shí)例
- 搭配良好的背景和顏色
- 一個(gè)背景顏色和文字顏色搭配良好的例子，使頁面中的文字易于閱讀。
- 搭配得不好的背景和顏色
- 一個(gè)背景顏色和文字顏色搭配得不好的例子，使頁面中的文字難于閱讀。
- 可用性強(qiáng)的背景圖像
- 背景圖像和文字顏色使頁面文本易于閱讀的例子。
- 可用性強(qiáng)的背景圖像 2
- 另一個(gè)背景圖像和文字顏色使頁面文本易于閱讀的例子。
- 可用性差的背景圖像
- 背景圖像和文字顏色使頁面文本不易閱讀的例子。
HTML 樣式 (style) 實(shí)例
- HTML中的樣式
- 本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進(jìn)行格式化。
- 沒有下劃線的鏈接
- 本例演示如何使用樣式屬性做一個(gè)沒有下劃線的鏈接。
- 鏈接到一個(gè)外部樣式表
- 本例演示如何 <link> 標(biāo)簽鏈接到一個(gè)外部樣式表。
HTML 頭部 (head) 實(shí)例
- 文檔的標(biāo)題
- 頭元素內(nèi)部的標(biāo)題信息不會顯示在瀏覽器窗口中。
- 一個(gè) target，所有的鏈接
- 本例顯示如何使用 base 標(biāo)簽使頁面中的所有標(biāo)簽在新窗口中打開。
HTML 元信息 (meta) 實(shí)例
- 文檔描述
- Meta 元素中的信息可以描述 HTML 文檔。
- 文檔關(guān)鍵字
- Meta 元素中的信息可以描述文檔的關(guān)鍵詞。
- 重定向
- 這個(gè)例子演示：在網(wǎng)址已經(jīng)變更的情況下，將用戶重定向到另外一個(gè)地址。