2022-01-18 html第二天
2022-01-18 本文已影响0人
学习生信的小兔子
表格标签
表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据
的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的.
表格的基本语法
<!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>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>小张</td><td>男</td><td>12</td></tr>
<tr><td>小李</td><td>女</td><td>13</td></tr>
<tr><td>小宋</td><td>男</td><td>14</td></tr>
</table>
</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>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="249">
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>小张</td><td>男</td><td>12</td></tr>
<tr><td>小李</td><td>女</td><td>13</td></tr>
<tr><td>小宋</td><td>男</td><td>14</td></tr>
</table>
</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>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="700" height="249">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关连接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"> </td>
<td>345</td>
<td>123</td>
<td>
<a href="http://www.tieba.com" target="_blank">贴吧</a>
<a href="#" >图片</a>
<a href="#" >百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="down.jpg"> </td>
<td>124</td>
<td>675432</td>
<td>
<a href="http://www.tieba.com" target="_blank">贴吧</a>
<a href="#" >图片</a>
<a href="#" >百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="up.jpg"> </td>
<td>124</td>
<td>675432</td>
<td>
<a href="http://www.tieba.com" target="_blank">贴吧</a>
<a href="#" >图片</a>
<a href="#" >百科</a>
</td>
</tr>
</table>
</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>Document</title>
</head>
<body>
<table width="500" height="250" 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>
</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>Document</title>
</head>
<body>
<h4>数字字母</h4>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</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>Document</title>
</head>
<body>
<h4>粉丝排行量</h4>
<ol>
<li>a111</li>
<li>b11</li>
<li>c1</li>
</ol>
</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>Document</title>
</head>
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</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>Document</title>
</head>
<body>
<form action="demo.php" method="POST" name="name1">
</form>
</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>Document</title>
</head>
<body>
<form>
用户名：<input type="text"> <br>
密 码 ：<input type="password"><br>
<!-- radio 单选按钮 可以实现多选一-->
性 别 ：男<input type="radio"> 女<input type="radio"><br>
<!-- cehckbox 复选框 可以实现多选 -->
爱 好 ：吃饭<input type="checkbox"> 睡觉<input type="checkbox">
</form>
</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>Document</title>
</head>
<body>
<form>
用户名：<input type="text" name="username" value="请输入用户名"> <br>
密 码 ：<input type="password" name="pwd"><br>
<!-- radio 单选按钮 可以实现多选一-->
性 别 ：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br>
<!-- cehckbox 复选框 可以实现多选 -->
爱 好 ：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby">
</form>
</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>Document</title>
</head>
<body>
<form action="xxx.php" method="get">
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
密 码 ：<input type="password" name="pwd"><br>
<!-- radio 单选按钮 可以实现多选一-->
性 别 ：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"><br>
<!-- cehckbox 复选框 可以实现多选 -->
爱 好 ：吃饭<input type="checkbox" name="hobby" checked="checked"> 睡觉<input type="checkbox" name="hobby"><br>
<!-- 点击了提交按钮 就可以把 表单域form里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!--重置元素 可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新设置">
<!-- 普通按钮 button -->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像 <input type="file">
</form>
</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>Document</title>
</head>
<body>
<label for="text">用户名：</label> <input type="text" id="text">
<input type="radio" id="nan"> <label for="nan">男</label>
<input type="radio" id="nv"> <label for="nv">女</label>
</body>
</html>
select下拉表单选项
<!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>
<form>
籍贯
<select>
<option>贵州</option>
<option>四川</option>
<option>重庆</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>
textarea文本域标签
<!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>
<form>
反馈
<textarea cols="50" rows="5">我不想摸鱼</textarea>
</form>
</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>Document</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="600">
<!-- 第一行 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked" id="nan"> <img src="images/man.jpg"> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"> <img src="images/women.jpg"> <label for="nv">女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select >
<option >--请选择年份--</option>
<option >1999</option>
<option >2000</option>
<option >2001</option>
</select>
<select >
<option >--请选择月--</option>
<option >10</option>
<option >11</option>
<option >12</option>
</select>
<select >
<option >--请选择日--</option>
<option >01</option>
<option >02</option>
<option >03</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" checked="checked" name="marry" id="weihun"> <label for="weihun">未婚</label>
<input type="radio" name="marry" id="yihun"> <label for="yihun">已婚</label>
<input type="radio" name="marry" id="lihun"> <label for="lihun">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<!-- 第六行 -->
<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" checked="checked"> 都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>
自我介绍
</td>
<td>
<textarea>自我介绍</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td> </td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>
<td> </td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<!-- 第十一行 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
