1 表格标签
- <table></table>为表格
- <tr></tr>为每一行，嵌套在table中。
- <td></td>为表格单元格，嵌套在tr中
以下是一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
table为表格 tr为行 td为表格单元格,嵌套在tr中 字母td指表格数据
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>56</td>
<tr>
<td>郭富城</td>
<td>男</td>
<td>51</td>
</tr>
</table>
</body>
</html>以下是效果图。
- <th></th>为表头标签，基本上在表格的第一行，用th标签可以进行加粗居中显示。
以下为效果图，相比于之前来说，表头数据不一样了。
2 表格属性
- align可以将表格定位，left,right和center。
- border可以设置边框即大小。
- cellpadding为像素值，规定单元边沿与其内容之间的空白。
- cellspacing为像素值，规定单元格之间的空白，设置为0可以将单元格之间的空白抹除。
- width和height规定高度和宽度，一般情况下也只需要修改一个。
-
<!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里面去 --> <!-- align表示位置 --> <!-- border表示边框 --> <!-- cellpadding为像素值 规定单元边沿与其内容之间的空白 --> <!-- cellspacing为像素值 规定单元格之间的空白 --> <!-- width表示宽度 height表示高度 --> <table align="center" border="1" cellpadding="5" cellspacing="0" width="800"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>刘德华</td> <td>男</td> <td>56</td> <tr> <td>郭富城</td> <td>男</td> <td>51</td> </tr> </table> </body> </html>
3 表格结构标签
- <thead></thead>表示表格头部。将thead嵌套在表头th所在的tr上。
- <tbody></tbody>表示表格身体。嵌套在除表头以外的部分。
4 合并单元格
- 跨行合并：rowspan="合并单元格的个数",选取最上侧的为目标单元格。
- 跨列合并：colspan=''合并单元格的个数''，选取最左侧的为目标单元格。
- 切记：合并完以后，要将多余的单元格标签删除掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<!-- 跨行合并 rowspan=“ 合并单元格的个数 ” 跨列合并colspan="合并单元格的个数" -->
<!-- 跨行合并 选取最上侧的为目标单元格 -->
<!-- 跨列合并选取最左侧的为目标单元格 -->
<table border="1" cellpadding="30" cellspacing="0" width="500">
<tr>
<td></td>
<td colspan="2"></td>
<!-- 切记要把第三个单元格代码删除 即第三个td标签 -->
<!-- 删除多余单元格标签 -->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- 删除第三行第一个单元格 -->
<td></td>
<td></td>
</tr>
</table>
</body>
</html>5 列表标签
列表标签分为无序列表，有序列表，自定义列表。
- 无序列表指的是没有顺序可言，这是开发工作中最常用的标签。用ul和li。
- 有序列表指的是有顺序的，它会自动给列表的每个元素标注1，2，3等。用ol和li。
- 自定义列表也比较常用，一般用于对术语或名词进行解释和描述，其中的列表项没有任何项目符号。相当于有一个大哥和多个小弟。用dl和dt、dd。
5.1 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<h3>我的兴趣爱好</h3>
<!-- ul标签只能放li -->
<!--li标签中可以放任意标签-->
<ul>
<li>炉石</li>
<li>象棋</li>
<li>军棋</li>
<li>看剧</li>
<li>人渣</li>
<li>小狗</li>
<li><p>小猫</p></li>
</ul>
</body>
</html>5.2 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<!-- ol只能放li li可以放任何标签 -->
<h4>粉丝排行榜</h4>
<ol>
<li>刘德华 10000</li>
<li>刘若英 9000</li>
<li>汤达人 100</li>
</ol>
</body>
</html>5.3 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<!-- 自定义列表一般用于对术语或名词进行解释和描述 -->
<!-- 定义列表的列表项没有任何项目符号 -->
<!-- dl只能放dt和dd -->
<!-- 一般是一个dt和多个dd -->
<dl>
<!-- dt相当于大哥 -->
<!-- dd相当于小弟 -->
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>6 表单标签
表单时为了收集用户信息，通常组成为表单域、表单控件和提示信息。
表单域是一个包含表单元素的区域，利用<form><form>进行定义，以实现用户信息的收集和传递。form会把范围内的表单元素信息提交给服务器。利用action表示url地址，用method表示递交方式，name代表名字。
<form action="demo.php" method="POST" name="name1"></form>6.1 input
input输入表单元素。input中有一个type值。type值可以分为很多：
- 文本框：text，用户可以输入内容。
- 密码输入：password，用户输入看不见的密码。
- 单选按钮：radio，用户可以实现多选一。
- 复选框：checkbox，用户可以实现多选。
- 提交：submit，用户可以将form中的表单元素提交给服务器。
- 重置：reset，用户可以重置所有表单元素内容。
- 上传：file，用户可以上传所需的文件。
- 普通按钮：button，后期需要结合js来使用，比如获取短信验证码等等。
此外，还有一些其他属性：
- name:表单元素，相同属性的名字需要一样。
- value:value可以更改一些名称显示，如submit等，或者是text中初始输出一段话，比如输入用户名等。
- checked:checked="checked"，可以实现初始化页面时候，默认选中一个选项。
- id:可以配合下方label使用。
- name要放id后面，不然无法实现单选。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!-- 表单时为了收集用户信息 -->
<!-- 表单组成通常为表单域、表单控件、提示信息 -->
<!-- 表单域是一个包含表单元素的区域 -->
<!-- form标签用于定义表单域 以实现用户信息的收集和传递
form会把范围内的表单元素信息提交给服务器-->
<!-- action表示url地址 -->
<!-- method表示递交方式 -->
<!-- name代表名字 -->
<form action="demo.php" method="POST" name="name1">
<!-- input输入表单元素 -->
<!-- select下拉表单元素 -->
<!-- textarea文本域元素 -->
<!-- text文本框，用户可以输入内容 -->
<!-- maxlength为最大输入字符长度 -->
<!-- label要写for 对应的要写id=for的内容 -->
<label for="请输入用户名">用户名：</label><input type="text" name="username" value="请输入用户名" maxlength="4"
id="请输入用户名" /><br />
<!-- 密码输入为password，用户看不见输入的密码 -->
密码：<input type="password" name="password" /> <br />
<!-- radio为单选按钮 可以实现多选一 -->
<!-- name是表单元素名字，这里性别单选按钮必须有相同的名字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 />
<!-- 点击提交按钮，可以把form中里面的表单元素提交给服务器 -->
<input type="submit" value="免费注册">
<!-- reset是重置 表单还原为初始状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮button 后期结合Js来进行使用 -->
<input type="button" value="获取短信验证码">
<br />
<!-- 文件域file 使用场景为上传文件使用 -->
上传头像:<input type="file"><br>
<!-- ****label标签用于绑定一个表单元素 当点击label标签内的文本时 浏览器就会自动将焦点转到或者选择对应的表单元素上 用来增加用户体验 -->
<!-- 切记，name要放id后面，不然无法实现单选 -->
<label for="男">男</label><input type="radio" id="男" name="xingbie" >
<label for="女">女</label><input type="radio" id="女" name="xingbie">
</form>
</body>
</html>6.2 label
格式为<label for='' ''></label>，其中for志向对应要写的id,label标签用于绑定一个表单元素，当点击label标签中的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。
6.3 下拉表单标签
下拉表单标签格式为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉表单标签</title>
</head>
<body>
<!-- 别忘记form -->
<!-- select表示加载页面的时候默认选择的选项 -->
<form>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>甘肃</option>
<option>重庆</option>
<option selected="selected">江苏</option>
</select>
</form>
</body>
</html>其中selected="selected"表示页面初始加载时默认值为option里的内容。
6.4 文本域表单标签
textarea表示文本域表单元素。当用户输入较多的内容情况下，我们无法使用文本框表单，可以使用textarea，用于多行文本输入。其中cols表示每行的字符数，rows表示显示的行数。但是，在实际开发中，都是利用css来改变大小的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本域表单元素</title>
</head>
<body>
<!-- 当用户输入较多的内容情况下，我们无法使用文本框表单，可以使用textarea
-->
<!-- textarea标签用于定义多行文本输入的控件 -->
<form>
今日反馈
<!-- cols表示每行中的字符数 -->
<!-- rows表示显示的行数 -->
<!-- ******实际开发中都是用css来改变大小 -->
<textarea cols="50" rows="3">你是谁啊啊啊啊啊啊啊啊
</textarea>
</form>
</body>
</html>7 综合案例
7.1 案例1 小说排名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
</head>
<body>
<table align="center" border="1" cellpadding="5" cellspacing="0" width="500">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.png" width="20" /></td>
<td>345</td>
<td>123</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="up.jpg" width="20" /></td>
<td>124</td>
<td>675432</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="down.png" width="20"></td>
<td>212</td>
<td>23</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>乐游记</td>
<td><img src="down.png" width="20"></td>
<td>23</td>
<td>75645</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="up.jpg" width="20"></td>
<td>121</td>
<td>7676</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg" width="20"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg" width="20"></td>
<td>234</td>
<td>7686</td>
<td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
</body>
7.2 综合案例2 相亲注册网站
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="500" border="1">
<tr>
<td>性别</td>
<td><input type="radio" id="男" name="sex"><label for="男">男 </label><img src="男.jpg" width="20">
<input type="radio" id="女" name="sex"><label for="女">女 </label><img src="女.webp" width="20">
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
</select>
<select>
<option>--请选择月份--</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>--请选择日期--</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>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" name="text"></td><br>
</tr>
<tr>
<td>婚姻状况</td>
<td><input type="radio" id="未婚" name="hunyin"><label for="未婚">未婚</label>
<input type="radio" id="已婚" name="hunyin"><label for="已婚">已婚</label>
<input type="radio" id="离婚" name="hunyin"><label for="离婚">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="小学"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td><input type="checkbox" id="wumei" name="liketype"><label for="wumei">妩媚的</label>
<input type="checkbox" id="keai" name="liketype"><label for="keai">可爱的</label>
<input type="checkbox" id="xianrou" name="liketype"><label for="xianrou">小鲜肉</label>
<input type="checkbox" id="larou" name-="liketype"><label for="larou">老腊肉</label>
<input type="checkbox" id="likeall" name="liketype" checked="checked"><label
for="likeall">都喜欢</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea>自我介绍</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册">
</tr>
</td>
<tr>
<td></td>
<td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺</h4>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
扫一扫
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
