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

news2024/11/25 20:39:09

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.coloradmin.cn/o/1255377.html

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

相关文章

【C++】类和对象——拷贝构造和赋值运算符重载

上一篇我们讲了构造函数&#xff0c;就是对象实例化时会自动调用&#xff0c;那么&#xff0c;我们这里的拷贝构造在形式上是构造函数的一个重载&#xff0c;拷贝构造其实也是一种构造函数&#xff0c;那么我们就可以引出这里的规则 1.拷贝构造函数的函数名必须与类名相同。 2.…

vue3+tsx的使用

<template><div><xiaoman on-click"getItem" name"似懂非懂"></xiaoman></div> </template><script setup langts>import xiaoman from "./App"const getItem(item:any)>{console.log(item,it…

Java多线程二-线程安全

1、线程安全问题 多个线程&#xff0c;同时操作同一个共享资源的时候&#xff0c;可能会出现业务安全问题。 2、实例&#xff1a;取钱的线程安全问题 2.1、场景 小明和小红是夫妻&#xff0c;他们有个共同账户&#xff0c;余额是十万元&#xff0c;如果两人同时取钱并且各自取…

Bytebase 2.11.1 - 数据脱敏支持语义类型和脱敏算法

&#x1f680; 新功能 数据脱敏支持自定义脱敏算法和语义类型。 &#x1f514; 重大变更 用户页面的 URL 由 /u/{uid} 变更为 /users/{email}。工作空间的所有者和开发者分别更名为&#xff1a;管理员和成员。 &#x1f384; 改进 SQL 编辑器支持显示表的 DDL 语句&#…

【Unity基础】8.简单场景的搭建

【Unity基础】8.简单场景的搭建 大家好&#xff0c;我是Lampard~~ 欢迎来到Unity基础系列博客&#xff0c;所学知识来自B站阿发老师~感谢 &#xff08;一&#xff09;场景资源 &#xff08;1&#xff09;Import资源包 今天我们将手动去搭一个简单的场景&#xff0c;当…

HONOR荣耀MagicBook 15 2021款 锐龙版R5(BMH-WFQ9HN)原厂Windows11预装OEM系统含F10智能还原

链接&#xff1a;https://pan.baidu.com/s/1faYtC5BIDC2lsV_JSMI96A?pwdj302 提取码&#xff1a;j302 原厂系统Windows11.22H2工厂模式安装包,含F10一键智能还原&#xff0c;自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、荣耀 电脑管家等预装程序 …

SQL JOIN 子句:合并多个表中相关行的完整指南

SQL JOIN JOIN子句用于基于它们之间的相关列合并来自两个或更多表的行。 让我们看一下“Orders”表的一部分选择&#xff1a; OrderIDCustomerIDOrderDate1030821996-09-1810309371996-09-1910310771996-09-20 然后&#xff0c;看一下“Customers”表的一部分选择&#xff…

thinkphp最新开发的物业管理系统 缴费管理、停车管理、收费管理、值班管理

物业费&#xff0c;水电燃气费&#xff0c;电梯费&#xff0c;租金&#xff0c;临时收费等多种收费规则完全自定义&#xff0c;账单自动生成&#xff0c;无需人工计算 实时数据互通&#xff1a;一键报事报修&#xff0c;购买车辆月卡&#xff0c;管理家人信息&#xff0c;参加物…

java根据时间区间计算区间中都包含那几个月

在一些需要统计类的需求中可能会计算同比/环比数据,往往我们拿到的并不是每个月的准确时间,需要自行计算,一点一点计算还是挺麻烦的,因此搞一个工具类出来 工具类 public static void main(String[] args) {//为了准确,这里使用的时间毫秒值long beginTime 1577836800000L;…

从0到1建立前端规范

本文适合打算建立前端规范的小伙伴阅读 一、为什么需要规范 规范能给我们带来什么好处&#xff0c;如果没有规范会造成什么后果&#xff1f;这里主要拿代码规范来说。 统一代码规范的好处&#xff1a; 提高代码整体的可读性、可维护性、可复用性、可移植性和可靠性&#xf…

Java制作“简易王者荣耀”小游戏

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im…

圆通速递单号查询入口,以表格的形式导出详细物流信息

批量查询圆通速递单号的物流信息&#xff0c;并以表格的形式导出单号的详细物流信息。 所需工具&#xff1a; 一个【快递批量查询高手】软件 圆通速递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的伙伴记得先注册&…

灯塔的安装

Docker 安装 docker 安装参考&#xff1a;https://docs.docker.com/engine/install/ shell脚本: curl -fsSL https://get.docker.com -o get-docker.sh sudo sh get-docker.sh灯塔安装 mkdir docker-ARL;cd docker-ARL curl https://bootstrap.pypa.io/get-pip.py -o get-pip…

如何在Ubuntu系统上安装Node.js

简单介绍 简单的说Node.js就是运行在服务端的JavaScript。Node.js是一个基于Chrome JavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript 环境&#xff0c;基于Google的V8引擎&#xff0c;V8引擎执行Javascript的速度非常快&#xff0c;性能非常好。 no…

【Hadoop】分布式文件系统 HDFS

目录 一、介绍二、HDFS设计原理2.1 HDFS 架构2.2 数据复制复制的实现原理 三、HDFS的特点四、图解HDFS存储原理1. 写过程2. 读过程3. HDFS故障类型和其检测方法故障类型和其检测方法读写故障的处理DataNode 故障处理副本布局策略 一、介绍 HDFS &#xff08;Hadoop Distribute…

直播预告 | AR眼镜在现代医疗中究竟有哪些妙用?11.28晚八点虹科直播间为您揭晓!

什么是AR眼镜&#xff1f; AR眼镜&#xff0c;即增强现实眼镜&#xff0c;是一种结合虚拟信息与真实世界的创新医疗工具。 通过集成高科技传感器和实时数据处理技术&#xff0c;AR眼镜能够将数字化的医学信息以虚拟形式叠加在医生的视野中&#xff0c;使其在诊断和治疗过程中…

数据库基础教程之创建触发器,实现自动更新时间戳(四)

postgresql 更新时间戳需要通过触发器来实现,这里给出两种方法来实现。 创建字段create_time和edit_time 通过Navicat在添加字段时候将字段设置为timestamp类型,生成时间戳方式为CURRENT_TIMESTAMP或者设置为now(),然后点击保存。 新建函数 点击函数,然后在弹出的函数向导中…

【全栈开发】RedwoodJS与BlitzJS:全栈JavaScript元框架的未来

Redwood和Blitz是两个即将出现的全栈元框架&#xff0c;它们提供了创建SPAs、服务器端渲染页面和静态生成内容的工具&#xff0c;并提供了生成端到端支架的CLI。我一直在等待一个有价值的Rails JavaScript替代品&#xff0c;谁知道什么时候。这篇文章是对两者的概述&#xff0c…

Kotlin学习——kt里的集合,Map的各种方法之String篇

Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复用代码&#xff0c;以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…

初始化GPIO流程 以及点亮LED

点亮LED 需要单片机上的GIPIO端口引脚 输出对应的电压来对LED进行点亮 &#xff0c;关于GPIO的初始化流程其实我们只需要牢牢记住这张图即可 具体参考&#xff1a; https://blog.csdn.net/k666499436/article/details/123971479 1. GPIO的初始化 流程 使能时钟 在stm32中&…