<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html</title>
</head>
<body>
<a id="top">首部</a>
<p>html段落。</p>
<a href="http://www.baidu.com">鏈接到百度</a>
<p>html元素與屬性推薦用小寫字母。</p>
<hr/>
<!-- 這是一個註釋 -->
<b>粗體bold</b>
<i>斜體italic</i>
<sub>下標subscript</sub>
<sup>上標superscript</sup>
<strong>替換加粗標籤</strong>
<em>替換斜體標籤</em>
<hr>
<h6>縮寫和首字母縮寫</h6>
<abbr title="etcetera">etc.</abbr>
<br/>
<acronym title="World Wide Web">WWW</acronym>
<p>文字方向This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">此例演示如何改變文字的方向This paragraph will go right-to-left.</bdo></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<hr>
<a href="http://www.runoob.com/" target="_blank">訪問菜鳥教程!新窗口打開頁面</a>
<br/><br/>
<a href="http://www.runoob.com/html/" target="_blank">訪問菜鳥教程!請始終將正斜槓添加到子文件夾。</a>
<br/><br/>
<p>創建圖片鏈接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img src="smiley.gif" alt="HTML 教程" width="32" height="32">
</a>
</p>
<a href="http://www.runoob.com/" target="_top">點擊這裏，跳出框架，本頁內打開!</a>
<br/><br/>
<p>
這是一個電子郵件鏈接：
<a href="mailto:[email protected]?Subject=郵件%20標題" target="_top">發送郵件，空格使用 %20 代替
</a>
</p>
<p>
這是另一個電子郵件鏈接：
<a href="mailto:[email protected][email protected];[email protected]&bcc=密件抄送@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">發送郵件!</a>
</p>
<hr/>
<h6>HTML 表格</h6>
<table border="1" cellpadding="5" cellspacing="0">
<caption>表格標題</caption>
<thead>
<tr>
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data11</td>
<td>data12</td>
<td>data13</td>
</tr>
<tr>
<td>data21</td>
<td>data22</td>
<td>data23</td>
</tr>
</tbody>
</table>
<br/>
<h6>html列表</h6>
<ul style="list-style-type:square">
<li>coffee</li>
<li>tea</li>
</ul>
<ol type="A">
<li>coffee</li>
<li>milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<div>
div塊級元素：div 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 table 元素進行文檔佈局不是表格的正確用法。table 元素的作用是顯示錶格化的數據。
</div>
<div>
<span>span內聯元素：span元素可用於爲部分文本設置樣式屬性</span>
</div>
<h6>html表單和輸入</h6>
<form name="input" action="http://www.baidu.com/" method="get" accept-charset="utf-8">
文本域：<input type="text" name="text" size="30"><br/>
密碼：<input type="password" name="password" size="32"><br/>
單選按鈕：<br/>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
複選框：<br/>
<input type="checkbox" name="vehicle" value="bike">Bike <br>
<input type="checkbox" name="cehicle" value="car">Car <br>
<input type="submit" value="提交" ><br>
下拉列表：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fait</option>
<option value="audi" selected>Audi</option>
</select><br>
文本框：<br>
<textarea name="textarea" rows="10" cols="30">
文本框
</textarea><br>
按鈕<br>
<input type="button" value="Hello world!"><br>
</form>
<hr>
<iframe src="html01.html" name="iframe01"></iframe>
<p><a href="http://www.baidu.com" target="iframe01">baidu.COM</a></p>
<!-- html 註釋 -->
<br/>
<a href="#top">訪問首部</a>
</body>
</html>