HTML 編輯器推薦：
Notepad++：https://notepad-plus-plus.org/（當(dāng)保存 HTML 文件時，既可以使用.htm也可以使用.html擴(kuò)展名。兩者沒有區(qū)別，完全根據(jù)個人喜好。）
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/
Dreamweaver
在線編輯器：W3School在線測試工具 V2
http://www.w3school.com.cn/tiy/t.asp?f=html_basic_link
HTML：超文本標(biāo)記語言（Hyper Text Markup Language 簡稱：HTML）
是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言（標(biāo)記語言是一套標(biāo)記標(biāo)簽），不是編程語言
使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML文檔包含了HTML標(biāo)簽及文本內(nèi)容
HTML文檔也叫web網(wǎng)頁
HTML 標(biāo)簽：
HTML 標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽 (HTML tag)。
HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽
開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽（偽標(biāo)簽）【開始標(biāo)簽和結(jié)束標(biāo)簽】
HTML 文檔 = 網(wǎng)頁：
HTML 文檔描述網(wǎng)頁
HTML 文檔包含 HTML 標(biāo)簽和純文本
HTML 文檔也被稱為網(wǎng)頁
Web 瀏覽器：
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁顯示，并以網(wǎng)頁的形式顯示出它們。
瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶
注意：對于中文網(wǎng)頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為 <meta charset="gbk">。
只有 <body></body>之間的內(nèi)容才會在瀏覽器中顯示
例子：
<html>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落。</p>
</body>
</html>
例子解釋：
<html>與</html>之間的文本描述網(wǎng)頁
<body>與</body>之間的文本是可見的頁面內(nèi)容
<h1>與</h1>之間的文本被顯示為標(biāo)題
<p>與</p>之間的文本被顯示為段落
HTML <head> 元素：
<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素：
<title> 標(biāo)簽定義文檔的標(biāo)題。
title 元素在所有 HTML/XHTML 文檔中都是必需的。
title 元素能夠：
定義瀏覽器工具欄中的標(biāo)題
提供頁面被添加到收藏夾時顯示的標(biāo)題
顯示在搜索引擎結(jié)果中的頁面標(biāo)題
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
HTML <base> 元素：
<base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）：
<head>
<base />
<base target="_blank" />
</head>
HTML <link> 元素：
<link> 標(biāo)簽定義文檔與外部資源之間的關(guān)系。
<link> 標(biāo)簽最常用于連接樣式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style> 元素：
<style> 標(biāo)簽用于為 HTML 文檔定義樣式信息。
您可以在 style 元素內(nèi)規(guī)定 HTML 元素在瀏覽器中呈現(xiàn)的樣式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML 標(biāo)題：
HTML 標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的，字號依次變小
<h1> 定義最大字號的標(biāo)題。<h6> 定義最小字號的標(biāo)題。
注釋：瀏覽器會自動地在標(biāo)題的前后添加空行。
默認(rèn)情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標(biāo)題元素前后。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<h2>我的第一個標(biāo)題</h2>
<h3>我的第一個標(biāo)題</h3>
<h4>我的第一個標(biāo)題</h4>
<h5>我的第一個標(biāo)題</h5>
<h6>我的第一個標(biāo)題</h6>
</body>
</html>
HTML 水平線：
<hr > 標(biāo)簽在 HTML 頁面中創(chuàng)建水平線。
也可以實(shí)現(xiàn)同等效果
hr 元素可用于分隔內(nèi)容。
實(shí)例：
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body bgcolor="yellow">
<h1 align="center">我的第一個標(biāo)題</h1>
<p>我的第一個段落</p>
<p>我的第二個段落</p>
<p>我的第三個段落</p>
</body>
</html>
HTML 注釋：
可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。
注釋是這樣寫的：
實(shí)例：
HTML 提示 - 如何查看源代碼
您一定曾經(jīng)在看到某個網(wǎng)頁時驚嘆道 “WOW! 這是如何實(shí)現(xiàn)的？”
如果您想找到其中的奧秘，只需要單擊右鍵，然后選擇“查看源文件”（IE）或“查看頁面源代碼”（Firefox），其他瀏覽器的做法也是類似的。這么做會打開一個包含頁面 HTML 代碼的窗口。
HTML 段落：
HTML 段落是通過 <p> 標(biāo)簽進(jìn)行定義的。
注釋：瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素）
提示：使用空的段落標(biāo)記 <p></p> 去插入一個空行是個壞習(xí)慣。用 <br />（
等同于
） 標(biāo)簽，
代替它?。ǖ遣灰?<br /> 標(biāo)簽去創(chuàng)建列表。）
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個標(biāo)題</p>
<p>我的第一個標(biāo)題</p>
<p>我的第一個標(biāo)題</p>
</body>
</html>
不要忘記結(jié)束標(biāo)簽：
即使忘了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會正確地將 HTML 顯示出來：
HTML 換行：
如果您希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行（新行），請使用 <br /> 標(biāo)簽：
實(shí)例：
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body bgcolor="yellow"> bgcolor、align舊版本使用的語法
<h1 align="center">我的第一個標(biāo)題</h1>
<p>我的第一個段落
我的第二個段落
我的第三個段落</p>
</body>
</html>
<br /> 元素是一個空的 HTML 元素。由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。
還是 <br />：
您也許發(fā)現(xiàn)
與 <br /> 很相似。
在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結(jié)束標(biāo)簽（閉合標(biāo)簽）的 HTML 元素。
即使
在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠(yuǎn)的保障。
HTML 輸出 - 有用的提示
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。
對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。
HTML 超鏈接：
HTML 鏈接是通過 <a> 標(biāo)簽進(jìn)行定義的。
1.通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接
2.通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽
注釋："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body>
<a >這是一個連接</a>
</body>
</html>
HTML 鏈接 - target 屬性：
使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會在新窗口打開文檔：
<a target="_blank">Visit W3School!</a>
HTML 鏈接 - name 屬性：
name 屬性規(guī)定錨（anchor）的名稱。
您可以使用 name 屬性創(chuàng)建 HTML 頁面中的書簽。
書簽不會以任何特殊方式顯示，它對讀者是不可見的。
當(dāng)使用命名錨（named anchors）時，我們可以創(chuàng)建直接跳至該命名錨（比如頁面中某個小節(jié)）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法：
<a name="label">錨（顯示在頁面上的文本）</a>
提示：錨的名稱可以是任何你喜歡的名字。
提示：您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。
實(shí)例：
首先，我們在 HTML 文檔中對錨進(jìn)行命名（創(chuàng)建一個書簽）：
<a name="tips">基本的注意事項(xiàng) - 有用的提示</a>
然后，我們在同一個文檔中創(chuàng)建指向該錨的鏈接：
<a href="#tips">有用的提示</a>
您也可以在其他頁面中創(chuàng)建指向該錨的鏈接：
<a >有用的提示</a>
HTML 圖像：
HTML 圖像是通過 <img> 標(biāo)簽進(jìn)行定義的。
<img> 是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" />
注釋：圖像的名稱和尺寸是以屬性的形式提供的。
圖片要和html文檔放置于一個文件夾中(推薦)
URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body>
<img src="d.jpg" width="104" height="142"
</body>
</html>
替換文本屬性（Alt）：
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
HTML 元素：
HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
注釋：開始標(biāo)簽常被稱為開放標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）或者偽標(biāo)簽。
HTML 元素語法：
HTML 元素以開始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性
嵌套的HTML元素：
大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文檔由嵌套的 HTML 元素構(gòu)成。
實(shí)例：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
上面的例子包含三個 HTML 元素。
HTML 實(shí)例解釋：
<p> 元素：
<p>This is my first paragraph.</p>
這個 <p> 元素定義了 HTML 文檔中的一個段落。
這個元素?fù)碛幸粋€開始標(biāo)簽 <p>，以及一個結(jié)束標(biāo)簽 </p>。
元素內(nèi)容是：This is my first paragraph。
<body> 元素：
<body>
<p>This is my first paragraph.</p>
</body>
<body> 元素定義了 HTML 文檔的主體。
這個元素?fù)碛幸粋€開始標(biāo)簽 <body>，以及一個結(jié)束標(biāo)簽 </body>。
元素內(nèi)容是另一個 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> 元素定義了整個 HTML 文檔。
這個元素?fù)碛幸粋€開始標(biāo)簽 <html>，以及一個結(jié)束標(biāo)簽 </html>。
元素內(nèi)容是另一個 HTML 元素（body 元素）。
空的 HTML 元素：
沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
就是沒有關(guān)閉標(biāo)簽的空元素（
標(biāo)簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使
在所有瀏覽器中都是有效的，但使用 <br /> 其實(shí)是更長遠(yuǎn)的保障。
HTML 屬性：
HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。
注釋：屬性值應(yīng)該始終被包括在引號內(nèi)。雙引號是最常用的，不過使用單引號也沒有問題。
在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：
name='Bill "HelloWorld" Gates'
屬性實(shí)例：
屬性例子1—居中排列標(biāo)題:
<h1> 定義標(biāo)題的開始。
<h1 align="center"> 擁有關(guān)于對齊方式的附加信息。
屬性例子2—背景顏色
<body> 定義 HTML 文檔的主體。
<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。
屬性例子3:
<table> 定義 HTML 表格。（您將在稍后的章節(jié)學(xué)習(xí)到更多有關(guān) HTML 表格的內(nèi)容）
<table border="1"> 擁有關(guān)于表格邊框的附加信息。
屬性例子4:
HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：
<a >This is a link</a>
實(shí)例：
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程</title>
</head>
<body bgcolor="yellow">
<h1 align="center">我的第一個標(biāo)題</h1>
<p>我的第一個段落</p>
<p>我的第二個段落</p>
<p>我的第三個段落</p>
</body>
</html>
HTML 樣式
HTML的style屬性
style 屬性的作用：提供了一種改變所有 HTML 元素的樣式的通用方法。
HTML 樣式實(shí)例 - 背景顏色：
background-color 屬性為元素定義了背景顏色：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>html樣式-背景顏色</title>
</head>
<body style="background-color:yellow">
<h2 style="background-color:red">這是一個標(biāo)題</h2>
<p style="background-color:green">這是一個段落</p>
</body>
</html>
HTML 樣式實(shí)例 - 字體、顏色和尺寸：
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>字體顏色尺寸</title>
</head>
<body style="background-color:yellow">
<h1 style="font-family：verdana">這是一個標(biāo)題</h1>
<p style="font-family:arial;color:red;font-size:20px">這是一個段落</p>
</body>
</html>
HTML 樣式實(shí)例 - 文本對齊：
text-align 屬性規(guī)定了元素中文本的水平對齊方式：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>文本對齊</title>
</head>
<body style="background-color:yellow">
<h1 style="text-align:center">這是一個標(biāo)題</h1>
<p> 你好，世界！</p>
</body>
</html>
HTML <q> 用于短的引用：
HTML <q> 元素定義短的引用。
瀏覽器通常會為 <q> 元素包圍引號。
實(shí)例：
<p>WWF 的目標(biāo)是：<q>構(gòu)建人與自然和諧共存的世界。</q></p>
用于長引用的HTML <blockquote>：
HTML <blockquote> 元素定義被引用的節(jié)。
瀏覽器通常會對 <blockquote> 元素進(jìn)行縮進(jìn)處理。
實(shí)例：
<p>以下內(nèi)容引用自 WWF 的網(wǎng)站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力于保護(hù)自然界的未來。
世界領(lǐng)先的環(huán)保組織，WWF 工作于 100 個國家，
并得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote>
用于縮略詞的 HTML <abbr>：
HTML <abbr> 元素定義縮寫或首字母縮略語。
對縮寫進(jìn)行標(biāo)記能夠?yàn)闉g覽器、翻譯系統(tǒng)以及搜索引擎提供有用的信息。
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>引用</title>
</head>
<body >
<p>
<abbr title="World Health Organization">WHO</abbr>成立于1948年。
</p>
</body>
</html>
用于聯(lián)系信息的 HTML <address>：
HTML <address> 元素定義文檔或文章的聯(lián)系信息（作者/擁有者）。
此元素通常以斜體顯示。大多數(shù)瀏覽器會在此元素前后添加折行。
實(shí)例：
<address>
Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA
</address>
用于著作標(biāo)題的 HTML <cite>：
HTML <cite> 元素定義著作的標(biāo)題。
瀏覽器通常會以斜體顯示 <cite> 元素。
實(shí)例：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>著作標(biāo)題</title>
</head>
<body >
<p>
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
</p>
</html>
用于雙向重寫的 HTML <bdo>：
HTML <bdo> 元素定義雙流向覆蓋（bi-directional override）。
<bdo> 元素用于覆蓋當(dāng)前文本方向：
實(shí)例：
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<title>雙向重寫</title>
</head>
<body >
<bdo dir="rtl">This text will be written from right to left</bdo>
</body>
</html>
HTML 計(jì)算機(jī)代碼格式:
通常，HTML 使用可變的字母尺寸，以及可變的字母間距。
在顯示計(jì)算機(jī)代碼示例時，并不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和間距。
HTML 鍵盤格式:
HTML <kbd> 元素定義鍵盤輸入：
實(shí)例:
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
HTML 樣本格式:
HTML <samp> 元素定義計(jì)算機(jī)輸出示例：
實(shí)例:
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
HTML 代碼格式:
HTML <code> 元素定義編程代碼示例：
實(shí)例:
<code>
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
</code>
<code> 元素不保留多余的空格和折行：
實(shí)例:
<p>Coding Example:</p>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
如需解決該問題，您必須在** <pre> 元素**中包圍代碼：
實(shí)例:
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
HTML 變量格式化
HTML <var> 元素定義數(shù)學(xué)變量：
實(shí)例:
<p>Einstein wrote:</p>
<p><var>E = m c2</var></p>
HTML 計(jì)算機(jī)代碼元素:
標(biāo)簽 描述
<code> 定義計(jì)算機(jī)代碼文本
<kbd> 定義鍵盤文本
<samp>定義計(jì)算機(jī)代碼示例
<var> 定義變量
<pre> 定義預(yù)格式化文本
HTML 變量格式化”
HTML <var> 元素定義數(shù)學(xué)變量：
實(shí)例
<p>Einstein wrote:</p>
<p><var>E = m c2</var></p>
如何使用樣式”
當(dāng)瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進(jìn)行格式化。有以下三種方式來插入樣式表：
外部樣式表:
當(dāng)樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點(diǎn)的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內(nèi)部樣式表：
當(dāng)單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
內(nèi)聯(lián)樣式：
當(dāng)特殊的樣式需要應(yīng)用到個別元素時，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
表格：
表格由 <table> 標(biāo)簽來定義。每個表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1"> border代表表格有框
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
表格的表頭：
表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會把表頭顯示為粗體居中的文本
表格中的空單元格：
在一些瀏覽器中，沒有內(nèi)容的表格單元顯示得不太好。如果某個單元格是空的（沒有內(nèi)容），瀏覽器可能無法顯示出這個單元格的邊框。
<html>
<head>
<meta charset="utf-8">
<title>表格空單元格</title>
</head>
<body>
<table border="1">
<tr>
<th>標(biāo)題一</th>
<th> 標(biāo)題二</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>?</td> 單元格為空時有時候不顯示邊框，可用空格占位符 將邊框顯示出來
<td>4</td>
</tr>
</table>
</body>
</html>
無序列表：
無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。
無序列表始于 <ul> 標(biāo)簽。每個列表項(xiàng)始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表：
同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。
有序列表始于 <ol> 標(biāo)簽。每個列表項(xiàng)始于 <li> 標(biāo)簽。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定義列表：
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項(xiàng)以 <dt> 開始。每個自定義列表項(xiàng)的定義以 <dd> 開始。
<dl>
<dt>概要</dt>
<dd>123</dd>
<dt>背景</dt>
<dd>456</dd>
<dt>目的</dt>
<dd>789</dd>
</dl>
HTML類：
對 HTML 進(jìn)行分類（設(shè)置類），使我們能夠?yàn)樵氐念惗x CSS 樣式。
為相同的類設(shè)置相同的樣式，或者為不同的類設(shè)置不同的樣式。
<html>
<head>
<style>
.cites{
background-color:black;
color:white;
margin:20px;
padding:20px
}
</style>
</head>
<body>
<div class="cites">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
</body>
</html>
分類塊級元素：
HTML <div> 元素是塊級元素。它能夠用作其他 HTML 元素的容器。
設(shè)置 <div> 元素的類，使我們能夠?yàn)橄嗤?<div> 元素設(shè)置相同的類：
<html>
<head>
<style>
.cites{
background-color:black;
color:white;
margin:20px;
padding:20px
}
</style>
</head>
<body>
<div class="cites">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</div>
<div class="cites">
<h2>Paries</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cites">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
分類行內(nèi)元素：
HTML <span> 元素是行內(nèi)元素，能夠用作文本的容器。
設(shè)置 <span> 元素的類，能夠?yàn)橄嗤?<span> 元素設(shè)置相同的樣式。
<html>
<head>
<style>
span.red{color:red}
</style>
</head>
<body>
<h1>my <span class="red">important</span> heading</h1>
</body>
</html>
使用 <div> 元素的 HTML 布局：
注釋：<div> 元素常用作布局工具，因?yàn)槟軌蜉p松地通過 CSS 對其進(jìn)行定位。
這個例子使用了四個 <div> 元素來創(chuàng)建多列布局：
<html>
<head>
<style>
header{
background-color:black;
color:white;
text-align:center;
padding:5px
}
nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px
}
section{
width:350px;
float:left;
padding:10px
}
footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London
Paris
Tokyo
</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3school.com.cn
</div>
</body>
</html>
