表格标签
表格标签使用方法
示例1
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Deken前端学习 </title>
</head>
<body>
<!--bgcolor="new RGB(235,85,20)"-->
<table border="1" width="400" height="400" align="center" cellpadding="20" background="1.jpg">
<tr>
<td>小弟女朋友1</td>
<td>18</td>
<td>北京</td>
<td><font color="white">善良</font></td>
</tr>
<tr>
<td>小弟女朋友2</td>
<td>20</td>
<td>上海</td>
<td><font color="white">漂亮</font></td>
</tr>
<tr>
<td><font color="white">小弟女朋友3</font></td>
<td>21</td>
<td>深圳</td>
<td><font color="white">贤淑</font></td>
</tr>
<tr>
<td>小弟女朋友4</td>
<td>19</td>
<td>广州</td>
<td><font color="white">温柔</font></td>
</tr>
<!--表格的标题，可以任意摆放位置，只要在表格内部-->
caption>大美人</caption>
</table>
</body>
</html>
效果图:
带标题的表格
示例2：
<body>
<!--bgcolor="new RGB(235,85,20)" #3366ff-->
<table align="center" cellpadding="18" bgcolor = "new RGB(235,85,20)" >
<tr>
<td>
<table border="1" bordercolor="white" cellpadding="8">
<tr>
<td colspan="4" ><input type="text" value="0" dir="rtl" size="20"><intput/></td>
</tr>
<tr>
<td><input type="button" value="7" size="25"><intput/></td>
<td><input type="button" value="8" size="25"><intput/></td>
<td><input type="button" value="9" size="25"><intput/></td>
<td rowspan="2"><input type="button" value="+" size="25"><intput/></td>
</tr>
<tr>
<td><input type="button" value="4" size="25"><intput/></td>
<td><input type="button" value="5" size="25"><intput/></td>
<td><input type="button" value="6" size="25"><intput/></td>
</tr>
<tr>
<td><input type="button" value="1" size="25"><intput/></td>
<td><input type="button" value="2" size="25"><intput/></td>
<td><input type="button" value="3" size="25"><intput/></td>
<td><input type="button" value="-" size="25"><intput/></td>
</tr>
<tr>
<td><input type="button" value="0" size="25"><intput/></td>
<td><input type="button" value="." size="25"><intput/></td>
<td><input type="button" value="C" size="25"><intput/></td>
<td><input type="button" value="=" size="25"><intput/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
效果图：
一个简单计算器效果图
表单标签
表单标签
示例
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Deken前端学习 </title>
</head>
<body>
<form action="html_day06.html" method="get">
<fieldset>
<legend>用户信息</legend>
账号：<input type="text" value="请输入账号" size="30"></input>
密码：<input type="password" value="" size="30"></input><br><br>
<!-- hidden隐藏的，用户界面无法得知 -->
<input type="hidden" value="这是隐藏的" size="30"></input>
用户：<input type="text" value="请输入用户名" size="30"></input>
昵称：<input type="text" value="请输入昵称" size="30"></input>
</fieldset><br>
<fieldset>
<legend>其他信息</legend>
<br>性别：<input type="radio" value="男" name="gender" checked="true">男</input> <input type="radio" value="女"name="gender">女</input><br><br>
爱好：<input type="checkbox" value="唱歌" name="intersts" >唱歌</input> <input type="checkbox" value="运动" name="intersts" checked="true">运动</input> <input type="checkbox" value="阅读" name="intersts" checked="true">阅读</input><br><br>
学历：<select name="学历">
<option value="研究生">研究生</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
<option value="小学">小学</option>
</select><br><br>
<!--输入大量文字标签-->
建议：<textarea rows="10" cols="20"> </textarea><br>
</fieldset><br>
<!--各种普通按钮-->
<input type="button" value="普通按钮"></input>  <button >普通按钮1</button><br><br>
<!-- 各种提交按钮-->
<input type="submit" value="提交按钮"></input>  <input type="image" src="1.jpg" width="40" height="20"></input><br><br>
<!--各种重置按钮-->
<input type="reset" value="重置按钮"></input><br><br>
</form>
</body>
</html>
效果图
效果图1
提交表单之后的效果
效果图2
框架标签
框架标签
示例
<head>
<title>Deken前端学习 </title>
</head>
<frameset rows="100,*">
<frame name="frame1" src="html_day06.html" ></frame>
<frameset cols="100,*">
<frame name="html_day03" src="html_day03.html"></frame>
<frame name="html_day09" src="html_day05.html"></frame>
</frameset>
</frameset>
效果图
三个页面一同加载了
到此，HTML常用标签基本学习完成了，本文基本没有太多文字，但是有很多图片文字以及源代码，相信还是很容易理解的。明天开始css的学习，基本学习完这个就可以回家过年了，呵呵，加油！永远美好的事情即将发生！
