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

水香木魚發表於2021-02-17

HTML教程

超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
您可以使用 HTML 來建立自己的 WEB 站點，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> 元素定義一個段落

1.什麼是HTML？

1.HTML 是用來描述網頁的一種語言。
2.HTML 指的是超文字標記語言:` HyperText Markup Language`
3.HTML 不是一種程式語言，而是一種標記語言，標記語言是一套標記標籤 `(markup tag)`
4.HTML 使用標記標籤來描述網頁
5.HTML 文件包含了HTML 標籤及文字內容，HTML文件也叫做 web 頁面
6.HTML 標籤：HTML 標記標籤通常被稱為 HTML

2.標籤

HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤

<標籤>內容</標籤>

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

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

3.HTML 元素

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

4.web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML檔案，並將其作為網頁顯示。

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

5.html網頁結構

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

6.html的版本：

<!DOCTYPE>宣告

<!DOCTYPE>宣告有助於瀏覽器中正確顯示網頁。

版本	釋出時間
HTML	1991
HTML+	1993
HTML2.0	1995
HTML3.2	1997
HTML4	1999
XHTML1.0	2000
HTML5	2012
XHTML5	2013

網路上有很多不同的檔案，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容。

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

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

(1)html5

<!DOCTYPE html>

(2)html4

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

(3)xhtml1.0

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

7.中文編碼

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水香木魚的部落格</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

二、HTML 編輯器

1.推薦幾個常用的編輯器

Notepad++
Sublime Text
VS Code

2.提高編碼速度外掛 `Emmet `外掛

三、HTML基礎

(1)html標題

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

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

(2)html段落

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

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

(3)html連結

HTML 連結是通過標籤 `<a>` 來定義的.

<a href="https://chenchunbo.blog.csdn.net">這是一個指向水香木魚部落格的超連結</a>

(4)html影像

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

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

四、HTML 元素

開始標籤	元素內容	結束標籤
<p>	這是一個段落	</p>
<a href="#">	這是一個連結	</a>
<br>	換行

(1)html元素語法

HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
HTML 文件由巢狀的 HTML 元素構成。

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

例項：（包含三個元素）

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

不要忘記結束標籤

(2)html空元素

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

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

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

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

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

html提示：使用小寫標籤

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

水香木魚使用的是小寫標籤，因為全球資訊網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

五、HTML 屬性

1.屬性是 HTML 元素提供的附加資訊。
2.HTML 元素可以設定屬性
3.屬性可以在元素中新增附加資訊
4.屬性一般描述於開始標籤
5.屬性總是以名稱/值對的形式出現，比如：name=“value”。

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

<a href="https://chenchunbo.blog.csdn.net">這是一個指向水香木魚部落格的超連結</a>

html屬性值常用引用屬性值

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

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

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

HTML提示：使用小寫屬性

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

不過，全球資訊網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

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

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

屬性	描述
class	為html元素定義一個或多個類名（classname）（類名從樣式檔案引入）
id	定義元素的唯一ID
style	規定元素的行內樣式（inline style）
title	描述了元素的額外資訊（作為工具條使用）

六、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文件
<body>	定義文件的主體
<h1>-<h6>	定義HTML標題
<hr>	定義水平線
<!-- -->	定義註釋

七、HTML 段落

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

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

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

不要忘記結束標籤

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

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

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

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

1.html換行

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

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

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

2.html輸出提醒

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

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

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

3.html參考手冊

標籤	描述
<p>	定義一個段落
<br>	插入單個折行（換行）

八、HTML 文字格式化

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

1.html格式化標籤

標籤	描述
<p>	定義粗體文字
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號體
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

2.html計算機輸出標籤

標籤	描述
<code>	定義計算機程式碼
<kbd>	定義鍵盤碼
<samp>	定義計算機程式碼樣本
<var>	定義變數
<pre>	定義預格式文字

3.html引文，引用，標籤定義

標籤	描述
<abbr>	定義縮小
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義專案

九、HTML 連結

HTML 使用超級連結與網路上的另一個文件相連。幾乎可以在所有的網頁中找到連結。點選連結可以從一張頁面跳轉到另一張頁面。

HTML使用標籤來設定超文字連結。

超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影像，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。

當您把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手。

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

預設情況下，連結將以以下形式出現在瀏覽器中：

一個未訪問過的連結顯示為藍色字型並帶有下劃線。
訪問過的連結顯示為紫色並帶有下劃線。
點選連結時，連結顯示為紅色並帶有下劃線。
注意：如果為這些超連結設定了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

<a href="https://chenchunbo.blog.csdn.net">這是一個指向水香木魚部落格的超連結</a>

href 屬性描述了連結的目標。

提示: “連結文字” 不必一定是文字。圖片或其他 HTML 元素都可以成為連結。

1.html連結-- target屬性

<a  href="https://chenchunbo.blog.csdn.net"  
    target="_blank">
        水香木魚的部落格
</a>

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

2.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連結標籤

10.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="chenchunbo.blog.csdn.net" 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> 。

1.內部樣式表：

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

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

    </style>

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

2.外部樣式表：

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

標籤	描述
<style>	定義文字樣式
<link>	定義資源引入地址

十二、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 屬性用來為影像定義一串預備的可替換的文字。

1.替換文字屬性的值是使用者定義的。

<img src="right.png" alt="我是水香木魚">

在瀏覽器無法載入影像時，替換文字屬性告訴讀者她們失去的資訊。

此時，瀏覽器將顯示這個替代性的文字而不是影像。

為頁面上的影像都加上替換文字屬性是個好習慣，這樣有助於更好的顯示資訊，並且對於那些使用純文字瀏覽器的人來說是非常有用的。

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

2.屬性值預設單位為畫素:

<img src="right.png" alt="我是水香木魚" width="400px;" height="500px;">

提示: 指定影像的高度和寬度是一個很好的習慣。

如果影像指定了高度寬度，頁面載入時就會保留指定的尺寸。

如果沒有指定圖片的大小，載入頁面時有可能會破壞HTML頁面的整體佈局。

3.注意事項：

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

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

4.影像標籤：

標籤	描述
<img>	定義影像
<map>	定義影像地圖
<area>	定義影像地圖中的可點選區域

十三、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>
        <td>表頭1</td>
        <td>表頭2</td>
    </tr>
    <tr>
        <td>我是水香木魚</td>
        <td>這是水香木魚的部落格</td>
    </tr>
    <tr>
        <td>我是水香木魚</td>
        <td>這是水香木魚的部落格</td>
    </tr>
</table>
</body>

</html>

瀏覽器效果：

html表格標籤：

標籤	描述
<title>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標題
<colgroup>	定義表格列的組
<col>	定義用於表格列的屬性
<thead>	定義表格的頁首
<tbody>	定義表格的主體
<tfoot>	定義表格的頁尾

十四、HTML 列表

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

1.有序列表：

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

列表項使用數字來標記

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

瀏覽器效果：

2.無序列表：

無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤

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

瀏覽器效果：

3.自定義列表：

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

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

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

瀏覽器效果：

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

html列表標籤：

標籤	描述
<ol>	有序列表
<ul>	無序列表
<li>	列表項
<dl>	自定義列表
<dt>	自定義列表頭
<dd>	自定義列表項的描述

十五、HTML 塊級元素

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

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

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

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

div元素

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

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

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

span元素

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

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

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

html分組標籤：

標籤	描述
<div>	定義了文件的區域，塊級標籤（block-level）
<span>	用來組合文件中的行內元素，內聯元素（inline）

十六、HTML 佈局

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

請慎重設計您的網頁佈局

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

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

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

1.<div>元素

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水香木魚的部落格</title>
</head>
<body>
<h1 style=" margin-bottom: 0;">水香木魚的網站</h1>
<div id="container" style="width: 1800px; " >
<div id="menu" style="width: 100px; float: left; font-size: 15px;" >
    <b>選單</b><br>
    html<br>
    css<br>
    javascript<br>
</div>
<div id="content" style="width: 1700px; height: 200px;float: left;font-size: 20px;">這個是內容部分</div>
<div id="footer" style="font-size: 16px;height: 20px;clear: both; text-align: center;">版權所有，@水香木魚的部落格</div>
</div>
</body>
</html>

效果如下：

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

2.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="">
                <h1>水香木魚的網站</h1>
            </td>
        </tr>
        <tr>
            <td style="font-size: 16px; width: 100px;height: 200px;">
                <b>選單</b>
                <br> html
                <br> css
                <br> javascript
                <br>
            </td>
            <td style="width: 1700px;height: 200px;font-size: 20px;">內容</td>
        </tr>
        <tr>
            <td colspan="2" style="font-size: 12px; text-align: center;">
                版權所有@水香木魚的部落格
            </td>
        </tr>

    </table>
</body>

</html>

瀏覽器效果：

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

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

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

3.html佈局標籤：

標籤	描述
<div>	定義文件區塊，塊級（block-level）
<span>	定義span，用來組合文件中的行內元素

十七、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）定義的。大多數經常被用到的輸入型別如下：

1.文字域（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 個字元。

2.密碼欄位：

密碼欄位通過標籤 <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>

瀏覽器顯示效果如下：

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

3.單選按鈕（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>

瀏覽器效果：

4.核取方塊（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>

瀏覽器效果：

5.提交按鈕（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表單標籤：

標籤	描述
<form>	供使用者輸入的表單
<input>	輸入域
<textarea>	文字域（多行的輸入控制元件）
<label>	input元素的標籤，一般為輸入標題
<fleldset>	一組相關的表單元素，並使用外框包含起來
<legend>	定義fleldset元素的標題
<select>	下拉選項列表
<optgroup>	選項組
<option>	下拉選單中的選項
<button>	點選按鈕
<datalist>New	預先定義的輸入控制元件選項列表
<keygen>New	表單金鑰對生成器欄位
<output>New	計算結果

十八、HTML iframe

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

<!Doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>水香木魚測試表單</title>
</head>

<body>
    <iframe src="https://chenchunbo.blog.csdn.net" height="500px;" width="800px;">

    </iframe>
</body>

</html>

演示如下：
HTML教程（看完這篇就夠了）

iframe 語法:

該URL指向不同的網頁。

iframe設定高度和寬度：

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

屬性預設以畫素為單位, 但是你可以指定其按比例顯示 (如：”80%“)。

  <iframe src="https://chenchunbo.blog.csdn.net" height="500px;" width="800px;">

    </iframe>

iframe移除邊框：

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

設定屬性值為 “0” 移除iframe的邊框:

 <iframe src="https://chenchunbo.blog.csdn.net" height="500px;" width="800px;">

使用iframe來顯示目標連結頁面：

iframe可以顯示一個目標連結的頁面

目標連結的屬性必須使用iframe的屬性，如下例項:

 <iframe src="https://www.baidu.com" name="erawork"></iframe>
    <p>
        <a href="https://chenchunbo.blog.csdn.net" target="erawork">水香木魚的部落格</a>
    </p>

瀏覽器效果：
HTML教程（看完這篇就夠了）

html iframe標籤：

標籤	描述
<iframe>	定義一個內聯的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>

效果圖：
HTML教程（看完這篇就夠了）

1.1600萬種不同顏色：

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

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

2.灰暗色調：

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

3.Web安全色?

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

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

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

二十、HTML 顏色值

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

顏色值

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

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

十六進位制值的寫法為 # 號後跟三個或六個十六進位制字元。

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

顏色例項：
HTML教程（看完這篇就夠了）

二十一、HTML 顏色名

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

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

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

按顏色名排序

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

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

二十二、HTML 指令碼

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

<script> 標籤用於定義客戶端指令碼，比如 JavaScript。

<script> 元素既可包含指令碼語句，也可通過 src 屬性指向外部指令碼檔案。

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

下面的指令碼會向瀏覽器輸出”Hello World!“：

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

瀏覽器效果：

HTML<noscript> 標籤

<noscript> 標籤提供無法使用指令碼時的替代內容，比方在瀏覽器禁用指令碼時，或瀏覽器不支援客戶端指令碼時。

<noscript>元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。

只有在瀏覽器不支援指令碼或者禁用指令碼時，才會顯示 <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" onclick="Myfunction();">點選我</button>
    <script>
        function Myfunction() {
            alert("北京歡迎你！");

        }
    </script>


</body>

</html>

瀏覽器效果：
HTML教程（看完這篇就夠了）

JavaScript處理 HTML 樣式:

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

html指令碼標籤：

二十三、HTML 字元實體

HTML 中的預留字元必須被替換為字元實體。

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

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

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

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

&entity_name;
或
&#entity_number;
如需顯示小於號，我們必須這樣寫：

< 或 < 或 <
渲染效果：< 或 < 或 <

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

不間斷空格(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:webmaster@example.com">傳送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）

< 等同於 <
> 等同於 >
© 等同於 ©

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> 標籤。

<object> 元素定義了在 HTML 文件中嵌入的物件。

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

<object> 元素同樣可用於包含HTML檔案

或者插入一張圖片:

<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> 元素表示一個 HTML Embed 物件。

<embed> 元素已經出現很長一段時間了，但是在 HTML5 前並未被詳細說明，該元素在 HTML 5 頁面上會被驗證，在 HTML 4 上不會。

<embed> 元素同樣可用於包含 HTML 檔案：

或者插入一張圖片:

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

<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教程

<!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> 元素定義一個段落

1.什麼是HTML？

2.標籤

<標籤>內容</標籤>

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

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

3.HTML 元素

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

4.web瀏覽器

5.html網頁結構

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

6.html的版本：

<!DOCTYPE>宣告

<!DOCTYPE>宣告有助於瀏覽器中正確顯示網頁。

版本	釋出時間
HTML	1991
HTML+	1993
HTML2.0	1995
HTML3.2	1997
HTML4	1999
XHTML1.0	2000
HTML5	2012
XHTML5	2013

網路上有很多不同的檔案，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容。

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

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

(1)html5

<!DOCTYPE html>

(2)html4

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

(3)xhtml1.0

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

7.中文編碼

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水香木魚的部落格</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

二、HTML 編輯器

1.推薦幾個常用的編輯器

Notepad++
Sublime Text
VS Code

2.提高編碼速度外掛 `Emmet `外掛

三、HTML基礎

(1)html標題

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

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

(2)html段落

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

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

(3)html連結

HTML 連結是通過標籤 `<a>` 來定義的.

<a href="https://chenchunbo.blog.csdn.net">這是一個指向水香木魚部落格的超連結</a>

(4)html影像

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

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

四、HTML 元素

開始標籤	元素內容	結束標籤
<p>	這是一個段落	</p>
<a href="#">	這是一個連結	</a>
<br>	換行

(1)html元素語法

HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
HTML 文件由巢狀的 HTML 元素構成。

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

不要忘記結束標籤

(2)html空元素

五、HTML 屬性

<a href="https://chenchunbo.blog.csdn.net">這是一個指向水香木魚部落格的超連結</a>

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

屬性	描述
class	為html元素定義一個或多個類名（classname）（類名從樣式檔案引入）
id	定義元素的唯一ID
style	規定元素的行內樣式（inline style）
title	描述了元素的額外資訊（作為工具條使用）

六、HTML 標題

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

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

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

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

html註釋

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

註釋寫法如下:

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

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

html如何檢視原始碼？

html標籤參考手冊

標籤	描述
<html>	定義HTML文件
<body>	定義文件的主體
<h1>-<h6>	定義HTML標題
<hr>	定義水平線
<!-- -->	定義註釋

七、HTML 段落

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

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

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

1.html換行

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

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

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

2.html輸出提醒

3.html參考手冊

標籤	描述
<p>	定義一個段落
<br>	插入單個折行（換行）

八、HTML 文字格式化

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

1.html格式化標籤

標籤	描述
<p>	定義粗體文字
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號體
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

2.html計算機輸出標籤

標籤	描述
<code>	定義計算機程式碼
<kbd>	定義鍵盤碼
<samp>	定義計算機程式碼樣本
<var>	定義變數
<pre>	定義預格式文字

3.html引文，引用，標籤定義

標籤	描述
<abbr>	定義縮小
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義專案

九、HTML 連結

<a href="https://chenchunbo.blog.csdn.net">這是一個指向水香木魚部落格的超連結</a>

href 屬性描述了連結的目標。

提示: “連結文字” 不必一定是文字。圖片或其他 HTML 元素都可以成為連結。

1.html連結-- target屬性

<a  href="https://chenchunbo.blog.csdn.net"  
    target="_blank">
        水香木魚的部落格
</a>

2.html連結--id屬性

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

在HTML文件中建立一個連結到”有用的提示部分(id=“tips”）”：

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

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

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

html連結標籤

10.HTML head

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件標題</title>
</head>

<body>

文件內容......

</body>

</html>

html中的base元素

<base> 標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結:

<head>
<base href="chenchunbo.blog.csdn.net" target="_blank"/ >
</head>

十一、HTML CSS

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

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

CSS 可以通過以下方式新增到HTML中:

內聯樣式- 在HTML元素中使用”style” 屬性
內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素 來包含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>

<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> 。

1.內部樣式表：

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

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

    </style>

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

2.外部樣式表：

標籤	描述
<style>	定義文字樣式
<link>	定義資源引入地址

十二、HTML 影像

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

URL 指儲存影像的位置。

如果名為 “alipay-redpack.png” 的影像位於 www.erawork.cn 的 images 目錄中，那麼其 URL 為 https://erawork.cn/images/alipay-redpack.png 。

瀏覽器將影像顯示在文件中影像標籤出現的地方。

如果你將影像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。

alt 屬性用來為影像定義一串預備的可替換的文字。

1.替換文字屬性的值是使用者定義的。

<img src="right.png" alt="我是水香木魚">

在瀏覽器無法載入影像時，替換文字屬性告訴讀者她們失去的資訊。

此時，瀏覽器將顯示這個替代性的文字而不是影像。

2.屬性值預設單位為畫素:

<img src="right.png" alt="我是水香木魚" width="400px;" height="500px;">

提示: 指定影像的高度和寬度是一個很好的習慣。

如果影像指定了高度寬度，頁面載入時就會保留指定的尺寸。

如果沒有指定圖片的大小，載入頁面時有可能會破壞HTML頁面的整體佈局。

3.注意事項：

4.影像標籤：

標籤	描述
<img>	定義影像
<map>	定義影像地圖
<area>	定義影像地圖中的可點選區域

十三、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>
        <td>表頭1</td>
        <td>表頭2</td>
    </tr>
    <tr>
        <td>我是水香木魚</td>
        <td>這是水香木魚的部落格</td>
    </tr>
    <tr>
        <td>我是水香木魚</td>
        <td>這是水香木魚的部落格</td>
    </tr>
</table>
</body>

</html>

瀏覽器效果：

html表格標籤：

標籤	描述
<title>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標題
<colgroup>	定義表格列的組
<col>	定義用於表格列的屬性
<thead>	定義表格的頁首
<tbody>	定義表格的主體
<tfoot>	定義表格的頁尾

十四、HTML 列表

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

1.有序列表：

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

列表項使用數字來標記

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

瀏覽器效果：

2.無序列表：

無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤

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

瀏覽器效果：

3.自定義列表：

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

瀏覽器效果：

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

html列表標籤：

標籤	描述
<ol>	有序列表
<ul>	無序列表
<li>	列表項
<dl>	自定義列表
<dt>	自定義列表頭
<dd>	自定義列表項的描述

十五、HTML 塊級元素

div元素

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

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

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

span元素

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

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

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

html分組標籤：

標籤	描述
<div>	定義了文件的區域，塊級標籤（block-level）
<span>	用來組合文件中的行內元素，內聯元素（inline）

十六、HTML 佈局

1.<div>元素

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水香木魚的部落格</title>
</head>
<body>
<h1 style=" margin-bottom: 0;">水香木魚的網站</h1>
<div id="container" style="width: 1800px; " >
<div id="menu" style="width: 100px; float: left; font-size: 15px;" >
    <b>選單</b><br>
    html<br>
    css<br>
    javascript<br>
</div>
<div id="content" style="width: 1700px; height: 200px;float: left;font-size: 20px;">這個是內容部分</div>
<div id="footer" style="font-size: 16px;height: 20px;clear: both; text-align: center;">版權所有，@水香木魚的部落格</div>
</div>
</body>
</html>

效果如下：

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

2.html佈局-使用表格

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>水香木魚的網站</title>
</head>

<body>
    <table style="width: 1800px;" border="0;">
        <tr>
            <td colspan="2" style="">
                <h1>水香木魚的網站</h1>
            </td>
        </tr>
        <tr>
            <td style="font-size: 16px; width: 100px;height: 200px;">
                <b>選單</b>
                <br> html
                <br> css
                <br> javascript
                <br>
            </td>
            <td style="width: 1700px;height: 200px;font-size: 20px;">內容</td>
        </tr>
        <tr>
            <td colspan="2" style="font-size: 12px; text-align: center;">
                版權所有@水香木魚的部落格
            </td>
        </tr>

    </table>
</body>

</html>

瀏覽器效果：

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

3.html佈局標籤：

標籤	描述
<div>	定義文件區塊，塊級（block-level）
<span>	定義span，用來組合文件中的行內元素

十七、HTML 表單

<!Doctype html>
<html>
<head>
 <meta charset="UTF-8">  
    <title>水香木魚測試表單</title>
</head>
<body>
<form>
    <input>橘生淮南則為橘！
</form>
</body>
</html>

html表單-輸入元素

<!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 個字元。

2.密碼欄位：

密碼欄位通過標籤 <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>

瀏覽器顯示效果如下：

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

3.單選按鈕（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>

瀏覽器效果：

4.核取方塊（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>

瀏覽器效果：

5.提交按鈕（Submit Button）

<!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表單標籤：

標籤	描述
<form>	供使用者輸入的表單
<input>	輸入域
<textarea>	文字域（多行的輸入控制元件）
<label>	input元素的標籤，一般為輸入標題
<fleldset>	一組相關的表單元素，並使用外框包含起來
<legend>	定義fleldset元素的標題
<select>	下拉選項列表
<optgroup>	選項組
<option>	下拉選單中的選項
<button>	點選按鈕
<datalist>New	預先定義的輸入控制元件選項列表
<keygen>New	表單金鑰對生成器欄位
<output>New	計算結果

十八、HTML iframe

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

<!Doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>水香木魚測試表單</title>
</head>

<body>
    <iframe src="https://chenchunbo.blog.csdn.net" height="500px;" width="800px;">

    </iframe>
</body>

</html>

演示如下：
HTML教程（看完這篇就夠了）

iframe 語法:

該URL指向不同的網頁。

iframe設定高度和寬度：

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

屬性預設以畫素為單位, 但是你可以指定其按比例顯示 (如：”80%“)。

  <iframe src="https://chenchunbo.blog.csdn.net" height="500px;" width="800px;">

    </iframe>

iframe移除邊框：

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

設定屬性值為 “0” 移除iframe的邊框:

 <iframe src="https://chenchunbo.blog.csdn.net" height="500px;" width="800px;">

使用iframe來顯示目標連結頁面：

iframe可以顯示一個目標連結的頁面

目標連結的屬性必須使用iframe的屬性，如下例項:

 <iframe src="https://www.baidu.com" name="erawork"></iframe>
    <p>
        <a href="https://chenchunbo.blog.csdn.net" target="erawork">水香木魚的部落格</a>
    </p>

瀏覽器效果：
HTML教程（看完這篇就夠了）

html iframe標籤：

標籤	描述
<iframe>	定義一個內聯的iframe

十九、HTML 顏色

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

效果圖：
HTML教程（看完這篇就夠了）

1.1600萬種不同顏色：

2.灰暗色調：

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

3.Web安全色?

二十、HTML 顏色值

二十一、HTML 顏色名

二十二、HTML 指令碼

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

<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" onclick="Myfunction();">點選我</button>
    <script>
        function Myfunction() {
            alert("北京歡迎你！");

        }
    </script>


</body>

</html>

瀏覽器效果：
HTML教程（看完這篇就夠了）

JavaScript處理 HTML 樣式:

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

html指令碼標籤：

標籤	描述
<script>	客戶端指令碼
<noscript>	不支援指令碼瀏覽器輸出的文字

二十三、HTML 字元實體

&entity_name;
或
&#entity_number;

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

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

渲染效果：< 或 < 或 <

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

不間斷空格(Non-breaking Space)

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

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

結合音標符

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

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

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

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

以下是一些例項:

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

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

二十四、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教程（看完這篇就夠了）

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:webmaster@example.com">傳送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。

1.什麼是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> 標籤。

<object> 元素定義了在 HTML 文件中嵌入的物件。

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

<object> 元素同樣可用於包含HTML檔案

或者插入一張圖片:

<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> 元素表示一個 HTML Embed 物件。

<embed> 元素已經出現很長一段時間了，但是在 HTML5 前並未被詳細說明，該元素在 HTML 5 頁面上會被驗證，在 HTML 4 上不會。

<embed> 元素同樣可用於包含 HTML 檔案：

或者插入一張圖片:

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

<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 多媒體標籤

看完這篇，Promise面試就搞定了...
2018-07-30
Promise面試
學Redis這篇就夠了
2019-07-14
Redis
mongoDB看這篇就夠了
2019-05-31
MongoDB
【跨域】jsonp看完這篇文章就夠了
2019-04-21
跨域JSON
想熟悉PostgreSQL？這篇就夠了
2018-07-23
SQL
Oracle索引，看這篇就夠了
2020-10-13
Oracle索引
研究分散式唯一ID生成，看完這篇就夠
2019-07-27
分散式
入門Webpack，看這篇就夠了
2019-07-31
Web
APP瘦身這一篇就夠了
2019-04-10
APP
Android Fragment看這篇就夠了
2019-04-10
AndroidFragment
OAuth授權|看這篇就夠了
2018-09-09
OAuth
深入Babel，這一篇就夠了
2018-12-25
Babel
Zookeeper入門看這篇就夠了
2018-07-12
學Nginx,這一篇就夠了
2020-09-25
Nginx
Git 看這一篇就夠了
2020-10-14
Git
React入門看這篇就夠了
2018-01-21
React
翻譯 | 上手 Webpack ? 這篇就夠了！
2017-04-13
Web
JavaScript正則，看這篇就夠了
2018-04-09
JavaScript
小程式分享，看這篇就夠了
2018-07-10
PyCharm 使用教程看這篇就足夠
2018-04-29
PyCharm
關於 Docker 映象的操作，看完這篇就夠啦 !（上）
2019-03-30
Docker
關於 Docker 映象的操作，看完這篇就夠啦 !（下）
2019-04-01
Docker
學習HTML5 Canvas這一篇文章就夠了
2019-02-16
HTMLCanvas
看完這篇Linux基本的操作就會了
2019-01-19
Linux
Ubuntu搭建Pytorch，就這一篇就夠了
2022-07-18
UbuntuPyTorch
Flutter DataTable 看這一篇就夠了
2020-03-04
Flutter
Git【入門】這一篇就夠了
2020-07-04
Git
學習JDBC這一篇就夠了
2020-07-31
JDBC
小程式入門看這篇就夠了
2019-11-06
Java 動態代理，看這篇就夠了
2019-03-02
Java
vue 元件通訊看這篇就夠了
2019-06-17
Vue元件
java序列化，看這篇就夠了
2021-01-29
Java
代理模式看這一篇就夠了
2018-11-13
模式
CORS 跨域, 也許這篇就夠了
2018-12-12
CORS跨域
MySQL查詢這一篇就夠了
2020-11-09
MySql
學習MySQL這一篇就夠了
2020-09-02
MySql
EFCore 6.0入門看這篇就夠了
2022-04-04
ZooKeeper分散式配置——看這篇就夠了
2021-10-21
分散式