4.前端--HTML标签3【2023.11.25】

news2024/11/30 10:46:00

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/1253522.html

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

相关文章

⑩【Redis Java客户端】:Jedis、SpringDataRedis、StringRedisTemplate

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

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;…

DeepWalk代码实战-维基百科词条图嵌入可视化

准备工作&#xff1a; 从爬虫网站中爬取维基百科See also关联词条&#xff1a;https://densitydesign.github.io/strumentalia-seealsology/ 维基百科网站&#xff1a;https://www.wikipedia.org/ 爬取过程&#xff1a; 下载 tsv 文件&#xff1a; import networkx as nx # 图…

Linux:docker基础操作(3)

docker的介绍 Linux&#xff1a;Docker的介绍&#xff08;1&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/134146721?spm1001.2014.3001.5502 通过yum安装docker Linux&#xff1a;Docker-yum安装&#xff08;2&#xff09;-CSDN博客https://blog.…

【通讯协议】REST API vs GraphQL

在API设计方面&#xff0c;REST和GraphQL各有缺点。下图显示了 REST 和 GraphQL 之间的快速比较。 REST 使用标准 HTTP 方法&#xff08;如 GET、POST、PUT、DELETE&#xff09;进行 CRUD 操作。当您需要在单独的服务/应用程序之间提供简单、统一的接口时&#xff0c;效果很好…

YOLOv8 训练自己的分割数据集

之前写过一篇 使用YOLOv8训练自己的【目标检测】数据集-【收集数据集】-【标注数据集】-【划分数据集】-【配置训练环境】-【训练模型】-【评估模型】-【导出模型】&#xff0c;里面带大家整个流程走过一遍了&#xff0c; 这篇文章我们来介绍如何使用 YOLOv8 训练分割数据集&a…

如何在3dMax中根据AutoCAD地形规划文件对地形进行建模?

在3dMax中根据Autocad地形规划文件对地形进行建模的方法 直入主题&#xff0c;要根据包含地形图的DWG (Autocad) 文件进行地形建模&#xff0c;方法步骤如下&#xff1a; 1.运行3dmax软件&#xff0c;点击“文件&#xff08;File&#xff09;->导入&#xff08;Import&…

搜索 C. Tic-tac-toe

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

⑤【Sorted Set】Redis常用数据类型: ZSet [使用手册]

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

JavaScript基础—运算符、表达式和语句、分支语句、循环语句、综合案例-ATM存取款机

版本说明 当前版本号[20231125]。 版本修改说明20231125初版 目录 文章目录 版本说明目录JavaScript 基础 - 第2天运算符算术运算符赋值运算符自增/自减运算符比较运算符逻辑运算符运算符优先级 语句表达式和语句分支语句if 分支语句if双分支语句if 多分支语句三元运算符&am…

命令查询职责分离 (CQRS)

CQRS 的最初需求 多年来&#xff0c;传统的 CRUD&#xff08;创建、读取、更新、删除&#xff09;模式一直是系统架构的支柱。在 CRUD 中&#xff0c;读取和写入操作通常由相同的数据模型和相同的数据库模式处理。虽然这种方法简单直观&#xff0c;但随着系统规模的扩大和需求…

四、IDEA创建项目时,Maven Archetype模板工程说明

什么是Maven Archetype Archetype是一个Maven项目的模板工具包&#xff0c;它定义了一类项目的基本架构。Archetype为开发人员提供了创建Maven项目的模板&#xff0c;同时它也可以根据已有的Maven项目生成参数化的模板。 官方文档&#xff1a;https://maven.apache.org/archet…

Redis面试题:redis做为缓存,mysql的数据如何与redis进行同步呢?(双写一致性)

目录 强一致性&#xff1a;延迟双删&#xff0c;读写锁。 弱一致性&#xff1a;使用MQ或者canal实现异步通知 面试官&#xff1a;redis做为缓存&#xff0c;mysql的数据如何与redis进行同步呢&#xff1f;&#xff08;双写一致性&#xff09; 候选人&#xff1a;嗯&#xff…

C++ 数据结构之-最小栈(MinStack)

最小栈 最小栈&#xff08;Min Stack&#xff09;是一个支持常数时间复杂度获取栈中最小元素的特殊栈数据结构。通常&#xff0c;标准的栈数据结构只支持在常数时间内执行入栈&#xff08;push&#xff09;和出栈&#xff08;pop&#xff09;操作&#xff0c;但无法在常数时间内…

痤疮分类-yolov5 学习过程

1、在github上下载yolov5-5.0的源码。 GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; in PyTorch > ONNX > CoreML > TFLite

第一百七十九回 自定义SlideImageSwitch

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"SlideSwitch组件"相关的内容&#xff0c;本章回中将介绍自定义SlideImageSwitch.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概…

JVM——几种常见的对象引用

目录 1. 软引用软引用的使用场景-缓存 2.弱引用3.虚引用和终结器引用 可达性算法中描述的对象引用&#xff0c;一般指的是强引用&#xff0c;即是GCRoot对象对普通对象有引用关系&#xff0c;只要这层关系存在&#xff0c; 普通对象就不会被回收。除了强引用之外&#xff0c;Ja…

bugku 渗透测试

场景1 查看源代码 场景2 用dirsearch扫描一下看看 ok看到登录的照应了第一个提示 进去看看 不出所料 随便试试admin/admin进去了 在基本设置里面看到falg 场景3 确实是没啥想法了 找到php在线运行 检查网络&#xff0c;我们发现这个php在线运行会写入文件 那我们是不是写…

WPS AI初体验

1、启动AI 2、输入需要创作的内容 3、创作的内容展示 当然&#xff0c;以下是一份经过润色后的年终总结目录&#xff1a; 一、引言 1. 总结的目的和意义 2. 总结的范畴和覆盖范围 3. 总结的编写原则和标准 二、公司概览 1. 公司简介 2. 公司历史与现状 3. 公司组织架构和团队介…

C编译过程

寻觅GCC 如果你已经安装了Clion&#xff0c;那么gcc就在根目录下。 如果没有&#xff0c;那么需要去minGW的官网下载安装。添加到环境变量中。 编写C代码 #include <stdio.h>#define ARRAY_SIZE(a) sizeof(a)/sizeof(a[0]) static int a 123;int main() {int i 0;c…