<html>
<head>
<title>我的第一個 HTML 頁面 </title>
</head>
<body bgcolor="9999CC"
>
<p> body
元素的內容會顯示在瀏覽器中 。</p>
<p>title
元素的內容不會顯示在瀏覽器的標題欄中。</p>
<p>
這個段落
在源代碼中
包含許多行
但是瀏覽器
忽略了它們。
</p>
<p>
這個段落
在源代碼
中
包含 許多行
但是
瀏覽器
忽略了 它們。
並且多個空格會只顯示一個空格。
</p>
<p>
春眠不覺曉，
處處聞啼鳥。
夜來風雨聲，
花落知多少。
</p>
<p>
段落的行數依賴於瀏覽器窗口的大小。如果調節瀏覽器窗口的大小，將改變段落中的行數。
</p>
<p>注意，瀏覽器忽略了源代碼中的排版（省略了多餘的空格和換行）。</p>
<p>
春眠不覺曉，<br />
處處聞啼鳥。<br />夜來風雨聲，<br
/>花落知多少。<br />
</p>
<p>折行的方法是加 br/></p>
<h1>This is heading
1</h1>
<h2>This is heading
2</h2>
<h3>This is heading
3</h3>
<h4>This is heading
4</h4>
<h5>This is heading
5</h5>
<h6>This is heading
6</h6>
<p>請僅僅把標題標籤用於標題文本。不要僅僅爲了產生粗體文本而使用它們。請使用其它標籤或
CSS 代替。</p>
<hr />
<h1 align="center">This is heading
1</h1>
<p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。
align 設置排列方式：center\left\right；<br
/><br />
hr / >可設置爲換行！<br
/><br />
bgcolor 可以設置背景色 ( "9999CC"
)<br /><br
/>
pre> pre
/> 可預留空格
</p><hr
/>
<b>b : This text is bold</b><br />
<strong>strong : This text is strong</strong><br />
<big>big : This text is big</big><br />
<em>em : This text is emphasized</em><br />
<i>i: This text is italic</i><br />
<small>small: This text is small</small><br />
subscript: This text contains
<sub>subscript</sub><br
/>
superscript : This text contains
<sup>superscript</sup>
<pre><big>
這是
預格式文本。
它保留了
空格
和換行。</big>
</pre><hr
/>
<code>Computer
code</code><br
/>
<kbd>Keyboard
input</kbd><br
/>
<tt>Teletype
text</tt><br
/>
<samp>Sample
text</samp><br
/>
<var>Computer
variable</var><br
/>
<p><b>註釋：</b>這些標籤常用於顯示計算機/編程代碼。</p><hr />
<h2>唐老鴨的地址：</h2>
<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA<br />
</address>
<hr />
<abbr
title="ZHAODENG">ZhaoD.</abbr>
<br />
<acronym title="中國地質大學 （ 北京
）">中國地質大學
</acronym>
<hr />
<p>如果您的瀏覽器支持 bi-directional override
(bdo)，下一行會從右向左輸出 (rtl)Here is some Hebrew text !<br
/>
bdo dir="rtl"> -->
bdo dir
：可以設置文字方向
<br />
</p>
<bdo dir="rtl">Here is some Hebrew
text</bdo>
<hr />
這是長的引用：
<blockquote>
這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。
</blockquote>
這是短的引用：
<q>這是短的引用。</q>
<p>使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而
q 元素不會有任何特殊的呈現。</p>
<hr />
<p>一打有
<del>二十</del>
<ins>十二</ins>
件。</p>
<p>大多數瀏覽器會改寫爲刪除文本和下劃線文本。一些老式的瀏覽器會把刪除文本和下劃線文本顯示爲普通文本。</p>
<hr />
<p><a href="http://www.w3school.com.cn/">本文本
是一個指向 W3C
中的一個頁面的鏈接。</a>
是一個指向本網站中的一個頁面的鏈接。</p>
<p><a href="http://www.microsoft.com/">本文本
是一個指向萬維網上的頁面的鏈接。</a>
是一個指向萬維網上的頁面的鏈接。</p>
<hr />
<p>您也可以使用圖像來作鏈接：<a
href="http://www.w3school.com.cn/">
<img border="0" src="eg_buttonnext.gif"
/></a>
</p>
<hr />
<a href="http://www.w3school.com.cn/"
target="_blank">Visit
W3School!</a>
<p>如果把鏈接的 target 屬性設置爲
"_blank"，該鏈接會在新窗口中打開。</p>
<hr
/><p>
<a href="#pos">查看 Chapter
4。</a>
</p>
<h2>Chapter
1</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 2
</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 3
</h2>
<p>This chapter explains ba bla
bla</p>
<h2><a
name="pos">
Chapter 4
</a></h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 5
</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 6
</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
7</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
8</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
9</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
10</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
11</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
12</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
13</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
14</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
15</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
16</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter
17</h2>
<p>This chapter explains ba bla
bla</p>
<hr />
<p>被鎖在框架中了嗎？</p>
<a href="http://www.w3school.com.cn/"
target="_top">請點擊這裏！</a>
<hr />
<p>這是郵件鏈接：
<a href="mailto:[email protected]?subject=Hello
again">發送郵件</a>
</p>
<p>
這是另一個 mailto 鏈接：
<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer
Party&body=You are invited to a big summer
party!">發送郵件！</a>
</p>
<p><b>注意：</b>應該使用
來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。<br
/>
郵件格式爲： mailto: add_email <br
/>
cc= 後爲收件人的郵箱 ；&bcc= 後爲密件抄送人的郵箱地址
；&subject= 後面爲郵件主題 ；&body= 後爲郵件內容
。
</p>
<hr />
<p>使用三份不同的文檔製作一個垂直/水平框架。
noframes> 調整框架的大小
</p>
<frameset cols="25%,50%,25%">
<frame
src="/example/html/frame_a.html">
<frame
src="/example/html/frame_b.html">
<frame
src="/example/html/frame_c.html">
<noframes>
<body>您的瀏覽器無法處理框架！</body>
</noframes>
</frameset>
<p>混合框架
</p>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame
src="/example/html/frame_b.html">
<frame
src="/example/html/frame_c.html">
</frameset>
</frameset>
<hr />
<p>製作導航框架。導航框架包含一個將第二個框架作爲目標的鏈接列表。名爲
"contents.htm" 的文件包含三個鏈接。</p>
<frameset cols="120,*">
<frame
src="/example/html/html_contents.html">
<frame
src="/example/html/frame_a.html"
name="showframe">
</frameset>
<hr /><hr
/>
<p>每個表格由 table
標籤開始。</p>
<p>每個表格行由 tr
標籤開始。</p>
<p>每個表格數據由 td
標籤開始。</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>
<h4>帶有粗的邊框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>這個表格沒有邊框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>電話</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555 77
854</td>
<td>555 77
855</td>
</tr>
</table>
<h4>垂直的表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill
Gates</td>
</tr>
<tr>
<th>電話</th>
<td>555 77
854</td>
</tr>
<tr>
<th>電話</th>
<td>555 77
855</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>Some
text</td>
<td>Some
text</td>
</tr>
<tr>
<td></td>
<td>Some
text</td>
</tr>
</table>
<p>正如您看到的，其中一個單元沒有邊框。這是因爲它是空的。在該單元中插入一個空格後，仍然沒有邊框。我們的技巧是在單元中插入一個 no-breaking 空格。no-breaking 空格是一個字符實體。如果您不清楚什麼是字符實體，請閱讀關於字符實體的章節。no-breaking 空格由和號開始 ("&")，然後是字符"nbsp"，並以分號結尾(";")。</p>
<table border="1">
<tr>
<td>Some
text</td>
<td>Some
text</td>
</tr>
<tr>
<td> </td>
<td>Some
text</td>
</tr>
</table>
<h4>這個表格有一個標題，以及粗邊框：</h4>
<table border="6">
<caption>我的標題</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th
colspan="2">電話</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555 77
854</td>
<td>555 77
855</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="blue">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<p>align 設置 格式
</p>
<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>
<h4>一個無序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>一個有序列表：</h4>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<hr />
<p>type="disc"
circle square 設置項目符號
</p>
<h4>Disc
項目符號列表：</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Circle
項目符號列表：</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Square
項目符號列表：</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<hr />
<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>
<hr />
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<h4>一個嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<hr />
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ...
...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ...
...</dd>
</dl>
<hr /><hr
/>
<form>
用戶：
<input type="text" name="user">
<br />
密碼：<input type="password"
name="password"><br
/>
男性：<input type="radio" checked="checked"
name="Sex" value="male" /><br
/>
女性：<input type="radio" name="Sex" value="female"
/><br />
<select name="cars">
<option
value="中國地質大學">中國地質大學</option>
<option
value="北京語言大學">北京語言大學</option>
<option
value="清華大學">清華大學</option>
<option
value="北京大學">北京大學</option>
</select><br
/>
我喜歡自行車：<input type="checkbox"
name="Bike"><br
/>
我喜歡汽車：<input type="checkbox"
name="Car"><br />
</form>
<p>請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。</p>
<hr />
<textarea cols="30" rows="5">
領先的 Web 技術教程 - 全部免費
在w3school，你可以找到你所需要的所有的網站建設教程。
從基礎的HTML到XHTML，乃至進階的XML、SQL、數據庫、多媒體和WAP。
</textarea>
<p>您無法對本例進行編輯，因爲我們的在線編輯器使用
textarea 進行輸入，
而瀏覽器不允許 textarea 中存在另一個
textarea。</p>
<hr />
<form>
<input type="button" value="Hello
world!">
</form>
<hr />
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>
<p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p>
</body>
</html>