标签：复习 -- day02 HTML 18 68 188 Document 性别
22-表格标签
<!-- border="1" 设置表格边框为一像素
width="500" 宽500px
height="200"
高200px align="center" 居中 left 靠左 right 靠右
cellspacing="0" 单元格间距为0
cellpadding="20" 字和单元格间距为20 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
</table>
</body>
</html>
24-表头单元格 表头单元格 加粗居中
<th> </th>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
</table>
</body>
</html>
25-表格标题 caption 在表格内部写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<caption>个人信息</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
</table>
</body>
</html>
26-跨行跨列合并
<!-- 1.跨行合并 rowspan 跨列合并colspan
2.一般原则线上后下先左后右 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>22</td>
<td colspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</table>
</body>
</html>
27-表格划分结构
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
<tfoot>
<tr>
<td>
表格划分案例
</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
28-列表
<!-- 作用：用来有序的显示图片和文字
分类：有序 无序 自定义 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
无序
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>榴莲</li>
</ul>
有序
<ol>
<li>Java是全世界最好的语言</li>
<li>不PHP才是</li>
<li>Java and php：垃圾Python</li>
</ol>
自定义
<dl>
<dt>北京</dt>
<dd>昌平</dd>
<dd>东城区</dd>
<dd>西城区</dd>
<dt>大明王朝</dt>
<dd>东厂</dd>
<dd>西厂</dd>
<dd>锦衣卫</dd>
</dl>
</body>
</html>
29-表单标签
<!-- input
type="text" 指定格式
text 普通文本
password 密码框
radio 单选框
checkbox: 复选框 默认checked="checked" 被选状态
name="username" ： 指定元件名字
id ：指定id -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
用户名:<input type="text" name="username" id="" value="请输入用户名">
<br> 密码:
<input type="password" />
<br>
性别：<input type="radio" name="sex"> 男
<input type="rasio" name="sex"> 女
<br>
爱好：
<input type="checkbox" name="hobby" id="" checked="checked">吃饭
<input type="checkbox" name="hobby" id="">睡觉
<input type="checkbox" name="hobby" id="">打豆豆
<input type="checkbox" name="hobby" id="">看电视
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="submit" value="重置">
<!-- 图片提交按钮 -->
<input type="image" src="#" alt="">
<input type="file" name="图片上传" id="">
</body>
</html>
30-labal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1 -->
<label>用户名：<input type="text" name="" id=""></label>
<!-- 2 -->
<label for="nc">昵称</label><input type="text" name="" id="nc">
</body>
</html>
31-文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
留言：<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
32-下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
籍贯：
<select name="" id="">
<option value="">--请选择省份--</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">杭州</option>
</select>
</body>
</html>
33-form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- get显示和post不显示提交 -->
<form action="提交到的位置" method="get">
用户名:<input type="text" name="username" id="user" value="请输入用户名">
<br> 密码:
<input type="password" name="password" id="passwd"/>
</form>
<input type="submit" value="提交">
<input type="submit" value="重置">
</body>
</html>
案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘-你在我也在</title>
</head>
<body>
<table width="600" align="center">
<caption> <h4> 青春不常在，抓紧谈恋爱 </h4></caption>
<!-- 1 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男
<input type="radio" name="sex" /><img src="images/women.jpg" /> 女
</td>
</tr>
<!-- 2 -->
<tr>
<td>生日</td>
<td>
<!-- 年份的 -->
<select>
<option>--请选择年--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<!-- 月份的 -->
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 日子 -->
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 3 -->
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" />
</td>
</tr>
<!-- 4行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked"/> 未婚
<input type="radio" name="marry" /> 已婚
<input type="radio" name="marry" /> 离婚
</td>
</tr>
<!-- 5行 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<!-- 6行 -->
<tr>
<td>月薪</td>
<td>
<input type="text" value="10000-20000">
</td>
</tr>
<!-- 7行 -->
<tr>
<td>手机号码</td>
<td>
<input type="text">
</td>
</tr>
<!-- 8行 -->
<tr>
<td>昵称</td>
<td>
<input type="text" >
</td>
</tr>
<!-- 9行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love" /> 妩媚的
<input type="checkbox" name="love" /> 可爱的
<input type="checkbox" name="love" /> 小鲜肉
<input type="checkbox" name="love" /> 老腊肉
<input type="checkbox" name="love" /> 都喜欢
</td>
</tr>
<!-- 10 行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea> 自我介绍 </textarea>
</td>
</tr>
<!-- 11行 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<!-- 12 行 -->
<tr>
<td></td>
<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
</tr>
<!-- 13行 -->
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<!-- 14 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
标签：复习,--,day02,HTML,18,68,188,Document,性别 来源： https://www.cnblogs.com/it-wp/p/14371671.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。