1. HTML介紹
1.1. 什么是HTML
- HTML的全稱為Hyper Text Markup Language,譯為超文本標記語言。
- 超文本,就是指頁面內可以包含圖片、鏈接,甚至音樂、程序等非文字元素。
- 標記語言,是一種將文本以及文本相關的其他信息結合起來,展現出關於文檔結構和數據處理細節的電腦文字編碼。與文本相關的其他信息(包括例如文本的結構和表示信息等)與原來的文本結合在一起,但是使用標記進行標識。
1.2. 百度百科
超級文本標記語言是標准通用標記語言下的一個應用,也是一種規范,一種標准, 它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件,通過在文本文件中添加標記符,可以告訴瀏覽器如何顯示其中的內容(如:文字如何處理,畫面如何安排,圖片如何顯示等)。瀏覽器按順序閱讀網頁文件,然后根據標記符解釋和顯示其標記的內容,對書寫出錯的標記將不指出其錯誤,且不停止其解釋執行過程,編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是,對於不同的瀏覽器,對同一標記符可能會有不完全相同的解釋,因而可能會有不同的顯示效果。
1.3. 基維百科
超文本標記語言(英文:HyperText Markup Language,HTML)是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等,也可用來在一定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李創建,由IETF用簡化的SGML(標准通用標記語言)語法進行進一步發展的HTML,后來成為國際標准,由萬維網聯盟(W3C)維護。
1.4. 發展歷史
1980年,蒂姆·伯納斯-李為使世界各地的物理學家能夠方便的進行合作研究,創建了使用於其系統的HTML。Tim Berners-Lee設計的HTML以純文字格式為基礎,可以使用任何文本編輯器處理,最初僅有少量標記(TAG)而易於掌握運用。隨着HTML使用率的增加,人們不滿足只能看到文字。1993年,還是大學生的馬克·安德生在他的Mosaic瀏覽器加入<img>標記,從此可以在Web頁面上瀏覽圖片。但人們認為僅有圖片還是不夠,希望可將任何形式的媒體加到網頁上。因此HTML不斷地擴充和發展。
1.5. 標准的版本歷史
- 超文本標記語言(第一版)——在1993年6月作為互聯網工程工作小組(IETF)工作草案發布(並非標准)
- HTML 2.0——1995年11月作為RFC 1866發布,在RFC 2854於2000年6月發布之后被宣布已經過時
- HTML 3.2——1997年1月14日,W3C推薦標准
- HTML 4.0——1997年12月18日,W3C推薦標准
- HTML 4.01(微小改進)——1999年12月24日,W3C推薦標准
- HTML 5的第一份正式草案已於2008年1月22日公布,仍繼續完善
2. 第一個HTML頁面
2.1. 示例
<html> <head> <title>01_helloworld.html</title> </head> <body> <!-- 這是第一個頁面 helloworld --> <font color="red">hello world!</font> </body> </html>
示例代碼說明:
- html標簽:定義 HTML 文檔,HTML文檔的根標簽。
- head標簽:定義關於文檔的基本信息。
- body標簽:定義文檔的主體,運行HTML文檔時顯示的內容。
- title標簽:定義文檔的標題。在運行網頁時,頁面頂端顯示的內容。
- font標簽:定義文字的字體、尺寸和顏色。
2.2. HTML元素(標簽)
HTML 標記標簽通常被稱為 HTML 標簽,"HTML 標簽" 和"HTML 元素" 通常都是描述同樣的意思。(一個 HTML 元素包含了開始標簽與結束標簽)
- HTML 標簽是由尖括號包圍的關鍵詞,比如 <html>
- HTML 標簽通常是成對出現的,比如 <b> 和 </b>
- 標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽
- 開始和結束標簽也被稱為開放標簽和閉合標簽
值得注意的是:
- 不要忘記結束標簽
<font color="red">hello world!
-
- 即使忘記了使用結束標簽,大多數瀏覽器也會正確地顯示 HTML。
- HTML文檔中,關閉標簽是可選的。
- 不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
- HTML空元素
- 沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。
- <br> 就是沒有關閉標簽的空元素(<br> 標簽定義換行)。
- 在 XHTML、XML 以及未來版本的 HTML 中,所有元素都必須被關閉。
- 在開始標簽中添加斜杠,比如 <br />,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。
- 即使 <br> 在所有瀏覽器中都是有效的,但使用 <br /> 其實是更長遠的保障。
- 推薦使用小寫標簽
- HTML 標簽對大小寫不敏感:<P> 等同於 <p>。許多網站都使用大寫的 HTML 標簽。
- 萬維網聯盟(W3C)在 HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫。
2.3. HTML屬性
<font color="red">hello world!</font>
屬性是 HTML 元素提供的附加信息。
- HTML 元素可以設置屬性。
- 屬性可以在元素中添加附加信息。
- 屬性一般描述於開始標簽。
- 性總是以名稱/值對的形式出現,比如:name="value"。
值得注意的是:
- HTML屬性常用引用屬性值
- 屬性值應該始終被包括在引號內。
- 雙引號是最常用的,不過使用單引號也沒有問題。 在某些個別的情況下,比如屬性值本身就含有雙引號,那么必須使用單引號。
- 推薦使用小寫屬性
- 屬性和屬性值對大小寫不敏感。
- 萬維網聯盟在其 HTML 4 推薦標准中推薦小寫的屬性/屬性值。
- 新版本的 (X)HTML 要求使用小寫屬性。
2.4. HTML注釋
<!-- 這是一個注釋 -->
- 開始括號之后(左邊的括號)需要緊跟一個嘆號,結束括號之前(右邊的括號)不需要。
- 瀏覽器會忽略注釋,也不會顯示它們。
- 將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。
- 合理地使用注釋可以對未來的代碼編輯工作產生幫助。
2.5. HTML文檔
HTML文檔 = 網頁
- HTML文檔描述網頁
- HTML文檔包含HTML標簽和純文本
- HTML文檔也被稱為網頁
- HTML文檔文件的后綴名為“.html”和“.htm”,兩種后綴名沒有任何區別。
2.6. HTML基本結構
<html> <head> </head> <body> </body> </html>
2.7. <!DOCTYPE>聲明
<!DOCTYPE>聲明有助於瀏覽器中正確顯示網頁。網絡上有很多不同的文件,如果能夠正確聲明HTML的版本,瀏覽器就能正確顯示網頁內容。
- <!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標簽之前。
- <!DOCTYPE> 聲明不是一個 HTML 標簽;它是用來告知 Web 瀏覽器頁面使用了哪種 HTML 版本。
- 總是給您的 HTML 文檔添加 <!DOCTYPE> 聲明,確保瀏覽器能夠預先知道文檔類型。
各個HTML版本的<!DOCTYPE> 聲明應如何書寫:
- HTML 5
<!DOCTYPE html>
- HTML 4.01 Strict
這個 DTD 包含所有 HTML 元素和屬性,但不包括表象或過時的元素(如 font )。框架集是不允許的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
這個 DTD 包含所有 HTML 元素和屬性,包括表象或過時的元素(如 font )。框架集是不允許的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
這個 DTD 與 HTML 4.01 Transitional 相同,但是允許使用框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- XHTML 1.0 Strict
這個 DTD 包含所有 HTML 元素和屬性,但不包括表象或過時的元素(如 font )。框架集是不允許的。結構必須按標准格式的 XML 進行書寫。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML 1.0 Transitional
這個 DTD 包含所有 HTML 元素和屬性,包括表象或過時的元素(如 font )。框架集是不允許的。結構必須按標准格式的 XML 進行書寫。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Frameset
這個 DTD 與 XHTML 1.0 Transitional 相同,但是允許使用框架集內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2.8. HTML頭部
- l <head>元素
- <head> 元素包含了所有的頭部標簽元素。
- 在 <head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
- 可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>。
- l <title>元素
- <title> 標簽定義了不同文檔的標題。
- <title> 在 HTML/XHTML 文檔中是必須的。
- l <base>元素
- <base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接。
- l <link>元素
- < link >標簽定義了一個文檔和外部資源之間的關系。
- l <style>元素
- <style> 標簽定義了HTML文檔的樣式文件引用地址。
- l <meta>元素
- meta標簽描述了一些基本的元數據。
- <meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。
- META元素通常用於指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。
- 元數據可以使用瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。
屬性 |
值 |
描述 |
content |
text |
定義與 http-equiv 或 name 屬性相關的元信息。 |
http-equiv |
content-type |
把 content 屬性關聯到 HTTP 頭部。 |
name |
application-name |
把 content 屬性關聯到一個名稱。 |
scheme |
format/URI |
HTML5不支持。 定義用於翻譯 content 屬性值的格式。 |
<meta> 標簽使用實例
- 為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- 為網頁定義描述內容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
- 定義網頁作者:
<meta name="author" content="King">
- 每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">
3. HTML基本元素
3.1. 示例
<!DOCTYPE html> <html> <head> <title>06_基本元素實例.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h1 align="center">春曉</h1> <hr align="center" width="30%"> <p align="center"> 春眠不覺曉, <br> 處處聞啼鳥。<br> 夜來風雨聲,<br> 花落知多少。<br> </p> </body> </html>
3.2. HTML標題
<!DOCTYPE html> <html> <head> <title>02_標題元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6> </body> </html>
在 HTML 文檔中,標題很重要。
- 標題(Heading)是通過 <h1> - <h6> 標簽進行定義的。
- <h1> 定義最大的標題。 <h6> 定義最小的標題。
- 瀏覽器會自動地在標題的前后添加空行。
- 用戶可以通過標題來快速瀏覽您網頁。
3.3. 段落
<!DOCTYPE html> <html> <head> <title>03_段落元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p>這是一個段落。</p> <p>這是一個段落。</p> <p>這是一個段落。</p> </body> </html>
- l 段落是通過 <p> 標簽定義的。
- l 瀏覽器會自動地在段落的前后添加空行。
值得注意的是,不要忘記結束標簽:
- l 即使忘了使用結束標簽,大多數瀏覽器也會正確地將 HTML 顯示出來,但不要依賴這種做法。
- l 忘記使用結束標簽會產生意想不到的結果和錯誤。
- l 在未來的 HTML 版本中,不允許省略結束標簽。
3.4. 換行
<!DOCTYPE html> <html> <head> <title>04_換行元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p>This is<br>a para<br>graph with line breaks</p> </body> </html>
- l 在不產生一個新段落的情況下進行換行(新行),請使用 <br /> 標簽。
- l <br /> 元素是一個空的 HTML 元素。
- l 由於關閉標簽沒有任何意義,因此它沒有結束標簽。
3.5. 水平線
<!DOCTYPE html> <html> <head> <title>05_水平線元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p>hr 標簽定義水平線:</p> <hr /> <p>這是段落。</p> <hr /> <p>這是段落。</p> <hr /> <p>這是段落。</p> </body> </html>
- l <hr> 標簽在 HTML 頁面中創建水平線。
- l hr 元素可用於分隔內容。
4. HTML文本格式化
4.1. HTML文本格式化元素
標簽 |
描述 |
<b> |
定義粗體文本 |
<em> |
定義着重文字 |
<i> |
定義斜體字 |
<small> |
定義小號字 |
<strong> |
定義加重語氣 |
<sub> |
定義下標字 |
<sup> |
定義上標字 |
<ins> |
定義插入字 |
<del> |
定義刪除字 |
<!DOCTYPE html> <html> <head> <title>07_文本格式化元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <b>這是粗體文字</b><br> <em>這是着重文字</em><br> <i>這是斜體文字</i><br> <small>這是小號字體</small><br> <strong>這是加重字體</strong><br> <sub>這是下標字體</sub><br> <sup>這是上標字體</sup><br> <ins>這是插入字體</ins><br> <del>這是刪除字體</del><br> </body> </html>
4.2. HTML“計算機輸出”元素
標簽 |
描述 |
<code> |
定義計算機代碼 |
<kbd> |
定義鍵盤碼 |
<samp> |
定義計算機代碼樣本 |
<var> |
定義變量 |
<pre> |
定義預格式文本 |
<!DOCTYPE html> <html> <head> <title>08_計算機輸出元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <code>這是計算機代碼</code><br> <kbd>這是鍵盤碼</kbd><br> <samp>這是計算機代碼樣本</samp><br> <var>這是變量</var><br> <pre>這是預格式文本</pre> </body> </html>
- l 如果只是為了達到某種視覺效果而使用這個標簽的話,建議使用 CSS ,這樣可能會取得更豐富的效果。
- l <kbd> 標簽已廢棄,不推薦使用。
- l 被包圍在 <pre> 標簽 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。
4.3. HTML引文、引用及元素定義
標簽 |
描述 |
<abbr> |
定義縮寫 |
<address> |
定義地址 |
<bdo> |
定義文字方向 |
<blockquote> |
定義長的引用 |
<q> |
定義短的引用語 |
<cite> |
定義引用、引證 |
<dfn> |
定義一個定義項目。 |
<!DOCTYPE html> <html> <head> <title>09_引用、引文及標簽定義.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. <br> <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> <br> <bdo dir="rtl"> This text will go right-to-left. </bdo> <br> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> <br> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p> <br> <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> <br> <dfn>Definition term</dfn> </body> </html>
5. HTML圖像元素
5.1. img元素
img元素定義及使用說明:
- l <img> 標簽定義 HTML 頁面中的圖像。
- l <img> 標簽有兩個必需的屬性:src 和 alt。
值得注意的是:
- l 從技術上講,圖像並不會插入 HTML 頁面中,而是鏈接到 HTML 頁面上。<img> 標簽的作用是為被引用的圖像創建占位符。
- l 通過在 <a> 標簽中嵌套 <img> 標簽,給圖像添加到另一個文檔的鏈接。
img元素的屬性列表:
屬性 |
值 |
描述 |
align |
top |
HTML5 不支持。HTML 4.01 已廢棄。 規定如何根據周圍的文本來排列圖像。 |
alt |
text |
規定圖像的替代文本。 |
border |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 規定圖像周圍的邊框。 |
height |
pixels |
規定圖像的高度。 |
hspace |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 規定圖像左側和右側的空白。 |
ismap |
ismap |
將圖像規定為服務器端圖像映射。 |
longdesc |
URL |
HTML5 不支持。HTML 4.01 已廢棄。 指向包含長的圖像描述文檔的 URL。 |
src |
URL |
規定顯示圖像的 URL。 |
usemap |
#mapname |
將圖像定義為客戶器端圖像映射。 |
vspace |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 規定圖像頂部和底部的空白。 |
width |
pixels |
規定圖像的寬度。 |
<!DOCTYPE html> <html> <head> <title>10_圖像img元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>Image with default alignment (align="bottom"):</h4> <p>帥哥,請看這里. <img src="girl.jpg" alt="Smiley face" width="32" height="32"> 我在這里等你哦.</p> <h4>Image with align="middle":</h4> <p>帥哥,請看這里. <img src="girl.jpg" alt="Smiley face" align="middle" width="32" height="32"> 我在這里等你哦.</p> <h4>Image with align="top":</h4> <p>帥哥,請看這里. <img src="girl.jpg" alt="Smiley face" align="top" width="32" height="32"> 我在這里等你哦.</p> <br> <a href="99_biggirl.html"><img src="girl.jpg" title="點擊我看大圖哦!" alt="liuyan" width="32" height="32"></a> </body> </html>
5.2. map和area元素
map元素定義及使用說明:
- l 用於客戶端圖像映射。圖像映射指帶有可點擊區域的一幅圖像。
- l <img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決於瀏覽器),所以我們應同時向 <map> 添加 id 和 name 屬性。
area元素定義及使用說明:
- l 定義圖像映射內部的區域(圖像映射指的是帶有可點擊區域的圖像)
- l 始終嵌套在 <map> 標簽內部。
- l <img> 標簽中的 usemap 屬性與 <map> 元素中的 name 相關聯,以創建圖像與映射之間的關系。
area元素的屬性列表:
屬性 |
值 |
描述 |
alt |
text |
規定區域的替代文本。如果使用 href 屬性,則該屬性是必需的。 |
coords |
coordinates |
規定區域的坐標。 |
href |
URL |
規定區域的目標 URL。 |
nohref |
value |
HTML5 不支持。 規定沒有相關鏈接的區域。 |
shape |
default |
規定區域的形狀。 |
target |
_blank |
規定在何處打開目標 URL。 |
<!DOCTYPE html> <html> <head> <title>11_圖像map和area元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <img src="button.jpg" border="0" usemap="#Map"> <map name="Map"> <area shape="circle" coords="171,159,39" href="99_biggirl.html"> </map> </body> </html>
6. HTML鏈接元素
HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。
- l 超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
- l 當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變為一只小手。
- l 在標簽<a> 中使用了href屬性來描述鏈接的地址。
值得注意的是:
- l 如果沒有使用 href 屬性,則不能使用 hreflang、media、rel、target 以及 type 屬性。
- l 通常在當前瀏覽器窗口中顯示被鏈接頁面,除非規定了其他 target。
- l 請使用 CSS 來改變鏈接的樣式。
<a>元素的屬性列表:
屬性 |
值 |
描述 |
charset |
char_encoding |
HTML5 不支持。規定目標 URL 的字符編碼。 |
coords |
coordinates |
HTML5 不支持。規定鏈接的坐標。 |
href |
URL |
規定鏈接的目標 URL。 |
hreflang |
language_code |
規定目標 URL 的基准語言。僅在 href 屬性存在時使用。 |
name |
section_name |
HTML5 不支持。規定錨的名稱。 |
rel |
alternate |
規定當前文檔與目標 URL 之間的關系。僅在 href 屬性存在時使用。 |
rev |
text |
HTML5 不支持。規定目標 URL 與當前文檔之間的關系。 |
shape |
default |
HTML5 不支持。規定鏈接的形狀。 |
target |
_blank |
規定在何處打開目標 URL。僅在 href 屬性存在時使用。 |
<!DOCTYPE html> <html> <head> <title>12_鏈接元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <a name="top">這是頂端</a><br> <a href="10_圖像img元素.html" target="_blank" >百度</a><br> <a href="mailto:82328769@qq.com" >聯系我們</a><br> <img src="girl.jpg" /><br> <a name="middle">這是中間</a><br> <img src="biggirl.jpg" /><br/><br> <a href="#top" >回到頂部</a><br> <a href="#middle" >回到中間</a><br> </body> </html>
7. HTML列表元素
7.1. 有序列表
有序列表也是一列項目,列表項目使用數字進行標記。 有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。
- l <ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。
屬性 |
值 |
描述 |
compact |
compact |
HTML5中不支持,不贊成使用。請使用樣式取代它。 規定列表呈現的效果比正常情況更小巧。 |
start |
number |
HTML5不支持,不贊成使用。請使用樣式取代它。 規定列表中的起始點。 |
type |
1 A a I i |
規定列表的類型。不贊成使用。請使 |
- l <li> 標簽定義列表項目。
屬性 |
值 |
描述 |
type |
1 |
HTML5 不支持該屬性。HTML 4.01 已廢棄該屬性。 不贊成使用。請使用樣式取代它。 規定使用哪種項目符號。 |
value |
number |
不贊成使用。請使用樣式取代它。 規定列表項目的數字。 |
<!DOCTYPE html> <html> <head> <title>13_有序列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> </ol> </body> </html>
7.2. 無序列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。
- <ul> 標簽定義無序列表。
屬性 |
值 |
描述 |
compact |
compact |
HTML5 不支持。HTML 4.01 已廢棄。 規定列表呈現的效果比正常情況更小巧。 |
type |
disc |
HTML5 不支持。HTML 4.01 已廢棄。 規定列表的項目符號的類型。 |
- <li> 標簽定義列表項目。
屬性 |
值 |
描述 |
type |
1 |
HTML5 不支持該屬性。HTML 4.01 已廢棄該屬性。 不贊成使用。請使用樣式取代它。 規定使用哪種項目符號。 |
value |
number |
不贊成使用。請使用樣式取代它。 規定列表項目的數字。 |
<!DOCTYPE html> <html> <head> <title>14_無序列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p> <h4>Disc bullets list:</h4> <ul style="list-style-type:disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul style="list-style-type:circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul style="list-style-type:square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html>
7.3. 嵌套列表
- 有序嵌套列表
<!DOCTYPE html> <html> <head> <title>15_嵌套列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>有序嵌套列表:</h4> <ol> <li>咖啡</li> <li>茶 <ol type="a"> <li>紅茶</li> <li>綠茶 <ol type="i"> <li>中國</li> <li>非洲</li> </ol> </li> </ol> </li> <li>牛奶</li> </ol> </body> </html>
- 無序嵌套列表
<!DOCTYPE html> <html> <head> <title>15_嵌套列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>無序嵌套列表:</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶 <ul> <li>中國</li> <li>非洲</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul> </body> </html>
7.4. 自定義列表
自定義列表不僅僅是一列項目,而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
- <dl> 標簽定義一個描述列表。
- <dt> 標簽定義一個描述列表的項目/名字。
- <dd> 標簽被用來對一個描述列表中的項目/名字進行描述。
<!DOCTYPE html> <html> <head> <title>16_自定義列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <dl> <dt> 平時愛好: </dt> <dd>- 抽煙</dd> <dd>- 喝酒</dd> <dd>- 燙頭</dd> <dt> 喜歡的游戲: </dt> <dd>- 魔獸世界</dd> <dd>- 反恐精英</dd> <dd>- 紅色警戒</dd> </dl> </body> </html>
8. HTML表格
8.1. 基本表格
表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
HTML表格元素
標簽 |
描述 |
<table> |
定義表格 |
<th> |
定義表格的表頭 |
<tr> |
定義表格的行 |
<td> |
定義表格單元 |
<caption> |
定義表格標題 |
<colgroup> |
定義表格列的組 |
<col> |
定義用於表格列的屬性 |
<thead> |
定義表格的頁眉 |
<tbody> |
定義表格的主體 |
<tfoot> |
定義表格的頁腳 |
- l <table> 標簽定義 HTML 表格。
屬性 |
值 |
描述 |
align |
left |
HTML5 不支持。HTML 4.01 已廢棄。 規定表格相對周圍元素的對齊方式。 |
bgcolor |
rgb(x,x,x) |
HTML5 不支持。HTML 4.01 已廢棄。 規定表格的背景顏色。 |
border |
1 |
規定表格單元是否擁有邊框。 |
cellpadding |
pixels |
HTML5 不支持。規定單元邊沿與其內容之間的空白。 |
cellspacing |
pixels |
HTML5 不支持。規定單元格之間的空白。 |
frame |
void |
HTML5 不支持。規定外側邊框的哪個部分是可見的。 |
rules |
none |
HTML5 不支持。規定內側邊框的哪個部分是可見的。 |
summary |
text |
HTML5 不支持。規定表格的摘要。 |
width |
pixels |
HTML5 不支持。規定表格的寬度。 |
- l <tr> 標簽定義 HTML 表格中的行。
屬性 |
值 |
描述 |
align |
right |
HTML5 不支持。定義表格行的內容對齊方式。 |
bgcolor |
rgb(x,x,x) |
HTML5 不支持。HTML 4.01 已廢棄。 規定表格行的背景顏色。 |
char |
character |
HTML5 不支持。規定根據哪個字符來進行文本對齊。 |
charoff |
number |
HTML5 不支持。規定第一個對齊字符的偏移量。 |
valign |
top |
HTML5 不支持。規定表格行中內容的垂直對齊方式。 |
- l <td> 標簽定義 HTML 表格中的標准單元格。
屬性 |
值 |
描述 |
abbr |
text |
HTML5 不支持。規定單元格中內容的縮寫版本。 |
align |
left |
HTML5 不支持。規定單元格內容的水平對齊方式。 |
axis |
category_name |
HTML5 不支持。對單元格進行分類。 |
bgcolor |
rgb(x,x,x) |
HTML5 不支持。HTML 4.01 已廢棄。 規定單元格的背景顏色。 |
char |
character |
HTML5 不支持。規定根據哪個字符來進行內容的對齊。 |
charoff |
number |
HTML5 不支持。規定對齊字符的偏移量。 |
colspan |
number |
規定單元格可橫跨的列數。 |
headers |
header_id |
規定與單元格相關聯的一個或多個表頭單元格。 |
height |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 |
nowrap |
nowrap |
HTML5 不支持。HTML 4.01 已廢棄。 |
rowspan |
number |
設置單元格可橫跨的行數。 |
scope |
col |
HTML5 不支持。定義將表頭單元格與數據單元格相關聯的方法。 |
valign |
top |
HTML5 不支持。規定單元格內容的垂直排列方式。 |
width |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 規定單元格的寬度。 |
8.2. 帶表頭的表格
<th> 標簽定義 HTML 表格中的表頭單元格。HTML 表格有兩種單元格類型:
- l 表頭單元格 - 包含頭部信息(由 <th> 元素創建)
- l 標准單元格 - 包含數據(由 <td> 元素創建)
值得注意的是:
- l <th> 元素中的文本通常呈現為粗體並且居中。
- l <td> 元素中的文本通常是普通的左對齊文本。
屬性 |
值 |
描述 |
abbr |
text |
HTML5 不支持。 規定表頭單元格中內容的縮寫版本。 |
align |
left |
HTML5 不支持。 規定表頭單元格內容的水平對齊方式。 |
axis |
category_name |
HTML5 不支持。 對表頭單元格進行分類。 |
bgcolor |
rgb(x,x,x) |
HTML5 不支持。HTML 4.01 已廢棄。 規定表頭單元格的背景顏色。 |
char |
character |
HTML5 不支持。 規定根據哪個字符來進行內容的對齊。 |
charoff |
number |
HTML5 不支持。 規定對齊字符的偏移量。 |
colspan |
number |
規定表頭單元格可橫跨的列數。 |
headers |
header_id |
規定與表頭單元格相關聯的一個或多個表頭單元格。 |
height |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 規定表頭單元格的高度。 |
nowrap |
nowrap |
HTML5 不支持。HTML 4.01 已廢棄。 規定表頭單元格中的內容是否折行。 |
rowspan |
number |
規定表頭單元格可橫跨的行數。 |
scope |
col |
規定表頭單元格是否是行、列、行組或列組的頭部。 |
valign |
top |
HTML5 不支持。 規定表頭單元格內容的垂直排列方式。 |
width |
pixels |
HTML5 不支持。HTML 4.01 已廢棄。 規定表頭單元格的寬度。 |
8.3. 帶標題的表格
<caption> 標簽定義表格的標題。
l <caption> 標簽必須直接放置到 <table> 標簽之后。
l 只能對每個表格定義一個標題。
l 通常這個標題會被居中於表格之上。
<!DOCTYPE html> <html> <head> <title>18_帶表頭的表格.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <table border="1" width="20%"> <tr> <th>名稱</th><th>性別</th><th>年齡</th> </tr> <tr> <td>張三</td><td>男</td><td>18</td> </tr> <tr> <td>李四</td><td>女 </td><td>16</td> </tr> </table> </body> </html>
8.4. 跨行或跨列的表格
<!DOCTYPE html> <html> <head> <title>20_跨行或跨列的表格.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <h4>跨兩列的表格:</h4> <table border="1"> <tr> <th>名稱</th> <th colspan="2">電話</th> </tr> <tr> <td>播客</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html>
8.5. 表格的頁眉、主體及頁腳
- l <thead> 標簽用於組合 HTML 表格的頁眉內容。
- l <tbody> 標簽用於組合 HTML 表格的主體內容。
- l <tfoot> 標簽用於組合 HTML 表格的頁腳內容。
通過使用這些元素,使瀏覽器有能力支持獨立於表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
值得注意的是:
- l <tbody> 、<tbody>及<tfoot>元素內部必須包含一個或者多個 <tr> 標簽。
- l <thead>、<tbody> 和 <tfoot> 元素默認不會影響表格的布局。
<!DOCTYPE html> <html> <head> <title>21_表格的頁眉、主體及頁腳.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <table border="1"> <thead> <tr> <th>月份</th> <th>收入</th> </tr> </thead> <tfoot> <tr> <td>總和</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>二月</td> <td>$100</td> </tr> <tr> <td>三月</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
9. HTML框架
通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架,並且每個框架都獨立於其他的框架。
使用框架的壞處:
- l 開發人員必須同時跟蹤更多的HTML文檔
- l 很難打印整張頁面
9.1. frame元素
- l 框架結構標簽(frameset)
- n 框架結構標簽(<frameset>)定義如何將窗口分割為框架。
- n 每個 frameset 定義了一系列行或列。
- n rows/columns 的值規定了每行或每列占據屏幕的面積。
標准屬性:
屬性 |
值 |
描述 |
class |
classname |
規定元素的類名 |
id |
id |
規定元素的唯一 id |
style |
style_definition |
規定元素的行內樣式 |
title |
text |
規定元素的額外信息 |
可選屬性:
屬性 |
值 |
描述 |
cols |
pixels |
HTML5 不支持。規定框架集中列的數目和尺寸。 |
rows |
pixels |
HTML5 不支持。規定框架集中行的數目和尺寸。 |
- l 框架標簽(frame)
- n Frame 標簽定義了放置在每個框架中的 HTML 文檔。
標准屬性:
屬性 |
值 |
描述 |
class |
classname |
規定元素的類名 |
id |
id |
規定元素的唯一 id |
style |
style_definition |
規定元素的行內樣式 |
title |
text |
規定元素的額外信息 |
可選屬性:
屬性 |
值 |
描述 |
frameborder |
0 |
HTML5 不支持。規定是否顯示框架周圍的邊框。 |
longdesc |
URL |
HTML5 不支持。規定一個包含有關框架內容的長描述的頁面。 |
marginheight |
pixels |
HTML5 不支持。規定框架的上方和下方的邊距。 |
marginwidth |
pixels |
HTML5 不支持。規定框架的左側和右側的邊距。 |
name |
name |
HTML5 不支持。規定框架的名稱。 |
noresize |
noresize |
HTML5 不支持。規定無法調整框架的大小。 |
scrolling |
yes |
HTML5 不支持。規定是否在框架中顯示滾動條。 |
src |
URL |
HTML5 不支持。規定在框架中顯示的文檔的 URL。 |
- l 框架標簽(noframes)
- <noframes> 元素可為那些不支持框架的瀏覽器顯示文本。noframes 元素位於 frameset 元素內部。
- <noframes> 元素插入在 <frameset> 元素中使用。
標准屬性:
屬性 |
值 |
描述 |
class |
classname |
規定元素的類名 |
dir |
rtl |
規定元素中內容的文本方向 |
id |
id |
規定元素的唯一 id |
lang |
language_code |
規定元素中內容的語言代碼 |
style |
style_definition |
規定元素的行內樣式 |
title |
text |
規定元素的額外信息 |
xml:lang |
language_code |
規定 XHTML 文檔中元素內容的語言代碼 |
值得注意的是:
- l 不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用!
- l 假如一個框架有可見邊框,用戶可以拖動邊框來改變它的大小。為了避免這種情況發生,可以在 <frame> 標簽中加入:noresize="noresize"。
- l 假如添加包含一段文本的 <noframes> 標簽,就必須將這段文字嵌套於 <body></body> 標簽內。
示例:
<!DOCTYPE html> <html> <head> <title>22_垂直框架元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <frameset cols="25%,50%,25%"> <frame src="99_frame_a.html"> <frame src="99_frame_b.html"> <frame src="99_frame_c.html"> </frameset> </html>
9.2. iframe元素
- l <iframe> 標簽規定一個內聯框架。
- l 一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。
- l 可以把需要的文本放置在 <iframe> 和 </iframe> 之間,這樣就可以應對不支持 <iframe> 的瀏覽器。
屬性:
屬性 |
值 |
描述 |
align |
left |
HTML5 不支持。HTML 4.01 已廢棄。 規定如何根據周圍的元素來對齊 <iframe>。 |
frameborder |
1 |
HTML5 不支持。規定是否顯示 <iframe> 周圍的邊框。 |
height |
pixels |
規定 <iframe> 的高度。 |
longdesc |
URL |
HTML5 不支持。規定一個頁面,該頁面包含了有關 <iframe> 的較長描述。 |
marginheight |
pixels |
HTML5 不支持。規定 <iframe> 的頂部和底部的邊距。 |
marginwidth |
pixels |
HTML5 不支持。規定 <iframe> 的左側和右側的邊距。 |
name |
name |
規定 <iframe> 的名稱。 |
scrolling |
yes |
HTML5 不支持。規定是否在 <iframe> 中顯示滾動條。 |
src |
URL |
規定在 <iframe> 中顯示的文檔的 URL。 |
width |
pixels |
規定 <iframe> 的寬度。 |
<!DOCTYPE html> <html> <head> <title>27_iframe框架元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <iframe src="girl.jpg" width="240px" height="240px" scrolling="no" name="abc" ></iframe> <a href="01_helloworld.html" target="abc">顯示helloworld</a> </body> </html>
10. HTML表單
10.1. Form表單
表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
屬性 |
值 |
描述 |
accept |
MIME_type |
HTML5 不支持。規定服務器接收到的文件的類型。(文件是通過文件上傳提交的) |
accept-charset |
character_set |
規定服務器可處理的表單數據字符集。 |
action |
URL |
規定當提交表單時向何處發送表單數據。 |
enctype |
application/x-www-form-urlencoded |
規定在向服務器發送表單數據之前如何對其進行編碼。(適用於 method="post" 的情況) |
method |
get |
規定用於發送表單數據的 HTTP 方法。 |
name |
text |
規定表單的名稱。 |
target |
_blank |
規定在何處打開 action URL。 |
10.2. 文本框
文本框通過<input type="text"> 標簽來設定,當用戶要在表單中鍵入字母、數字等內容時,就會用到文本框。
- l <input> 元素是空的,它只包含標簽屬性。
- l 你可以使用 <label> 元素來定義 <input> 元素的標注。
- l 表單本身並不可見。同時,在大多數瀏覽器中,文本框的缺省寬度是20個字符。
- l <input> 元素在 <form> 元素中使用,用來聲明允許用戶輸入數據的 input 控件。
屬性 |
值 |
描述 |
accept |
audio/* video/* image/* MIME_type |
規定通過文件上傳來提交的文件的類型。 (只針對type="file") |
align |
left right top middle bottom |
HTML5已廢棄,不贊成使用。規定圖像輸入的對齊方式。 (只針對type="image") |
alt |
text |
定義圖像輸入的替代文本。 (只針對type="image") |
checked |
checked |
checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio") |
disabled |
disabled |
isabled 屬性規定應該禁用的 <input> 元素。 |
readonly |
readonly |
readonly 屬性規定輸入字段是只讀的。 |
size |
number |
size 屬性規定以字符數計的 <input> 元素的可見寬度。 |
src |
URL |
src 屬性規定顯示為提交按鈕的圖像的 URL。 (只針對 type="image") |
type |
button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week |
type 屬性規定要顯示的 <input> 元素的類型。 |
value |
text |
Specifies the value of an <input> element |
示例:
<!DOCTYPE html> <html> <head> <title>28_文本框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 用戶名:<input type="text" id="username" name="username" value="用戶名"> 密碼:<input type="text" id="password" name="password" value="密碼" readonly="readonly"> 確認密碼:<input type="text" id="password" name="password" value="密碼" disabled="true"> </form> </body> </html>
10.3. 密碼字段
密碼字段通過標簽<input type="password"> 來定義。
<!DOCTYPE html> <html> <head> <title>29_密碼框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 用戶名:<input type="text" id="username" name="username"> 密碼:<input type="password" id="password" name="password"> </form> </body> </html>
10.4. 單選按鈕
<input type="radio"> 標簽定義了表單單選框選項。
<!DOCTYPE html> <html> <head> <title>30_單選框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 性別: <input type="radio" checked="checked" id="male" name="sex" value="male">男 <input type="radio" id="female" name="sex" value="female">女<br> </form> </body> </html>
10.5. 復選框
<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<!DOCTYPE html> <html> <head> <title>31_復選框.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 愛好: <input type="checkbox" checked="checked" id="java" name="like" value="java">java <input type="checkbox" id="PHP" name="like" value="PHP">PHP </form> </body> </html>
10.6. 下拉列表
- l <select> 元素用來創建下拉列表。
- n <select> 元素是一種表單控件,可用於在表單中接受用戶輸入。
屬性 |
值 |
描述 |
disabled |
disabled |
當該屬性為 true 時,會禁用下拉列表。 |
multiple |
multiple |
當該屬性為 true 時,可選擇多個選項。 |
name |
name |
定義下拉列表的名稱。 |
size |
number |
規定下拉列表中可見選項的數目。 |
- l <option> 標簽定義下拉列表中的一個選項(一個條目)。
- <option> 標簽可以在不帶有任何屬性的情況下使用,但是您通常需要使用 value 屬性,此屬性會指示出被送往服務器的內容。
- 請與 select 元素配合使用此標簽,否則這個標簽是沒有意義的。
屬性 |
值 |
描述 |
disabled |
disabled |
規定此選項應在首次加載時被禁用。 |
label |
text |
定義當使用 <optgroup> 時所使用的標注。 |
selected |
selected |
規定選項(在首次顯示在列表中時)表現為選中狀態。 |
value |
text |
定義送往服務器的選項值。 |
<!DOCTYPE html> <html> <head> <title>32_下拉列表.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> 地區: <select id="city" name="city"> <option value="bj">北京</option> <option selected="selected" value="nj">南京</option> </select> </form> </body> </html>
10.7. 提交按鈕
<input type="submit"> 定義了提交按鈕。當用戶單擊確認按鈕時,表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<!DOCTYPE html> <html> <head> <title>33_提交按鈕.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> <input type="submit" id="submit" value="提交"> </form> </body> </html>
10.8. fieldset元素
<fieldset> 標簽可以將表單內的相關元素分組。會在相關表單元素周圍繪制邊框。
<!DOCTYPE html> <html> <head> <title>34_fieldset元素.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <form id="form1" name="form1" action="#" method="post"> <fieldset> <legend>人員信息:</legend> 姓名: <input type="text"><br> Email: <input type="text"> </fieldset> </form> </body> </html>