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

浏览数：31 / 时间：2015年06月09日

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

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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