前端开发:表格、列表、表单

news2025/1/13 7:52:53

1.表格标签

align 是表格相对于周围元素的对齐方式. align="center" (表格相对于网页剧中对齐)

border 表示边框. 1px 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸

table 标签: 表示整个表格

tr: 表示表格的一行 t是table的缩写 r是row行的缩写;依次类推;

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域         //thead就是为了区分表头和表身体的,只是范围;

tbody: 表格得到主体区域.

单元格合并

跨行合并 : rowspan="n"
跨列合并 : colspan="n"
1. 先确定跨行还是跨列
2. 找好目标单元格 ( 跨列合并 , 默认向右合并 ; 跨行合并 , 默认向下合并 )
3. 删除的多余的单元格
 举例:
<table align = "center" border = "1" cellpadding = "20" cellspacing = "0" width = "500"
height = "500" >
<thead>
    <tr>
        <th> 姓名 </th>
        <th> 性别 </th>
        <th> 年龄 </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td> 张三 </td>
        <td rowspan="2" > </td>
        <td> 10 </td>
    </tr>
  <tr>
        <td> 张三 </td>
        <td> </td> //注释掉
        <td> 10 </td>
    </tr>
  <tr>
        <td> 张三 </td>
        <td colspan="2" > </td>
        <td> 10 </td>
    </tr>
</tbody>
</table>

2.列表标签

2.1无序列表

 快捷键:ul>li*4 回车        //快速生成4个标签

ul:“unordered list”(无序列表)

li:list列表

<h1>这是无序标签</h1>

<!-- disc  square   circle -->        //type类型有3种;实心圆,方块,空心圆;

    <ul type="disc">        

        <li>这是内容1</li>

        <li>这是内容2</li>

        <li>这是内容1</li>

        <li>这是内容1</li>

    </ul>

2.2有序列表 

ol:order list        //有序列表

li:list         //列表

他自带序号;也可以通过type属性进行自我设置;变成罗马数字

<!-- a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号

    I 表示大写罗马数字编号 1 表示数字编号(默认) -->

<ol type="a" start="2"> //从第二个数开始计数;

        <li>你好</li>

        <li>hello</li>

        <li>hi</li>

</ol>

 2.3自定义列表

<dl>自定义一个列表

<dt> 这个列表叫什么名字

<dd>每一个列表是什么;

 <h1>这是一个自定义列表</h1>

    <dl>

        <dt>自定义列表显示内容</dt>

        <dd>猫</dd>

        <dd>兔</dd>

        <dd>阿叶君</dd>

    </dl>

3.表单标签 

使用表单标签来完成和服务器的交互;

表单域 : 包含表单元素的区域 . 重点是 form 标签 . //表示的是一个区域标签;里面填写各种东西
表单控件 : 输入框 , 提交按钮等 . 重点是 input 标签

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2275879.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《机器学习》——sklearn库中CountVectorizer方法(词频矩阵)

CountVectorizer方法介绍 CountVectorizer 是 scikit-learn 库中的一个工具&#xff0c;它主要用于将文本数据转换为词频矩阵&#xff0c;而不是传统意义上的词向量转换&#xff0c;但可以作为词向量转换的一种基础形式。用于将文本数据转换为词频矩阵&#xff0c;它是文本特征…

session-manager-plugin: command not found 解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Linux之读者写者模型与特殊锁的学习

目录 读者写者模型 特殊锁 悲观锁 自旋锁 在前几期&#xff0c;我们学习了多线程的生产者和消费者模型&#xff0c;生产者和消费者模型中&#xff0c;有三种关系&#xff0c;两个角色&#xff0c;一个场所&#xff0c;那么读者写者模型和生产者消费者模型有什么关联吗&…

期刊(中英),期刊分区,期刊所在数据库(中英),出版商区别和联系

目录 对期刊、分区、数据库、出版商整体了解期刊&#xff08;中英&#xff09;期刊分区期刊所在数据库总结 出版商 对期刊、分区、数据库、出版商整体了解 下图是我对这四部分的一个理解&#xff0c;其中期刊根据论文使用语言分为中英两种&#xff0c;期刊分区是用来评判论文质…

数学函数的参数和返回值探秘

数学函数的参数和返回值探秘 一、数学函数的参数1.1 隐式类型转换1.2 隐式类型转换的秘密 二、数学函数的返回值 本文所说的数学函数单指<math.h>中的系统函数&#xff0c;这些函数对参数和返回值的要求与其他类函数是有一点不同的。尤其是参数部分&#xff0c;是有值得深…

炸砖块游戏的最终图案

描述 小红正在玩一个“炸砖块”游戏,游戏的规则如下:初始有一个 n * m 的砖块矩阵。小红会炸 k 次,每次会向一个位置投炸弹,如果这个位置有一个砖块,则砖块消失,上方的砖块向下落。小红希望你画出最终砖块的图案。 输入描述 第一行输入三个正整数 n, m, k,代表矩阵的行…

代码随想录算法训练营第 4 天(链表 2)| 24. 两两交换链表中的节点19.删除链表的倒数第N个节点 -

一、24. 两两交换链表中的节点 题目&#xff1a;24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 视频&#xff1a;帮你把链表细节学清楚&#xff01; | LeetCode&#xff1a;24. 两两交换链表中的节点_哔哩哔哩_bilibili 讲解&#xff1a;代码随想录 dummy-…

【微服务】面试题 5、分布式系统理论:CAP 与 BASE 详解

分布式系统理论&#xff1a;CAP 与 BASE 详解 一、CAP 定理 背景与定义&#xff1a;1998 年由加州大学科学家埃里克布鲁尔提出&#xff0c;分布式系统存在一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错性&#xff08;Part…

【网络】:网络编程套接字

目录 源IP地址和目的IP地址 源MAC地址和目的MAC地址 源端口号和目的端口号 端口号 VS 进程ID TCP协议和UDP协议 网络字节序 字符串IP和整数IP相互转换 查看当前网络的状态 socket编程接口 socket常见API 创建套接字 绑定端口号 发送数据 接收数据 sockaddr结构…

UnityDemo-TheBrave-制作笔记

这是我跟着b站up主MStudio的视频学习制作的&#xff0c;大体上没有去做一些更新的东西&#xff0c;这里只是一个总的总结。在文章的最后&#xff0c;我会放上可以游玩该游戏的链接和exe可执行文件&#xff0c;不过没有对游戏内容进行什么加工&#xff0c;只有基本的功能实现罢了…

力扣经典二分题:4. 寻找两个正序数组的中位数

题目链接&#xff1a;4. 寻找两个正序数组的中位数 - 力扣&#xff08;LeetCode&#xff09; 一、题目分析 这道题目是让我们在 两个正序的数组中寻找中位数已知两个数组的大小分别是&#xff1a;int m nums1.size(),n nums2.size();中位数性质1&#xff1a;中位数左侧元素 …

C++ 文字识别OCR

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…

SpringBoot:SaToken的options预检请求鉴权失败

问题描述 使用如下sa-token配置&#xff0c;前端通过IP端口号的方式访问后端服务&#xff0c;会存在options预检请求鉴权失败的问题。 问题分析 http-options请求 HTTP OPTIONS 方法请求给定的 URL 或服务器的允许通信选项。客户端可以用这个方法指定一个 URL&#xff0c;或者…

UE材质函数

材质函数是可在不同材质中重复使用的材质表达式的一个集合 相当于把常用的功能封装到一个集合里&#xff0c;需要用到的时候调用 输入input可以添加输入节点 如果勾上公开到库&#xff0c;就可以在材质面板直接搜索到材质函数 材质函数可以直接做成一个输出

51c~Pytorch~合集5

我自己的原文哦~ https://blog.51cto.com/whaosoft/13059544 一、PyTorch DDP 正在郁闷呢 jetson nx 的torchvision安装~~ 自带就剩5g 想弄到ssd 项目中的 venv中又 cuda.h没有... 明明已经装好什么都对 算了说今天主题 啊对 还是搬运啊 学习之工具人而已 勿怪 Distrib…

用vscode写latex-1

一般大伙使用 LaTeX 大体有两种方案&#xff0c; 一种是在本地配置环境或使用本地的软件&#xff0c;如 vscode LaTeX&#xff0c;texlive&#xff0c;lyx 等等&#xff1b; 另一种是线上 LaTeX 平台&#xff0c;其中用的最多的是 Overleaf&#xff0c;还有一部分高校也有自…

用户界面软件05

已知应用 几乎所有的流行的用户界面架构都使用这种模式。我在这里举三个例子&#xff1a; 1. Seeheim 用户界面架构的特点是有一个应用核心的领域层和一个用户界面层。后者 被分为两层&#xff0c;叫做表示层和对话控制层。因为这个架构和面向事务系统有渊源&#xff0c;没有…

虚拟文件系统 VFS

目录 虚拟文件系统 VFS 文件系统挂载过程 虚拟文件系统 VFS 统一标准的系统调用接口&#xff1a; VFS定义了一组标准的文件操作API&#xff0c;如open(), read(), write(), close()等&#xff0c;使得用户空间的应用程序无需关心底层文件系统的具体类型。 下层文件系统必须实现…

conda 批量安装requirements.txt文件

通常可以用下面conda命令安装requirements.txt文件 conda install --yes --file requirements.txt 但是&#xff0c;一旦遇到某个包安装失败&#xff0c;就会停止安装后续的包。 下面这条命令能解决上面出现的不执行后续包的问题&#xff0c;需要在CMD窗口执行&#xff1a; 点…

Auto-CoT:自动构建大模型的思维链提示

今天分享的是由上海交通大学发表的一篇文章&#xff1a;Auto-COT 论文题目&#xff1a;AUTOMATIC CHAIN OF THOUGHT PROMPTING IN LARGE LANGUAGE MODELS 论文链接&#xff1a;https://arxiv.org/pdf/2210.03493 代码地址&#xff1a;https://github.com/amazon-science/aut…