<!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>
<a href="http://www.runoob.com/" target="_blank">通路菜鳥教程!新視窗打開頁面</a>
<br/><br/>
<a href="http://www.runoob.com/html/" target="_blank">通路菜鳥教程!請始終将正斜杠添加到子檔案夾。</a>
<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>
<p>
這是一個電子郵件連結：
<a href="mailto:[email protected]?subject=郵件%20标題" target="_top">發送郵件，空格使用 %20 代替
這是另一個電子郵件連結：
<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>
<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>
<td>data11</td>
<td>data12</td>
<td>data13</td>
<td>data21</td>
<td>data22</td>
<td>data23</td>
</tbody>
</table>
<h6>html清單</h6>
<ul style="list-style-type:square">
<li>coffee</li>
<li>tea</li>
</ul>
<ol type="a">
<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>
<span>span内聯元素：span元素可用于為部分文本設定樣式屬性</span>
<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>
<iframe src="html01.html" name="iframe01"></iframe>
<p><a href="http://www.baidu.com" target="iframe01">baidu.com</a></p>
<!-- html 注釋 -->
<a href="#top">通路首部</a>
</body>
</html>
![一場春雨，一個帶着泥土芬芳的記憶[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)