本文整理了一天中关于HTML的结构和一些易错的小细节，包括代码示例和表格的合并及属性记忆技巧，是作者的个人学习心得。
一天整理HTML结构与小细节
再加上几个感觉写的很全面的代码
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="utf-8">
</head>
<body >
<form>
<table width="500" border="1" bgcolor="#ffffff" align="center" height="10" >
<thead><caption><p align="center">用户注册</p></caption></thead>
<tbody align="center">
<tr>
<td>用户名：</td>
<td><input type="type" name="name" size="65" maxlength="15" placeholder="输入姓名"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" size="65" ></td>
</tr>
<tr>
<td>密码确认：</td>
<td><input type="password" name="passwordsure" size="65"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="type" name="Email" size="65" maxlength="15" placeholder="输入邮箱"></td>
</tr>
<tr>
<td>确认邮箱：</td>
<td><input type="type" name="Emailsure" size="65" maxlength="15" placeholder="确认邮箱"></td>
</tr>
<tr>
<td>性别：</td>
<td align="left"><input type="radio" value="男" checked="checked" name="sex">男
<input type="radio" value="女" name="sex">女</td>
</tr>
<tr>
<td>来自：</td>
<td align="left"><select>
<option selected="selected" value="山东">山东</option>
<option value="河南">河南</option></select></td>
</tr>
<tr>
<td>兴趣：</td>
<td align="left">
<input type="checkbox" name="mucic" checked="checked">音乐
<input type="checkbox" name="basktball" checked="checked">篮球
<input type="checkbox" name="fooyball">足球
<input type="checkbox" name="readbook" checked="checked">读书
<input type="checkbox" name="summing" checked="checked">游泳
<input type="checkbox" name="pingpang">乒乓
<input type="checkbox" name="tv">电视
<input type="checkbox" name="draw">画画</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交">
<input type="reset" value="重置"></td>
</tr>
</tbody>
</table></form>
</body>
</html>
效果
再来一个
<!DOCTYPE html>
<html>
<head>
<title>4.1作业</title>
<meta charset="utf-8">
</head>
<body background="TIM图片20190401093456.jpg">
<table border="2" align="center">
<thead>
<caption><h1 align="center" >作业</h1></caption></thead>
<tbody width="500" bgcolor="#ffffff" align="left" height="5">
<form>
<tr>
<td>请选择：</td>
<td align="left"><input type="radio" name="zhanghuleixing" value="公司" >公司
<input type="radio" name="zhanghuleixing" value="个人">个人</td>
</tr>
<tr>
<td>个人真实姓名：</td>
<td><input type="type" name="name" size="40" placeholder="请输入姓名" maxlength="5"></td>
</tr>
<tr>
<td>身份证号：</td>
<td><input type="type" name="shengfenID" size="40" placeholder="请输入姓名" maxlength="18"></td>
</tr>
<tr>
<td>常用电子邮箱：</td>
<td><input type="type" name="E-mail" size="40" placeholder="请输入E-mail" maxlength="20"></td>
</tr>
<tr><td>网址：</td><td><input type="type" name="wangzhi" size="40" placeholder="示例：http:\\www.douyu.com\52004.html" maxlength="50"><br/><font size="2"><font color="#cccccc">若没有网址 请使用对应账号等入<a href="http:\\blog.163.com/" title="网易博客" target="_blank">网易博客</a> </font></font></td></tr>
<tr>
<td>行业：</td>
<td align="left">
<select name="hangye" >
<option value="hangye">-------请选择行业------</option>
<option value="hangye">计算机</option>
<option value="hangye">医疗</option>
</select>
</td>
</tr>
<tr>
<td>所属地区：</td>
<td align="left">
<select name="shengfen">
<option value="shengfen">-省份-</option>
<option value="shengfen">北京</option>
<option value="shengfen">山东</option></select>
<select name="chengshi">
<option value="chengshi">-城市-</option>
<option value="chengshi">朝阳</option>
<option value="chengshi">济南</option>
</select>
</td>
</tr>
<tr>
<td>联系人姓名：</td><td><input type="type" name="联系人姓名" size="40" placeholder="联系人姓名" maxlength="5"></td>
</tr>
<tr>
<td colspan="2" align="left">联系电话和手机：<font color="#cccccc">(至少填写其中一项)</font>
</td>
</tr>
<tr>
<td>联系人电话：</td>
<td ><input type="type" name="区号" size="5" maxlength="3">-<input type="type" name="中间数" size="10" maxlength="4">-<input type="type" name="后尾数" size="11" maxlength="4">
</td>
</tr><!--这里要限制一下-->
<tr><td>联系人手机：</td><td><input type="type" name="电话号" size="40" maxlength="11"></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" name="提交">
<input type="reset" name="重置"></td></tr>
</form>
</tbody>
</table>
<p align="right">©裴兴涛</p>
</body>
</html>
效果如下
最后一个
<!DOCTYPE html>
<html>
<head>
<title>王者荣耀</title>
<meta charset="utf-8">
</head>
<body>
<table width="500" border="1" bgcolor="#ffffff" align="center" height="10" >
<thead>
<caption>王者荣耀某战队对决赛</caption>
</thead>
<!--主体-->
<tbody>
<tr>
<th width="50">组别</th>
<th width="70">QQ昵称</th>
<th width="130">第一轮PK胜利者</th>
<th width="130">第二轮PK胜利者</th>
<th width="130">第三轮PK胜利者</th>
</tr>
<!--1-->
<tr align="center">
<td rowspan="2">第一组</td>
<td>单单面</td>
<td rowspan="2"></td>
<td rowspan="4"></td>
<td rowspan="10"></td>
</tr>
<tr align="center"><td>咆哮哥</td></tr>
<!--2-->
<tr align="center">
<td rowspan="2">第二组</td>
<td>豌豆凉粉</td>
<td rowspan="2"></td>
</tr>
<tr align="center"><td>美丽传说</td></tr>
<!--3-->
<tr align="center">
<td rowspan="2">第三组</td>
<td>潇潇兮</td>
<td rowspan="2"></td>
<td rowspan="4"></td>
</tr>
<tr align="center"><td>娟娟妹</td></tr>
<!--4-->
<tr align="center">
<td rowspan="2">第四组</td>
<td>多研究研究</td>
<td rowspan="2"></td>
</tr>
<tr align="center"><td>权利权利</td></tr>
</tbody>
<!--脚-->
<tfoot >
</tfoot>
</table>
</body>
</html>
效果如下
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
