我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

前端基础第三天-王隆-20230412

[复制链接]
王隆 发表于 2023-4-12 23:40:31 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、今日知识点
        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来控制
                                               

回复

使用道具 举报

关注0

粉丝0

帖子96

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026