<html>
<head>
<title>
坚强姐威武霸气
</title>
</head>
<body bgcolor="pink" background="图片的路径" color="black" align="center"> <!--设置网页背景色 背景图片 文字颜色 整个页面显示效果-->
<font size="6" face="楷体" color="green" align="center">鹿晗</br> <!--设置 鹿晗 这个标签的字体大小 字体样式 字体颜色-->
<img src="1.jpg" width="200px" height="100px" title="鹿晗" align="center" border="1"></br>
<a href="http://www.baidu.com">百度一下</a><br/> <!--超链接-->
<table border="1" align="center" width="400" height="200"> <!--table表格-->
<caption><font size="5">水果价格表（单价：元）</font></caption>
<tr>
<th><font size="5">水果名称</font></th>
<th><font size="5">计量单位</font></th>
<th><font size="5">A市场</font></th>
<th><font size="5">B市场</font></th>
<th><font size="5">C市场</font></th>
</tr>
<tr>
<th><font size="5">苹果</font></th>
<th><font size="5">500g</font></th>
<th><font size="5">2.1</font></th>
<th><font size="5">2.2</font></th>
<th><font size="5">2.0</font></th>
</tr>
<tr>
<th><font size="5">香蕉</font></th>
<th><font size="5">500g</font></th>
<th><font size="5">1.7</font></th>
<th><font size="5">1.5</font></th>
<th><font size="5">2.0</font></th>
</tr>
<tr>
<td colspan="5"><font size="5">统计日期：2017.9.08星期五</font></td>
</tr>
</table>
<table border="1" width="500" align="center"> <!--table表格-->
<tbody>
<tr> <!--行-->
<td align="center" valign="top">张张1</td> <!--列 valign表示字体的上下位置-->
<td align="center">张张2</td>
<td align="center" rowspan="2">张张3</td> <!--合并两行-->
</tr>
<tr>
<td align="center" colspan="2">张张4</td> <!--合并三列-->
</tr>
</tbody>
</table>
<form method="post" align="left"> <!--form表单-->
用户:<input type="text" name="user" value=""/></br> <!--文本框-->
密码:<input type="password" name="password" value=""/></br> <!--密码框-->
性别:<input type="radio" name="sex" value="男"/>男 <!--单选框-->
<input type="radio" name="sex" value="女" checked/>女</br>
兴趣爱好:<input type="checkbox" name="choose" value="read"/>读书 <!--复选框-->
<input type="checkbox" name="choose" value="game"/>游戏
<input type="checkbox" name="choose" value="music"/>音乐</br>
联系:<select name="class"> <!--下拉框-->
<option value="1">移动</option>
<option value="2">联通</option>
<option value="3">小灵通</option>
</select></br>
备注:<textarea name="beizhu" readonly>鹿晗最帅</textarea></br> <!--备注框 readonly设置只读权限 -->
<input type="submit" name="bt1" value="保存"/> <!--保存按钮 submit 提交-->
<input type="reset" name="bt2" value="重置"/> <!--重置按钮 reset 重置-->
<input type="button" name="bt3" value="普通" disabled/> <!--普通按钮 并设置不可读-->
</form>
</body>
</html>
本文档通过一个具体的HTML实例展示了如何创建包含多种元素如表格、表单等的基本网页。该网页涉及了基本的布局设计、表格数据展示及用户交互表单的设计。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
