<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HTML效果展示页面</title>
</head>
<body>
<h2>html课程效果演示</h2>
<br/>
<br/>
<hr/>
<br/>
<br/>
<a name="base"></a>
<h1>基本标签</h1>
<html> <head> <title> <body>
<h1> <h1> <hr> <p>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>
鹅鹅鹅，曲项向天歌。
<br/>
白毛浮绿水，红掌拨清波。
</p>
<br/>
<br/>
<hr/>
<br/>
<br/>
<a name="liebiao"></a>
<h1>列表标签</h1>
<ul>
<li>蛋蛋</li>
<li>建国</li>
<li>浇水</li>
</ul>
<ol>
<li>蛋蛋</li>
<li>建国</li>
<li>浇水</li>
</ol>
<br/>
<br/>
<hr/>
<br/>
<br/>
<a name="effect"></a>
<h1>显示效果标签</h1>
<p>
<samll> <samll>小号文本</samll>
<br/><br/>
<big> <big>大号文本</big>
<br/><br/>
<b> <b>出题文本</b>
<br/><br/>
<i> <i>斜体文本</i>
<br/><br/>
<u> <u>加下划线文本</u>
<br/><br/>
<s> <s>加删除线的文本</s>
<br/><br/>
<strike> <strike>加删除线文本</strike>
<br/><br/>
<center> <br/>
<center>居中文本</center>
<br/><br/>
<em> <em>强调文本</em>
<br/><br/>
<strong> <strong>语气更为强调的文本</strong>
<br/><br/>
<sup> <sup>上标文本</sup>
<br/><br/>
<sub> <sub>下标文本</sub>
<br/><br/>
<font> <font color="red" size="" dir="ltr" />文本的字体、尺寸和颜色</font>
<br/><br/>
</p>
<hr/>
<br/><br/>
<a name="table"></a>
<h2>表格标签</h2>
<table width="400px" cellpadding="5px" border="1" cellspacing="0px" style="border-collapse: collapse" />
<caption>信息统计表</caption>
<thead>
<tr>
<td><h3>编号</h3></td>
<td><h3>姓名</h3></td>
<td><h3>性别</h3></td>
<td><h3>年龄</h3></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>蛋蛋</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>建国</td>
<td>男</td>
<td>16</td>
</tr>
<tr>
<td>3</td>
<td>赖宝</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>浇水</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="4" />合计:4人</td></tr>
</tfoot>
</table>
<br/>
<br/>
<hr/>
<br/>
<br/>
<a name="img"></a>
<h1>图片标签</h1>
<img src="人丑就要多读书.jpg" alt="图片找不到"/>
<br/>
<br/>
<hr/>
<br/>
<a name="a"></a>
<h2>锚标签(超链接标签)</h2>
<a href="http://www.rupeng.com/index.shtml" />如鹏网</a>
<div style="position: absolute;position:fixed;top: 300px;right: 0px;width: 200px;height: 300px;border: solid royalblue ;border-width: 1px">
<br/>
<a href="#base">基本标签</a><br/><br/>
<a href="#liebiao">列表标签</a><br/><br/>
<a href="#effect">显示效果标签</a><br/><br/>
<a href="#table">表格标签</a><br/><br/>
<a href="#img">图片标签</a><br/><br/>
<a href="#a">锚标签</a><br/><br/>
<a href="#form">表单标签</a><br/><br/>
</div>
<br/>
<br/>
<hr/>
<br/>
<br/>
<br/>
<a name="form"></a>
<h2>表单标签</h2>
<br/>
<br/>
<form>
<label>账号:</label><input type="text" name="账号" /><br/>
<label>密码:</label><input type="password" name="密码" /><br/>
<label>性别:</label>
<label for="男">男</label>
<input type="radio" name="性别" id="男" checked="checked" />
<label for="nv">女</label>
<input type="radio" name="性别" id="nv" />
<br/>
<label>爱好:</label>
<label for="read">读书</label>
<input type="checkbox" name="hobby" id="read" value="读书" />
<label for="music">音乐</label>
<input type="checkbox" name="hobby" id="music" value="音乐" />
<label for="run">跑步</label>
<input type="checkbox" name="hobby" id="run" value="跑步" />
<label for="旅行">旅行</label>
<input type="checkbox" name="hobby" id="旅行" value="旅行" />
<br/>
<label>学历：</label>
<select >
<option value="bk">本科</option>
<option value="dz" selected="selected">大专</option>
<option value="zx">中学</option>
<option value="yjs">研究生</option>
</select>
<br/>
<input type="reset" name="重置" value="重置"/>
<input type="submit" name="注册" value="注册"/>
<br/>
<br/>
<br/>
<br/>
<br/>
</form>
</body>
</html>
