html学习教程7之第一个html模版_html/css_WEB-ITnose

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

 <meta charset="utf-8"><style type="text/css">div#container{width:600}p {margin-left: 20px}h1 {color: red}p {color: blue}</style><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"    style="max-width:90%"  style="max-width:90%" alt="图片无法加载"><a name="label" href="http://www.qq.com" target="qq_main"> 在下面内嵌框架中打开腾讯首页</a></p>
<hr>
<h4>内嵌框架<h4></h4>
<iframe src="http://www.baidu.com" width="600" height="200" name="qq_main"></iframe><hr>
<h4>表单测试：</h4>
</h4>
<form>  <fieldset>    <legend>用户信息</legend>    用户：<input type="text">    密码：<input type="text">	<input type="button" value="这是按钮">  </fieldset>
</form>
<hr>
<h4>格式输出测试：</h4>
<h1>春晓</h1>
<pre class="brush:php;toolbar:false">    春眠不觉晓，      处处闻啼鸟。        夜来风雨声，          花落知多少。

---

表格测试

第一列		第二列
row 1, cell 1	row 1, cell 2	row 1, cell 2
苹果 香蕉 菠萝	row 2, cell 2

---

列表测试：

• 咖啡
• 茶
  • 红茶
  • 绿茶
    • 中国茶
    • 非洲茶
• 牛奶

---

这儿是键盘输入字符

---

This is a paragraph

段落测试

---

这是
第一段

这是
第二段

链接这是一个图片链接

---

这是底部跳至顶部有用的提示