HTML 實例

TML 基礎

非常簡單的HTML文檔

HTML 標題

HTML 段落

HTML 鏈接

HTML 圖片

實例解析

HTML 標題

HTML 標題

在html源碼中插入注釋

插入水平線

實例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文檔中折行的使用。

HTML 格式化的某些問題。

實例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 標簽對空行和空格進行控制。

此例演示不同的"計算機輸出"標簽的顯示效果。

此例演示如何在 HTML 文件中寫地址。

此例演示如何實現縮寫或首字母縮寫。

此例演示如何改變文字的方向。

此例演示如何實現長短不一的引用語。

文本下劃線與刪除線

實例解析

HTML 樣式

HTML Style 元素

背景色樣式

字體樣式，顏色，大小

文本對齊樣式

設置文本字體

設置文本字體大小

設置文本字體顏色

設置文本字體，字體大小，字體顏色

HTML使用不同樣式

沒有下劃線的鏈接

鏈接到一個外部樣式表

實例解析

HTML 鏈接

創建超級鏈接

將圖像作為鏈接

在新的瀏覽器窗口打開鏈接

鏈接到同一個頁面的不同位置

跳出框架

創建電子郵件鏈接

創建電子郵件鏈接 2

實例解析

HTML 圖像

插入圖像

從不同的位置插入圖片

排列圖片

本例演示如何使圖片浮動至段落的左邊或右邊。

制作圖像鏈接

創建圖像映射

實例解析

HTML 表格

簡單的表格

沒有邊框的表格

表格中的表頭

帶有標題的表格

跨行或跨列的表格單元格

表格內的標簽

單元格邊距(Cell padding)

單元格間距(Cell spacing)

實例解析

HTML 列表

無序列表

有序列表

不同類型的有序列表

不同類型的無序列表

嵌套列表

嵌套列表 2

定義列表

實例解析

HTML Forms 和 Input

創建文本域(Text fields)

創建密碼域

復選框

單選按鈕

簡單的下拉列表

預選下拉列表

本例演示如何創建一個文本域（多行文本輸入控件）。

創建一個按鈕

本例演示如何在數據周圍繪制一個帶標題的框。

帶有文本域與輸入域的表單

帶有復選框與提交按鈕的form表單

帶有單選框與提交按鈕的表單

發送郵件表單

實例解析

HTML iframe

內聯框架 (HTML頁面中插入框架)

實例解析

HTML 頭部元素

描述了文檔標題

HTML頁面中默認的URL鏈接

提供文檔元數據

實例解析

HTML 腳本

插入一個腳本

使用 <noscript> 標簽

實例解析

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

人說成為牛人的途徑，就是練習+實踐。要想成為編程高手，離不開編程實例。有網友問：編程高手都是從哪找到編程實例開始學習的?他想找些實例來做，但是又找不到，所以尋求大家的幫忙。

相信很多學習編程的程序員，知道理論后，都想找些實例來操作操作，或者看看別人是怎么操作的。因此搜索整個互聯網，試圖找到比較好的編程實例，于是一個網站一個網站的找。為了解決大家的這個問題，W3Cschool資深用戶為大家精選編程高手最愛的實例。無論是HTML 實例、CSS 實例、XML 實例、SVG 實例，還是JavaScript 實例、JavaScript 對象實例、HTML DOM 實例，上面通通都有。

1.HTML 實例

此部分內容包括HTML 文本格式化、HTML 標題、HTML 顏色值、HTML 媒體、HTML 字符實體、HTML 區、HTML 框架等，通通都有。

而且都是文字與操作相結合，先讓你熟悉理論，再給你看例子，最后你再根據上面的理論和實例，來編寫HIML代碼。

2.CSS 實例

這部分，主要囊括CSS 語法、、CSS 創建、CSS Backgrounds(背景)、CSS Text(文本)、CSS Fonts(字體)、CSS 鏈接(link)、CSS 列表樣式(ul)、CSS Table(表格)、CSS 盒子模型、CSS Border(邊框)、CSS 輪廓(outline)屬性、CSS Margin(外邊距)、CSS Padding(填充)、CSS 分組和嵌套、CSS 尺寸 (Dimension)、CSS Display(顯示) 與 Visibility(可見性)等。同樣，這部分也是理論、實例、操作相結合。

3.XML 實例

你想找XML 屬性、XML 進階、XML JavaScript、XML 驗證器、查看 XML 文件、XML 和 CSS、XML 和 XSLT等，這里已經為你收集好了，你想要做的就是在http://www.w3cschool.cn/xml/xml-xmle_examples.html這里找。

4.JavaScript 實例

學習JavaScript，都會涉及JavaScript 錯誤處理 Throw、Try 和 Catch，以及JavaScript 調試、JavaScript 表單驗證、JavaScript 保留關鍵字、JavaScript JSON、javascript：void(0) 含義、JavaScript 代碼規范、JS 函數、JS HTML DOM、JS 高級教程、JS 瀏覽器BOM、JS 庫等內容。上面的每一點內容，W3Cschool都為您精心準備了實例和解析，你可以邊看邊操作。

5.JavaScript 對象實例

此部分內容，主要包括JavaScript 輸出、JavaScript 語法、JavaScript 語句、JavaScript 注釋、JavaScript 變量等

JavaScript 教程，還有JS 函數、JS HTML DOM、JS 高級教程、JS 瀏覽器BOM、JS 庫等。你可以看完理論，在文本框中編輯代碼，再看運行結果。

6.HTML DOM 實例

如果你想掌握HTML DOM ，W3Cschool位大家精選HTML DOM 教程、HTML DOM 簡介、HTML DOM 節點、HTML DOM 方法、HTML DOM 屬性、HTML DOM 訪問、HTML DOM 修改等實例。

7.XML DOM 實例

這部分，主要包括XML DOM 瀏覽器差異、XML DOM – 導航節點、XML DOM – 獲取節點值、XML DOM – 改變節點值、XML DOM – 刪除節點、XML DOM – 替換節點、XML DOM – 創建節點等。每一塊內容，都會有相對應的例子。你可以先看例子，再進行實操。

8.AJAX 實例

創建一個簡單的XMLHttpRequest，從一個TXT文件中返回數據;創建一個簡單的XMLHttpRequest，從一個XML文件中返回數據。這里，將囊括XHR 創建對象、XHR 請求、XHR 響應、XHR readyState、AJAX ASP/PHP、AJAX 數據庫等內容。

9.VBScript 實例

此部分將教你使用VBScript寫文本，使用HTML標簽格式化文本，了解head部分中的函數、body部分中的腳本等。更多詳情，就在http://www.w3cschool.cn/vbscript/vbscript-examples.html。

10.ASP 實例

你想學習用ASP寫文本、向文本添加HTML，亦或者使用Vbscript制作基于時間的問候語、使用JavaScript制作基于時間的問候語等，我們都幫你選好了實例。

11.ADO 實例

這部分內容，主要包括ADO Error 對象、ADO 實例、ADO Connection 對象、ADO 總結、ADO Command 對象、ADO 數據類型、ADO 通過 GetString() 加速腳本、ADO Stream 對象等，所有的實例這邊都有。你可以看著實例來編寫代碼，再運行結果。

12.SVG 實例

這里你可以學到SVG 橢圓、SVG 直線、SVG 多邊形、SVG 曲線、SVG 路徑、SVG 文本、SVG Stroke 屬性、SVG 濾鏡、SVG 模糊效果等知識。不僅如此，這部分內容還教你把如何將SVG代碼直接嵌入到HTML代碼中。

俗話說“實踐是檢驗真理的唯一標準”。即使你理論知道得再多，沒有去操作也只是紙上談兵。對于程序員來說，系統的找編程實例相當困難。W3Cschool資深用戶為大家精心收集的編程實例大全，希望能夠幫助大家。

上面所有的編程實例，都在這里http://www.w3cschool.cn/。趕緊收藏吧，有了這個收藏夾，找干貨不用愁!

公眾號：w3cschoolcn

TML 使用超級鏈接與網絡上的另一個文檔相連。

幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

實例

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="/index.html">本文本</a> 是一個指向本網站中的一個頁面的鏈接。</p>

<p><a >本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>

</body>

</html>

[/demo]

本例演示如何在 HTML 文檔中創建鏈接。

將圖像作為鏈接

[demo]

<html>

<head>

</head>

<body>

<p>

您也可以使用圖像來作鏈接：

</a>

</p>

</body>

</html>

[/demo]

本例演示如何使用圖像作為鏈接。

（可以在本頁底端找到更多實例）

HTML 超鏈接（鏈接）

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式：

通過使用 href 屬性 - 創建指向另一個文檔的鏈接

通過使用 name 屬性 - 創建文檔內的書簽

什么是超文本？

標記語言的真正威力在于其收集能力，它可以將收集來的文檔組合成一個完整的信息庫，并且可以將文檔庫與世界上的其他文檔集合鏈接起來。

這樣的話，讀者不僅可以完全控制文檔在屏幕上的顯示，還可以通過超鏈接來控制瀏覽信息的順序。這就是 HTML 和 XHTML 中的 “HT” - 超文本（hypertext），就是它將整個 Web 網絡連接起來。

超文本的基礎知識

超文本的基本特征就是可以超鏈接文檔；你可以指向其他位置，該位置可以在當前的文檔中、局域網中的其他文檔，也可以在因特網上的任何位置的文檔中。這些文檔組成了一個雜亂的信息網。目標文檔通常與其來源有某些關聯，并且豐富了來源；來源中的鏈接元素則將這種關系傳遞給瀏覽者。

超鏈接可以用于各種效果。超鏈接可以用在目錄和主題列表中。瀏覽者可以在瀏覽器屏幕上單擊鼠標或在鍵盤上按下按鍵，從而選擇并自動跳轉到文檔中自己感興趣的那個主題，或跳轉到世界上某處完全不同的集合中的某個文檔。

超鏈接還可以向瀏覽者指出有關文檔中某個主題的更多信息。例如，“如果您想了解更詳細的信息，請參閱某某頁面。”。作者可以使用超鏈接來減少重復信息。例如，我們建議創作者在每個文檔中都簽署上自己的姓名。這樣就可以使用一個將名字和另一個包含地址、電話號碼等信息的單獨文檔鏈接起來的超鏈接，而不必在每個文檔中都包含完整的聯系信息。

超鏈接（hyper text），或者按照標準叫法稱為錨（anchor），是使用 <a> 標簽標記的，可以用兩種方式表示。錨的一種類型是在文檔中創建一個熱點，當用戶激活或選中（通常是使用鼠標）這個熱點時，會導致瀏覽器進行鏈接。瀏覽器會自動加載并顯示同一文檔或其他文檔中的某個部分，或觸發某些與因特網服務相關的操作，例如發送電子郵件或下載特殊文件等。錨的另一種類型會在文檔中創建一個標記，該標記可以被超鏈接引用。

還有一些與超鏈接相關聯的鼠標相關事件。這些事件與 JavaScript 結合使用可以產生一些令人激動的效果。

注釋

錨的這兩種類型都使用同樣的標簽；也許這就是它們擁有同樣的名稱的原因。但是我們發現，如果將它們區分開，把提供熱點和超鏈接地址的錨看作“鏈接”，而用于標記文檔的目標部分的錨稱為“錨”，那么您將更容易理解這兩種類型的錨。

HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：

href 屬性規定鏈接的目標。

開始標簽和結束標簽之間的文字被作為超級鏈接來顯示。

實例

<a >Visit W3School</a>

上面這行代碼顯示為：Visit W3School

點擊這個超鏈接會把用戶帶到 W3School 的首頁。

提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

<a target="_blank">Visit W3School!</a>

[demo]

<html>

<head>

</head>

<body>

<a target="_blank">Visit W3School!</a>

<p>如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。</p>

</body>

</html>

[/demo]

HTML 鏈接 - name 屬性

name 屬性規定錨（anchor）的名稱。

您可以使用 name 屬性創建 HTML 頁面中的書簽。

書簽不會以任何特殊方式顯示，它對讀者是不可見的。

當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。

命名錨的語法：

<a name="label">錨（顯示在頁面上的文本）</a>

提示：錨的名稱可以是任何你喜歡的名字。

提示：您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。

實例

首先，我們在 HTML 文檔中對錨進行命名（創建一個書簽）：

<a name="tips">基本的注意事項 - 有用的提示</a>

然后，我們在同一個文檔中創建指向該錨的鏈接：

<a href="#tips">有用的提示</a>

您也可以在其他頁面中創建指向該錨的鏈接：

<a >有用的提示</a>

在上面的代碼中，我們將 # 符號和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個命名錨了。

基本的注意事項 - 有用的提示：

注釋：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

提示：命名錨經常用于在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。

提示：假如瀏覽器找不到已定義的命名錨，那么就會定位到文檔的頂端。不會有錯誤發生。

更多實例

在新的瀏覽器窗口打開鏈接

[demo]

<html>

<head>

</head>

<body>

<a target="_blank">Visit W3School!</a>

<p>如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。</p>

</body>

</html>

[/demo]

本例演示如何在新窗口打開一個頁面，這樣的話訪問者就無需離開你的站點了。

鏈接到同一個頁面的不同位置

[demo]

<html>

<head>

</head>

<body>

<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<h2>Chapter 1</h2>