html综合练习
此注册页面：1. 含有表格标签，让内容更加排列整齐 2. 列表标签 3. 表单标签
第一步是先去分析要做的页面，分几块，表格分几行，每行有几个单元格，在单元格里嵌套其他标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>综合练习HTML</title>
</head>
<body>
<h4>相亲网站</h4>
<!--下方是一个表格，可以定义它的宽度，同时边框现设为1，最后在为0-->
<!--表格每行有两个单元格-->
<table width="600" border="1">
<!--第一行，第二个单元格是单选按钮，有相同的name,value属性可以不写，主要给后台看的，但若写的话，尽量见名知意-->
<!--还在每个按钮后添加了小图标（图片），为了当点击图片或者文字时可以选中按钮，使用label标签-->
<!--使用的图片在当前文件的上级目录的imagine的子文件-->
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="nan" id="aa"><label for="aa"><img src="../imagine/sa.jpg">男</label>
<input type="radio" name="sex" value="nv" id="ss"><label id="ss"><img src="../imagine/sa.jpg">女</label>
</td>
</tr>
<!--第二行,第二个单元格是放入三个下拉列表表单,如果自己没有利用selected="selected"设置默认选择（显示在列表的第一行），系统会将第一个作为默认选择-->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日--</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
</tr>
<!--第三行，嵌套文本框，想在文本框默认显示一些文字，使用input的value属性值-->
<tr>
<td>所在的地区</td>
<td><input type="text" value="俺来自山东"></td>
</tr>
<!--第四行，第二个单元格是复选框,name相同-->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love">可爱
<input type="checkbox" name="love">呆萌
<input type="checkbox" name="love">有趣
<input type="checkbox" name="love">博学
</td>
</tr>
<!--第五行，嵌套一个文本域-->
<tr>
<td>自我介绍</td>
<td>
<textarea>
请开始你的自我介绍：
</textarea>
</td>
</tr>
<!--第六行,左边单元格是空的，右边单元格时提交按钮，提交二字可以利用input的value属性来修改为想表达的文本，value="为想表达的文本"-->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!--第七行,第一个单元格为空，第二个单元格为一个默认的复选框-->
<tr>
<td></td>
<td>
<input type="checkbox" checked>我同意注册协议
</td>
</tr>
<!--第八行，,第一个单元格为空，第二个单元格为一个虚拟的超链接-->
<tr>
<td></td>
<td><a href="#">我是会员，立即登录</a></td>
</tr>
<!--第九行，,第一个单元格为空，第二个单元格为一个小标题和一个无序列表-->
<tr>
<td></td>
<td>
<h5>我承诺：</h5>
<ul>
<li>单身</li>
<li>严肃</li>
<li>认真</li>
</ul>
</td>
</tr>
<!--最后直接将表格的边框归为0-->
</table>
</body>
</html>
标签：练习,--,标签,单元格,HTML,自我介绍,综合 来源： https://www.cnblogs.com/yang123-456/p/15413812.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。