JavaWeb HTML

時間 2019-11-11

標籤 javaweb html 欄目 Java 简体版

原文原文鏈接

1. HTML介紹

1.1. 什麼是HTML

HTML的全稱爲Hyper Text Markup Language，譯爲超文本標記語言。
超文本，就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。
標記語言，是一種將文本以及文本相關的其餘信息結合起來，展示出關於文檔結構和數據處理細節的電腦文字編碼。與文本相關的其餘信息（包括例如文本的結構和表示信息等）與原來的文本結合在一塊兒，可是使用標記進行標識。

1.2. 百度百科

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，它經過標記符號來標記要顯示的網頁中的各個部分。網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，而後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不中止其解釋執行過程，編制者只能經過顯示效果來分析出錯緣由和出錯部位。但須要注意的是，對於不一樣的瀏覽器，對同一標記符可能會有不徹底相同的解釋，於是可能會有不一樣的顯示效果。html

1.3. 基維百科

超文本標記語言（英文：HyperText Markup Language，HTML）是爲「網頁建立和其它可在網頁瀏覽器中看到的信息」設計的一種標記語言。HTML被用來結構化信息——例如標題、段落和列表等等，也可用來在必定程度上描述文檔的外觀和語義。1982年由蒂姆·伯納斯-李建立，由IETF用簡化的SGML（標準通用標記語言）語法進行進一步發展的HTML，後來成爲國際標準，由萬維網聯盟（W3C）維護。java

1.4. 發展歷史

1980年，蒂姆·伯納斯-李爲使世界各地的物理學家可以方便的進行合做研究，建立了使用於其系統的HTML。Tim Berners-Lee設計的HTML以純文字格式爲基礎，可使用任何文本編輯器處理，最初僅有少許標記（TAG）而易於掌握運用。隨着HTML使用率的增長，人們不知足只能看到文字。1993年，仍是大學生的馬克·安德生在他的Mosaic瀏覽器加入<img>標記，今後能夠在Web頁面上瀏覽圖片。但人們認爲僅有圖片仍是不夠，但願可將任何形式的媒體加到網頁上。所以HTML不斷地擴充和發展。web

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 元素提供的附加信息。app

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的版本，瀏覽器就能正確顯示網頁內容。ide

<!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 default-style refresh	把 content 屬性關聯到 HTTP 頭部。
name	application-name author description generator keywords	把 content 屬性關聯到一個名稱。
scheme	format/URI	HTML5不支持。定義用於翻譯 content 屬性值的格式。

爲搜索引擎定義關鍵詞：

<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 bottom middle left right	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 rect circle poly	規定區域的形狀。
target	_blank _parent _self _top framename	規定在何處打開目標 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 author bookmark help license next nofollow noreferrer prefetch prev search tag	規定當前文檔與目標 URL 之間的關係。僅在 href 屬性存在時使用。
rev	text	HTML5 不支持。規定目標 URL 與當前文檔之間的關係。
shape	default rect circle poly	HTML5 不支持。規定連接的形狀。
target	_blank _parent _self _top framename	規定在何處打開目標 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 A a I i disc square circle	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 square circle	HTML5 不支持。HTML 4.01 已廢棄。規定列表的項目符號的類型。

<li> 標籤訂義列表項目。

屬性	值	描述
type	1 A a I i disc square circle	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 center right	HTML5 不支持。HTML 4.01 已廢棄。規定表格相對周圍元素的對齊方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML 4.01 已廢棄。規定表格的背景顏色。
border	1 ""	規定表格單元是否擁有邊框。
cellpadding	pixels	HTML5 不支持。規定單元邊沿與其內容之間的空白。
cellspacing	pixels	HTML5 不支持。規定單元格之間的空白。
frame	void above below hsides lhs rhs vsides box border	HTML5 不支持。規定外側邊框的哪一個部分是可見的。
rules	none groups rows cols all	HTML5 不支持。規定內側邊框的哪一個部分是可見的。
summary	text	HTML5 不支持。規定表格的摘要。
width	pixels %	HTML5 不支持。規定表格的寬度。

l <tr> 標籤訂義 HTML 表格中的行。

屬性	值	描述
align	right left center justify char	HTML5 不支持。定義表格行的內容對齊方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	HTML5 不支持。HTML 4.01 已廢棄。規定表格行的背景顏色。
char	character	HTML5 不支持。規定根據哪一個字符來進行文本對齊。
charoff	number	HTML5 不支持。規定第一個對齊字符的偏移量。
valign	top middle bottom baseline	HTML5 不支持。規定表格行中內容的垂直對齊方式。

l <td> 標籤訂義 HTML 表格中的標準單元格。

屬性	值	描述
abbr	text	HTML5 不支持。規定單元格中內容的縮寫版本。
align	left right center justify char	HTML5 不支持。規定單元格內容的水平對齊方式。
axis	category_name	HTML5 不支持。對單元格進行分類。
bgcolor	rgb(x,x,x) #xxxxxx colorname	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 colgroup row rowgroup	HTML5 不支持。定義將表頭單元格與數據單元格相關聯的方法。
valign	top middle bottom baseline	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 right center justify char	HTML5 不支持。規定表頭單元格內容的水平對齊方式。
axis	category_name	HTML5 不支持。對錶頭單元格進行分類。
bgcolor	rgb(x,x,x) #xxxxxx colorname	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 colgroup row rowgroup	規定表頭單元格是不是行、列、行組或列組的頭部。
valign	top middle bottom baseline	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 1	HTML5 不支持。規定是否顯示框架周圍的邊框。
longdesc	URL	HTML5 不支持。規定一個包含有關框架內容的長描述的頁面。
marginheight	pixels	HTML5 不支持。規定框架的上方和下方的邊距。
marginwidth	pixels	HTML5 不支持。規定框架的左側和右側的邊距。
name	name	HTML5 不支持。規定框架的名稱。
noresize	noresize	HTML5 不支持。規定沒法調整框架的大小。
scrolling	yes no auto	HTML5 不支持。規定是否在框架中顯示滾動條。
src	URL	HTML5 不支持。規定在框架中顯示的文檔的 URL。

l 框架標籤（noframes）
- <noframes> 元素可爲那些不支持框架的瀏覽器顯示文本。noframes 元素位於 frameset 元素內部。
- <noframes> 元素插入在 <frameset> 元素中使用。

標準屬性：

屬性	值	描述
class	classname	規定元素的類名
dir	rtl ltr	規定元素中內容的文本方向
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 right top middle bottom	HTML5 不支持。HTML 4.01 已廢棄。規定如何根據周圍的元素來對齊 <iframe>。
frameborder	1 0	HTML5 不支持。規定是否顯示 <iframe> 周圍的邊框。
height	pixels	規定 <iframe> 的高度。
longdesc	URL	HTML5 不支持。規定一個頁面，該頁面包含了有關 <iframe> 的較長描述。
marginheight	pixels	HTML5 不支持。規定 <iframe> 的頂部和底部的邊距。
marginwidth	pixels	HTML5 不支持。規定 <iframe> 的左側和右側的邊距。
name	name	規定 <iframe> 的名稱。
scrolling	yes no auto	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 multipart/form-data text/plain	規定在向服務器發送表單數據以前如何對其進行編碼。（適用於 method="post" 的狀況）
method	get post	規定用於發送表單數據的 HTTP 方法。
name	text	規定表單的名稱。
target	_blank _self _parent _top	規定在何處打開 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。