菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础第三天-王隆-20230412 [打印本页]

作者: 王隆 时间: 2023-4-12 23:40
标题: 前端基础第三天-王隆-20230412
一、今日知识点
1 表格标签
1.1 表格的作用
可以更加清晰的展示数据，增强可读性
1.2 表格标签的基本语法
1、<table></table>定义表格标签
2、<tr></tr>标签用于定义表格中的行（table row），需要嵌套在<table></table>标签中使用
3、<td></td>标签用于定义行中单元格（table data），必须其那套在<tr></tr>标签中
4、<th></th>标签用于定义行中内容是否是表头内容，表头的内容会加粗并且居中对齐
1.3 表格标签中常用的属性
1、align规定表格的相对于周围元素的水平对齐方式
属性值：left，center，right
2、border固定表格的是否拥有边框，默认没有
属性值：1代表有框
3、width表示宽度
属性值：像素值
4、height规定表格的高度
属性值：像素值
5、cellpadding 控制单元格内容和单元格边框之间的距离（一般设置为0）
属性值：像素值，默认为1
6、cellspacing 控制单元格和单元格之间的距离（一般设置为0）
属性值：像素值，默认为1
1.4 合并单元格
合并单元格的步骤
1、找到目标单元格
2、确定是跨行还是跨列合并
跨行合并rowspan = “被合并单元格的个数”，合并单元格的个数最少为2
跨列合并colspan = “被合并单元格的个数”，合并单元格的个数最少为2
3、将被合并的单元格删除掉
2 列表标签
2.1 无序列表
注意点：
1、无序列表的各个列表之间是没有级别之分的
2、<ul></ul>标签中只能嵌套<li></li>标签，不容许嵌套其他的标签
3、<li></li>相当于一个盒子或者容器，可以容纳所有的元素
4、无序列表有自己本身的样式，后期可以通过css处理掉
2.2 有序列表
注意点：
1、有序列表的各个列表之间是有级别之分，会有数字标识
2、<ol></ol>标签中只能嵌套<li></li>标签，不容许嵌套其他的标签
3、<li></li>相当于一个盒子或者容器，可以容纳所有的元素
4、有序列表有自己本身的样式，后期可以通过css处理掉
2.3 自定义列表
注意点：
1、<dl></dl>用于定义一个自定义列表
2、<dt></dt>定义项目/名字
3、<dd></dd>标签来定义对项目的解释/描述
4、一般情况下一个<dl></dl>标签中只能放一个<dt></dt>，但是可以有多个<dd></dd>
3 表单标签
为什么需要表单：为了手机用户信息，就会用到表单
表单域：
概念：是一个包含表单元素的区域，在HTML中，使用<form></form>标签来定义表单域，在表单域中的信息会发送给服务器
常用的属性：
action
属性值：URL地址，用于指定接受并处理表单内容的服务器地址
method
属性值：get/post，用于指定表单数据传递的方式，取值为get/post
name
属性值：名称，用于区分同一个页面中不同的表单
表单控件
在表单域中可以定义多种表单元素，可以让用户输入相关内容
input表单元素
input中的type属性使用
属性值：
1、text定义单行输入文本框，输入文本内容
2、password定义密码输入框，输入的内容加密显示
3、button定义按钮，一般会和JS联合使用
4、file定义文件提交按钮
5、radio定义单选按钮（一组radio标签要有相同的name值）
6、checkbox定义复选框（一组rcheckbox标签要有相同的name值）
7、submit定义提交按，提交按钮会将表单的数据提交给服务器
8、reset定义重置按钮，清空表单元素中的所有数据
input表单元素的其他属性
1、name 和 value是每个表单元素都有的属性值
2、name可以设置表单元素的名字，要求相同的单选按钮或者复选框要相同的name值
3、value规定input保单元素的值。可以修改按钮的内容。也可与给文本输入框设置默认文本
4、checked可以在页面在重新加载的时候默认选中某个的单元元素，一般只针对单选按钮和复选框
5、maxlength规定输入框中最大符数，一般写正整数
label标签的使用
1、lable标签用于绑定一个表单元素，当点击该标签内的文件时，浏览器会自动聚焦到对应的表单元素上，了增加用户体验
2、lable标签中的for属性的属性值和绑定的单元格要一致
select表单元素
1、在页面中，如果有多个选项让用户去选择，还可以节约页面空间，就能使用select标签定义下拉列表
2、select标签定义下拉列表
3、option标签定义列表中的选项，一个select标签至少应该有一个option标签
4、如果要默认选中摸个选项，就给option标签添加selected属性值，属性值为selected
textarea表单元素
1、textarea文本域标签，一般用在评论区或者用户输入内容较多的时候（留言板）
2、rows：控制文本域中的文字应该显示多少行
3、cols：控制文本域中的文字应该显示多少列
4、实际开发过程中一般不会使用cols和rows控制文本域的大侠，会使用width和height来控制

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)