表格
表格标签
表格是实际开发中非常常用的标签：
1.表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理。
总结：表格不是用来布局的，而是用来展示数据的。
2.表格的基本语法
代码
<!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 -->
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>张学友</td> <td>男</td> <td>58</td></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>56</td></tr>
<tr><td>黎明</td> <td>男</td> <td>57</td></tr>
</table>
</body>
</html>效果
3.表头单元格
一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分(table head的缩写)
总结：
表头单元格也是单元格，常用于表格第一行，突出重要性，里面的文字会加粗居中显示 。
代码
<!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 -->
<!-- th表头单元格 加粗居中 -->
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张学友</td> <td>男</td> <td>58</td></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>56</td></tr>
<tr><td>黎明</td> <td>男</td> <td>57</td></tr>
</table>
</body>
</html>效果
4.表格属性
表格标签这部分属性我们实际开发中不常用，后面通过CSS设置 。
目的有两个：
1.记住这些英语单词，后面CSS会使用。
2.直观感受表格的外观形态
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left(默认)、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或" " | 规定表格单元是否拥有边框，默认为" "，表示没有边框 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白，默认1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认1px |
| width | 像素值或百分比 | 规定表格的宽度 |
代码
<!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>
<!-- 这些属性要写到表格标签table 里面去(不提倡，后续用CSS) -->
<!-- align对齐 默认left -->
<!-- cellpadding默认1px 文字和单元格边框之间的距离 -->
<!-- cellspacing默认2px 单元格之间的空白距离 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="400">
<!-- 表格是嵌套关系 表格是用来展示数据的 -->
<!-- 一行tr 三个单元格td -->
<!-- th表头单元格 加粗居中 -->
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张学友</td> <td>男</td> <td>58</td></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>56</td></tr>
<tr><td>黎明</td> <td>男</td> <td>57</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>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</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="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html> 案例分析效果图
5.表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格表头和表格主体两大部分。
在表格标签中，分别用<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域。这样可以更好的分清表格结构。
6.合并单元格
合并单元格代码
<!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>
<table border="1" cellspacing="0" width="500" height="249">
<tr>
<th></th>
<th colspan="2"></th>
<!-- <th></th> 删除多于单元格-->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> 删除多于单元格-->
<td></td>
<td></td>
</tr>
</table>
</body>
</html>效果展示
7.表格总结
表格学习整体可以分为三大部分
1.表格的相关标签
2.表格的相关属性
3.合并单元格
合并单元格三部曲：
1.先确定是跨行还是跨列合并。
2.找到目标单元格。写上合并方式 = 合并的单元格数量。比如:
<!--跨行合并2个单元格-->
<td rowspan="2"></td>
<!--跨列合并2个单元格-->
<td colspan="2"></td>
3. 删除多于的单元格
列表标签
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
无序列表（重点）
举例
代码
<!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>
<h4>你喜欢的食物有哪些？</h4>
<ul>
<!-- li前面默认有一个小黑圆点 不用关心CSS会去掉的 li之间没有先后顺序 -->
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>
<p>123</p>
</li>
</ul>
</body>
</html>效果
li前面默认有一个小黑圆点，不用关心CSS会去掉的 。
li之间没有先后顺序
有序列表
<li>前面会自动编号，后续通过CSS去样式。
代码
<!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>
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华 10000</li>
<li>刘若英 1000</li>
<li>pink老师 1</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>自定义列表</title>
</head>
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>效果
列表总结
| 标签名 | 定义 | 说明 |
|---|---|---|
| <ul></ul> | 无序标签 | 里面只能包含li，没有顺序，使用较多，li里面可以包含任何标签 |
| <ol></ol> | 有序标签 | 里面只能包含li，有顺序，使用相对较少，li里面可以包含任何标签 |
| <dl></dl> | 自定义列表 | 里面只能包含dt和dd，dt和dd里面可以放任何标签 |
注意：
1.学会什么时候用无序列表，什么时候用有序列表。
2.无序列表和自定义列表代码怎么写？
3.列表布局在学习完CSS后再来完成。
表单标签
表单常见于注册页面，用来收集用户信息。
1.为什么需要表单
使用表单目的是为了收集用户信息。
在我们的网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
2.表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也成为了表单元素）和提示信息3个部分构成。
3.表单域
表单域常见属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域。 |
4.表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单输入或者选择的内容控件。主要从三部分讲解：
1.input输入表单元素
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框。 |
| file | 定义输入字段和“浏览”按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段，该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮，重置按钮会清楚表单中的所有数据。 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。 |
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称。 |
| value | 由用户自定义 | 规定input元素的值。 |
| checked | checked | 规定此input元素首次加载时应当被选中。 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
1.name和value是每个表单元素都有的属性值，主要给后台人员使用。
2.name表单元素的名字，要求 单选按钮和复选框要有相同的name值。
3.checked属性主要针对于单选按钮和复选框，主要作用——打开页面，就要可以默认选中某个表单元素。
4.maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。
代码
<!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>input 表单元素</title>
</head>
<body>
<form action="xxx.php" method="get" >
<!-- value值只在文本框中可以看到效果,譬如单选按钮复选按钮是看不到效果的,给后台人员使用的 -->
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/><br>
<!-- password 密码框 用户看不见输入的密码 -->
<!-- 可以加value值，不过是以···的形式展现 -->
密码：<input type="password" name="pwd"><br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- 这里存在问题，性别都可以选上 -->
<!-- name是表单元素的名字，这里性别单选按钮必须有相同的名字，才可以实现多选一 -->
<!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"><br>
<!-- checkbox复选框，可以实现多选 复选框也可以单独写一个，比如同意注册标准-->
<!-- 复选框也应该有相同的name值 -->
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
<!-- submit就是提交，可通过value值进行修改 -->
<!-- 点击了提交按钮，可以把表单域form里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- reset就是重置，可通过value值进行修改 -->
<!-- reset可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新设置"><br>
<!-- 普通按钮 button 不提交数据 后期结合js 搭配使用 -->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像：<input type="file">
</form>
</body>
</html>效果
一些提问
<label>标签
<label>（标注、标签）不属于表单元素，但经常与表单搭配使用。
代码
<!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>label标签</title>
</head>
<body>
<form>
<label for="text">用户名：</label>
<input type="text" id="text"><br>
<input type="radio" id="nan" name="sex">
<label for="nan"> <img src="images/man.jpg"> 男</label>
<input type="radio" id="nv" name="sex">
<label for="nv"> <img src="images/women.jpg"> 女</label>
</form>
</body>
</html>效果
2.select下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<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>select下拉表单</title>
</head>
<body>
<form>
籍贯：
<select>
<!-- select中最少包含一对option -->
<option>山东</option>
<option selected="selected">陕西</option>
<option>青海</option>
<option>新疆</option>
</select>
</form>
</body>
</html>效果
3.textarea文本域元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，由此我们可以使用<textarea>标签。
在表单元素中，<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>textarea 文本域</title>
</head>
<body>
<form>
今日反馈：
<textarea cols="50" rows="5">pink老师，我知道这个反馈留言是textarea来做的。</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>注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="600">
<!-- 第一行 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan"><img src="images/man.jpg">男 </label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="images/women.jpg">女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" value="未婚" id="weihun" checked="checked"><label for="weihun">未婚</label>
<input type="radio" name="marry" value="已婚" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="marry" value="离婚" 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="leixing">妩媚的
<input type="checkbox" name="leixing">可爱的
<input type="checkbox" name="leixing">小鲜肉
<input type="checkbox" name="leixing">老腊肉
<input type="checkbox" name="leixing"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>
<ul>
<h4>我承诺</h4>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>效果展示
查阅文档
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
