<title> - 定義了HTML文檔的標題
使用 <title> 標籤定義HTML文檔的標題
<base> - 定義了所有連結的URL
使用 <base> 定義頁面中所有連結默認的連結目標地址。
<meta> - 提供了HTML文檔的meta標記
使用 <meta> 元素來描述HTML文檔的描述，關鍵詞，作者，字符集等。
<head> 元素包含了所有的頭部標籤元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標籤為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> 元素<title> 標籤定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時，顯示在收藏夾中的標題
顯示在搜尋引擎結果頁面的標題
一個簡單的 HTML 文檔:
實例HTML <base> 元素<base> 標籤描述了基本的連結地址/連結目標，該標籤作為HTML文檔中所有的連結標籤的默認連結:
HTML <link> 元素<link> 標籤定義了文檔與外部資源之間的關係。
<link> 標籤通常用於連結到樣式表:
HTML <style> 元素<style> 標籤定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
HTML <meta> 元素meta標籤描述了一些基本的元數據。
<meta> 標籤提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用於指定網頁的描述，關鍵詞，文件的最後修改時間，作者，和其他元數據。
元數據可以使用於瀏覽器（如何顯示內容或重新加載頁面），搜尋引擎（關鍵詞），或其他Web服務。
<meta> 一般放置於 <head> 區域
<meta> 標籤- 使用實例為搜尋引擎定義關鍵詞:
為網頁定義描述內容:
定義網頁作者:
每30秒鐘刷新當前頁面:
HTML <script> 元素<script>標籤用於加載腳本文件，如： JavaScript。
<script> 元素在以後的章節中會詳細描述。
HTML head 元素標籤描述<head>定義了文檔的信息<title>定義了文檔的標題<base>定義了頁面連結標籤的默認連結地址<link>定義了一個文檔和外部資源之間的關係<meta>定義了HTML文檔中的元數據<script>定義了客戶端的腳本文件<style>定義了HTML文檔的樣式文件HTML 樣式- CSSCSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式.
嘗試一下 - 實例HTML使用樣式
本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進行格式化。
本例演示如何使用樣式屬性做一個沒有下劃線的連結。
如何使用 style 屬性製作一個沒有下劃線的連結。
連結到一個外部樣式表
本例演示如何 標籤連結到一個外部樣式表。
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式添加到HTML中:
最好的方式是通過外部引用CSS文件.
在本站的HTML教程中我們使用了內聯CSS樣式來介紹實例，這是為了簡化的例子，也使得你能更容易在線編輯代碼並在線運行實例。
內聯樣式當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
HTML樣式實例 - 背景顏色背景色屬性（background-color）定義一個元素的背景顏色：
實例早期背景色屬性（background-color）是使用 bgcolor 屬性定義。
嘗試一下: 舊版HTML來設置背景方式
HTML 樣式實例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
實例現在通常使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標籤。
HTML 樣式實例 - 文本對齊方式使用 text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：
實例文本對齊屬性 text-align取代了舊標籤 <center> 。
內部樣式表當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標籤定義內部樣式表:
外部樣式表當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
HTML 樣式標籤標籤描述<style>定義文本樣式<link>定義資源引用地址在HTML 4, 原來支持定義HTML元素樣式的標籤和屬性已被棄用。這些標籤將不支持新版本的HTML標籤。
不建議使用的標籤有: <font>, <center>, <strike>
不建議使用的屬性: color 和 bgcolor.
CSS修飾標籤的樣式，有 "內聯" 和 "外引" 兩種方式。
對於大部分標籤，以上兩種方法均可，且修改父級標籤，子級標籤特性也會改變。但某些標籤確無法通過修改父級標籤來改變子級標籤特性，如a標籤，修改其顏色特性，必須直接修改 a 標籤的特性才可。
實例：
<a href="#" style="color：red;" rel="nofollow">只能使用"內聯"方式</a>
HTML 圖像實例在線實例插入圖像
本例演示如何在網頁中顯示圖像。
從不同的位置插入圖片
本例演示如何將其他文件夾或伺服器的圖片顯示到網頁中。
在 HTML 中，圖像由<img> 標籤定義。
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
URL 指存儲圖像的位置。如果名為 "pulpit.jpg" 的圖像位於 www.runoob.com 的 images 目錄中，那麼其 URL 為 http://www.runoob.com/images/pulpit.jpg。
瀏覽器將圖像顯示在文檔中圖像標籤出現的地方。如果你將圖像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。
HTML 圖像- Alt屬性alt 屬性用來為圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。
HTML 圖像- 設置圖像的高度與寬度height（高度） 與 width（寬度）屬性用於設置圖像的高度與寬度。
屬性值默認單位為像素:
提示: 指定圖像的高度和寬度的一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。
基本的注意事項 - 有用的提示：注意: 假如某個 HTML 文件包含十個圖像，那麼為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標籤就會顯示一個破碎的圖片。
更多實例排列圖片
本例演示如何在文字中排列圖像。
浮動圖像
本例演示如何使圖片浮動至段落的左邊或右邊。
設置圖像連結
本例演示如何將圖像作為一個連結使用。
創建圖像映射
本例顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級連結。
點擊之後
HTML 圖像標籤標籤描述<img>定義圖像<map>定義圖像地圖<area>定義圖像地圖中的可點擊區域
1、距形：(左上角頂點坐標為(x1,y1)，右下角頂點坐標為(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圓形：(圓心坐標為(X1,y1)，半徑為r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多邊形：(各頂點坐標依次為(x1,y1)、(x2,y2)、(x3,y3) .)
<area shape="poly" coords="x1,y1,x2,y2 ." href=url>
HTML 表格HTML 表格實例:First NameLast NamePointsJillSmith50EveJackson94JohnDoe80AdamJohnson67表格
這個例子演示如何在 HTML 文檔中創建表格。
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例實例在瀏覽器顯示如下：:
HTML 表格和邊框屬性如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
實例HTML 表格表頭表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本：
實例在瀏覽器顯示如下：
更多實例沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標題的表格
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內的標籤
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
漂亮的表格
HTML原始碼：
CSS原始碼：
運行結果：
HTML 表格標籤標籤描述<table>定義表格<th>定義表格的表頭<tr>定義表格的行<td>定義表格單元<caption>定義表格標題<colgroup>定義表格列的組<col>定義用於表格列的屬性<thead>定義表格的頁眉<tbody>定義表格的主體<tfoot>定義表格的頁腳HTML中的table可以大致分為三個部分：
thead ----表格的頁眉
tbody ----表格的主體
tfoot ----定義表格的頁腳
thead, tbody, tfoot 相當於三間房子，每間房子都可以用來放東西。
<tr> </tr> 這個標籤就是放在三間房子裡面的東西，每一個 <tr> </tr> 就是表格一行。
表格的每一行被分為一個個單元格。
每一個單元格就是用來存放數據的，這個數據分為兩種：一，數據的名稱；二，數據本身。
用 <th></th> 表示數據的名稱(標題) ,
<td></td>
表示真正的數據內容。
一個簡單實例：
HTML 列表HTML 支持有序、無序和定義列表:
HTML 列表在線實例無序列表
本例演示無序列表。
有序列表
本例演示有序列表。
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤
瀏覽器顯示如下：
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
列表項項使用數字來標記。
瀏覽器中顯示如下：
HTML 自定義列表自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
瀏覽器顯示如下：
提示: 列表項內部可以使用段落、換行符、圖片、連結以及其他列表等等。
更多實例不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更複雜的嵌套列表。
自定義列表
本例演示一個定義列表。