这个例子中综合了前面六篇基础教程中的各种元素的使用方法，方便大家参考
<html>
<head >
<meta charset="utf-8">
<style type="text/css">
div#container{width:600}
p {margin-left: 20px}
h1 {color: red}
p {color: blue}
</style>
</head>
<body bgcolor="green">
<div id="container">
<hr/>
<a name="tip_top">这是顶部</a>
<a href="#tips">跳至底部</a>
<hr/>
<h4>链接测试</h4>
<p>
<img id="s_lg_img" src="http://www.baidu.com/img/bdlogo.png" width="270" height="129" alt="图片无法加载">
<a name="label" href="http://www.qq.com" target="qq_main"> 在下面内嵌框架中打开腾讯首页</a>
</p>
<hr/>
<h4>内嵌框架<h4/>
<iframe src="http://www.baidu.com" width="600" height="200" name="qq_main" ></iframe>
<hr/>
<h4>表单测试：</h4>
<form>
<fieldset>
<legend>用户信息</legend>
用户：<input type="text" />
密码：<input type="text" />
<input type="button" value="这是按钮">
</fieldset>
</form>
<hr/>
<h4>格式输出测试：</h4>
<h1>春晓</h1>
<pre>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</pre>
<hr/>
<!-- cellpadding单元格边距，cellspacing单元格间距 -->
<table border="1" cellpadding="10" cellspacing="10" background="http://www.baidu.com/img/bdlogo.png">
<caption>表格测试</caption>
<tr>
<th colspan="2">第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>row 2, cell 2</td>
<td background="http://www.baidu.com/img/10.png"></td>
</tr>
</table>
<hr/>
<h4>列表测试：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<hr/>
<kbd>这儿是键盘输入字符</kbd>
<hr/>
<p style="color: red; margin-left: 20px">This is a paragraph</p>
<h4>段落测试</h4>
<hr />
<p>这是<br/> 第一段</p>
<p>这是<br/> 第二段</p>
<!-- style设置的是链接不带下划线，target设置的是链接在新的窗口中打开 -->
<a name="label" href="http://www.baidu.com" style="text-decoration:none" target="_blank"> 链接
<img border="0" src="/i/eg_buttonnext.gif" />这是一个图片链接
</a>
<!-- 这是一条分割线 -->
<hr />
<a name="tips">这是底部</a>
<a href="#tip_top">跳至顶部</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
</div>
</body>
</html>
时间： 2024-10-10 10:59:08