表格 选项 文本框 列表 等功能实现
在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing= "0" width="500" height="249">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>江龙杰</td> <td>男</td> <td>20</td></tr>
<tr><td>江龙杰</td> <td>男</td> <td>20</td></tr>
<tr><td>江龙杰</td> <td>男</td> <td>20</td></tr>
<tr><td>江龙杰</td> <td>男</td> <td>20</td></tr>
</table>
<br>
<table align="center" border="1" cellpadding="0" cellspacing= "0" width="500" height="249">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>加入搜索</th>
<th>最近七天</th>
<th>相关连接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>上升</td>
<td>456</td>
<td>123</td>
<td><a href="#">百度百科</a></td>
</tr>
</table>
<br>
<table align="center" width="500" height="200" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<h4>你喜欢的食物</h4>
<!-- 无序列表 -->
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼</li>
</ul>
<h4>你喜欢的明星</h4>
<!-- 有序列表 -->
<ol>
<li>刘德华 10000</li>
<li>刘德华 10000</li>
<li>刘德华 10000</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>新浪微博</dd>
<dd>新浪微博</dd>
</dl>
<form>
<!-- 表单元素名 和 值 最大输入不得超过几个字-->
用户名:<input type="text" name="username" value="请输入用户名" maxlength="20"> <br>
密码 :<input type="password"><br>
性别:男 <input type="radio"> 女 <input type="radio">
<!-- 可以选择默认值 让打卡页面时默认选择状态 -->
人妖 <input type="radio" name="人妖" checked="checked"><br>
吃饭 <input type="checkbox"> 睡觉<input type="checkbox">
打豆豆<input type="checkbox"><br>
<!-- 提交 重置 -->
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码">
上传头像 :<input type="file">
</form>
<br>
<!-- label 标签 实现点文字也能选 -->
<label for ="text">用户名</label> <input type="text" id="text">
<input type="radio" id="nan" name="sex"> <label for = "nan">男</label>
<input type="radio" id="nv" name="sex"> <label for = "nv">女</label>
<br>
籍贯:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
写东西的文本框
<textarea cols="50" rows="50">
你可以在里面写一大段文字!
</textarea>
</body>
</html>
相亲界面实战!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世纪佳缘,你在我也在!</title>
</head>
<body>
<h1>青春不常在,抓紧谈恋爱!</h1>
<table width="500" >
<tr >
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan" > <label for="nan">男</label>
<input type="radio" name="sex" id="nv" > <label for="nv">女</label>
</td>
</tr>
<!-- line 2 -->
<tr>
<td>生日:</td>
<td>
<select >
<option>请选择年份</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<select >
<option>请选择月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select >
<option>请选择日期</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- line 3 -->
<tr>
<td>所在地区:</td>
<td><input type="text"></td>
</tr>
<!-- line 4 -->
<tr>
<td>婚姻状态:</td>
<td>
未婚<input type="radio" name="marry"> 已婚<input type="radio"name="marry"> 离异<input type="radio"name="marry">
</td>
</tr>
<!-- line 5 -->
<tr>
<td>学历:</td>
<td><input type="text"></td>
</tr>
<!-- line 6 -->
<tr>
<td>喜欢的类型</td>
<td>性感 <input type="checkbox"> 妩媚<input type="checkbox">
清纯<input type="checkbox"></td>
</tr>
<!-- line 7 -->
<tr>
<td>自我介绍:</td>
<td><input type="text"></td>
</tr>
<!-- line 8 -->
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<!-- line 9 -->
<tr>
<td></td>
<td> <input type="checkbox">我同意注册条款</td>
</tr>
<!-- line9 -->
<tr>
<td></td>
<td><a href="#">我已注册,点此立即登陆!</a></td>
</tr>
<!-- line10 -->
<tr>
<td></td>
<td>
<h4>我承诺!</h4>
<ul>
<li>年满18,单身</li>
<li>抱着严谨的态度</li>
<li>真诚寻求另一半!</li>
</ul>
</td>
</tr>
</table>
</body>
</html>