4.前端--HTML标签-表格列表表单【2023.11.25】

1.表格

1.1表格的作用

表格的作用:表格主要用于显示、展示数据

1.2表格的基本格式
<table><tr><td>单元格内的文字</td><td>单元格内的文字</td>...</tr>...
</table>
  1. <table> </table> 是用于定义表格的标签。
  2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。
  3. <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
  4. 字母 td 指表格数据(table data),即数据单元格的内容。

表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.
<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table><tr><th>姓名</th>...</tr>...
</table>

在这里插入图片描述

1.3表格的基本属性

在这里插入图片描述
在这里插入图片描述

1.4合并单元格

跨行合并:rowspan=“合并单元格的个数” 最上侧单元格为目标单元格, 写合并代码
跨列合并:colspan=“合并单元格的个数” 最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲:

  1. 先确定是跨行还是跨列合并。
  2. 找到目标单元格. 写上合并方式 = 合并数量。<td colspan=“2”></td>。`
  3. 删除多余的单元格。

在这里插入图片描述

2.列表

2.1列表的作用

列表就是用来布局的。

2.2列表的格式

无序列表

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>

有序列表

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>

自定义列表

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
</dl>
  1. <dl></dl> 里面只能包含 <dt> 和 <dd>
  2. <dt><dd>个数没有限制,经常是一个<dt> 对应多个<dd>

3.表单

在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。

3.1表单的作用

使用表单目的是为了收集用户信息

3.2表单域

在 HTML 标签中, 标签用于定义表单域,以实现用户信息的收集和传递。 会把它范围内的表单元素信息提交给服务器

语法:

<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件
</form>

在这里插入图片描述

3.3表单控件
  1. input输入表单元素
  2. select下拉表单元素
  3. textarea 文本域元素

(1)input输入表单元素
type属性

<input type="属性值" />

在这里插入图片描述
除 type 属性外,标签还有其他很多属性,其常用属性如下:
在这里插入图片描述

  1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
  2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
  3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
  4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

<label> 标签

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

label for 和 id配合使用
核心:

<label for="sex"></label>
<input type="radio" name="sex" id="sex" />

(2)select下拉表单元素

<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>

在 中定义 selected =“ selected " 时,当前项即为默认选中项

<select><option>吃饭</option><option>睡觉</option><option>学习</option><option selected="selected">打游戏</option><option>看电影</option></select>

在这里插入图片描述
(3)textarea下拉表单元素

<textarea rows="3" cols="20">文本内容
</textarea>

在这里插入图片描述

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

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

相关文章

【RTP】3: RTPSenderVideo::SendVideo 切片到发送

m98 版本。之前1 2 都是m79.RTPSenderVideo::SendVideo 负责切片,是入口 实际发送要靠: RTPSender* const rtp_sender_; 外部传递的: rtp_rtcp\source\rtp_sender.h 实现了rtp rtcp协议 ,负责实际的打包 新增了一个 TransformableFrameInterface 用的 编码线程 - RTPSend…

Windows开启SQL Server服及1433端口

需求&#xff1a;Windows开启SQL Server服务及1433端口 目前端口没有启动 解决&#xff1a; 打开SQL Server配置管理器&#xff08;winR&#xff09; 各个sqlserver版本在textbox中输入对应的命令如下&#xff1a; SQLServerManager15.msc&#xff08;对于 SQL Server 2019 &am…

⑨【Stream】Redis流是什么?怎么用?: Stream [使用手册]

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ⑨Redis Stream基本操作命令汇总 一、Redis流 …

Linux7安装mysql数据库以及navicat远程连接mysql

1.下载地址&#xff1a;MySQL :: Download MySQL Community Server 2.创建mysql目录将压缩包上传到该目录 mkdir /opt/mysql cd /opt/mysql3.解压压缩包 gzip mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar tar -zxvf mysql-8.1.0-1.el7.x86_64.rpm-bundle.tar.gz 4.前置检查 ch…

电子学会C/C++编程等级考试2021年09月(三级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:余数相同问题 已知三个正整数 a,b,c。 现有一个大于1的整数x,将其作为除数分别除a,b,c,得到的余数相同。 请问满足上述条件的x的最小值是多少? 数据保证x有解。输入: 一行,三个不大于1000000的正整数a,b,c,两个整数…

Windows TCP 通信测试_1

一、单对单通信测试 应用函数 socket、bind、connect、listen、accept、recv、send&#xff08;win下的函数&#xff09;等 1、客户端demo client.cpp #include<WINSOCK2.H> #include<STDIO.H> #include<iostream> #include<cstring> using namespa…

nodejs+vue+python+PHP+微信小程序-婚纱摄影预约系统的设计与实现-安卓-计算机毕业设计

本婚纱摄影预约系统主要包括个人中心、套系风格管理、用户管理、摄影师管理、婚纱套系管理、婚纱套系订单管理、客片欣赏管理、客户样片管理、摄影咨询管理、客户选片管理、系统管理等多个模块。它帮助婚纱摄影预约实现了信息化、网络化&#xff0c;通过测试&#xff0c;实现了…

基于jmeter的性能全流程测试

做性能测试的步骤 1、服务器性能监控 首先要在对应服务器上面安装性能监控工具&#xff0c;比如linux系统下的服务器&#xff0c;可以选择nmon或者其他的监控工具&#xff0c;然后在jmeter模拟场景跑脚本的时候&#xff0c;同时启动监控工具&#xff0c;这样就可以获得jmeter…

Android之高级UI

系统ViewGroup原理解析 常见的布局容器: FrameLayout, LinearLayout,RelativeLayoout,GridLayout 后起之秀&#xff1a;ConstraintLayout,CoordinateLayout Linearlayout Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {if (mOrientation …

STK Components 二次开发-地面站传感器

上一篇我们说了创建地面站&#xff0c;那么这次我们在地面站添加一些特效。 1. 创建地面站 var locationPoint1 new PointCartographic(m_earth, new Cartographic(Trig.DegreesToRadians(117.17066), Trig.DegreesToRadians(31.84056), 240.359)); m_facility new Platfor…

【论文解读】Real-ESRGAN:使用纯合成数据训练真实世界的超分辨率图像

图一是4种超分方法的对比效果 。 0 摘要 尽管在盲超分辨率方面已经进行了许多尝试&#xff0c;以恢复具有未知和复杂退化的低分辨率图像&#xff0c;但它们仍然远远不能解决一般的真实世界退化图像。在这项工作中&#xff0c;我们将强大的 ESRGAN 扩展到一个实际的恢复应用程序…

Retrofit怎么返回一个JSON字符串?

项目用已经使用了 Retrofit&#xff0c;定义了接口方法&#xff0c;返回了 JSON 转换后的实体对象&#xff0c;炒鸡方便。但是总有意料之外的时候&#xff0c;比如我不需要返回实体对象&#xff0c;我要返回纯纯的 JSON 字符串&#xff0c;怎么办呢&#xff1f; 先看源码 通过…

什么是半监督学习

1 概述 1.1 定义 半监督学习&#xff08;Semi-Supervised Learning&#xff09;是机器学习中的一个重要分支&#xff0c;它介于监督学习和无监督学习之间。半监督学习利用少量标注数据和大量未标注数据共同训练模型&#xff0c;旨在充分挖掘未标注数据中潜在的信息和模式&…

【数据库】缓冲区管理器结构,几种常用替换策略分析,pin钉住缓冲区块防止错误的替换,以及缓冲区管理带来的代价优化

缓冲区管理 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会定期更新&…

【算法】装备合成(二分)

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 牛牛有x件材料a和y件材料b&#xff0c;用2件材料a和3件材料b可以合成一件装备&#xff0c;用4件材料a和1件材料b也可以合成一件装备。牛牛想要最大化合成的装备的数量&#xff0c;于是…

重新开启GPT Plus充值通道——基于前端开发者工具

chatGPT PLUS充值通道的关闭 由于chatGPT用户激增&#xff0c;近日&#xff0c;OpenAI的CEO Sam Altman宣布需要暂停新用户对ChatGPT Plus的订阅。在X上&#xff0c;他表达了对于确保用户体验的承诺&#xff0c;同时也提到了用户可以通过应用程序内的通知功能来了解服务恢复的…

代码随想录算法训练营 ---第四十五天

前言&#xff1a; 昨天的题做过之后&#xff0c;今天的题基本上都很简单&#xff0c;但是要注重一下细节。 第一题&#xff1a; 简介&#xff1a; 动态规划五部曲&#xff1a; 1.确定dp数组的含义 dp[i]&#xff1a;爬到有i个台阶的楼顶&#xff0c;有dp[i]种方法 2.确定dp…

常见指令的数据通路和执行过程

作此篇的原因是17年19题&#xff1a; 本题选A&#xff0c;做的时候总感觉不够通透&#xff0c;因此把这题涉及到的内容全部看了一遍&#xff0c;顿时没有那种朦胧感了 零、五段式流水线&#xff1a; 以下均为MIPS设定&#xff1a;指令长度为32位&#xff0c;主存按字节编址&a…

Echarts 最简单创建柱状图

设置容器 <div ref"myChart" style"width: 500px; height: 500px;"> </div>mounted() {//document渲染完成this.draw()}draw() {const myChart this.$echarts.init(this.$refs.myChart)//初始化对象myChart.setOption({ //参数配置项title: …

探索接口测试:SOAP、RestFul规则、JMeter及市面上的接口测试工具

引言 在当今软件开发领域&#xff0c;接口测试扮演着至关重要的角色。随着系统变得日益复杂和互联&#xff0c;对于内部和外部接口的测试变得愈发关键。接口测试不仅仅是验证接口的正确性&#xff0c;更是确保系统的稳定性、安全性和性能优越性的关键一环。 本篇博客将带您深入…