前言
一切的实战系列都是为了更好的掌握
我们要做的的东西（样式）
做题心理准备一定要好
： 每当我们遇见问题的时候，首先我们都应该冷静下来。不要一看见题就觉得好麻烦，这样你就会给自己带来烦躁的情绪，这样你就输了一半了。即使会，你也会变得不会，因为你的脑海中在一开始给了自己一个暗示：这道题本来就难，我不会就正常；其实你动动脑子它很简单，只不过提前你的思维就偏离正轨了。这样导致的结果就是你会很后悔（这种感觉很难受），就好像一把游戏50分钟，你玩了48分钟，还有两分钟就赢了，但是在那两分钟内因为小小的举动，输了。如果你实在烦躁，放一首歌吧。
怎么做？
1.分析思考
：每当题下来一定要分析和思考，这样会让你事半功倍，我们仔细研究这张样式图；你如果仔细的话就可以发现，其实这道题很简单，我们只需要做出一个，其他基本就出来了，因为他们格式基本相同，只需要在细节上进行处理就行；
2.确定第一步
： 第一步可选性比较多，我们可以先做好表格，然后为其填充内容；也可以先写好内容，在进行表格填充；
3.确定第二步
： 当你选择好了第一步就是进行第二步了，第二步就是为第一步进行完善，因为我们通过看样式，大致格式一样，所以第二步就是完善细节；
4.随心所欲
： 之后你就可以自己更改一些内容，比如背景颜色，或者你的小想法。或许你的一个小想法，就会有很大的变化。
开始做
1.先做好第一行内容
： 我们回忆一下 HTML 表格相关的内容，我们所需要的内容都是简单的描述，对于一个表格我们必须要进行 边框宽度 单元格之间的空白 边框与单元格内容之间的距离
背景颜色 边框颜色 的定义。因为这是一个用户注册，你就必须使用 input 标签，所以这里还需要使用 form 表单。并且使用 get 提交。
如果你需要详细了解，请在我的另一篇博客中查看： 用HTML做一个属于你的 “世界“链接描述
<table> 定义一个HTML表格 border 边框宽度 cellspacing 单元格之间的空白 cellpadding 边框与单元格内容之间的距离 bgcolor 背景颜色 bordercolor 边框颜色 width 宽度 align 对齐方式 <tr> 定义表格中的行 <td> 定义表格中的单元格 <th> 定义表格中的表头 form标签 必须存在的属性: action: 指定表单发送的目标URL地址 可选的属性: method: 指定以何种方式发送表单 http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交 只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST") 才是POST提交，其他提交都是GET提交． <input> 输入框 重要属性: type属性 文本框 text 输入的文本信息直接显示在框中 密码框 password 输入的文本以圆点或者星号的形式显示 单选框 radio 进行单项的选择如性别选择多个radio的name属性 相同会被当作一组来使用 必须用value为选项指定提交的值 复选框 checkbox 进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值
图片解说
： 两种标签我们都可以使用，看个人爱好，现在第一步就已经完成了，就相当于整个框架都完成了。这里我们选用 td 来完成整个系列。
图片解说
: 我们现在进行的是密码的写作，其实你仔细的看，我们就是换了一点点东西，还用试试原来的模板，就是将 用户 换成了 密码；input里的内容做了一些更改。
图片解说
： 复制黏贴，稍加改动，套着来就行
图片解说
： 接着来就行，至于为什么这样写，我的另一篇文章都有介绍；
图片解说
： 按着套路，细节修改就行了。
图片解说
： 继续复制着来就行，然后修改细节。
整体代码
： 代码框架不变，其他的都可自定义。欢迎将你的创意图片发到评论中。
<!doctype html> <html> <head> <title>注册页面</title> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> </head> <body> <form action="#" method="get"> <table border=1px bordercolor="red" cellspacing="0px" cellpadding="10px" bgcolor="lightgray" align="center"> <caption>注册用户</caption> <tr> <td>用户名：</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password1"></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="password2"></td> </tr> <tr> <td>昵称：</td> <td><input type="text" name="nickname"></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" name="email"></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender">女 </td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="hobby" value="lq" checked="checked">篮球 <input type="checkbox" name="hobby" value="zq">足球 <input type="checkbox" name="hobby" value="pq">排球 </td> </tr> <tr> <td>城市：</td> <td> <select name="city"> <option value=bj>北京</option> <option value=sh selected="selected">上海</option> <option value=sz>深圳</option> </select> </td> </tr> <tr> <td>头像：</td> <td><input type="file" name="touxiang"></td> </tr> <tr> <td>验证码：</td> <td> <input type="text" name="yanzheng"> <img src="1.jpg" height="20px" width="50px"> <input type="button" value="换一个"> </td> </tr> <tr> <td>自我描述：</td> <td><textarea rows="5" cols="25">请输入自我描述！</textarea></td> </tr> <tr> <td colspan=2 align="center"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html>
标签：实战,注册,表格,单元格,边框,HTML,提交,解说 来源： https://blog.51cto.com/u_15165233/2704065
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。