HTML教程（看完這篇就夠了）
HTML教程
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。
您可使用 HTML 來創建本身的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。
在本教程中，您將學習如何使用 HTML 來建立站點。
HTML 很容易學習！相信您能很快學會它！
本教程包含了數百個 HTML 實例。
javascript
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水香木魚的博客</title> </head> <body> <h1>個人第一個標題</h1> <p>個人第一個段落。</p> </body> </html>
HTML 文檔的後綴名：.html、 .htm 格式 php
1、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 標記標籤一般被稱爲 HTMLcss
2.標籤
HTML 標籤是由尖括號包圍的關鍵詞，好比 <html>
HTML 標籤一般是成對出現的，好比 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱爲開放標籤和閉合標籤html
<標籤>內容</標籤>
「HTML 標籤」 和 「HTML 元素」 一般都是描述一樣的意思.
可是嚴格來說, 一個 HTML 元素包含了開始標籤與結束標籤，以下實例:html5
3.HTML 元素
<p>這是一個段落</p>
4.web瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML文件，並將其做爲網頁顯示。
瀏覽器並非直接顯示的HTML標籤，但可使用標籤來決定如何展示HTML頁面的內容給用戶java
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 聲明是不區分大小寫的，如下方式都可：web
<!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>
2、HTML 編輯器
1.推薦幾個經常使用的編輯器
Notepad++
Sublime Text
VS Code編程
2.提升編碼速度插件 `Emmet `插件
3、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"/>
4、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 版本中強制使用小寫。
5、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 | 描述了元素的額外信息（做爲工具條使用） |
6、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> | 定義水平線 |
| <!-- --> | 定義註釋 |
7、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> | 插入單個折行（換行） |
8、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> | 定義一個定義項目 |
9、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>
11、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> | 定義資源引入地址 |
12、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> | 定義圖像地圖中的可點擊區域 |
十3、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> | 定義表格的頁腳 |
十4、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> | 自定義列表項的描述 |
十5、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） |
十6、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>
效果以下：
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>
瀏覽器效果：
Tip: 使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。經過編輯單一的文件，就能夠改變全部頁面的佈局
Tip: 因爲建立高級的佈局很是耗時，使用模板是一個快速的選項。經過搜索引擎能夠找到不少免費的網站模板（您可使用這些預先構建好的網站佈局，並優化它們）。
3.html佈局標籤：
| 標籤 | 描述 |
| <div> | 定義文檔區塊，塊級（block-level） |
| <span> | 定義span，用來組合文檔中的行內元素 |
十7、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 | 計算結果 |
十8、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>
演示以下：
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 iframe標籤：
| 標籤 | 描述 |
| <iframe> | 定義一個內聯的iframe |
十9、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>
效果圖：
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 色調色板時，全部的計算機可以正確地顯示全部的顏色。
二10、HTML 顏色值
顏色由紅®、綠(G)、藍(B)組成。
顏色值
顏色值由十六進制來表示紅、綠、藍（RGB）。
每一個顏色的最低值爲 0(十六進制爲 00)，最高值爲 255(十六進制爲FF)。
十六進制值的寫法爲 # 號後跟三個或六個十六進制字符。
三位數表示法爲：#RGB，轉換爲6位數表示爲：#RRGGBB。
顏色實例：
二11、HTML 顏色名
目前全部瀏覽器都支持如下顏色名。
141個顏色名稱是在HTML和CSS顏色規範定義的（17標準顏色，再加124）。下表列出了全部顏色的值，包括十六進制值。
提示: 17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。點擊其中一個顏色名稱（或一個十六進制值）就能夠查看與不一樣文字顏色搭配的背景顏色。
按顏色名排序
單擊一個顏色名或者 16 進制值，就能夠查看與不一樣文字顏色搭配的背景顏色。
二12、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>
瀏覽器效果：
JavaScript處理 HTML 樣式:
document.getElementById("demo").style.color="#ff";
html腳本標籤：
二十3、HTML 字符實體
HTML 中的預留字符必須被替換爲字符實體。
一些在鍵盤上找不到的字符也可使用字符實體來替換
在 HTML 中，某些字符是預留的。
在 HTML 中不能使用小於號（<）和大於號（>），這是由於瀏覽器會誤認爲它們是標籤。
若是但願正確地顯示預留字符，咱們必須在 HTML 源代碼中使用字符實體（character entities）。 字符實體相似這樣：
&entity_name;
或
&#entity_number;
如需顯示小於號，咱們必須這樣寫：
< 或 < 或 <
渲染效果：< 或 < 或 <
提示： 使用實體名而不是數字的好處是，名稱易於記憶。不過壞處是，瀏覽器也許並不支持全部實體名稱（對實體數字的支持卻很好）。
不間斷空格(Non-breaking Space)
HTML 中的經常使用字符實體是不間斷空格( )。
瀏覽器老是會截短 HTML 頁面中的空格。若是您在文本中寫 10 個空格，在顯示該頁面以前，瀏覽器會刪除它們中的 9 個。如需在頁面中增長空格的數量，您須要使用 字符實體。 ；
結合音標符
發音符號是加到字母上的一個」glyph(字形)「。
一些變音符號, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
變音符號能夠出現字母的上面和下面，或者字母裏面，或者兩個字母間。
變音符號能夠與字母、數字字符的組合來使用。
如下是一些實例:
HTML字符實體（實體對大小寫敏感）
二十4、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> 元素會嘗試播放以 mp四、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教程
超文本標記語言（英語：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 格式
1、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>
2、HTML 編輯器
1.推薦幾個經常使用的編輯器
Notepad++
Sublime Text
VS Code
2.提升編碼速度插件 `Emmet `插件
3、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"/>
4、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 版本中強制使用小寫。
5、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 | 描述了元素的額外信息（做爲工具條使用） |
6、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> | 定義水平線 |
| <!-- --> | 定義註釋 |
7、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> | 插入單個折行（換行） |
8、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> | 定義一個定義項目 |
9、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>
11、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> | 定義資源引入地址 |
12、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> | 定義圖像地圖中的可點擊區域 |
十3、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> | 定義表格的頁腳 |
十4、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> | 自定義列表項的描述 |
十5、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） |
十6、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>
效果以下：
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>
瀏覽器效果：
Tip: 使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。經過編輯單一的文件，就能夠改變全部頁面的佈局
Tip: 因爲建立高級的佈局很是耗時，使用模板是一個快速的選項。經過搜索引擎能夠找到不少免費的網站模板（您可使用這些預先構建好的網站佈局，並優化它們）。
3.html佈局標籤：
| 標籤 | 描述 |
| <div> | 定義文檔區塊，塊級（block-level） |
| <span> | 定義span，用來組合文檔中的行內元素 |
十7、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 | 計算結果 |
十8、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>
演示以下：
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 iframe標籤：
| 標籤 | 描述 |
| <iframe> | 定義一個內聯的iframe |
十9、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>
效果圖：
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 色調色板時，全部的計算機可以正確地顯示全部的顏色。
二10、HTML 顏色值
顏色由紅®、綠(G)、藍(B)組成。
顏色值
顏色值由十六進制來表示紅、綠、藍（RGB）。
每一個顏色的最低值爲 0(十六進制爲 00)，最高值爲 255(十六進制爲FF)。
十六進制值的寫法爲 # 號後跟三個或六個十六進制字符。
三位數表示法爲：#RGB，轉換爲6位數表示爲：#RRGGBB。
顏色實例：
二11、HTML 顏色名
目前全部瀏覽器都支持如下顏色名。
141個顏色名稱是在HTML和CSS顏色規範定義的（17標準顏色，再加124）。下表列出了全部顏色的值，包括十六進制值。
提示: 17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。點擊其中一個顏色名稱（或一個十六進制值）就能夠查看與不一樣文字顏色搭配的背景顏色。
按顏色名排序
單擊一個顏色名或者 16 進制值，就能夠查看與不一樣文字顏色搭配的背景顏色。
二12、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>
瀏覽器效果：
JavaScript處理 HTML 樣式:
document.getElementById("demo").style.color="#ff";
html腳本標籤：
| 標籤 | 描述 |
| <script> | 客戶端腳本 |
| <noscript> | 不支持腳本瀏覽器輸出的文本 |
二十3、HTML 字符實體
HTML 中的預留字符必須被替換爲字符實體。
一些在鍵盤上找不到的字符也可使用字符實體來替換
在 HTML 中，某些字符是預留的。
在 HTML 中不能使用小於號（<）和大於號（>），這是由於瀏覽器會誤認爲它們是標籤。
若是但願正確地顯示預留字符，咱們必須在 HTML 源代碼中使用字符實體（character entities）。 字符實體相似這樣：
&entity_name; 或 &#entity_number;
如需顯示小於號，咱們必須這樣寫：
< 或 < 或 <
渲染效果：< 或 < 或 <
提示： 使用實體名而不是數字的好處是，名稱易於記憶。不過壞處是，瀏覽器也許並不支持全部實體名稱（對實體數字的支持卻很好）。
不間斷空格(Non-breaking Space)
HTML 中的經常使用字符實體是不間斷空格( )。
瀏覽器老是會截短 HTML 頁面中的空格。若是您在文本中寫 10 個空格，在顯示該頁面以前，瀏覽器會刪除它們中的 9 個。如需在頁面中增長空格的數量，您須要使用 字符實體。 ；
結合音標符
發音符號是加到字母上的一個」glyph(字形)「。
一些變音符號, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
變音符號能夠出現字母的上面和下面，或者字母裏面，或者兩個字母間。
變音符號能夠與字母、數字字符的組合來使用。
如下是一些實例:
HTML字符實體（實體對大小寫敏感）
二十4、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。
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> 元素會嘗試播放以 mp四、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 多媒體標籤
- 1. HTML meta 標籤 看這篇就夠了
- 2. redis集羣看這篇就夠了(完)
- 3. git 教程 完整版 無坑點 看這篇就夠了
- 4. liunx應用安裝教程看完這一篇就夠了
- 5. RunLoop看這篇就夠了
- 6. nginx看這篇就夠了
- 7. mongoDB看這篇就夠了
- 8. npm，看這篇就夠了
- 9. Lombok 看這篇就夠了
- 10. 瞭解 MongoDB 看這一篇就夠了
- 更多相關文章...
- • Maven 教程 - Maven教程
- • Lua 教程 - Lua 教程
- • Java 8 Stream 教程
- • YAML 入門教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML meta 標籤 看這篇就夠了
- 2. redis集羣看這篇就夠了(完)
- 3. git 教程 完整版 無坑點 看這篇就夠了
- 4. liunx應用安裝教程看完這一篇就夠了
- 5. RunLoop看這篇就夠了
- 6. nginx看這篇就夠了
- 7. mongoDB看這篇就夠了
- 8. npm，看這篇就夠了
- 9. Lombok 看這篇就夠了
- 10. 瞭解 MongoDB 看這一篇就夠了