您的位置：首页 > Web前端 > HTML

html学习教程7之第一个html模版

2015-03-16 16:42 302 查看

这个例子中综合了前面六篇基础教程中的各种元素的使用方法，方便大家参考

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航