当前位置: 首页 > news >正文

HTML表格、表单、标签、CSS、选择器

目录

一、HTML表格

二、表单

三、布局标签

四、CSS

五、选择器


一、HTML表格

table:表格

tr:行

td:单元格;rowspan:纵向合并相邻单元格;clospan:横向合并相邻单元格

th:单元格加粗居中

border:加上边框

cellspacing:边框与边框之间距离

cellpadding:控制边框大小

caption:表格标题

align:使表格居中

<table border="1"  cellspacing="0"  cellpadding="10" align="center">

   <caption>学生信息表</caption>

   <tr>

       <!--th 加粗居中>

       <th>序号</th>

       <th>姓名</th>

       <th>性别</th>

       <th>年</th>

       <th>班级</th>

   </tr>

   <!-- 第一行表格内容-->

   <tr>

        <td>1</td>

        <td>小英</td>

        <td> 女</td>

        <td>18</td>

        <td>1班</td>

   </tr>

   <!-- 第二行表格内容-->

   <tr>

        <td>2</td>

        <td>a</td>

        <td> 女</td>

        <td>19</td>

        <td>1班</td>

   </tr>

   <tr>

        <td>3</td>

        <td>b</td>

        <td> 女</td>

        <td>20</td>

        <td>2班</td>

   </tr>

   <tr>

        <td>合计</td>

        <td>3人</td>

        <td></td>

        <td></td>

        <td></td>

</table>

实现效果:

将第5列两行的1班合并,将第5行的二三四五列的人数合并

<table border="1"  cellspacing="0"  cellpadding="10" align="center">

   <caption>学生信息表</caption>

   <tr>

       <!--th 加粗居中>

       <th>序号</th>

       <th>姓名</th>

       <th>性别</th>

       <th>年</th>

       <th>班级</th>

   </tr>

   <!-- 第一行表格内容-->

   <tr>

        <td>1</td>

        <td>小英</td>

        <td> 女</td>

        <td>18</td>

        <td rowspan="2">1班</td>

   </tr>

   <!-- 第二行表格内容-->

   <tr>

        <td>2</td>

        <td>a</td>

        <td> 女</td>

        <td>19</td>

        <!--<td>1班</td> -->(注释掉)

   </tr>

   <tr>

        <td>3</td>

        <td>b</td>

        <td> 女</td>

        <td>20</td>

        <td>2班</td>

   </tr>

   <tr>

        <td>合计</td>

        <td clospan="4">3人</td>

        <!-- <td></td>

        <td></td>

        <td></td>--> (注释掉)

</table>

 实现效果:

二、表单

1.常见:登录注册

form:表单

action:提交表单的输入值到目标地址

input: 输入标签,用于获取用户在网页中的键盘、鼠标输入

·placeholder:输入框中的提示文字

<input placeholder="请输入"></input>

·name:最终提交表单时,该项输入框的数据描述(例如传到网址上,就是?后面的参数值)

<form>

    <input name="account"></input>

    <input name="password"></input>

</form>

表示此表单中,分别有输入账号和密码 的 输入框

·value:输入框最终的【输入值/选中值/按钮文字】

<input value="123123">

label:点击到<label>时,会自动聚焦到其绑定的<input>标签

·for绑定<input>标签 id值

<label for="username">用户名</label>

<input id="username"></input>

disabled:禁止该<input>【输入/选择】

type:通过修改type的值, 可以更改输入框的功能

·text:普通的文本输入框

<input type="text"> </input>

·password:密码输入框

<input type="password"></input>

·radio:单选框,

搭配checked: 默认选择;搭配disabled:禁止使用

<input type="radio" checked></input>

<input type="radio" disabled></input>

·checkbox:多选框

<input type="checkbox" checked></input>

<input type="checkbox" disabled></input>

·file:选择文件

<input type="file"> </input>

·submit:提交按钮

<input type="submit"></input>

·reset:重置按钮

<input type="reset"></input>

·button:普通按钮,需要写value值,按钮才有文字

<input type="button" value=" "></input>

例:

<form action="https://www.baidu.com/"><p><span>昵称:</span><input type="text" name="nickname" value="one" id="nick"> <label for="nick"></label></p><p><span>年龄:</span><input type="text" name="age"  id="old"><label for="old"></label></p><p><span>性别:</span><input type="radio" name="sex" value="1" id="man"><label for="man">男</label><input type="radio" name="sex" value="0" id="woman"><label for="woman">女</label></p><p><span>城市:</span><input type="radio" name="city" value="three" id="fu"><label for="fu">福州</label><input type="radio" name="city" value="four" id="zz"><label for="zz">漳州</label></p><p><input type="submit" name="submit" value="提交"><input type="reset" name="reset" value="取消"></p></form>

实现效果:

 2.多行文本<textarea> </textarea>

cols:规定初始显示的【列数】(以字为单位)

rows:规定初始显示的【行数】(以字为单位)

<textarea name="text" id=" " cols="10" rows="2"></textarea>

3.下拉选择框

select:下拉选择框容器

option:选项

<select id="taste">

     <option value="1">微辣</option>

     <option value="2">辣</option>

</select>

<label for="taste"></label>

例:

<p><span>城市:</span><select id="city"><option value="01">福州</option><option value="02">漳州</option><option value="03">厦门</option><option value="04">泉州</option><obtion value="05">宁德</obtion><option value="06">莆田</option></select><label for="city"></label></p><p>  <textarea name="text" rows="20" cols="30"></textarea></p>

实现效果:

三、布局标签

div标签:块级元素标签

特点:常用于而划分一块区域,一定占整行宽度,并且换行,搭配CSS使用。

span标签:行内元素标签

特点:没有任何默认样式,宽高随文字撑开,不会换行。

 四、CSS

1.定义:

层叠样式表:显示设备在视觉上是二维平面的,实际上是多层图层叠加显示的效果,从上往下叠加的效果,!important最优先效果。

2.书写格式:

选择器{样式属性1:值1;属性2:值2}

3.书写位置:

①内联样式:直接写在标签的style属性中,无法重复使用代码。

<span style="color:red">内联样式</span>

<div style="width:50px">内联样式<div>

<input type="text" style="width:50px; background-color:green"></input>

②内部样式:在html文件的<head></head>标签域中,添加<style></style>标签,将

代码书写其中,可以通过选择器重复使用代码。

内联优先级>内部

③外部样式:写在新的一个文件,通过link连接两个文件

内部优先级>外部

!important:

五、选择器

id选择器:id="happy"

<style>

#happy{

width:100px;

}

</style>

class选择器:class="sad"

<style>

.sad{

width:50px;

}

</style>

 子元素选择器:

相邻元素选择器:

相关文章:

HTML表格、表单、标签、CSS、选择器

目录 一、HTML表格 二、表单 三、布局标签 四、CSS 五、选择器 一、HTML表格 table:表格 tr&#xff1a;行 td&#xff1a;单元格&#xff1b;rowspan:纵向合并相邻单元格&#xff1b;clospan&#xff1a;横向合并相邻单元格 th&#xff1a;单元格加粗居中 border&…...

【javaWeb技术】·外卖点餐小程序(脚手架学习1·数据库)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;系统学javaWeb开发_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 【免费】项…...

LVS 实现四层负载均衡项目实战--DR模式

一、环境准备 主机名IP地址router eth0&#xff1a;172.25.254.100 eth1&#xff1a;192.168.0.100 clienteth0&#xff1a;172.25.254.200lvseth1&#xff1a;192.168.0.50web1web2 1、client配置 [rootclient ~]# cat /etc/NetworkManager/system-connections/eth0.nmconne…...

Python与Qt的对应版本

Python与Qt的对应版本并没有严格的一一对应关系&#xff0c;但通常在使用Python与Qt进行开发时&#xff0c;会选择一个兼容性较好的版本组合。Qt的Python绑定库主要是PyQt和PySide&#xff0c;以下是几个常见的搭配&#xff1a; 1. **PyQt5**&#xff1a; - Python 3.5及以上版…...

WPF篇(12)-Image图像控件+GroupBox标题容器控件

Image图像控件 Image也算是独门独户的控件&#xff0c;因为它是直接继承于FrameworkElement基类。 Image控件就是图像显示控件。Image类能够加载显示的图片格式有.bmp、.gif、.ico、.jpg、.png、.wdp 和 .tiff。要注意的是&#xff0c;加载.gif动画图片时&#xff0c;仅显示第…...

LeetCode 热题 HOT 100 (024/100)【宇宙最简单版】

【哈希表】No. 0128 最长连续序列【中等】&#x1f449;力扣对应题目指路 希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&am…...

如何在AWS上进行 环境迁移

在 AWS 上进行环境迁移通常包括以下几个步骤和最佳实践: 1. 评估和规划 评估当前环境:审查现有的应用程序、数据库、网络架构和依赖关系。确定迁移目标:明确迁移的目标(如成本节约、性能提升、可扩展性等)。选择迁移策略:根据应用程序的类型和复杂性,选择合适的迁移策略…...

云服务器和物理服务器的优缺点对比

云服务器优点在于灵活性强、成本效益高、易于扩展且支持全球化部署&#xff1b;缺点则包括安全性与可控性相对较弱&#xff0c;性能可能受限&#xff0c;以及存在服务中断风险。物理服务器则以其高性能、高稳定性、强安全性和完全可控性著称&#xff0c;但成本较高、扩展性受限…...

postgreSQL16添加审计功能

下载审计插件 https://github.com/pgaudit/pgaudit/releases他的分支版本支持不同的PGSQL按需下载 编译安装审计插件 tar -xvf pgaudit-16.0.tar.gzmake install USE_PGXS1 PG_CONFIG/app/postgresql/bin/pg_config启用postgreSQL审计功能 修改配置文件# 启用 pgAudit shar…...

如何应用OceanBase 的实时SQL诊断,解决AP场景下的痛点

随着数据量的快速增长与用户需求的变化&#xff0c;数据库的管理与优化工作日益凸显其重要性。作为DBA及开发者&#xff0c;您是否曾面临以下挑战&#xff1a; ○ 分析场景下&#xff0c;在处理大规模数据的且耗时较长的查询是&#xff0c;常涉及海量数据的处理及复杂的计算&…...

【数据结构】—— 栈

一、栈的基本概念1、栈的定义2、栈的常见基本操作 二、栈的顺序存储1、栈的顺序存储结构2、顺序栈存储实现&#xff08;1&#xff09;初始化&#xff08;2&#xff09;判空&#xff08;3&#xff09;进栈&#xff08;4&#xff09;出栈&#xff08;5&#xff09;取栈顶元素&…...

Kafka服务端日志详解

文章目录 服务端日志Topic消息存储方式主体介绍log文件追加记录消息index和timeindex索引文件 日志文件清理Kafka的文件高效读写机制Kafka的文件结构顺序写磁盘零拷贝 合理配置刷盘频率客户端消费进度管理 服务端日志 Kafka的日志信息是通过conf/server.properties文件中的log…...

C++ 数据语义学——进程内存空间布局

进程内存空间布局 1. 栈&#xff08;堆栈/栈区&#xff09;2. 堆&#xff08;堆区&#xff09;3. BSS段4. 数据段5. 代码段进程内存空间布局示意图可执行文件的内存布局示例代码 当把一个可执行文件加载到内存后&#xff0c;就变成了一个进程。这个虚拟空间&#xff08;内存&am…...

【数据结构】六、图:2.邻接矩阵、邻接表(有向图、无向图、带权图)

二、存储结构 文章目录 二、存储结构❗1.邻接矩阵1.1无向图❗邻接矩阵-无向图代码-C 1.2有向图❗邻接矩阵-有向图代码-C 1.3带权图1.4性能分析1.5相乘 ❗2.邻接表2.1无向图2.2有向图❗邻接表-C 邻接矩阵VS邻接表邻接矩阵邻接表 ❗1.邻接矩阵 图的邻接矩阵(Adjacency Matrix) 存…...

财务会计与管理会计(三)

文章目录 销售回款提成表MATCH函数的模糊查询在提成类业务中的应用 营业收入分类数据分析OFFSET函数在制作图表数据中的应用 自动生成销售记录对账单VLOOKUP函数的应用 销售回款提成表 MATCH函数的模糊查询在提成类业务中的应用 G3INDEX(I$1:M$1,MATCH(E3,H3:M3,1)) G3INDEX(…...

【数据结构和算法】(基础篇三)——栈和队列

栈和队列 栈&#xff08;Stack&#xff09;和队列&#xff08;Queue&#xff09;是两种非常基本的数据结构&#xff0c;它们主要用于存储和检索元素。尽管它们都用于管理一组数据项&#xff0c;但它们的访问规则和数组都是不同的。 栈 栈是一种后进先出&#xff08;Last In,…...

Linux截图工具gsnap移植arm平台过程记录

Linux截图工具gsnap移植arm平台过程记录 最近工作中一款新产品开发接近尾声&#xff0c;需要写文档截图产品图形&#xff0c;找了一款开源的Linux截屏工具gsnap&#xff0c;将其移植到ARM产品中&#xff0c;这里记录一下移植过程。 gsnap 这个工具源代码就是一个C语言源文件&a…...

密码学知识点02

#来自ウルトラマンレオ&#xff08;雷欧&#xff09; 1 常见加密方式 2 对称加密 采用单钥密码系统的加密方法&#xff0c;同一个密钥可以同时用作信息的加密和解密&#xff0c;这种加密方法称为对称加密&#xff0c;也称为单密钥加密。 常见加密算法&#xff1a; DES : Data…...

实现Pytest测试用例按顺序循环执行多次

要实现测试用例按顺序循环执行多次&#xff0c;可以使用 pytest 的自定义装饰器或插件。这里有两种方法可以实现这个需求&#xff1a; 方法一&#xff1a;使用 pytest-repeat 插件 pytest-repeat 插件允许你重复执行测试用例。你可以使用 --count 参数来指定每个测试用例的执…...

SVN工作原理和使用示例

SVN&#xff08;Subversion&#xff09;是另一种版本控制系统&#xff0c;用于管理项目文件及其变更历史。与Git不同&#xff0c;SVN是集中式版本控制系统&#xff0c;这意味着所有版本控制操作都集中在一个中央服务器上。以下是SVN的工作原理和基本使用示例。 目录 SVN 工作…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

恶补电源:1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...