html練習題練習
<!doctype html>
<html>
<head>
<meta charset="utf8"><!--用于防止出現中文亂碼-->
<title>我的第一個HTML頁面</title>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<base target="_blank" />
</head>
<body>
<h1>我通過外部樣式表進行格式化。</h1>
<p>我也一樣！</p>
</head>
<body bgcolor="Aquamarine "text="black">
<!--對body的背景顔色進行設定,具體顔色的代碼記不住，可以通過html網絡手冊進行查詢後編寫-->
<h1 align="center">這裡是首頁</h1>
<p>body 元素的内容會顯示在浏覽器中。</p>
<p>title 元素的内容會顯示在浏覽器的标題欄中。</p>
<!--簡單段落舉例-->
<p>這是段落1 </p>
<p>這是段落2 </p>
<p>這是段落3 </p>
<p>段落元素由P标簽定義</p>
<!--段落行數依賴于浏覽器視窗的大小，如果浏覽器大小改變，将改變段落中的行數。-->
<p>在這個段落裡
有許多
許多
行
</p>
<!--詩歌問題,浏覽器會自動忽略源代碼裡的排版，省略了多餘的空格和換行-->
<h1>靜夜思></h1>
<p>床前明月光，
疑是地上霜。
舉頭望明月，
低頭思故鄉。
</p>
<!--利用br代碼，來實作空行的功能，舉例如下-->
<h1 align="center">利用br代碼，來實作空行的功能，舉例如下</h1>
<p>你好<br/>中國<br/>我<br/>來自<br/>美國
<br/>
<br/>
<br/>
很高興來到中國。<hr/>
</p>
<!--幾個标題的應用舉例-->
<h1>這個是标題1</h1>
<h2>這個是标題2</h2>
<h3>這個是标題3</h3>
<h4>這個是标題4</h4>
<h5>這個是标題5</h5>
<h6>這個是标題6</h6>
<p><strong>備注:</strong>請僅僅把标題标簽用于标題檔案。而不用僅僅為了産生粗體文本而使用它們。請使用其他标簽或用CSS代替</p>
<!--如何把标題進行居中顯示-->
<h1 align="center">This is heading 1</h1>
<p>上面的标題在頁面中進行了居中排列。上面的标題在頁面中進行了居中排列。上面的标題在頁面中進行了居中排列。</p>
<!--水準線标簽hr的用法舉例-->
<p>标簽定義水準線：</p>
<hr/>
<p>這是段落。</p>
<hr/>
<p>這是例外一個段落</p><hr/>
<p>這是段落</p>
<!--html連結設定,請仔細觀察代碼target的用法與差別-->
<h1 align="center">連結設定,請仔細觀察代碼target的用法與差別</h1>
<a href="http://www.luxcon.cn">甯波樂控智能科技有限公司</a><!--原來頁面直接跳轉打開-->
<a href="http://www.luxcon.cn"target="_blank">甯波樂控智能科技有限公司</a><!--跳轉到新的頁面打開-->
<!--對一張圖檔進行連結設定-->
<a href="http://baike.baidu.com/item/馬蓉/64853""><img src="http://img1.dzwww.com:8080/tupian/20160823/90/1386535136774793718.jpg" width="250" height="350" /></a>
<a href="http://baike.baidu.com/item/馬蓉/64853"target=_"blank><img src="http://uploadx.sgnet.cc/2016/0815/1471230061571.jpg"width="300"height="350"/></a>
<p>
<b>This text is bold<q>定義粗體文本。</q></b>
<br />
<strong>This text is strong<q>把文本定義為語氣更強的強調的内容。</q></strong>
<br />
<big>This text is big<q>标簽可以很容易地放大字型。</q></big><!--浏覽器顯示包含在 <big> 标簽和其相應的 </big> 标簽之間的文字時，其字型比周圍的文字要大一号。但是，如果文字已經是最大号字型，這個 <big> 标簽将不起任何作用。-->
<br />
<em>This text is emphasized<q>把文本定義為強調的内容。</q></em><!--類同于斜體-->
<br />
<i>This text is italic<q>标簽顯示斜體文本效果。</q></i>
<br />
<small>This text is small<q>标簽呈現小号字型效果。</q></small>
<br />
This text contains
<sub>subscript<q>标簽可定義下标文本。</q></sub><!--無論是 <sub> 标簽還是和它對應的 <sup> 标簽，在數學等式、科學符号和化學公式中都非常有用。-->
<br />
This text contains
<sup>superscript<q> 标簽可定義上标文本。</q></sup>
</p>
<!--預格式文本,如pre标簽的用法-->
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>
<p>pre 标簽很适合顯示計算機代碼：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
<!--計算機輸出标簽,此例示範不同的計算機輸出标簽的顯示效果。-->
<h1 align="center">計算機輸出标簽，此例示範不同的計算機輸出标簽的顯示效果。</h1>
<code>Computer code<q>定義計算機代碼文本。</q></code>
<br />
<kbd>Keyboard input<q>定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。</q></kbd>
<br />
<tt>Teletype text<q> 标簽呈現類似打字機或者等寬的文本效果。</q></tt><!--<tt> 标簽和必需的 </tt> 結束标簽告訴浏覽器，要把其中包含的文本顯示為等寬字型。對于那些已經使用了等寬字型的浏覽器來說，這個标簽在文本的顯示上就沒有什麼特殊效果了。-->
<br />
<samp>Sample text<q>定義樣本文本。</q></samp>
<br />
<var>Computer variable<q>标簽表示變量的名稱，或者由使用者提供的值。</q></var><!--<var> 标簽是計算機文檔中應用的另一個小竅門，這個标簽經常與 <code> 和 <pre> 标簽一起使用，用來顯示計算機程式設計代碼範例及類似方面的特定元素。-->
<br />
<p>
<b>注釋：</b>這些标簽常用于顯示計算機/程式設計代碼。
</p>
<h1 align="center">此例示範如何在 HTML 檔案中寫位址。标簽address的用法</h1>
<address>
Written by <a href="mailto:[email protected]">王寶強</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<h1 align="center">本利示範縮寫的用法，标簽abbr與acronym</h1>
<abbr title="luxcon">lx</abbr>
<br />
<acronym title="甯波樂控智能科技有限公司">樂控科技</acronym>
<p>在某些浏覽器中，當您把滑鼠移至縮略詞語上時，title 可用于展示表達的完整版本。</p>
<p>僅對于 IE 5 中的 acronym 元素有效。</p>
<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
<h1 align=“center">用标簽bdo改變文字的方向</h1>
<p><i>
如果您的浏覽器支援 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；</i>
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
<bdo dir="rtl">你好我好大家好</bdo><hr/>
<bdo dir="ltr">你好我好大家好</bdo>
<p align="center"><strong><big>
本例講解塊引用，使用 blockquote 元素的話，浏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。</big></strong>
</p>
這是長的引用：
<blockquote>
這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。
</blockquote>
這是短的引用：
<q>
這是短的引用。
</q>
<h1 align="center">删除效果标簽del,插入效果ins,（帶有下劃線）</h1>
<p>截止2016年8月19日
樂控按摩椅共有 <del>79</del> <ins>81</ins> 台。</p>
<p>大多數浏覽器會改寫為删除文本和下劃線文本。</p>
<p>一些老式的浏覽器會把删除文本和下劃線文本顯示為普通文本。</p>
<h1 align="center">HTML連結執行個體介紹</h1>
<a href="/lekong/Login.html">文本1</a> 是一個指向本網站中的一個頁面的連結。采用直接跳轉的連結方式</p>
<a href="/lekong/Login.html"target="_blank">文本2</a> 是一個指向本網站中的一個頁面的連結。采用新視窗打開的連結方式</p>
<p><a href="http://www.luxcon.cn">本文本3</a> 是一個指向網際網路上的頁面的連結。采用直接跳轉的連結方式</p>
<p><a href="http://www.luxcon.cn"target="blank">本文本4</a> 是一個指向網際網路上的頁面的連結。采用新視窗打開的連結方式</p>
<p>本次采用圖檔進行連結跳轉</p><hr/>
<a href="http://www.luxcon.cn"><img src="img/lx.jpg"></a><p>直接跳轉</p>
<a href="http://www.luxcon.cn"target="_blank"><img src="img/lx.jpg"></a><p>通過新視窗打開</p>
<h2 align="center">本執行個體介紹怎麼連結到同一頁面裡的不同位置</h2>
<p>
<pre><a href="#d4">檢視 第四章。</a> <a href="#d6">檢視 第六章。</a> <a href="#d15">檢視 第十五章。</a></pre>
</p>
<h2>第一章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第二章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第三章</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="d4">第四章</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>第五章</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="d6">第六章</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>第七章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第八章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第九章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第十章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第十一章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第十二章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第十三章</h2>
<p>This chapter explains ba bla bla</p>
<h2>第十四章</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="d15">第十五章</a></h2>
<p>This chapter explains ba bla bla</p>
<h1 align="center">跳出架構</h1>
<p>被鎖在架構中了嗎？</p>
<a href="jiaochen.html"
target="_top">請點選這裡！可以直接跳轉到首頁</a>
<p align="center">建立電子郵件連結</p>
<p>
這是郵件連結：
<a href="mailto:[email protected]?subject=你好%20馬蓉">發送郵件</a>
</p>
<p>
<b>注意：</b><i>應該使用 %20 來替換單詞之間的空格，這樣浏覽器就可以正确地顯示文本了。</i>
</p>
<p>
這是另一個 mailto 連結：
<a href="mailto:[email protected][email protected]&[email protected]&subject=公司%20開會&body=各%20位%20同%20事%20，%20今%20天%20開會">發送郵件！</a>
</p>
<p>
<b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣浏覽器就可以正确地顯示文本了。
</p>
<p align="center"><b>每個表格由 table 标簽開始。</b></p>
<p align="center"><b>每個表格行由 tr 标簽開始。</b></p>
<p align="center"><b>每個表格資料由 td 标簽開始。</b></p>
<h4>一列:</h4>
<table border="1">
<tr><td>100</td></tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<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>
<h3>表格邊框粗細調整</h3>
<h4>帶有普通的邊框，使用border="1"</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有粗的邊框，使用border="8"</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有很粗的邊框，使用border="15"</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h3 align="center">如下通過兩種方式來實作表格邊框為零，即沒有邊框</h3>
<h4>這個表格沒有邊框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
</tr>
</table>
<h4>這個表格也沒有邊框，通過設定border="0"來實作</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>600</td>
<td>700</td>
<td>800</td>
</tr>
</table>
<h4>表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>電話</th>
</tr>
<tr>
<td>王北</td>
<td>0022</td>
<td>444444</td>
</tr>
</table>
<h4>垂直的表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>王北</td>
</tr>
<tr>
<th>電話</th>
<td>11233</td>
</tr>
</tr>
<tr>
<th>電話</th>
<td>1122553</td>
</tr>
</table>
<hr/>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>正如您看到的，其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格後，仍然沒有邊框。</p>
<p>我們的技巧是在單元中插入一個 no-breaking 空格。</p>
<p>no-breaking 空格是一個字元實體。如果您不清楚什麼是字元實體，請閱讀關于字元實體的章節。</p>
<p>no-breaking 空格由和号開始 ("&")，然後是字元"nbsp"，并以分号結尾(";")。</p>
<hr/>
<h4>通過标簽caption來設定标題</h4>
<table border="6">
<caption>我的标題</caption>
<tr>
<td>100</td>
<td>300</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>300</td>
<td>600</td>
</tr>
<h2 align="center">通過colspan和rowspan兩個元素來實作對單元格的合并</h2>
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話号碼</th>
</tr>
<tr>
<td>王北</td>
<td>2513131</td>
<td>4545646</td>
</tr>
</table>
<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
<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>蘋果</li>
<li>香蕉</li>
<li>鳳梨</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
<h4>沒有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>沒有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景顔色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景圖像：</h4>
<table border="1"
background="img/002.png">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<table width="400" border="1">
<tr>
<th align="left">消費項目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
<p><b>注釋：</b>frame 屬性無法在 Internet Explorer 中正确地顯示。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<h4>一個無序清單：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>本例示範有序清單</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>白糖</li>
</ol>
<ol start="10">
<li>咖啡</li>
<li>牛奶</li>
<li>白糖</li>
</ol>
<h4>disc項目符号清單：</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>梨頭</li>
<li>草莓</li>
<li>檸檬</li>
</ul>
<h4>circle項目符号清單：</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>梨頭</li>
<li>草莓</li>
<li>檸檬</li>
</ul>
<h4>square項目符号清單：</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>梨頭</li>
<li>草莓</li>
<li>檸檬</li>
</ul>
<h3 align="center">有序清單的示範</h3>
<h4>數字清單：</h4>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>字母清單：</h4>
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫字母清單：</h4>
<ol type="a">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>羅馬字母清單：</h4>
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫羅馬字母清單：</h4>
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h3 align="center">本例示範嵌套清單</h3>
<h4>一個嵌套清單：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
<li>烏龍茶</li>
<li>菊花茶</li>
</ul>
<li>牛奶</li>
</ul>
<h3 align="center">多級嵌套清單：</h3>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</ul>
</li>
<li>牛奶</li>
</ul>
<h2>一個定義清單，元素dl/dt/dd的用法</h2>
<dl>
<dt>計算機</dt>
<dd>是用來計算的儀器......</dd>
<dt>顯示器</dt>
<dd>是以視覺方式顯示資訊的裝置......</dd>
</dl>
<h2 align="center">本例示範如何在html裡建立文本域,type="text" name=""</h2>
<form>
姓；
<input type="text" name="firstname">
<hr/>
名：
<input type="text" name="lastname">
</form>
<h2 align="center">本例示範如何在html頁面建立密碼域。</h2>
<form>
使用者：
<input type="text" name="user">
<br />
密碼：
<input type="password" name="password">
</form>
<p>
請注意，當您在密碼域中鍵入字元時，浏覽器将使用項目符号來代替這些字元。
</p>
<h2 align="center">本例示範複選框怎麼設定,type="checkbox"</h2>
<form>
我喜歡寶馬：
<input type="checkbox" name="bmw"><br/>
我喜歡奔馳：
<input type="checkbox" name="BC"><br/>
我喜歡自行車：
<input type="checkbox" name="bike"><br/>
</form>
<h3 align="center">本例示範單選框的設定，type="radio" checked="checked"</h3>
<form>
男性；
<input type="radio" checked="checked" name="sex" value="male"/>
<br/>
女性：
<input type="radio" name="sex" value="female"/>
</form>
<p>當使用者點選一個單選按鈕時，該按鈕會變成選中狀态，其他所有按鈕會變為非選中狀态。</p>
<h2 align="center">本例示範如何建立一個簡單的帶有預選值的下拉清單框。下拉清單框是一個可選清單。</h2>
<form>
汽車品牌：
<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>
<h2 align="center">帶有預選的下拉菜單</h2>
<form>
汽車品牌：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<h2 align="center">本例示範如何建立一個文本域（多行文本輸入控件）。使用者可以在文本域中寫入文本。在文本域中，可寫入的字元字數不受限制。</h2>
<textarea cols="30" rows="5">
領先的 Web 技術教程 - 全部免費
在w3school，你可以找到你所需要的所有的網站建設教程。
從基礎的HTML到XHTML，乃至進階的XML、SQL、資料庫、多媒體和WAP。
</textarea>
<p>您無法對本例進行編輯，因為我們的線上編輯器使用 textarea 進行輸入，
而浏覽器不允許 textarea 中存在另一個 textarea。</p>
<h3 align="center">本例示範如何建立一個按鈕</h3>
<form>
<input type="button" value="下載下傳">
</form>
<h3 align="center">本例示範如何在資料周圍繪制一個帶标題的框。</h3>
<form>
<fieldset>
<legend>健康資訊</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>
<p>如果表單周圍沒有邊框，說明您的浏覽器太老了。</p>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="王">
<br>
Last name:<br>
<input type="text" name="lastname" value="西江">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>如果您點選 "Submit" 按鈕，您将把輸入傳送到名為 html_form_action.asp 的新頁面。</p>
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件發送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
電郵：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="發送">
<input type="reset" value="重置">
</form>
<p>
一副圖像：
<img src="http://pic.58pic.com/58pic/14/32/01/04I58PICaWv_1024.jpg"width="128"height="128"/>
</p>
<p>
一副動畫圖像：
<img src="http://img15.3lian.com/2015/gif/1/78/13.gif"width="128"height="128"/>
</p>
<p>請注意，插入動畫圖像的文法與插入普通圖像的文法是沒有差別的。</p>
<h2>未設定對齊方式的圖像：</h2>
<p>圖像 <img src ="img/lx.jpg"> 在文本中</p>
<h2>已設定對齊方式的圖像：</h2>
<p>圖像 <img src="img/lx.jpg" align="bottom"> 在文本中</p>
<p>圖像 <img src ="img/lx.jpg" align="middle"> 在文本中</p>
<p>圖像 <img src ="img/lx.jpg" align="top"> 在文本中</p>
<p>請注意，bottom 對齊方式是預設的對齊方式。</p>
<p>
<img src ="img/lx.jpg" align ="left">
帶有圖像的一個段落。圖像的 align 屬性設定為 "left"。圖像将浮動到文本的左側。
</p>
<p>
<img src ="img/lx.jpg" align ="right">
帶有圖像的一個段落。圖像的 align 屬性設定為 "right"。圖像将浮動到文本的右側。
</p>
<img src="img/lx.jpg" width="200" height="35">
<br />
<img src="img/lx.jpg" width="300" height="45">
<br />
<img src="img/lx.jpg" width="500" height="80">
<p>通過改變 img 标簽的 "height" 和 "width" 屬性的值，您可以放大或縮小圖像。</p>
<p>僅支援文本的浏覽器無法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這裡，"alt" 的文本是“向左轉”。</p>
<p>請注意，如果您把滑鼠指針移動到圖像上，大多數浏覽器會顯示 "alt" 文本。</p>
<img src="img/lx.jpg" alt="甯波樂控智能科技有限公司" />
<p>如果無法顯示圖像，将顯示 "alt" 屬性中的文本：</p>
<img src="http://img5.imgtn.bdimg.com/it/u=153938114,572515731&fm=21&gp=0.jpg" alt="甯波樂控智能科技有限公司" />
<p>
您也可以把圖像作為連結來使用：
<a href="orderform.html">
<img border="0" src="img/登入.jpg"width="100"height="50" />
</a>
</p>
<p>
在新的頁面裡打開：
<a href="orderform.html"target="_blank">
<img border="0" src="img/登入.jpg"width="100"height="50" />
</a>
</p>
<p>請把滑鼠移動到圖像上，看一下狀态欄的坐标如何變化。</p>
<a href="/example/html/html_ismap.html">
<img src="img/登入.jpg" ismap />
</a>
<h2 align="center">利用style="text-decoration:none"來實作超連結不帶下劃線</h2>
<a href="http://www.luxcon.cn" style="text-decoration:none">
這是一個連結！
</a>
<h2 align="center">利用style="text-decoration:none"來實作超連結不帶下劃線</h2>
<a href="http://www.luxcon.cn" target="_blank" style="text-decoration:none">
在新頁面裡打開！
</a>
</body>
</html>