HTML 語法總結
目錄
 | HTML5是HTML最新的修訂版本，2014年10月由全球資訊網聯盟（W3C）完成標準制定。 HTML5的設計目的是為了在移動裝置上支援多媒體。 HTML5 簡單易學。 |
HTML5 中的一些有趣的新特性
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線儲存的更好的支援
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控制元件，比如 calendar、date、time、email、url、search
HTML 基礎
<h3> 1. HTML標題 </h3>
HTML 標題（Heading）是通過 < h1 > - < h6 > 標籤來定義的。<br/><br/>
示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>
執行結果：
2. HTML 段落
HTML 段落是通過標籤 <p> 來定義的。示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</body>
</html>
執行結果：
3. HTML 連結
HTML 連結是通過標籤 <a> 來定義的。示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<a href="https://www.runoob.com">這是一個連結使用了 href 屬性</a>
</body>
</html>
提示:在 href 屬性中指定連結的地址。
執行結果：
4. HTML 影像
HTML 影像是通過標籤 <img> 來定義的.示例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<img src="/images/logo.png" width="258" height="39" />
</body>
</html>
執行結果：
影像的名稱和尺寸是以屬性的形式提供的。
HTML 元素
前面我們介紹了四個標籤：標題標籤<h1>-<h6>、段落標籤<p>、連結標籤<a> 、影像標籤<img>
通常一個標籤在使用時包括 起始標籤、閉合標籤
HTML 文件由 HTML 元素定義。
1. HTML 元素語法
- HTML 元素以開始標籤起始
- HTML 元素以結束標籤終止
- 元素的內容是開始標籤與結束標籤之間的內容
- 某些 HTML 元素具有空內容（empty content）
- 空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
- 大多數 HTML 元素可擁有屬性
2.巢狀的 HTML 元素
大多數 HTML 元素可以巢狀（HTML 元素可以包含其他 HTML 元素）。3. 示例及解析
<!DOCTYPE html>
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>
解析：
<p> 元素：
<p>這是第一個段落。</p>
這個 <p> 元素定義了 HTML 文件中的一個段落。
這個元素擁有一個開始標籤 <p> 以及一個結束標籤 </p>.
元素內容是: 這是第一個段落。
<body> 元素:
<body>
<p>這是第一個段落。</p>
</body>
<body> 元素定義了 HTML 文件的主體。
這個元素擁有一個開始標籤 <body> 以及一個結束標籤 </body>。
元素內容是：另一個 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>
<html> 元素定義了整個 HTML 文件。
這個元素擁有一個開始標籤 <html> ，以及一個結束標籤 </html>.
元素內容是另一個 HTML 元素（body 元素）。
注意：
1. 不要忘記結束標籤
2.標籤寫法要用小寫字母（有些版本對大小寫可認為相同，而xhtml中強制使用小寫）
4. HTML空元素
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標籤中新增斜槓，比如 <br/> ，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使<br>在所有瀏覽器中都是有效的，但 使用 <br/>其實是更長遠的保障。
HTML 屬性
屬性是 HTML 元素提供的附加資訊。
1. HTML 屬性
- HTML 元素可以設定屬性
- 屬性可以在元素中新增附加資訊
- 屬性一般描述於開始標籤
- 屬性總是以名稱/值對的形式出現，比如：name="value"。
屬性例項
HTML 連結由 <a> 標籤定義。連結的地址在 href 屬性中指定：
<a href="http://www.runoob.com">這是一個連結</a>
2. HTML 屬性常用引用屬性值
屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。
3.HTML 提示：使用小寫屬性
屬性和屬性值對大小寫不敏感。 不過，全球資訊網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。 而新版本的 (X)HTML 要求使用小寫屬性。4.適用於大多數HTML元素的屬性
| 屬性 | 描述 |
| class | 為html元素定義一個或多個類名（classname）(類名從樣式檔案引入) |
| id | 定義元素的唯一id |
| style | 規定元素的行內樣式（inline style） |
| title | 描述了元素的額外資訊 (作為工具條使用) |
HTML 標題
1. HTML標題很重要
- 確保將 HTML 標題 標籤只用於標題。不要僅僅是為了生成粗體或大號的文字而使用標題。
- 搜尋引擎使用標題為您的網頁的結構和內容編制索引。
- 因為使用者可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文件結構是很重要的。
- 應該將 h1 用作主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。
2. HTML 標題
標題（Heading）是通過 <h1> - <h6> 標籤進行定義的。<h1> 定義最大的標題。<h6>定義最小的標題。
注意：瀏覽器會自動地在標題的前後新增空行。
```powershell
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>
3. HTML 水平線
<hr> 標籤在 HTML 頁面中建立水平線。hr 元素可用於分隔內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>hr 標籤定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>
4. HTML 註釋
可以將註釋插入 HTML 程式碼中，這樣可以提高其可讀性，使程式碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<!--這是一個註釋，註釋在瀏覽器中不會顯示-->
<p>這是一個段落</p>
</body>
</html>
5. 標題大小與字型大小的關係
1到6號標題與1到6號字型逆序對應，比如1號字型對應6號標題，2號字型對應5號標題。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>這是1號標題</h1>
<font size="6">這是6號字型文字</font>
<h2>這是2號標題</h2>
<font size="5">這是5號字型文字</font>
<h3>這是3號標題</h3>
<font size="4">這是4號字型文字</font>
<h4>這是4號標題</h4>
<font size="3">這是3號字型文字</font>
<h5>這是5號標題</h5>
<font size="2">這是2號字型文字</font>
<h6>這是6號標題</h6>
<font size="1">這是1號字型文字</font>
</body>
</html>
HTML 段落
HTML 可以將文件分割為若干段落。
1. HTML 段落
段落是通過 <p> 標籤定義的。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</body>
</html>
注意：注意：瀏覽器會自動地在段落的前後新增空行。（</p> 是塊級元素）
2. HTML 折行
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 </br>標籤：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>這個<br>段落<br>演示了分行的效果</p>
</body>
</html>
</br>元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義，因此它沒有結束標籤。
3. HTML 輸出- 使用提醒
我們無法確定 HTML 被顯示的確切效果。螢幕的大小，以及對視窗的調整都可能導致不同的結果。對於 HTML，您無法通過在 HTML 程式碼中新增額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 程式碼中的所有連續的空行（換行）也被顯示為一個空格。
例項：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>
這個段落
在原始碼中
包含許多行
但是瀏覽器
忽略了它們。
</p>
<p>
這個段落
在原始碼 中
包含 許多行
但是 瀏覽器
忽略了 它們。
</p>
<p>
段落的行數依賴於瀏覽器視窗的大小。如果調節瀏覽器視窗的大小，將改變段落中的行數。
</p>
</body>
</html>
輸出結果：
HTML 文字格式化
1. HTML 文字格式化標籤
| 標籤 | 描述 |
| <b> | 定義粗體文字 |
| <em> | 定義著重文字 |
| <i> | 定義斜體文字 |
| <small> | 定義小號字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標字 |
| <sup> | 定義上標字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<b>這個文字是加粗的</b>
<br />
<em>這個文字是著重的</em>
<br />
<i>這個文字是斜體的</i>
<br />
<small>這個文字是縮小的</small>
<br />
<strong>這個文字是加粗的</strong>
<br />
<big>這個文字字型放大</big>
<br />
這個文字包含
<sub>下標</sub>
<br />
這個文字包含
<sup>上標</sup>
<br/>
定義
<ins>插入字</ins>
<br/>
<del>定義刪除字</del>
<br/>
</body>
</html>
輸出結果：
2. HTML "計算機輸出" 標籤
| 標籤 | 描述 |
| <code> | 定義計算機程式碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計算機程式碼樣本 |
| <var> | 定義變數 |
| <pre> | 定義預格式文字 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<code>計算機輸出</code>
<br />
<kbd>鍵盤輸入</kbd>
<br />
<tt>打字機文字</tt>
<br />
<samp>計算機程式碼樣本</samp>
<br />
<var>計算機變數</var>
<br />
<pre>
此例演示如何使用 pre 標籤
對空行和 空格
進行控制
</pre>
<p>
<b>註釋：</b>這些標籤常用於顯示計算機/程式設計程式碼。
</p>
</body>
</html>
執行結果：
3. HTML 引文, 引用, 及標籤定義
| 標籤 | 描述 |
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個定義專案 |
如何實現縮寫或首字母縮寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些瀏覽器中，當您把滑鼠移至縮略詞語上時，title 可用於展示表達的完整版本。</p>
<p>僅對於 IE 5 中的 acronym 元素有效。</p>
<p>對於 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
輸出結果：
如何在 HTML 檔案中寫地址：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
輸出結果：
如何改變文字的方向：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>該段落文字從左到右顯示。</p>
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>
</body>
</html>
輸出結果：
如何實現長短不一的引用語：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<br/>
WWF's goal is to:
<blockquote>Build a future where people live in harmony with nature.</blockquote>
We hope they succeed.
</body>
</html>
輸出結果：
定義引用、引證：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
執行結果：
標籤縮寫的全稱：
HTML 連結
HTML使用標籤 <a>來設定超文字連結。超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影像，您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。
當您把滑鼠指標移動到網頁中的某個連結上時，箭頭會變為一隻小手。
在標籤 <a> 中使用了href屬性來描述連結的地址。
- 預設情況下，連結將以以下形式出現在瀏覽器中：
- 一個未訪問過的連結顯示為藍色字型並帶有下劃線。
- 訪問過的連結顯示為紫色並帶有下劃線。
- 點選連結時，連結顯示為紅色並帶有下劃線。
示例
如何使用圖片連結(href)
屬性href；值為URL型別；描述：超連結的 URL。- 可能的值：
- 絕對 URL - 指向另一個站點（比如 href="http://www.example.com/index.htm"）
- 相對 URL - 指向站點內的某個檔案（href="index.htm"）
- 錨 URL - 指向頁面中的錨（href="#top"）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>建立圖片連結:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>無邊框的圖片連結:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>
執行結果：
如何使用書籤(id)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>
<a href="#C4">檢視章節 4</a>
</p>
<h2>章節 1</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 2</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 3</h2>
<p>這邊顯示該章節的內容……</p>
<h2><a id="C4">章節 4</a></h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 5</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 6</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 7</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 8</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 9</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 10</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 11</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 12</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 13</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 14</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 15</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 16</h2>
<p>這邊顯示該章節的內容……</p>
<h2>章節 17</h2>
<p>這邊顯示該章節的內容……</p>
</body>
</html>
如何跳出框架，假如你的頁面被固定在框架之內(target)
- target屬性有四個保留的目標名稱用作特殊的文件重定向操作：
- _blank：瀏覽器總在一個新開啟、未命名的視窗中載入目標文件。
- _self：這個目標的值對所有沒有指定目標的 <a> 標籤是預設目標，它使得目標文件載入並顯示在相同的框架或者視窗中作為源文件。這個目標是多餘且不必要的，除非和文件標題 <base> 標籤中的 target 屬性一起使用。
- _parent：這個目標使得文件載入父視窗或者包含來超連結引用的框架的框架集。如果這個引用是在視窗或者在頂級框架中，那麼它與目標 _self 等效。
- _top：這個目標使得文件載入包含這個超連結的視窗，用 _top 目標將會清除所有被包含的框架並將文件載入整個瀏覽器視窗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>跳出框架?</p>
<a href="//www.runoob.com/" target="_top">點選這裡!</a>
</body>
</html>
如何連結到一個郵件(href)
（本例在安裝郵件客戶端程式後才能工作。）<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>
這是一個電子郵件連結：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
傳送郵件</a>
</p>
<p>
<b>注意:</b> 單詞之間空格使用 %20 代替，以確保瀏覽器可以正常顯示文字。
</p>
</body>
</html>
輸出結果：
HTML 頭部
1. HTML <head> 元素
<head> 元素包含了所有的頭部標籤元素。在 <head> 元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。可以新增在頭部區域的元素標籤為: <itle> 、<style>、 <meta> 、<link> 、 <script> 、<noscript> 和 <base> 。
2. HTML <title> 元素
<title>標籤定義了不同文件的標題。<title>在HTML/XHTML文件中是必須的。
- <title> 元素：
- 定義了瀏覽器工具欄的標題
- 當網頁新增到收藏夾時，顯示在收藏夾中的標題
- 顯示在搜尋引擎結果頁面的標題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件標題</title>
</head>
<body>
文件內容......
</body>
</html>
3. HTML <base> 元素
<base> 標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結:<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
4. HTML <link> 元素
<link> 標籤定義了文件與外部資源之間的關係。<link> 標籤通常用於連結到樣式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5. HTML <style> 元素
<style> 標籤定義了HTML文件的樣式檔案引用地址.在 <style> 元素中你也可以直接新增樣式來渲染 HTML 文件
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
6. HTML <meta> 元素
meta標籤描述了一些基本的後設資料。<meta> 標籤提供了後設資料.後設資料也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他後設資料。
後設資料可以使用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他Web服務。
<meta> 一般放置於 <head>區域
示例：
為搜尋引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="免費 Web & 程式設計 教程">
定義網頁作者:
<meta name="author" content="Runoob">
每30秒鐘重新整理當前頁面:
<meta http-equiv="refresh" content="30">
7. HTML <script> 元素
<script> 標籤用於載入指令碼檔案，如： JavaScript。HTML 樣式- CSS
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。
1. 如何使用CSS
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.- CSS 可以通過以下方式新增到HTML中:
- 內聯樣式- 在HTML元素中使用"style" 屬性
- 內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素 來包含CSS
- 外部引用 - 使用外部 CSS 檔案
2. 內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性<style>。樣式屬性可以包含任何 CSS 屬性。以下例項顯示出如何改變段落的顏色和左外邊距。<p style="color:blue;margin-left:20px;">這是一個段落。</p>
3. 內部樣式表
當單個檔案需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標籤定義內部樣式表:<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
4. 外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個檔案來改變整個站點的外觀。<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5. 例項
1. 如何使用新增到 部分的樣式資訊對 HTML 進行格式化。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
輸出結果：
2. 如何使用 style 屬性製作一個沒有下劃線的連結
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<a href="//www.runoob.com/" style="text-decoration:none;">訪問 runoob.com!</a>
</body>
</html>
輸出結果：
3. 如何標籤連結到一個外部樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>我使用了外部樣式檔案來格式化文字 </h1>
<p>我也是!</p>
</body>
</html>
輸出結果：
4. HTML樣式例項 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>
輸出結果：
5. HTML 樣式例項 - 字型, 字型顏色 ，字型大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1 style="font-family:verdana;">一個標題</h1>
<p style="font-family:arial;color:red;font-size:20px;">一個段落。</p>
</body>
</html>
輸出結果：
現在通常使用font-family（字型），color（顏色），和font-size（字型大小）屬性來定義文字樣式，而不是使用font 標籤。
HTML 樣式例項 - 文字對齊方式
使用 text-align（文字對齊）屬性指定文字的水平與垂直對齊方式：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1 style="text-align:center;">居中對齊的標題</h1>
<p>這是一個段落。</p>
</body>
</html>
輸出結果：
文字對齊屬性 text-align取代了舊標籤 center 。
HTML 影像
1. HTML 影像- 影像標籤（ <img>）和源屬性（Src）
在 HTML 中，影像由<img> 標籤定義。<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示影像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是影像的 URL 地址。
定義影像的語法是：
<img src="url" alt="some_text">
2. HTML 影像- Alt屬性
alt 屬性用來為影像定義一串預備的可替換的文字。替換文字屬性的值是使用者定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入影像時，替換文字屬性告訴讀者她們失去的資訊。此時，瀏覽器將顯示這個替代性的文字而不是影像。為頁面上的影像都加上替換文字屬性是個好習慣，這樣有助於更好的顯示資訊，並且對於那些使用純文字瀏覽器的人來說是非常有用的。
3. HTML 影像- 設定影像的高度與寬度
height（高度） 與 width（寬度）屬性用於設定影像的高度與寬度。屬性值預設單位為畫素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定影像的高度和寬度是一個很好的習慣。如果影像指定了高度寬度，頁面載入時就會保留指定的尺寸。如果沒有指定圖片的大小，載入頁面時有可能會破壞HTML頁面的整體佈局。
4. HTML 影像 示例
1. 如何在文字中排列影像。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>預設對齊的影像 (align="bottom"):</h4>
<p>這是一些文字。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 這是一些文字。</p>
<h4>圖片使用 align="middle":</h4>
<p>這是一些文字。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">這是一些文字。</p>
<h4>圖片使用 align="top":</h4>
<p>這是一些文字。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">這是一些文字。</p>
<p><b>注意:</b>在HTML 4中 align 屬性已廢棄，HTML5 已不支援該屬性，可以使用 CSS 代替。</p>
</body>
</html>
輸出結果：
2. 如何使圖片浮動至段落的左邊或右邊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文字的左邊。
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文字的右邊。
</p>
<p><b>注意:</b> 在這裡我們使用了 CSS float 屬性，在HTML 4 中 float 屬性已廢棄，HTML5 已不支援該屬性，可以使用 CSS 代替。</p>
</body>
</html>
輸出結果：
3. 如何將影像作為一個連結使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>建立圖片連結:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>無邊框的圖片連結:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>
輸出結果：
4. 如何建立帶有可供點選區域的影像地圖。其中的每個區域都是一個超級連結。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點選太陽或其他行星，注意變化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
輸出結果：
HTML 表格
1. HTML 表格
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由 <td> 標籤定義）。字母 td 指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2. HTML表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
3. HTML 表格表頭
表格的表頭使用<h>標籤進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文字。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
4. HTML 表格 示例
1. 沒有邊框的表格（使用border元素）<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>這個表格有邊框:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>這個表格沒有邊框:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
2. 如何顯示錶格表頭（使用th標籤）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>水平標題:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直標題:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
3. 帶標題 (caption) 的表格（使用caption標籤）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
4. 如何定義跨行或跨列的表格單元格（使用colspan元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>單元格跨兩列:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>單元格跨兩行:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
5. 如何在不同的元素內顯示元素（單元格td內使用列表、表格、段落等元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<table border="1">
<tr>
<td>
<p>這是一個段落</p>
<p>這是另一個段落</p>
</td>
<td>這個單元格包含一個表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元格包含一個列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
6. 如何使用 Cell padding 來建立單元格內容與其邊框之間的空白（使用cellpadding元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>沒有單元格邊距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>有單元格邊距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
7. 如何使用 Cell spacing 增加單元格之間的距離
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>沒有單元格間距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>單元格間距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>單元格間距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
8. 漂亮的表格（html + css）
.html
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" class="biaoti" height="60">受理員業務統計表</td>
</tr>
<tr>
<td align="right" height="25">2017-01-02---2017-05-02</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
<tr>
<td colspan="2" class="btbg font-center titfont" rowspan="2">受理員</td>
<td width="10%" class="btbg font-center titfont" rowspan="2">受理數</td>
<td width="10%" class="btbg font-center titfont" rowspan="2">自辦數</td>
<td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
<td colspan="2" class="btbg font-center titfont">擬辦意見</td>
<td colspan="2" class="btbg font-center titfont">返回修改</td>
<td colspan="3" class="btbg font-center titfont">工單型別</td>
</tr>
<tr>
<td width="8%" class="btbg font-center">同意</td>
<td width="8%" class="btbg font-center">比例</td>
<td width="8%" class="btbg font-center">數量</td>
<td width="8%" class="btbg font-center">比例</td>
<td width="8%" class="btbg font-center">建議件</td>
<td width="8%" class="btbg font-center">訴求件</td>
<td width="8%" class="btbg font-center">諮詢件</td>
</tr>
<tr>
<td width="7%" rowspan="8" class="btbg1 font-center">受理處</td>
<td width="7%" class="btbg2">王豔</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2 font-center">總計</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
</tr>
<tr>
<td width="7%" rowspan="8" class="btbg1 font-center">話務組</td>
<td width="7%" class="btbg2">王豔</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2">王豔</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2">王豔</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2">王豔</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="btbg2 font-center">總計</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
<td class="btbg2 font-center">20</td>
</tr>
</table>
.css
@charset "utf-8";
/* CSS Document */
.tabtop13 {
margin-top: 13px;
}
.tabtop13 td{
background-color:#ffffff;
height:25px;
line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
font-family: 微軟雅黑;
font-size: 26px;
font-weight: bold;
border-bottom:1px dashed #CCCCCC;
color: #255e95;
}
.titfont {
font-family: 微軟雅黑;
font-size: 16px;
font-weight: bold;
color: #255e95;
background: url(../images/ico3.gif) no-repeat 15px center;
background-color:#e9faff;
}
.tabtxt2 {
font-family: 微軟雅黑;
font-size: 14px;
font-weight: bold;
text-align: right;
padding-right: 10px;
color:#327cd1;
}
.tabtxt3 {
font-family: 微軟雅黑;
font-size: 14px;
padding-left: 15px;
color: #000;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
}
表格的頁首、主體和頁尾
HTML 列表
1. HTML無序列表
無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。 無序列表使用 <ul>標籤<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2. HTML有序列表
同樣，有序列表也是一列專案，列表專案使用數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。列表項使用數字來標記。<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3. HTML 自定義列表
自定義列表不僅僅是一列專案，而是專案及其註釋的組合。自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
提示: 列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。
4. HTML 列表 示例
1. 不同型別的有序列表（使用css樣式list-style-type）<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>編號列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大寫字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小寫字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>羅馬數字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小寫羅馬數字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
2. 不同型別的無序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p><b>注意：</b> 在 HTML 4中 ul 屬性已廢棄，HTML5 已不支援該屬性，因此我們使用 CSS 代替來定義不同型別的無序列表如下：</p>
<h4>圓點列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圓圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
3. 如何巢狀列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>巢狀列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
4. 更復雜的巢狀列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>巢狀列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
5. 一個定義列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h4>一個自定義列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
HTML區塊
HTML 可以通過 div 和 span 將元素組合起來。
1. HTML 區塊元素
大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。示例：<h1>、<p>、<ul>、<table>
2. HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。例項: <b>, <td>, <a>, <img>
3. HTML <div> 元素
HTML <div> 元素是塊級元素，它可用於組合其他 HTML 元素的容器。<div>元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。如果與 CSS 一同使用， <div> 元素可用於對大的內容塊設定樣式屬性。<div> 元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文件佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的資料。4. HTML 元素
HTML <span> 元素是內聯元素，可用作文字的容器。<span> 元素也沒有特定的含義。當與 CSS 一同使用時，<span> 元素可用於為部分文字設定樣式屬性。5. HTML 示例
1. <div>標籤<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>這是一些文字。</p>
<div style="color:#0000FF">
<h3>這是一個在 div 元素中的標題。</h3>
<p>這是一個在 div 元素中的文字。</p>
</div>
<p>這是一些文字。</p>
</body>
</html>
2. <span> 標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛，我的父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。</p>
</body>
</html>
HTML 佈局
1. HTML 網站佈局
大多數網站可以使用 <div> 或者 <table> 元素來建立多列。CSS 用於對元素進行定位，或者為頁面建立背景以及色彩豐富的外觀。2. HTML 佈局 示例
1. 使用五個 div 元素來建立多列布局<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>選單</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
內容在這裡</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版權 © runoob.com</div>
</div>
</body>
</html>
2. 使用 table 元素佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的網頁標題</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;vertical-align:top;">
<b>選單</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
內容在這裡</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版權 © runoob.com</td>
</tr>
</table>
</body>
</html>
即使可以使用 HTML 表格來建立漂亮的佈局，但設計表格的目的是呈現表格化資料 - 表格不是佈局工具！
HTML 表單和輸入
1. HTML 表單
表單是一個包含表單元素的區域。表單元素是允許使用者在表單中輸入內容,比如：文字域(textarea)、下拉選單、單選框(radio-buttons)、核取方塊(checkboxes)等等。 表單使用表單標籤 <form> 來設定:<form>
.
input 元素
.
</form>
2. HTML 表單 - 輸入元素
多數情況下被用到的表單標籤是輸入標籤（<input>）。 輸入型別是由型別屬性（type）定義的。1） 文字域（Text Fields）
文字域通過 標籤來設定，當使用者要在表單中鍵入字母、數字等內容時，就會用到文字域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
注意:表單本身並不可見。同時，在大多數瀏覽器中，文字域的預設寬度是 20 個字元。
2）密碼欄位
密碼欄位通過屬性type=“password” 來定義:
<form>
Password: <input type="password" name="pwd">
</form>
注意:密碼欄位字元不會明文顯示，而是以星號或圓點替代。
3）單選按鈕（Radio Buttons）
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
4）核取方塊（Checkboxes）
使用者需要從若干給定的選擇中選取一個或若干選項。
<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>
5）提交按鈕(Submit Button)
當使用者單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
假如在上面的文字框內鍵入幾個字母，然後點選確認按鈕，那麼輸入資料會傳送到 “html_form_action.php” 的頁面。該頁面將顯示出輸入的結果。
3. HTML 表單示例
1. 如何在 HTML 頁面中建立簡單的下拉選單框。下拉選單框是一個可選列表<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
2. 如何建立一個簡單的帶有預選值的下拉選單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
3. 如何建立文字域（多行文字輸入控制元件）。使用者可在文字域中寫入文字。可寫入字元的字數不受限制。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<textarea rows="10" cols="30">
我是一個文字框。
</textarea>
</body>
</html>
HTML 框架
通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。
1. Iframe - 設定高度與寬度
height 和 width 屬性用來定義iframe標籤的高度與寬度。屬性預設以畫素為單位, 但是你可以指定其按比例顯示 (如："80%")。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>一些舊的瀏覽器不支援 iframe。</p>
<p>如果瀏覽器不支援 iframes 則不會顯示。</p>
</body>
</html>
2. Iframe - 移除邊框
frameborder 屬性用於定義iframe表示是否顯示邊框。設定屬性值為 "0" 移除iframe的邊框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">
<p>您的瀏覽器不支援 iframe 標籤。</p>
</iframe>
</body>
</html>
3. 使用iframe來顯示目標連結頁面
iframe可以顯示一個目標連結的頁面目標連結的屬性必須使用iframe的屬性，如下例項:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<p><b>注意：</b> 因為 a 標籤的 target 屬性是名為 iframe_a 的 iframe 框架，所以在點選連結時頁面會顯示在 iframe框架中。</p>
</body>
</html>
來源： HTML菜鳥教程.
相關文章
- HTML標記語法總結HTML
- HTML5語法總結HTML
- sql語法總結SQL
- Go語言基礎語法總結Go
- go 奇葩語法總結篇Go
- PHP高階語法總結PHP
- open policy agent 語法總結
- es6語法總結
- python 語法總結：Python語法快速入門Python
- ES6常用語法總結
- css基本語法總結及使用CSS
- selenium之xpath語法總結
- Emmet外掛常用語法總結
- Hibernate-hql語法總結.
- 常用CSS縮寫語法總結CSS
- 05-ES6語法總結
- Html總結HTML
- HTML5語義化標籤總結HTML
- Vue3.2 setup語法糖總結Vue
- Python筆記_1語法總結Python筆記
- ES6 語法學習總結
- jQuery 語法總結和注意事項jQuery
- UPDATE SET = (SELECT ) 語法的總結
- Oracle和SQL對比語法總結OracleSQL
- html5語法HTML
- HTML語法教學HTML
- HTML基本語法和語義HTML
- HTML總結篇HTML
- 自頂向下語法分析複習總結語法分析
- SQL語法的重要知識點總結SQL
- html和css總結HTMLCSS
- HTML學習總結HTML
- HTML重點總結HTML
- html初學總結HTML
- 【HTML——基礎總結】HTML
- python基礎語法知識點總結Python
- django中嵌入html的語法DjangoHTML
- HTML特殊字元的html、js、css寫法彙總HTML字元JSCSS