title: 三、HTML学习笔记（HTML标签-下）
date: 2024/02/03
表格标签
表格标签是实际开发中非常常用的标签
表格的主要作用
表格主要用于
展示数据，它可以让数据显示的非常归整
表格的基本语法
<table>
<tr>
<td>内容</td>
......
</tr>
......
</table>
<table>是用于定义整个表格的标签<tr>是用于定义表格内行的标签，一个<tr>代表一行，嵌套在<table>标签中，可以存在多个<td>使用来定义行内的单元格标签，一个<td>代表一个单元格，嵌套在<tr>标签中，可以存在多个
-
01-表格基本语法.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>表格基本语法</title> </head> <body> <table> <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr> <tr><td>刘德华</td> <td>男</td> <td>18</td></tr> <tr><td>张学友</td> <td>男</td> <td>18</td></tr> <tr><td>郭富城</td> <td>男</td> <td>18</td></tr> <tr><td>黎明</td> <td>男</td> <td>18</td></tr> </table> </body> </html>
表头单元格标签
一般表格的表头文本都会加粗、剧中显示，这时我们可以使用表头单元格标签
<th>来替换<td>标签作为表头使用。
-
02-表头单元格标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>表头单元格标签</title> </head> <body> <table> <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr> <tr><td>刘德华</td> <td>男</td> <td>18</td></tr> <tr><td>张学友</td> <td>男</td> <td>18</td></tr> <tr><td>郭富城</td> <td>男</td> <td>18</td></tr> <tr><td>黎明</td> <td>男</td> <td>18</td></tr> </table> </body> </html>
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格相对于周围元素的显示位置 |
| border | 1 或 “” | 表格是否显示边框，默认没有边框 |
| cellpadding | 像素值 | 单元格内容与单元格内边框的距离，默认 1 像素 |
| cellspacing | 像素值 | 单元格与单元格内之间的距离，默认 2 像素 |
| width | 像素值 | 表格宽度 |
| hight | 像素值 | 表格高度 |
-
03-小说排行榜案例略
表格结构标签
我们可以使用表格结构标签，将表格分为两大部分，分别是表格头部
<thead>和表格主体<tbody>，这样我们在编写代码的时候表格结构更加清晰
-
04-表格结构标签<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>表格结构标签</title> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>刘德华</td> <td>男</td> <td>18</td> </tr> <tr> <td>张学友</td> <td>男</td> <td>18</td> </tr> <tr> <td>郭富城</td> <td>男</td> <td>18</td> </tr> <tr> <td>黎明</td> <td>男</td> <td>18</td> </tr> </tbody> </table> </body> </html>
合并单元格
在一些特殊情况下，我们需要将横向或者纵向的几个单元格合并为一个
-
合并单元格方式
-
跨行合并：
rowsoan="合并单元格个数" -
跨列合并：
colspan="合并单元格个数"
-
-
目标单元格
-
跨行合并：合并单元格代码写在上方单元格内
-
跨列合并：合并单元格代码写在左侧单元格内
-
-
合并单元格步骤
-
先确定是跨行还是跨列
-
确定跨多少个单元格
-
找到目标单元格，写上合并单元格代码
-
删除多余单元格
-
-
05-合并单元格.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>合并单元格</title> </head> <body> <table width="500" height="250" border="1" cellspacing="0"> <tr> <td></td> <td colsapn="2"></td> <!--<td></td> 多余单元格，删掉--> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <!--<td></td> 多余单元格，删掉--> <td></td> <td></td> </tr> </table> </body> </html>
列表标签
列表同样可以用来展示数据，让数据整洁，有序。根据使用场景不同，列表可分为三大类：
无序列表、有序列表、自定义列表
无序列表
无序列表使用
<ul>标签定义，而列表内的每一个列表项使用<li>标签定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
......
</ul>
-
06-无序列表.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>无序列表</title> </head> <body> <h4>最喜欢的食物</h4> <ul> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> </ul> </body> </html>
有序列表
有序列表使用
<ol>标签定义，列表内的每一个列表项也使用<li>标签定义，但是在显示的时候每一项都是有序的
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
......
</ol>
-
07-有序列表.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>有序列表</title> </head> <body> <h4>最喜欢的食物</h4> <ol> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> </ol> </body> </html>
自定义列表
自定义列表在列表项前没有任何符号，使用
<dl>定义整个自定义列表，<dt>定义列表的表头，<dd>定义列表项
<dl>
<dt>名字</dt>
<dd>对名词的解释1</dd>
<dd>对名词的解释2</dd>
<dd>对名词的解释3</dd>
......
</dl>
-
08-自定义列表.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>自定义列表</title> </head> <body> <dl> <dt>关注我们</dt> <dd>新浪微薄</dd> <dd>官方微信</dd> <dd>联系我们</dd> <!-- 一个 dt 对应多个 dd，可以存在多组 --> <dt>关注我们</dt> <dd>新浪微薄</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl> </body> </html>
表单标签
为什么需要表单
通过让用户填写表单，然后提交到后台，以此达到获取用户信息的目的
表单的组成
在 HTML 中，一个完整的表单通常由
表单域、表单控件、提示信息三要素组成
表单域
表单域就是一个包含表单控件的区域，可以通过<form>标签来定义表单域，再将表单控件定义在表单域内，然后就可以通过提交表单的方式将表单内所有控件获取到的值提交到后台
<form action="后台接受的地址" method="提交方法" name="表单域名字">
表单控件
</form>
表单域属性
属性|属性值|作用
:-:|:-:|:-:
action|url地址|用于指定表单提交到后台服务器的地址
method|GET/POST|用于指定提交表单的方法
name|单词|用于指定表单的名称，当页面存在多个表单时，用来区分
-
09-表单域.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>表单域</title> </head> <body> <form action="url" method="POST" name="form01"> </form> </body> </html>
表单控件
<input> 表单控件
<input type="属性值" />
-
type 属性值
值 描述 button 按钮 checkbox 复选框 file 文件提交 hidden 隐藏字段 image 图片提交 password 密码输入框 radio 单选框 reset 重置表单按钮 submit 提交表单按钮 text 文本输入框 color 颜色选择器 date 年、月、日选择器 month 年、月选择器 number 数字输入框 range 滑动选择器 search 搜索输入框 time 时、分选择器 week 年、周选择器 -
除了 type 属性，还有很多其他属性
属性 属性值 描述 name 自定义 定义 input 控件的名称，单选框和复选框各控件的 name 属性要相同 value 自定义 保存 input 控件的值 checked checked 当 type 的值为 radio 或 checkbox 时，默认选中 maxlength 正整数 输入的最大字符数 placeholder 文本 文字提示 -
10-input表单控件.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>表单域</title> </head> <body> <form action="url" method="GET" name="form01"> <!--文本框--> 用户名：<input type="text" name="username" placeholder="请输入用户名" value="admin" /> <!--密码框--> 密码：<input type="password" name="password" placeholder="请输入密码" maxlength="12" /> <!--单选框--> <!--所有 name 属性的值要相同，才能实现多选一--> 性别：男 <input type="radio" name="sex" value="男" /> 女 <input type="radio" name="sex" value="女" /> <!--复选框--> <!--所有 name 属性的值要相同，才能实现多选--> 爱好：吃饭 <input type="checkbox" name="hobby" checked="checked" value="吃饭" /> 睡觉 <input type="checkbox" name="hobby" value="睡觉" /> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆" /> <!--普通按钮，多用于配合 js 使用，当用户点击执行一些操作--> <input type="button" value=“获取验证码”> <!--文件上传--> 上传头像：<input type="file"> <!--提交表单--> <input type="submit" value="提交表单"> <!--重置表单--> <input type="reset" value="重置表单"> </form> </body> </html>
<label> 标签
<label>标签用于和表单控件进行绑定，当用户点击<label>标签内的文本时，就是在点击与之绑定的表单控件。（通过 for="表单控件的id" 来进行绑定）
<!--通过 for="表单控件的id" 来进行绑定-->
性别：<label for="sex">男</label> <input type="radio" name="sex" id="sex" value="男" />
-
11-label标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>label标签</title> </head> <body> <form action="url" method="GET" name="form01"> <label for="username">用户名:</label> <input type="text" name="username" id="username" placeholder="请输入用户名" value="admin" /> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入密码" maxlength="12" /> 性别： <label for="man">男</label> <input type="radio" name="sex" id="man" value="男" /> <label for="woman">女</label> <input type="radio" name="sex" id="woman" value="女" /> </form> </body> </html>
<select> 表单控件
当某个表单项的值过多，无法使用单选框或复选框时，可以使用
下拉菜单标签 <select>
<select name="" value ="">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
......
</select>
-
12-select标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>select</title> </head> <body> <form action="url" method="GET" name="form01"> 籍贯： <select name="" value =""> <option>上海</option> <!--selected="selected" 默认选中--> <option selected="selected">北京</option> <option>广州</option> <option>深圳</option> </select> </form> </body> </html>
<textarea> 表单控件
当用户输入内容较多时，可以使用
文本域标签<textarea>，可以输入多行内容
<!-- 规定可以显示 3 行，每行 20 个字符，超出之后会显示滚动条-->
<textarea rows="3" cols="20">
文本内容
</textarea>
综合案例
略
查阅文档
略
5040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
