1、标题、内容
<html>
<head>
<title>这是标题</title>
</head>
<body>
这是内容
</body>
</html>
2、设置背景色
<html>
<head>
<title>设置背景颜色为红色</title>
</head>
<body bgcolor="red">
</body>
</html>
3、设置背景为图
<html>
<head>
<title>设置背景为图片</title>
</head>
<!--
<body background="C:\Documents and Settings\All Users\Documents\My Pictures\示例图片\Sunset.jpg">
-->
<!--
<body background="images/Sunset.jpg">
-->
<body background="../images/Sunset.jpg">
</body>
</html>
4、演示横线
<html>
<head>
<title>演示横线</title>
</head>
<body>
<hr size="6" width="200" color="red">
<hr size="6" width="60%" color="red">
</body>
</html>
5、演示超连接
<html>
<head>
<title>演示超连接</title>
</head>
<body>
<a href="http://www.sina.com.cn">连接到新浪</a>
</body>
</html>
6、测试H1~6
<html>
<head>
<title>测试H1~6</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
7、测试font
<html>
<head>
<title>测试font</title>
</head>
<body>
<font color="red" size="4">红色，4号 </font>
<p>
<font color="blue" size="5">蓝色，5号 </font>
</body>
</html>
8、测试特殊标签
<html>
<head>
<title>测试特殊标签</title>
</head>
<body>
<b>黑</b>
<i>斜体</i>
<u>下划线</u>
<s>中线</s>
<sup>上标</sup>
<sub>下标</sub>
</body>
</html>
9、测试转义符
<html>
<head>
<title>测试转义符</title>
</head>
<body>
a b
<p>
<
<p>
>
</body>
</html>
10、测试文字布局
<html>
<head>
<title>测试文字布局</title>
</head>
<body>
<div align="center">
div1111居中<p>
abcedf.....
</div>
<div align="center">
div2222居中<br>
abcedf.....
</div>
<span>
span111.....
</span>
<span>
span222.....
</span>
<p>
<ul>
<li>无序号列表</li>
<li>无序号列表</li>
</ul>
<p>
<ol>
<li>有序号列表</li>
<li>有序号列表</li>
</ol>
<p>
<pre>
0 nmdnmd
0 0 jksdafkjsfdk
0 afdsafsf
</pre>
</body>
</html>
11、测试img标签
<html>
<head>
<title>测试img标签</title>
</head>
<body>
<img src="../images/Sunset.jpg" width="100" height="100" alt="这是图片">
</body>
</html>
12、测试type=text
<html>
<head>
<title>测试type=text</title>
</head>
<body>
<h1>文本输入域演示</h1>
<hr>
<!--
默认get提交,get提交会放到url的后面
<form>
-->
<!--
<form method="get">
-->
<form method="post">
姓名：<input type="text" name="username" id="username123" value="张三" size="50" maxlength="5"><br>
年龄：<input type="text" name="age" id="age"><br>
<input type="submit" value="保存">
</form>
</body>
</html>
13、测试type=text
<html>
<head>
<title>测试type=text</title>
</head>
<body>
<h1>复选框输入域演示</h1>
<hr>
<form method="post">
姓名：<input type="text" name="username"><br>
爱好：<input type="checkbox" name="a">游泳
<input type="checkbox" name="a">打球
<br>
<input type="submit" value="保存">
</form>
</body>
</html>
14、测试type=radio
<html>
<head>
<title>测试type=radio</title>
</head>
<body>
<h1>单选框输入域演示</h1>
<hr>
<form method="post">
姓名：<input type="text" name="username"><br>
性别：<input type="radio" name="a">男
<input type="radio" name="a" checked="true">女
<br>
<input type="submit" value="保存">
</form>
</body>
</html>
15、测试select
<html>
<head>
<title>测试select</title>
</head>
<body>
<h1>下拉列表框输入域演示</h1>
<hr>
<form method="post">
姓名：<input type="text" name="username"><br>
性别：
<select name="sex">
<option value="01">男</option>
<option value="02" selected >女</option>
</select>
<p>
性别：
<select name="sex" multiple>
<option value="01">男</option>
<option value="02">女</option>
</select>
</form>
</body>
</html>
16、测试textarea
<html>
<head>
<title>测试textarea</title>
</head>
<body>
<h1>textarea输入域演示</h1>
<hr>
<form method="post">
姓名：<input type="text" name="username"><br>
备注：<textarea name="remark" rows="5" cols=20></textarea>
</form>
</body>
</html>
17、测试button,submit,reset,image
<html>
<head>
<title>测试button,submit,reset,image</title>
</head>
<body>
<h1>button,submit,reset,image演示</h1>
<hr>
<form method="get">
姓名：<input type="text" name="username"><br>
备注：<textarea name="remark" rows="5" cols=20></textarea><br>
<input type="submit" value="submit"><br>
<input type="button" value="button"><br>
<input type="reset" value="reset"><br>
<input type="image" src="../images/Sunset.jpg" width="20" height="20">
</form>
</body>
</html>
18、测试hidden
<html>
<head>
<title>测试hidden</title>
</head>
<body>
<h1>hidden演示</h1>
<hr>
<form method="get">
<!--
流水号：<input type="text" name="flowNo" value="9998789"><br>
-->
<input type="hidden" name="flowNo" value="9998789"><br>
姓名：<input type="text" name="username" value="张三"><br>
备注：<textarea name="remark" rows="5" cols=20>asdfsadfsf</textarea><br>
<input type="submit" value="修改"><br>
</form>
</body>
</html>
19、测试table
<html>
<head>
<title>测试table</title>
</head>
<body>
<h1>table演示</h1>
<hr>
<table width="60%" border="1">
<tr align="center">
<td>学生姓名</td>
<td>科目</td>
<td>成绩</td>
</tr>
<tr>
<td>张三</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td colspan="2" align="center">合计</td>
<td>190</td>
</tr>
</table>
</body>
</html>
20、测试frame
<html>
<head>
<title>测试frame</title>
</head>
<!--
<body>
-->
<frameset cols="20%,*">
<frame name="left" src="21_1.html" noresize>
<frame name="right" src="21_2.html">
</frameset>
<!--
</body>
-->
</html>
21、测试frame的left
<html>
<head>
<title>测试frame</title>
</head>
<body>
left
</body>
</html>
22、测试frame的right
<html>
<head>
<title>测试frame</title>
</head>
<body>
right
</body>
</html>
23、测试frame
<html>
<head>
<title>测试frame</title>
</head>
<frameset rows="10%,*">
<frame name="top" src="22_1.html" noresize>
<frameset cols="15%,*">
<frame name="left" src="22_2.html">
<frame name="right" src="22_3.html">
</frameset>
</frameset>
</html>
24、测试frame的top
<html>
<head>
<title>测试frame</title>
</head>
<body>
top
</body>
</html>
25、测试frame的增删改查
<html>
<head>
<title>测试frame</title>
</head>
<body>
<a href="student_add.html" target="_self">添加学生</a><br>
<a href="student_del.html" target="_blank">删除学生</a><br>
<a href="student_modify.html" target="_top">修改学生</a><br>
<a href="student_query.html" target="right">查询学生</a><br>
</body>
</html>
<html>
<head>
<title>测试frame</title>
</head>
<body>
right
<body>
</html>
测试iframe
<html>
<head>
<title>测试iframe</title>
</head>
<body>
<h1>iframe演示</h1>
<iframe src="23_1.html"></iframe>
</body>
</html>
<html>
<head>
<title>学生信息列表</title>
</head>
<body>
<h1>学生信息列表</h1>
<hr>
<table border="1" width="1500">
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
<tr>
<td width="20%">11111</td>
<td width="20%">11111</td>
<td width="20%">11111</td>
</tr>
</table>
</body>
</html>
26、html br p标签区别？就是前者换行距离大这一点区别？
<P>就是分段"逻辑含义相同的放在一起"用一句话来说"把意思相同的话捆绑在一起"
<BR>相当C语言中的回车"\n";
27、调整字体 FONT-FAMILY
<FONT style="FONT-SIZE: 14pt; COLOR: green; FONT-FAMILY: 微软雅黑">文本内容</FONT>
28、在当前页面打开链接，而不是新页面打开
<a href="/about/" target="_blank">关于悠悠乐</a> | 这样是弹出一个新的网页；当然可以在target="_blank" 前边加一个标签就是 title=“测试是否为新的页面” 这样就自己可以尝试解决这个疑问；
本文转自 tianya23 51CTO博客，原文链接：http://blog.51cto.com/tianya23/312930，如需转载请自行联系原作者
