HTML教程（看完這篇就夠了）

目錄結構

HTML教程
HTML 簡介
HTML 編輯器
HTML基礎
HTML 元素
HTML 屬性
HTML 標題
HTML 段落
HTML 文本格式化
HTML 鏈接
HTML head
HTML CSS
HTML 圖像
HTML 表格
HTML 列表
HTML 塊級元素
HTML 佈局
HTML 表單
HTML iframe
HTML 顏色
HTML 顏色值
HTML 顏色名
HTML 腳本
HTML 字符實體
HTML URL
HTML 速查列表
HTML 總結
HTML XHTML
HTML 多媒體
HTML 插件
HTML 音頻（Audio）
HTML 視頻(Videos)

HTML教程

超文本標記語言（英語：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。

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

HTML 編輯器

推薦幾個常用的編輯器

提高編碼速度插件 Emmet 插件

Emmet 官網

HTML基礎

html標題

HTML 標題（Heading）是通過 <h1> - <h6> 標籤來定義的.

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>

html段落

HTML 段落是通過標籤 <p> 來定義的.

<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

html鏈接

HTML 鏈接是通過標籤 <a> 來定義的.

<a href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102">這是一個指向孫叫獸新浪微博的鏈接</a>

html圖像

HTML 圖像是通過img標籤來定義的.

<img src="html/logo.png" width="500px" height="100px"/>

HTML 元素

html元素

html元素語法

HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
元素的內容是開始標籤與結束標籤之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
大多數 HTML 元素可擁有屬性

嵌套的html元素

HTML 文檔由嵌套的 HTML 元素構成。

實例：（包含三個元素）

<!DOCTYPE html>
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>

不要忘記結束標籤

html空元素

沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。

<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。

在開始標籤中添加斜槓，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

html提示：使用小寫標籤

HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。

孫叫獸使用的是小寫標籤，因爲萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

HTML 屬性

屬性是 HTML 元素提供的附加信息。

html屬性

HTML 元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述於開始標籤
屬性總是以名稱/值對的形式出現，比如：name=“value”。

HTML 鏈接由標籤定義。鏈接的地址在 href 屬性中指定：

<a href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102">這是一個指向孫叫獸新浪微博的超鏈接</a>

html屬性值常用引用屬性值

屬性值應該始終被包括在引號內。

雙引號是最常用的，不過使用單引號也沒有問題。

提示: 在某些個別的情況下，比如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：name=‘BE “BAGAN” son’

HTML提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過，萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

html屬性：標準手冊（具體屬性參考文檔，這裏列出幾個常用的）

HTML 標題

標題（Heading）是通過<h1> - <h6> 標籤進行定義的.

<h1> 定義最大的標題。 <h6> 定義最小的標題。

<h1>這是一級標題。</h1>
<h2>這是二級標題。</h2>
<h3>這是三級標題。</h3>
<h1>這是四級標題。</h1>
<h2>這是五級標題。</h2>
<h3>這是六級標題。</h3>

註釋: 瀏覽器會自動地在標題的前後添加空行。

標題很重要

請確保將 HTML 標題標籤只用於標題。不要僅僅是爲了生成粗體或大號的文本而使用標題。

搜索引擎使用標題爲您的網頁的結構和內容編制索引。

因爲用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。

應該將 h1 用作主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。

html水平線

<hr> 標籤在 HTML 頁面中創建水平線。

hr 元素可用於分隔內容。

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

html註釋

可以將註釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。

註釋寫法如下:

<!--這是一個註釋-->

註釋: 開始括號之後（左邊的括號）需要緊跟一個歎號，結束括號之前（右邊的括號）不需要，合理地使用註釋可以對未來的代碼編輯工作產生幫助。

html如何查看源代碼？

你是否看過一些網頁然後驚歎它是如何實現的的。

如果您想找到其中的奧祕，只需要單擊右鍵，然後選擇”查看源文件”（IE）或”查看頁面源代碼”（Firefox），其他瀏覽器的做法也是類似的。這麼做會打開一個包含頁面 HTML 代碼的窗口。

html標籤參考手冊

HTML 段落

HTML 可以將文檔分割爲若干段落，段落是通過 <p> 標籤定義的。

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

注意：瀏覽器會自動地在段落的前後添加空行。（</p> 是塊級元素）

不要忘記結束標籤

即使忘了使用結束標籤，大多數瀏覽器也會正確地將 HTML 顯示出來：

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

上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標籤會產生意想不到的結果和錯誤。

註釋: 在未來的 HTML 版本中，不允許省略結束標籤。

html換行

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br> 標籤：

<p>這個<br>段落<br>演示了分行的效果</p>

br元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義，因此它沒有結束標籤。

html輸出提醒

我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。

對於 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。

當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示爲一個空格。

html參考手冊

HTML 文本格式化

<b>加粗文本</b><br/>
<i>斜體文本</i><br/>
<code>電腦自動輸出</code><br/>
<sub> 下標</sub> 
<sup> 上標</sup>

html格式化標籤

html計算機輸出標籤

html引文，引用，標籤定義

HTML 鏈接

HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

HTML使用標籤來設置超文本鏈接。

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

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

在標籤中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示爲藍色字體並帶有下劃線。
訪問過的鏈接顯示爲紫色並帶有下劃線。
點擊鏈接時，鏈接顯示爲紅色並帶有下劃線。

注意：如果爲這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

<a href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102">訪問孫叫獸的新浪微博</a>

href 屬性描述了鏈接的目標。

提示: “鏈接文本” 不必一定是文本。圖片或其他 HTML 元素都可以成爲鏈接。

html鏈接-- target屬性

<a  href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102"  
    target="_blank">
        孫叫獸的新浪微博
</a>

_blank屬性是在新的瀏覽器頁面打開，還有其它屬性，前面的文檔提到過，有興趣可以找一下以前我寫的帖子，父窗口，頂部打開，新瀏覽器頁面，等4個屬性。

html鏈接--id屬性

id屬性可用於創建在一個HTML文檔書籤標記。

提示: 書籤是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對於讀者來說是隱藏的。

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創建一個鏈接到”有用的提示部分(id=“tips”）”：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面創建一個鏈接到”有用的提示部分(id=“tips”）”：

<a href="https://www.axihe.com/#tips">
訪問有用的提示部分</a>

html鏈接標籤

HTML head

<head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。

可以添加在頭部區域的元素標籤爲: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

html中的title元素

<title> 標籤定義了不同文檔的標題。

<title> 在 HTML/XHTML 文檔中是必須的。

<title> 元素:

* 定義了瀏覽器工具欄的標題
* 當網頁添加到收藏夾時，顯示在收藏夾中的標題
* 顯示在搜索引擎結果頁面的標題

一個簡單的 HTML 文檔:

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title>
</head>
 
<body>
文檔內容......
</body>
 
</html>

html中的base元素

<base> 標籤描述了基本的鏈接地址/鏈接目標，該標籤作爲HTML文檔中所有的鏈接標籤的默認鏈接:

<head>
<base href="https://weibo.com/5799376447/profile?topnav=1&wvr=6&is_all=1" target="_blank"/ >
</head>

HTML CSS

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式.

CSS 是在 HTML 4 開始使用的,是爲了更好的渲染HTML元素而引入的.

CSS 可以通過以下方式添加到HTML中:

內聯樣式- 在HTML元素中使用”style” 屬性
內部樣式表 -在HTML文檔頭部 <head> 區域使用<style> 元素來包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通過外部引用CSS文件.

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

<p style="color:blue;margin-left:10px;">這是一個段落</p>

背景色屬性（background-color）定義一個元素的背景顏色：

<body style="background: yellow;">
<h1 style="background: aliceblue;">這是一個標題</h1>
<p style="background: aquamarine;">這是一個段落 </p>
</body>

早期背景色屬性（background-color）是使用 bgcolor 屬性定義。

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

<h1 style="font-family: Andalus;">這是一個標題</h1>
<p style="font-family: Andalus;font-size: 20px;color: aqua;">這是一個段落 </p>

現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標籤。

使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：

<h1 style="text-align: center;">這是水平居中標題</h1>
<p style="text-align: left;">這是一個段落左對齊</p>

文本對齊屬性 text-align取代了舊標籤 <center> 。

內部樣式表：

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標籤定義內部樣式表:

<header>
    <style type="text/css">
        body{background-color: aqua;}
        p{background-color: red;}

    </style>

</header>

<header>
    <link rel="stylesheet" type="text/css" href="mysheet.css;">
</header>

外部樣式表：

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。如上：

樣式標籤：

HTML 圖像

在 HTML 中，圖像由標籤定義。

<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。

要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 “source”。源屬性的值是圖像的 URL 地址。

語法：

<img src="url" alt="s_text">

URL 指存儲圖像的位置。如果名爲 “alipay-redpack.png” 的圖像位於 www.erawork.cn 的 images 目錄中，那麼其 URL 爲 https://erawork.cn/images/alipay-redpack.png 。

瀏覽器將圖像顯示在文檔中圖像標籤出現的地方。如果你將圖像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。

alt 屬性用來爲圖像定義一串預備的可替換的文本。

替換文本屬性的值是用戶定義的。

<img src="right.png" alt="我是孫叫獸">

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。

height（高度）與 width（寬度）屬性用於設置圖像的高度與寬度。

屬性值默認單位爲像素:

<img src="right.png" alt="我是孫叫獸" width="400px;" height="500px;">

提示: 指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體佈局。

注意事項：

注意: 假如某個 HTML 文件包含十個圖像，那麼爲了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。

注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標籤就會顯示一個破碎的圖片。

圖像標籤：

HTML 表格

表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格實例：

<html>
<header>
    <meta charset="UTF-8">
<title>孫叫獸測試表格</title>
</header>
<body>
<table border="1">
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
</table>
</body>

</html>

瀏覽器效果：

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格

<table border="1">
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
</table>

表格表頭：

表格的表頭使用 <th> 標籤進行定義。

大多數瀏覽器會把表頭顯示爲粗體居中的文本：

<html>
<header>
    <meta charset="UTF-8">
<title>孫叫獸測試表格</title>
</header>
<body>
<table border="1">
    <tr>
        <th>表頭1</th>
        <th>表頭2</th>
    </tr>
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
    <tr>
        <td>我是孫叫獸</td>
        <td>這是孫叫獸的博客</td>
    </tr>
</table>
</body>

</html>

瀏覽器效果：

html表格標籤：

HTML 列表

HTML 支持有序、無序和自定義列表:

有序列表：

有序列表是一列項目，列表項目使用數字進行標記。有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。

列表項使用數字來標記

<ol>
   <li>百度</li>
    <li>谷歌</li>
    <li>網易</li>
</ol>

瀏覽器效果：

無序列表：

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

無序列表使用 <ul> 標籤

<ul>
   <li>百度</li>
    <li>谷歌</li>
    <li>網易</li>
</ul>

瀏覽器效果：

自定義列表：

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

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

<dl>
    <dt>百度</dt>
    <dd>-中文搜索引擎</dd>
    <dt>谷歌</dt>
    <dd>-全球搜索引擎</dd>
    <dt>網易</dt>
    <dd>-知名互聯網公司</dd>

</dl>

瀏覽器效果：

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

html列表標籤：

HTML 塊級元素

HTML 可以通過 <div> 和 <span>將元素組合起來。

大多數 HTML 元素被定義爲塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

實例: <h1>, <p>, <ul>, <table>

html-div元素

大多數 HTML 元素被定義爲塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

實例: <h1>, <p>, <ul>, <table>

html-span元素

HTML <span> 元素是內聯元素，可用作文本的容器

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。

html分組標籤：

HTML 佈局

網頁佈局對改善網站的外觀非常重要。

請慎重設計您的網頁佈局

大多數網站會把內容安排到多個列中（就像雜誌或報紙那樣）。

大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用於對元素進行定位，或者爲頁面創建背景以及色彩豐富的外觀。

提示：雖然我們可以使用HTML table標籤來設計出漂亮的佈局，但是table標籤是不建議作爲佈局工具使用的 - 表格不是佈局工具。

<div>元素

div 元素是用於分組 HTML 元素的塊級元素。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<h1 style="background-color: beige; margin-bottom: 0;">孫叫獸的網站</h1>
<div id="container" style="width: 1800px; background-color: bisque;" >
<div id="menu" style="background-color: bisque;width: 100px; float: left; font-size: 15px;" >
    <b>菜單</b><br>
    html<br>
    css<br>
    javascript<br>
</div>
<div id="content" style="width: 1700px; background-color: aqua;height: 200px;float: left;font-size: 20px;">這個是內容部分</div>
<div id="footer" style="font-size: 16px;background-color: yellow;height: 20px;clear: both; text-align: center;">版權所有，@孫叫獸的博客</div>
</div>
</body>
</html>

效果如下：

html佈局-使用表格

使用 HTML <table> 標籤是創建佈局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用於對元素進行定位，或者爲頁面創建背景以及色彩豐富的外觀。

即使可以使用 HTML 表格來創建漂亮的佈局，但設計表格的目的是呈現表格化數據 - 表格不是佈局工具！

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>孫叫獸的網站</title>
</head>
<body>
<table style="width: 1800px;" border="0;">
    <tr>
        <td colspan="2" style="background-color: yellow;"><h1>孫叫獸的網站</h1></td>
    </tr>
    <tr>
        <td style="background-color: beige;font-size: 16px; width: 100px;height: 200px;"><b>菜單</b><br>
        html<br>
        css<br>
        javascript<br>
        </td>
        <td style="width: 1700px;height: 200px;background-color: bisque;font-size: 20px;">內容</td>
    </tr>
    <tr>
        <td colspan="2" style="font-size: 12px; background-color: aliceblue;text-align: center;">
            版權所有@孫叫獸的博客
        </td>
    </tr>

</table>
</body>
</html>

瀏覽器效果：

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。通過編輯單一的文件，就可以改變所有頁面的佈局

Tip: 由於創建高級的佈局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站佈局，並優化它們）。

html佈局標籤：

HTML 表單

HTML 表單用於收集不同類型的用戶輸入。

表單是一個包含表單元素的區域。

表單元素是允許用戶在表單中輸入內容，比如：文本域 (textarea)、下拉列表、單選框 (radio-buttons)、複選框 (checkboxes) 等等。

表單使用表單標籤 <form> 來設置：

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">  
    <title>孫叫獸測試表單</title>
</head>
<body>
<form>
    <input>我就是我，是天空不一樣的煙火！
</form>
</body>
</html>

html表單-輸入元素

多數情況下被用到的表單標籤是輸入標籤（<input>）。

輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

文本域（Text Fields）

文本域通過 <input type=“text”> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試表單</title>
</head>
<body>
<form>
    姓名：<input type="text;" name="name;"><br>
    電話：<input type="text" name="phone">
</form>
</body>
</html>

瀏覽器顯示：

注意：表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是 20 個字符。

密碼字段：

密碼字段通過標籤 <input type=“password”> 來定義：

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試表單</title>
</head>
<body>
<form>
    姓名：<input type="text;" name="name;"><br>
    電話：<input type="text" name="phone"><br>
    用戶名：<input type="text" name="username" ><br>
    密碼：<input type="password" name="pwd">
</form>
</body>
</html>

瀏覽器顯示效果如下：

注意：密碼字段字符不會明文顯示，而是以星號或圓點替代。

單選按鈕（Radio Buttons）

<input type=“radio”> 標籤定義了表單單選框選項

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試表單</title>
</head>
<body>
<form>
   <input type="radio" name="sex" value="male">男生
    <input type="radio" name="sex" value="female">女生
</form>
</body>
</html>

瀏覽器效果：

複選框（Radio Buttons）

<input type=“checkbox”> 定義了複選框。用戶需要從若干給定的選擇中選取一個或若干選項。

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試表單</title>
</head>
<body>
<form>
   <input type="checkbox" name="vehicle" value="bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="car">I have a car
</form>
</body>
</html>

瀏覽器效果：

提交按鈕（Submit Button）

<input type=“submit”> 定義了提交按鈕。

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試表單</title>
</head>
<body>
<form name="input" action="https://www.baidu.com" method="post">
    用戶名：<input type="text" name="user"><br>
    密碼：<input type="password" name="pwd" value="6">
    <input type="submit" value="submit">
</form>
</body>
</html>

瀏覽器顯示效果：

html表單標籤：

HTML iframe

通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試表單</title>
</head>
<body>
<iframe src="https://mp.csdn.net/console/editor/html/106352226" height="500px;" width="800px;">

</iframe>
</body>
</html>

演示如下：

iframe 語法:

該URL指向不同的網頁。

iframe設置高度和寬度：

height 和 width 屬性用來定義iframe標籤的高度與寬度。

屬性默認以像素爲單位, 但是你可以指定其按比例顯示 (如：”80%“)。

<iframe src="https://mp.csdn.net/console/editor/html/106352226" height="500px;" width="800px;">

</iframe>

iframe移除邊框：

frameborder 屬性用於定義iframe表示是否顯示邊框。

設置屬性值爲 “0” 移除iframe的邊框:

<iframe src="https://mp.csdn.net/console/editor/html/106352226" frameborder="0">

使用iframe來顯示目標鏈接頁面：

iframe可以顯示一個目標鏈接的頁面

目標鏈接的屬性必須使用iframe的屬性，如下實例:

<iframe src="https://mp.csdn.net/console/editor/html/106352226" name="erawork"></iframe>
<p><a href="http://erawork.cn" target="erawork">孫叫獸的博客</a></p>

瀏覽器效果：

html iframe標籤：

HTML 顏色

HTML 顏色由紅色、綠色、藍色混合而成。

顏色值：

HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。

每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。

這個表格給出了由三種顏色混合而成的具體效果：

<p style="background-color: #ffff00;">使用十六進制設置顏色</p>
<p style="background-color: rgb(255,255,0);">使用rgb設置顏色</p>
<p style="background-color: yellow;">通過顏色名設置背景顏色</p>

效果圖：

1600萬種不同顏色：

三種顏色紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。

在下面的顏色表中你會看到不同的結果，從0到255的紅色，同時設置綠色和藍色的值爲0,隨着紅色的值變化，不同的值都顯示了不同的顏色。

灰暗色調：

以下展示了灰色到黑色的漸變

Web安全色?

數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作爲 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。

我們不確定如今這麼做的意義有多大，因爲越來越多的計算機有能力處理數百萬種顏色，不過做選擇還是你自己。

最初，216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。

HTML 顏色值

顏色由紅®、綠(G)、藍(B)組成。

顏色值

顏色值由十六進制來表示紅、綠、藍（RGB）。

每個顏色的最低值爲 0(十六進制爲 00)，最高值爲 255(十六進制爲FF)。

十六進制值的寫法爲 # 號後跟三個或六個十六進制字符。

三位數表示法爲：#RGB，轉換爲6位數表示爲：#RRGGBB。

顏色實例：

HTML 顏色名

目前所有瀏覽器都支持以下顏色名。

141個顏色名稱是在HTML和CSS顏色規範定義的（17標準顏色，再加124）。下表列出了所有顏色的值，包括十六進制值。

提示: 17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。點擊其中一個顏色名稱（或一個十六進制值）就可以查看與不同文字顏色搭配的背景顏色。

按顏色名排序

單擊一個顏色名或者 16 進制值，就可以查看與不同文字顏色搭配的背景顏色。

HTML 腳本

JavaScript 使 HTML 頁面具有更強的動態和交互性。

JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。

下面的腳本會向瀏覽器輸出”Hello World!“：

<script>
    alert("helle world!");
</script>

瀏覽器效果：

HTML<noscript> 標籤

只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容

<script>
    alert("helle world!");
</script>
<noscript>抱歉，您的瀏覽器還不支持這個腳本</noscript>

JavaScript體驗：

avaScript可以直接在HTML輸出:

<script>
    document.write("<p>這是一個段落</p>");
</script>

瀏覽器效果：

JavaScript事件響應:

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">
    <title>孫叫獸測試javaScript</title>
</head>
<body>
<button type="button" οnclick="Myfunction();">點擊我</button>
<script>
   function Myfunction(){
       alert("北京歡迎你！");

   }
</script>


</body>
</html>

瀏覽器效果：

JavaScript處理 HTML 樣式:

document.getElementById("demo").style.color="#ff";

html腳本標籤：

HTML 字符實體

HTML 中的預留字符必須被替換爲字符實體。

一些在鍵盤上找不到的字符也可以使用字符實體來替換

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小於號（<）和大於號（>），這是因爲瀏覽器會誤認爲它們是標籤。

如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。字符實體類似這樣：

&entity_name;
或
&#entity_number;

如需顯示小於號，我們必須這樣寫：

&lt; 或 &#60; 或 &#060;

渲染效果：< 或 < 或 <

提示：使用實體名而不是數字的好處是，名稱易於記憶。不過壞處是，瀏覽器也許並不支持所有實體名稱（對實體數字的支持卻很好）。

不間斷空格(Non-breaking Space)

HTML 中的常用字符實體是不間斷空格( )。

瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量，您需要使用字符實體。&nbsp；

結合音標符

發音符號是加到字母上的一個”glyph(字形)“。

一些變音符號, 如尖音符 ( ̀) 和抑音符 ( ́) 。

變音符號可以出現字母的上面和下面，或者字母裏面，或者兩個字母間。

變音符號可以與字母、數字字符的組合來使用。

以下是一些實例:

HTML字符實體（實體對大小寫敏感）

HTML URL

URL 是一個網頁地址。

URL可以由字母組成，如”smlwd.home.blog”，或互聯網協議（IP）地址： 192.68.XX.xx。大多數人進入網站使用網站域名來訪問，因爲名字比數字更容易記住。

Web瀏覽器通過URL從Web服務器請求頁面。

當您點擊 HTML 頁面中的某個鏈接時，對應的標籤指向萬維網上的一個地址。

一個統一資源定位器(URL) 用於定位萬維網上的文檔。

一個網頁地址實例語法規則:

scheme://host.domain:port/path/filename

說明:

scheme - 定義因特網服務的類型。最常見的類型是 http/https/ftp/…
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 axihe.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。
filename - 定義文檔/資源的名稱

常見的 URL Scheme

url字符編碼：

URL 只能使用 ASCII 字符集.

來通過因特網進行發送。由於 URL 常常會包含 ASCII 集合之外的字符，URL 必須轉換爲有效的 ASCII 格式。

URL 編碼使用 “%” 其後跟隨兩位的十六進制數來替換非 ASCII 字符。

URL 不能包含空格。URL 編碼通常使用 + 來替換空格。

URL 編碼實例

HTML 基本文檔

<!DOCTYPE html>
<html>
<head>
<title>文檔標題</title>
</head>
<body>
可見文本...
</body>
</html>

基本標籤（Basic Tags）

<h1>最大的標題</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的標題</h6>
 
<p>這是一個段落。</p>
<br> （換行）
<hr> （水平線）
<!-- 這是註釋 -->

文本格式化（Formatting）

<b>粗體文本</b>
<code>計算機代碼</code>
<em>強調文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd> 
<pre>預格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （縮寫）
<address> （聯繫信息）
<bdo> （文字方向）
<blockquote> （從另一個源引用的部分）
<cite> （工作的名稱）
<del> （刪除的文本）
<ins> （插入的文本）
<sub> （下標文本）
<sup> （上標文本）

鏈接（Links）

普通的鏈接：<a href="http://www.example.com/">鏈接文本</a>
圖像鏈接： <a href="http://www.example.com/"><img src="URL" alt="替換文本"></a>
郵件鏈接： <a href="mailto:[email protected]">發送e-mail</a>
書籤：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

圖片（Images）

<img src="URL" alt="替換文本" height="42" width="42">

樣式/區塊（Styles/Sections）:

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文檔中的塊級元素</div>
<span>文檔中的內聯元素</span>

無序列表

<ul>
    <li>項目</li>
    <li>項目</li>
</ul>

有序列表

<ol>
    <li>第一項</li>
    <li>第二項</li>
</ol>

自定義列表

<dl>
  <dt>項目 1</dt>
    <dd>描述項目 1</dd>
  <dt>項目 2</dt>
    <dd>描述項目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格標題</th>
    <th>表格標題</th>
  </tr>
  <tr>
    <td>表格數據</td>
    <td>表格數據</td>
  </tr>
</table

架（Iframe）

表單（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>蘋果</option>
<option selected="selected">香蕉</option>
<option>櫻桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 </form>

實體（Entities）

&lt; 等同於 <
&gt; 等同於 >
&#169; 等同於 ©

HTML 總結

本教程已教你如何使用 HTML 創建站點。

HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本，添加圖片，創建鏈接、輸入表單、框架和表格等等，並可將之存爲文本文件，瀏覽器即可讀取和顯示。

HTML 的關鍵是標籤，其作用是指示將出現的內容。

現在，你已學完HTML，接下來該學習什麼呢？

學習 CSS

CSS被用來同時控制多重網頁的樣式和佈局。

通過使用 CSS，所有的格式化均可從 HTML 中剝離出來，並存儲於一個獨立的文件中。

學習 JavaScript

JavaScript 可以讓你的網頁更加生動。

如果你只想展示內容，靜態網站是很好的展示形象，如果你想與用戶進行交換或者讓網頁更加生動那就需要使用到Javascript。

JavaScript是互聯網上最流行的腳本語言，目前所有主流瀏覽器都支持Javascript。

站點服務器

在自己的服務器上託管網站始終是一個選項。有幾點需要考慮：

1.硬件支出

如果要運行”真正”的網站，您不得不購買強大的服務器硬件。不要指望低價的 PC 能夠應付這些工作。您還需要穩定的（一天 24 小時）高速連接。

2.軟件支出

請記住，服務器授權通常比客戶端授權更昂貴。同時請注意，服務器授權也許有用戶數量限制。

3.人工費

不要指望低廉的人工費用。您必須安裝自己的硬件和軟件。您同時要處理漏洞和病毒，以確保您的服務器時刻正常地運行於一個”任何事都可能發生”的環境中。

使用因特網服務提供商（ISP）

從 ISP 租用服務器也很常見。

大多數小公司會把網站存放到由 ISP 提供的服務器上。其優勢有以下幾點：

1.連接速度

大多數 ISP 都擁有連接因特網的高速連接。

2.強大的硬件

ISP 的 web 服務器通常強大到能夠由若干網站分享資源。您還要看一下 ISP 是否提供高效的負載平衡，以及必要的備份服務器。

3.安全性和可靠性

ISP 是網站託管方面的專家。他們應該提供 99% 以上的在線時間，最新的軟件補丁，以及最好的病毒防護。

選擇 ISP 時的注意事項：

24 小時支持

確保 ISP 提供 24 小時支持。不要使自己置於無法解決嚴重問題的尷尬境地，同時還必須等待第二個工作日。如果您不希望支付長途電話費，那麼免費電話服務也是必要的。

每日備份

確保 ISP 會執行每日備份的例行工作，否則您有可能損失有價值的數據。

流量

研究一下 ISP 的流量限制。如果出現由於網站受歡迎而激增的不可預期的訪問量，那麼您要確保不會因此支付額外費用。

帶寬或內容限制

研究一下 ISP 的帶寬和內容限制。如果您計劃發佈圖片或播出視頻或音頻，請確保您有此權限。

E-mail 功能

請確保 ISP 支持您需要的 e-mail 功能。

數據庫訪問

如果您計劃使用網站數據庫中的數據，那麼請確保您的 ISP 支持您需要的數據庫訪問。

HTML XHTML

XHTML 是以 XML 格式編寫的 HTML。

什麼是XHTML？

XHTML 指的是可擴展超文本標記語言
XHTML 與 HTML4 幾乎是相同的
XHTML 是更嚴格更純淨的 HTML 版本
XHTML 是以 XML 應用的方式定義的 HTML
XHTML 是 2001 年 1 月 “W3C XHTML 活動” 發佈的 W3C 推薦標準
XHTML 得到所有主流瀏覽器的支持

爲什麼使用XHTML?

因特網上的很多頁面包含了”糟糕”的 HTML。

如果在瀏覽器中查看，下面的 HTML 代碼運行起來非常正常（即使它並未遵守 HTML 規則）：

<html>
<head>
<meta charset="utf-8">
<title>這是一個不規範的 HTML</title>
<body>
<h1>不規範的 HTML
<p>這是一個段落
</body>

XML 是一種必須正確標記且格式良好的標記語言。

今日的科技界存在一些不同的瀏覽器技術。其中一些在計算機上運行，而另一些可能在移動電話或其他小型設備上運行。小型設備往往缺乏解釋”糟糕”的標記語言的資源和能力。

所以 - 通過結合 XML 和 HTML 的長處，開發出了 XHTML。XHTML 是作爲 XML 被重新設計的 HTML。

與 HTML 相比最重要的區別：

1.文檔結構

XHTML DOCTYPE 是強制性的 <html> 中的 XML namespace 屬性是強制性的 <html>、<head>、<title> 以及 <body> 也是強制性的

2.元素語法

XHTML 元素必須正確嵌套 XHTML 元素必須始終關閉 XHTML 元素必須小寫 XHTML 文檔必須有一個根元素

3.屬性語法

XHTML 屬性必須使用小寫 XHTML 屬性值必須用引號包圍 XHTML 屬性最小化也是禁止的

<!DOCTYPE ….>是強制性的

XHTML 文檔必須進行 XHTML 文檔類型聲明（XHTML DOCTYPE declaration）。

<html>, <head>, <title>, 和 <body> 元素也必須存在，並且必須使用 <html> 中的 xmlns 屬性爲文檔規定 xml 命名空間。

下面的例子展示了帶有最少的必需標籤的 XHTML 文檔：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta charset="utf-8">
  <title>文檔標題</title>
</head>
 
<body>
文檔內容
</body>
 
</html>

XHTML 元素必須合理嵌套

在 HTML 中，一些元素可以不互相嵌套，像這樣：

<b><i>粗體和斜體文本</b></i>

在 XHTML 中，所有的元素都必須互相合理地嵌套，像這樣：

<b><i>粗體和斜體文本</i></b>

XHTML 元素必須有關閉標籤

錯誤示例：

<p>這是一個段落
<p>這是另外一個段落

正確示例：

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

空元素必須包含關閉標籤

錯誤示例：

分行:<br>
水平線: <hr>
圖片: <img src="happy.gif" alt="Happy face">

正確示例：

分行:<br />
水平線: <hr />
圖片: <img src="happy.gif" alt="Happy face" />

XHTML 元素必須是小寫

錯誤示例:

<BODY>
<P>這是一個段落</P>
</BODY>

正確示例：

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

屬性名稱必須是小寫

錯誤示例：

<table WIDTH="100%">

正確示例:

<table width="100%">

屬性值必須有引號

錯誤示例：

<table width=100%>

正確示例：

<table width="100%">

不允許屬性簡寫錯誤示例：

<input checked>
<input readonly>
<input disabled>
<option selected>

正確示例：

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

如何將 HTML 轉換爲 XHTML

添加一個 XHTML <!DOCTYPE> 到你的網頁中
添加 xmlns 屬性添加到每個頁面的html元素中。
改變所有的元素爲小寫
關閉所有的空元素
修改所有的屬性名稱爲小寫
所有屬性值添加引號

HTML 多媒體

Web 上的多媒體指的是音效、音樂、視頻和動畫。

現代網絡瀏覽器已支持很多多媒體格式。

什麼是多媒體？

多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。

在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。

在本教程中，您將瞭解到不同的多媒體格式，以及如何在您的網頁中使用它們。

瀏覽器支持

第一款因特網瀏覽器只支持文本，而且即使是對文本的支持也僅限於單一字體和單一顏色。隨後誕生了支持顏色、字體和文本樣式的瀏覽器，圖片支持也被加入。

不同的瀏覽器以不同的方式處理對音效、動畫和視頻的支持。某些元素能夠以內聯的方式處理，而某些則需要額外的插件。

多媒體格式

格式多媒體元素（比如視頻和音頻）存儲於媒體文件中。

確定媒體類型的最常用的方法是查看文件擴展名。當瀏覽器得到文件擴展名 .htm 或 .html 時，它會假定該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表。圖片格式則通過 .gif 或 .jpg 來識別。

多媒體元素元素也擁有帶有不同擴展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

視頻格式

MP4是互聯網推出新的視頻格式。

YouTube 推薦使用 MP4 。

Flash Players 支持 MP4

HTML5 支持 MP4。

聲音格式

MP3是一種音頻壓縮技術，其全稱是動態影像專家壓縮標準音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱爲MP3。它被設計用來大幅度地降低音頻數據量。如果你的站點是音樂類型的，你可以選擇mp3格式。

HTML5 的最新標準支持 MP3, WAV, 和 Ogg 音頻格式。

HTML 插件

插件的功能是擴展 HTML 瀏覽器的功能。

輔助應用程序（helper application）是可由瀏覽器啓動的程序。輔助應用程序也稱爲插件。

輔助程序可用於播放音頻和視頻（以及其他）。輔助程序是使用標籤來加載的。

使用輔助程序播放視頻和音頻的一個優勢是，您能夠允許用戶來控制部分或全部播放設置。

插件可以通過標籤或者標籤添加在頁面中。

大多數輔助應用程序允許對音量設置和播放功能（比如後退、暫停、停止和播放）的手工（或程序的）控制。

我們可以使用 <video> 和 <audio> 標籤來顯示視頻和音頻

<object> 元素

所有主流瀏覽器都支持 <object> 標籤。

該標籤用於插入對象 (例如在網頁中嵌入 Java 小程序, PDF 閱讀器, Flash 播放器) 。

或者插入一張圖片:

<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>

<embed> 元素

所有主流瀏覽器都支持 <embed> 元素。

或者插入一張圖片:

注意：元素沒有關閉標籤。不能使用替代文本。

<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="snippet.html">
<embed src="audi.jpeg">

HTML 音頻（Audio）

聲音在HTML中可以以不同的方式播放.

在 HTML 中播放音頻並不容易！

您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。

使用插件：

瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

插件可以使用標籤或者標籤添加在頁面上.

這些標籤定義資源（通常非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。

標籤定義外部（非 HTML）內容的容器。（這是一個 HTML5 標籤，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

<embed height="50" width="100" src="horse.mp3">

問題：

標籤在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

使用 <object> 元素

標籤也可以定義外部（非 HTML）內容的容器。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

<object height="50" width="100" data="horse.mp3"></object>

問題：

不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

使用 HTML5 <audio> 元素

HTML5

元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。

瀏覽器的兼容性問題

格中的數字表示支持該屬性的第一個瀏覽器版本號。

以下我們將使用

以下我們將使用 <audio> 標籤來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個 OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會顯示一個錯誤文本信息:

實例：

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

問題：

標籤在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。
您必須把音頻文件轉換爲不同的格式。
元素在老式瀏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

問題：

您必須把音頻轉換爲不同的格式。
元素無法回退來顯示錯誤消息。

使用超鏈接：

如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用”輔助應用程序”來播放文件。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啓動”輔助應用程序”來播放該文件：

實例：

<a href="horse.mp3">Play the sound</a>

內聯的聲音說明：

當您在網頁中包含聲音，或者作爲網頁的組成部分時，它被稱爲內聯聲音。

如果您打算在 web 應用程序中使用內聯聲音，您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。

我們最好的建議是隻在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶需要聽到錄音並點擊某個鏈接時，會打開頁面然後播放錄音。

HTML 多媒體標籤

HTML 視頻(Videos)

在 HTML 中播放視頻的方法有很多種。

HTML視頻（Videos）播放

在 HTML 中播放視頻並不容易！

您需要諳熟大量技巧，以確保您的視頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。

使用 <embed> 標籤：

標籤的作用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻：

<embed src="intro.swf" height="200" width="200">

問題：

HTML4 無法識別 <embed> 標籤。您的頁面無法通過驗證。
如果瀏覽器不支持 Flash，那麼視頻將無法播放
iPad 和 iPhone 不能顯示 Flash 視頻。
如果您將視頻轉換爲其他格式，那麼它仍然不能在所有瀏覽器中播放。

使用 <object> 標籤：

標籤的作用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 片段顯示嵌入網頁的一段 Flash 視頻：

<object data="intro.swf" height="200" width="200"></object>

問題：

如果瀏覽器不支持 Flash，將無法播放視頻。
iPad 和 iPhone 不能顯示 Flash 視頻。
如果您將視頻轉換爲其他格式，那麼它仍然不能在所有瀏覽器中播放。

使用 HTML5 元素

HTML5 <video> 標籤定義了一個視頻或者影片.

<video> 元素在所有現代瀏覽器中都支持。

以下 HTML 片段會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視頻：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
    您的瀏覽器不支持 video 標籤。
</video>

問題：

您必須把視頻轉換爲很多不同的格式。
元素在老式瀏覽器中無效。

最好的 HTML 解決方法

以下實例中使用了 4 中不同的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

問題：

您必須把視頻轉換爲很多不同的格式

優酷解決方案

在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站。

如果您希望在網頁中播放視頻，那麼您可以把視頻上傳到優酷等視頻網站，然後在您的網頁中插入 HTML 代碼即可播放視頻。

你可以在各大視頻網站的分享入口，找到嵌入的 HTML 代碼。

<embed src='https://player.youku.com/player.php/sid/XMTQ3MjM5Mjc0MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

使用超鏈接

如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用”輔助應用程序”來播放文件。

以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啓動”輔助應用程序”，比如 Windows Media Player 來播放這個 AVI 文件：

<a href="intro.swf">Play a video file</a>

關於內聯視頻的說明

當視頻被包含在網頁中時，它被稱爲內聯視頻。

如果您打算在 web 應用程序中使用內聯視頻，您需要意識到很多人都覺得內聯視頻令人惱火。

同時請注意，用戶可能已經關閉了瀏覽器中的內聯視頻選項。

我們最好的建議是隻在用戶希望看到內聯視頻的地方包含它們。一個正面的例子是，在用戶需要看到視頻並點擊某個鏈接時，會打開頁面然後播放視頻。

HTML 多媒體標籤

到這裏，html教程就演示到這裏，包含了市面上主流的html知識，希望大家能得到質的提升

HTML教程（看完這篇就夠了）

目錄結構

HTML教程

HTML 簡介

HTML 編輯器

HTML基礎

HTML 元素

HTML 屬性

HTML 標題

HTML 段落

HTML 文本格式化

HTML 鏈接

HTML head

HTML CSS

HTML 圖像

HTML 表格

HTML 列表

HTML 塊級元素

HTML 佈局

HTML 表單

HTML iframe

HTML 顏色

HTML 顏色值

HTML 顏色名

HTML 腳本

HTML 字符實體

HTML URL

HTML 總結

HTML XHTML

XHTML 元素必須有關閉標籤

XHTML 元素必須是小寫

屬性名稱必須是小寫

屬性值必須有引號

如何將 HTML 轉換爲 XHTML

HTML 多媒體

HTML 插件

HTML 音頻（Audio）

HTML 視頻(Videos)

使用 HTML5 元素