4.前端--HTML标签3【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/170513.shtml

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

相关文章

搜索 C. Tic-tac-toe

Problem - C - Codeforces 思路&#xff1a;搜索&#xff0c;判断合法性。从起始态用搜索进行模拟&#xff0c;这样可以避免后面判断合法性这一繁琐的步骤。用一个map进行映射当前态及对应的结果。剪枝&#xff1a;如果当前字符串已经被搜索过&#xff0c;则直接跳过去。 代码…

【开源】基于JAVA的车险自助理赔系统

项目编号&#xff1a; S 018 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S018&#xff0c;文末获取源码。} 项目编号&#xff1a;S018&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 车…

1.3 取反器和8位取反器

取反器真值表: 取反开关输入输出011000110101 取反器相当于一个异或门 8位取反器

【深度学习】因果推断与机器学习

2023年初是人工智能爆发的里程碑式的重要阶段&#xff0c;以OpenAI研发的GPT为代表的大模型大行其道&#xff0c;NLP领域的ChatGPT模型火爆一时&#xff0c;引发了全民热议。而最新更新的GPT-4更是实现了大型多模态模型的飞跃式提升&#xff0c;它能够同时接受图像和文本的输入…

Co-DETR:DETRs与协同混合分配训练代码学习笔记

关于论文的学习笔记&#xff1a;Co-DETR:DETRs与协同混合分配训练论文学习笔记-CSDN博客 作者提出了一种新的协同混合任务训练方案&#xff0c;即Co-DETR&#xff0c;以从多种标签分配方式中学习更高效的基于detr的检测器。这种新的训练方案通过训练ATSS和Faster RCNN等一对多标…

【搜维尔科技】产品推荐:Virtuose 6D RV,大型工作空间触觉设备

Virtuose 6D RV为一款具有大工作空间并在所有6自由度上提供力反馈的触觉设备&#xff0c;设计专用于虚拟现实环境&#xff0c;特别适合于大型虚拟物体的处理。 Virtuose 6D RV是当今市场上唯一将高工作效率与高工作量相结合在一起的产品。6D RV特别适合于缩放与操纵等应用&…

【LeetCode】挑战100天 Day16(热题+面试经典150题)

【LeetCode】挑战100天 Day16&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-182.1 题目2.2 题解 三、面试经典 150 题-183.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…

【数据结构实验】图(三)图的深度优先搜索(DFS)生成树

文章目录 1. 引言2. 深度优先搜索生成树3. 实验内容3.1 实验题目&#xff08;一&#xff09;输入要求&#xff08;二&#xff09;输出要求 3.2 算法实现1. 数据结构2. 队列操作函数3. 广度优先搜索遍历4. 创建图5. 深度优先搜索算法6. 主函数及DFS主函数7. 输出生成树信息 3.3 …

WordPress安装AWS插件实现文本转语音功能

适用于 WordPress 的 AWS 插件示例演示了内容创建者如何轻松地为所有书面内容添加文本转语音功能。随着语音搜索的不断增加&#xff0c;以音频格式提供更多网站内容变得至关重要。通过添加语音功能&#xff0c;网站访客可以通过在线音频播放器和播客应用程序等新渠道使用您的内…

ART-PI开发套件-构建开发环境

1、env工具的安装与使用 env 是 RT-Thread 推出的开发辅助工具&#xff0c;针对基于 RT-Thread 操作系统的项目工程&#xff0c;提供编译构建环境、图形化系统配置及软件包管理功能。 其内置的 menuconfig 提供了简单易用的配置剪裁工具&#xff0c;可对内核、组件和软件包进行…

面试常见问题:什么是进程? 什么是线程?进程和线程有什么区别?

1.什么是进程&#xff1f; 进程是操作系统中一个程序在执行过程中的一个实例&#xff0c;每个进程都有自己独立的地址空间&#xff0c;进程间不共享内存。它是程序运行的最小内存单元&#xff1b; 进程特点&#xff1a; 1> 需要占用独立的内存空间&#xff1b; 2>可以并…

C语言—冒泡排序

方法一&#xff08;不使用函数解决&#xff09; #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> int main() {int arr[]{15,52,23,0,5,6,45,8,9,10};int i0;int j0;for ( i 0; i < 9; i){int flag1; //flag判断数组元素是否有序&#xff0c;这里先假设…

VMware虚拟机安装华为OpenEuler欧拉系统

首先去欧拉官方网站下载openEuler的安装镜像&#xff1a; openEuler下载 | 欧拉系统ISO镜像 | openEuler社区官网 我下载的是最新的23.03长期维护版本&#xff0c;架构选择x86_64。 创建新虚拟机&#xff1a;选择典型配置&#xff0c;点击下一步&#xff1a;选择下载的镜像文…

4.25每日一题(通过被积函数和积分区域(不等式)选正确的坐标系求二重积分)

一、正确画出积分区域&#xff1b;通过积分区域和被积函数选择方法 二、如何根据被积函数和积分区域正确选择通过极坐标还是根据直角坐标方程计算&#xff1a; &#xff08;1&#xff09;适合极坐标的积分区域&#xff1a;圆或者部分圆 &#xff08;2&#xff09;适合极坐标的…

公交路线查询系统

公交路线查询系统 一&#xff1a;目标一&#xff1a;类的定义构造方法 set和get方法&#xff1a;目标二&#xff1a;静态属性 静态方法 toString方法&#xff1a;目标三&#xff1a;抽象类的定义 抽象方法 实际应用&#xff1a;abstract class AbstractRoute{目标四&#xff1…

Hibernate 脏检查和刷新缓存机制

刷新缓存: Session是Hibernate向应用程序提供的操作数据库的主要接口,它提供了基本的保存,更新,删除和加载java对象的方法,Session具有一个缓存,可以管理和追踪所有持久化对象,对象和数据库中的相关记录对应,在某些时间点,Session会根据缓存中对象的变化来执行相关SQL语句,将对…

VMware OpenSLP漏洞解决方案

PS&#xff1a;早期为客户做VMware检测的方法&#xff0c;大家如有遇到可参考 OpenSLP堆溢出漏洞攻击大量ESXI服务器&#xff0c;该漏洞编号为CVE-2021-21974&#xff0c;由 OpenSLP 服务中的堆溢出问题引起 大于以下版本则不受影响 ESXi versions 7.x prior to ESXi7…

Java的内部类

文章目录 静态内部类(被static修饰的成员内部类)--可以实例化!获取静态内部类对象(把它当成外部类的成员)静态内部类可以声明普通成员变量和方法&#xff0c;而普通内部类不能声明static成员变量和方法静态内部类跟静态方法一样&#xff0c;只能访问静态的成员变量和方法&#…

【Java基础系列】文件上传功能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nodejs微信小程序+python+PHP-健身俱乐部在线管理平台的设计与实现-安卓-计算机毕业设计

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…