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，我們一起飛！

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

TML 支持有序、無序和定義列表

實例

無序列表

[demo]

<html>

<head>

</head>

<body>

<h4>一個無序列表：</h4>

<ul>

</ul>

</body>

</html>

[/demo]

本例演示無序列表。

有序列表

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ol>

</ol>

</ol>

</body>

</html>

[/demo]

本例演示有序列表。

無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始于 <ul> 標簽。每個列表項始于 <li>。

<ul>

<li>Coffee</li>

</ul>

瀏覽器顯示如下：

Coffee

Milk

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

<ol>

<li>Coffee</li>

</ol>

瀏覽器顯示如下：

Coffee

Milk

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

瀏覽器顯示如下：

Coffee

Black hot drink

Milk

White cold drink

定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

更多實例

不同類型的無序列表

[demo]

<html>

<head>

</head>

<body>

<h4>Disc 項目符號列表：</h4>

</ul>

<h4>Circle 項目符號列表：</h4>

</ul>

<h4>Square 項目符號列表：</h4>

</ul>

</body>

</html>

[/demo]

本例演示一個無序列表。

不同類型的有序列表

[demo]

<html>

<head>

</head>

<body>

<ol>

</ol>

</ol>

<h4>小寫字母列表：</h4>

</ol>

<h4>羅馬字母列表：</h4>

</ol>

<h4>小寫羅馬字母列表：</h4>

</ol>

</body>

</html>

[/demo]

本例演示不同類型的有序列表。

嵌套列表

[demo]

<html>

<head>

</head>

<body>

<h4>一個嵌套列表：</h4>

<ul>

<li>茶

<ul>

</ul>

</li>

</ul>

</body>

</html>

[/demo]

本例演示如何嵌套列表。

嵌套列表 2

[demo]

<html>

<head>

</head>

<body>

<h4>一個嵌套列表：</h4>

<ul>

<li>茶

<ul>

<li>綠茶

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

[/demo]

本例演示更復雜的嵌套列表。

定義列表

[demo]

<html>

<head>

</head>

<body>

<h2>一個定義列表：</h2>

<dl>

<dd>用來計算的儀器 ... ...</dd>

<dd>以視覺方式顯示信息的裝置 ... ...</dd>

</dl>

</body>

</html>

[/demo]

本例演示一個定義列表。

列表標簽

標簽描述

<ol> 定義有序列表。

<ul> 定義無序列表。

<li> 定義列表項。

<dl> 定義定義列表。

<dt> 定義定義項目。

<dd> 定義定義的描述。

<dir> 已廢棄。使用 <ul> 代替它。

<menu> 已廢棄。使用 <ul> 代替它。

在線咨詢

上一篇：HTML學習心得
下一篇：Node.js 學習筆記：構建 Web 服務

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 實例

您的項目需求