目录
一.表格标签<table></table>
📝无序列表(重要)<ul><li>
📝有序列表(理解）<ol><li>
📝自定义列表(重点）<dl><dt><dd>
四.表单标签<form></form>
0.小小de前言
vscode中 标签名是红色 属性是黄色 属性值是绿色
一.表格标签
作用:表格用来显示，展示数据，不是来布局页面的，可以让数据显示非常的规整，可读性非常好，后台展示数据的时候，能够熟练运用表格显得很重要。
👩🏻💻表格的基本语法
标签介绍:
- <table></table>标签用于定义表格的
- <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
- <td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
- 字母td指表格数据(table date),即数据单元格的内容
👩🏾💻表头单元格标签
一般表头单元格位于表格的第一行或者第一列，表头单元格里面的文本内容加粗居中显示
<th>标签表示HTML表格的表头部分（table head的缩写)
表头单元格也是单元格，常用于表格的第一行，突出重要性，表头单元格里面的文字会加粗居中显示
👩🏻💻表格的属性
这些属性要写到表格标签table里面去
👩🏾💻align
属性值:left页面的左对齐 center居中对齐 right右对齐
👩🏾💻border
1或者" ",表示1像素的边框，""默认没有边框
👩🏾💻cellpadding
单元格内部的间距（文字与单元格边框之间的距离）
规定单元边沿与其内容之间的空白，默认1像素
👩🏾💻 cellspacing
单元格之间的距离(单元格和单元格之间的距离）
规定单元格之间的空白，默认2像素
👩🏾💻width
表格的宽度
👩🏾💻height
表格的高度
👩🏻💻表格结构标签
使用场景:因为表格可能很长，为了更好表示表格的语义，可以将表格分割成表格头和表格主体俩部分
- <thead>标签表格的头部标签，内部必须嵌套<tr>标签，ps:一般位于第一行用<th>表头单元格标签
- <tbody>标签表格的主体区域 用于定义表格的主体
以上<thead>和<tbody>都包含在<table>标签中
案例:小说排行榜
🚩成品:
🚩案例分析:
🚩制作过程:
- 表格属性align居中，height控制表格的高度，border设置表格的边框，cellpadding设置文字中与表格边框之间的距离，cellspacing设置边框和边框之间的距离
- 表格的基本语法，<table>标签里包含<tr>或者<th>,然后<tr>和<th>标签中都镶嵌<td>，第一行表头用th普通单元格，第二行开始用td普通的单元格
- 单元格内可以放任何元素（文字，链接，图片）
图片用到<img>标签:<img src=""/>
链接用<a>标签: <a href="#">图片/贴吧/文字</a>
🚩实现代码
<!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" height="50" border="1" cellpadding="10" 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="dowm.png" /></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="dowm.png" /></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.png" /></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>二.合并单元格
💻合并单元格的方式
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
💻目标单元格(写合并代码)
跨行:最上侧单元格为目标单元格，写合并代码
跨列:最左侧单元格为目标单元格，写合并代码
💻合并单元格三部曲
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格数量。ps:<td colspan="2"></td>
- 删除多余的单元格
🖥️跨列合并单元格
1.将第一行后俩个格子合并(也就是跨列合并单元格）
2.确定是跨列合并，所以目标单元格是最左侧的单元格
在第一行的第二列就在里面写上合并（第一行是表头单元格用<th>标签）
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>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<th></th>
<th colspan="2"></th>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>三.列表标签
表格是用来显示数据的，列表就是用来布局的
列表最大特点就是整齐，整洁，有序，它作为布局会更加自由和方便
三种类型：无序列表，有序列表，自定义列表
📝无序列表(重要)
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
📖无序列表基本语法
- 无序列表的各个列表之间没有顺序级别之分，是并列的
- <ul></ul>只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
- <li></li>之间相当于一个容器，可以容纳所有元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
📝有序列表(理解）
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义
在HTML标签中，<ol></ol>标签用于定义有序列表,，列表排序以数字来显示，并且使用<li>标签来定义列表项
📖有序列表基本语法
- <ol></ol>只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的
- <li></li>之间相当于一个容器，可以容纳所有元素
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
📝自定义列表(重点）
自定义列表的使用场景:自定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号，一个大标题，然后后面都是围绕这个大标题来进行的
📖自定义列表基本语法
在HTML标签中，<dl></dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字)和<dd>（描述每一个项目/名字)一起使用
<dl></dl>只能包含<dt></dt>
<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
四.表单标签
现实中的表单，我们去银行办理信用卡填写的单子
网页中的表单，为什么需要表单？那是因为我们需要收集用户的数据。
🔑表单的组成
在HTML中，一个完整的表单通常由表单域，表单控件(也称为表单元素）和提示信息三个部分构成
🔐表单域
表单域是一个包含表单元素的区域.
在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递，
<form>标签会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域的名称">
各种表单元素控件
</form>
🔐 表单控件(表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素
🗝️input输入表单元素
表单元素中，<input>标签用于收集用户数据
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式(可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等)
- <input>标签是单标签
- type属性设置不同的属性值用来指定不同的控件
- type属性是<input>标签的必须属性
🎈text属性值
<!-- text 文本框 用户可以在里面输入任何文本 -->
用户名:<input type="text" />
🎈password属性值
定义密码字段。该字段中的字符被掩码
<!-- password 密码框。用户看不见输入的密码 -->
密码:<input type="password" /><br />
🎈radio属性值
单选按钮，可以实现多选
<!-- radio 单选按钮 可以实现多选一 -->
性别: 男<input type="radio"> 女<input type="radio"> <br />
🎈checkbox属性值
<!-- checkbox 多选按钮 复选框 可以实现多选 -->
爱好:吃饭<input type="checkbox"> 睡觉 <input type="checkbox">敲代码<input type="checkbox">
🎈submit属性值
将表单域里面的表单值送给服务器（提交按钮）
<!-- submit 提交按钮 表单域里面的表单值送给服务器 -->
<input type="submit" />
value值可以改变方框里面的"提交"俩字
🎈reset属性值
定义重置按钮。重置按钮会清除表单中的所有数据。
<!-- reset重置按钮 可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
🎈button属性值
定义可点击按钮，后期结合js来操作（用于发送手机验证码短信）
<!-- button普通按钮 -->
<input type="button" value="获取短信验证码"/>
🎈file属性值
<!-- file上传文件按钮,供文件上传 -->
上传头像:<input type="file">
除了input属性之外还有以下四个属性与input配套使用
💡name属性
将选项后面加个name属性，必须
name 是表单元素的名字 这里性别单选按钮必须由相同的名字name才能实现多选1
<!-- name 是表单元素的名字 这里性别单选按钮必须由相同的名字name才能实现多选1 -->
性别: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br />
实现单选，因为拥有相同的名字'sex"
单选按钮和复选按钮必须名字相同才行，单选按钮名字相同可以实现多选1，复选按钮必须给名字，但是依旧是多选
💡value属性
💡checked属性
单选按钮和复选按钮可以设置checked属性，当页面打开的时候就可以默认选中这个按钮
由于单选按钮只能选中一个，而复选按钮可以默认多个
在radio单选按钮中的男实现了checked默认，在checkbox多选按钮中的敲代码实现了checkbox默认。
进入网页后直接默认这个按钮
💡maxlength属性
规定输入字段中的字符最大长度
最大限制只能输入6个
- name和value是每个表单元素都有的属性值，主要是给后台人员使用的
- name是表单元素的名字，要求单选按钮和复选按钮要有相同的name值
- checked属性主要针对单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素
- maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
👉<label>标签
<label>标签为input元素定义标注(标签)
有些按钮比较小，点起来有些麻烦，所以就可以点文字或者图片即可
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点(光标）转到或者选择对应的表单元素上，用来增加用户体验
核心:<label>标签的for属性应当与相关的id属性相同
只要for属性对应的属性值和id属性对应的属性值相同，那么<label><input>标签就对应。
<label><input>标签搭配使用
🗝️select下拉表单元素
使用场景，在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
- <select>中至少有一对<option>
- 在<option>中定义 select="selected"时，当前项即为默认选中项
🗝️textarea文本域元素
使用场景:当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签，这不像文本框，文本域可以写多行。使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板，评论
在表单元素中，<textarea>标签是用于定义多行文本输入的控件
通过<textarea>标签可以轻松的实现多行文本输入框，
cols="每行中的字符数"，rows="显示的行数" 我们实际开发中不会使用，都是用CSS来改变大小
这个表示每行50个字符数，一共5行。
案例:注册页面
<!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>
<table width="500">
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<label for="nan"><img src="../image/man.png" /> 男</label>
<input type="radio" name="sex" id="nan">
<label for="nv"><img src="../image/woman.png"> 女</label>
<input type="radio" name="sex" id="nv">
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">
--请选择年--
</option>
<option>
2000
</option>
<option>
2001
</option>
<option>
2002
</option>
<option>
2003
</option>
</select>
<select>
<option selected="selected">
--请选择月--
</option>
<option>
6
</option>
<option>
7
</option>
<option>
8
</option>
<option>
9
</option>
<option>
10
</option>
</select>
<select>
<option selected="selected">
--请选择日--
</option>
<option>
1
</option>
<option>
2
</option>
<option>
3
</option>
<option>
4
</option>
<option>
5
</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>
所在地区
</td>
<td>
<input type="text" name="username" value="北京">
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>
婚姻状况
</td>
<td>
<input type="radio" name="marry" id="nomarry">
<label for="nomarry">未婚</label>
<input type="radio" name="marry" id="marry">
<label for="marry">已婚</label>
<input type="radio" name="marry" id="divoce">
<label for="divoce">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>
学历
</td>
<td>
<input type="text" name="username" value="幼儿园">
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>
喜欢的类型:
</td>
<td>
<input type="checkbox" name="username" id="enchanting">
<label for="enchanting">妩媚的</label>
<input type="checkbox" name="username" id="cute">
<label for="cute">可爱的</label>
<input type="checkbox" name="username" id="handsome">
<label for="handsome">小鲜肉</label>
<input type="checkbox" name="username" id="old">
<label for="old">老腊肉</label>
<input type="checkbox" name="username" id="like">
<label for="like">都喜欢 </label>
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>
自我介绍
</td>
<td>
<textarea cols="50" rows="5">自我介绍</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td>
</td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>
</td>
<td>
<input type="checkbox" checked="checked" name="username">我同意注册条款和会员加入标准
</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>
你真的很帅气为什么常说自己的外貌丑 --------送给我的张老师(师傅）
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
