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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WebSocket协议在java中的应用

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

关于 raw 图像的理解

1、问题背景 在图像调试过程&#xff0c;当发现一个问题时&#xff0c;很多时候都要通过 dump raw图像来分析&#xff0c;如果raw图像上有&#xff0c;那就排除了是 ISP的处理导致。 下一步就是排查 sensor 或者镜头&#xff0c;这样可以有效的帮我们定位问题所在。 但遇到过…

ChatGPT化身“AI间谍”:你在网上说的每句话都将被监控

大多数人使用 ChatGPT 就是用来聊天或者辅助学习、办公。 然而现在一些“间谍软件”公司正在探索如何使用ChatGPT和其他新兴的AI来监视社交媒体上的用户。 其中一家由俄罗斯企业家创立的Social Links的公司正使用 ChatGPT 作为助手&#xff0c;监控着用户在Facebook、Instagr…

CANdelaStudio 使用教程5 编辑DID

文章目录 在哪编辑DID的分类编辑快照数据添加 DID 在哪编辑 DID的分类 编辑快照数据 添加 DID

【数据中台】开源项目(2)-Moonbox计算服务平台

Moonbox是一个DVtaaS&#xff08;Data Virtualization as a Service&#xff09;平台解决方案。 Moonbox基于数据虚拟化设计思想&#xff0c;致力于提供批量计算服务解决方案。Moonbox负责屏蔽底层数据源的物理和使用细节&#xff0c;为用户带来虚拟数据库般使用体验&#xff0…

Windows安装mysql8.0

官网地址&#xff1a;MySQL :: MySQL Community Downloads 选择相应版本信息下载 默认选择点击下一步 默认配置点击next 设置密码 默认配置

一、Lua基础

文章目录 一、Lua是什么二、Lua特性&#xff08;一&#xff09;轻量级&#xff08;二&#xff09;可扩展&#xff08;三&#xff09;其它特性 三、Lua安装四、Lua应用 看到评论说&#xff0c;C让我见识了语言的严谨与缜密&#xff0c;lua让我见识到了语言的精巧与创新&#xff…

【Java】循环语句练习

文章目录 1. 计算5的阶乘2. 计算 1! 2! 3! 4! 5!3. 数字9 出现的次数4. 判定素数5. 求1-100之间的素数6. 求2个整数的最大公约数7. 计算分数的值8. 模拟登陆9. 输出乘法口诀表10. 求出0&#xff5e;999之间的所有“水仙花数”并输出11. 猜数字游戏&#x1f648; 1. 计算5的…

设计一个算法,将链表中所有结点的链接方向“原地”逆转,即要求仅利用原表的存储空间,换句话说,要求算法的空间复杂度为O(1)

设计一个算法&#xff0c;将链表中所有结点的链接方向“原地”逆转&#xff0c;即要求仅利用原表的存储空间&#xff0c;换句话说&#xff0c;要求算法的空间复杂度为O&#xff08;1&#xff09; 代码思路&#xff1a; 这里要求不用额外空间&#xff0c;那么就要考虑链表自身的…

web前端之vue和echarts的堆叠柱状图顶部显示总数、鼠标悬浮工具提示、设置图例的显示与隐藏、label、legend、tooltip

MENU 效果图htmlJavaScripstyle解析 效果图 html <template><div><div><div id"idStackedColumnChart" style"width: 100%; height: 680px"></div></div></div> </template>JavaScrip export default {…

【深度学习笔记】04 概率论基础

04 概率论基础 概率论公理联合概率条件概率贝叶斯定理边际化独立性期望和方差模拟投掷骰子的概率随投掷次数增加的变化 概率论公理 概率&#xff08;probability&#xff09;可以被认为是将集合映射到真实值的函数。 在给定的样本空间 S \mathcal{S} S中&#xff0c;事件 A \m…

Servlet知识汇总

小王学习录 Ⅰ. servlet程序导入依赖创建目录编写代码打包程序部署程序验证简化打包和部署Ⅱ. Servlet Api1. HttpServlet2. HttpServletRequest3. HttpServletResponseⅢ. Cookie 和session1. Cookie2. Session(会话)3. session 和 cookie的区别4. session 和 cookie的联系5. …

5、Hydra与Crunch基本使用

文章目录 一、关于Hydra与Crunch二、在操作机上使用Crunch生成用户名和密码字典三、在操作机上使用Hydra对靶机FTP登录密码进行字典攻击 一、关于Hydra与Crunch Hydra&#xff08;九头蛇&#xff09;是一个相当强大的暴力密码破解工具。该工具支持几乎所有协议的在线密码破解&…

免费 2 个月!ChatGPT-4 和 Claude 2 都能用

你好&#xff0c;我是 EarlGrey&#xff0c;一名双语学习者&#xff0c;会一点编程&#xff0c;目前已翻译出版《Python 无师自通》、《Python 并行编程手册》等书籍。 点击上方蓝字关注我&#xff0c;获取最新编程及AI干货、高赞工具和项目分享。 在后台回复“books”&#xf…

一网打尽异步神器CompletableFuture

Future接口以及它的局限性 我们都知道&#xff0c;Java中创建线程的方式主要有两种方式&#xff0c;继承Thread或者实现Runnable接口。但是这两种都是有一个共同的缺点&#xff0c;那就是都无法获取到线程执行的结果&#xff0c;也就是没有返回值。于是在JDK1.5 以后为了解决这…

深入解析Selenium动作链:精通点击、拖拽、切换等操作

背景&#xff1a; 一些交互动作都是针对某个节点执行的。比如&#xff0c;对于输入框&#xff0c;我们就调用它的输入文字和清空文字方法&#xff1b;对于按钮&#xff0c;就调用它的点击方法。其实&#xff0c;还有另外一些操作&#xff0c;它们没有特定的执行对象&#xff0…

关于vs code Debug调试时候出现“找不到任务C/C++: g++.exe build active file” 解决方法

vs code Debug调试时候出现“找不到任务C/C: g.exe build active file” &#xff0c;出现报错&#xff0c;Debug失败 后来经过摸索和上网查找资料解决问题 方法如下 在Vs code的操作页面左侧有几个配置文件 红框里的是需要将要修改的文件 查看tasks.json和launch.json框选&…

跟着chatgpt一起学|1.spark入门之MLLib

chatgpt在这一章表现的不好&#xff0c;所以我主要用它来帮我翻译文章提炼信息 1.前言 首先找到spark官网里关于MLLib的链接 spark内一共有2种支持机器学习的包&#xff0c; 一种是spark.ml,基于DataFrame的&#xff0c;也是目前主流的 另一种则是spark.mllib,是基于RDD的…

Python---函数的数据---拆包的应用案例(两个变量值互换,*args, **kwargs调用时传递参数用法)

案例&#xff1a; 使用至少3种方式交换两个变量的值 第一种方式&#xff1a;引入一个临时变量 c1 10 c2 2# 引入临时变量temp temp c2 c2 c1 c1 tempprint(c1, c2) 第二种方式&#xff1a;使用加法与减法运算交换两个变量的值&#xff08;不需要引入临时变量&#xff09…

【单调栈】子数组的最小值之和

import java.util.Deque; import java.util.LinkedList;/** 参考链接&#xff1a;https://leetcode.cn/problems/sum-of-subarray-minimums/solutions/1930857/gong-xian-fa-dan-diao-zhan-san-chong-shi-gxa5/* https://leetcode.cn/problems/sum-of-subarray-minim…