【HTML】Day02
【HTML】Day02
- 1. 列表标签
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
- 2. 表格标签
- 2.1 合并单元格
- 3. 表单标签
- 3.1 input标签基本使用
- 3.2 上传多个文件
- 4. 下拉菜单、文本域
- 5. label标签
- 6. 按钮button
- 7. div与span、字符实体
- 字符实体
1. 列表标签
作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。
1.1 无序列表
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul 嵌套 li , ul 是无序列表, li是列表条目
1. ul标签里面只能包裹li标签
2. li标签里面可以包裹任何内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>列表条目1</li><li>列表条目2</li></ul>
</body>
</html>
1.2 有序列表
作用:布局排列整齐的需要规定顺序的区域。
标签:ol嵌套li, ol是有序列表,li是列表条目。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol>
</body>
</html>
1.3 定义列表
标签:dl嵌套dt和dd, dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>列表标题</dt><dd>列表描述/详情</dd><dt>列表标题x</dt><dd>列表描述/详情x</dd></dl>
</body>
</html>
2. 表格标签
网页中的表格与Excel表格类似,用来展示数据。
标签:table 嵌套 tr tr嵌套td/th
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- border边框cellspacing单元格间距cellpadding单元格距内容的距离--><table align="center" border="1" cellspacing="0"cellpadding="20"><caption>表格标题</caption><!-- tr表示行 th表头 加粗并居中 td表示列 16:20上课 --><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>张三</td><td>28</td></tr><tr><td>2</td><td>尼古拉斯赵四</td><td>18</td></tr></table>
</body>
</html>
表格标签
2.1 合并单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="" cellspacing="" cellpadding=""><!-- colspan跨列合并 --> <!-- rowspan跨行合并 --> <tr><td align="center" colspan="2">1-1</td><td rowspan="2">1-3</td></tr><tr><td rowspan="2">2-1</td><td>2-2</td></tr><tr><td colspan="2" align="center">3-2</td></tr></table>
</body>
</html>
3. 表单标签
3.1 input标签基本使用
input标签type属性值不同,功能也不同。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- action服务器地址 method提交方式 --><form action="http://www.tmooc.cn" method="get"><!-- 文本框 name是对传递过去的参数做介绍 id唯一标识 value值 设置文本框的值--><input type="text" name="username"placeholder="请输入用户名" id="" value="" /><!-- 密码框 placeholder占位文本 --><input type="password" name="pwd"placeholder="请输入您的密码" id="" value="" /><hr ><!-- 单选 必须写value checked 设置默认选中-->性别: <input type="radio" name="gender" id="" value="m" />男<input type="radio" checked="checked" name="gender" id="" value="f" />女<hr ><!-- 多选 和单选类似-->爱好: <input type="checkbox" name="hobby" id=""value="cy" />抽烟<input type="checkbox" name="hobby" id=""value="hj" />喝酒<input type="checkbox" checked="checked" name="hobby" id="tt"value="tt" /><label for="tt">烫头</label><!-- label扩充点击范围 --><input type="checkbox" name="hobby" id="wz" value="wangzhe"/><label for="wz">王者荣耀</label><hr ><!-- 日期选择器-->生日:<input type="date" name="birthday" id="birthday"/><hr ><!-- 文件选择器-->靓照:<input type="file" name="pic" id="pic"/><hr ><input type="submit" value="注册"/></form></body>
</html>
3.2 上传多个文件
默认情况下,文件上传表单控件只能上传一个文件,添加multiple
属性可以实现文件多选功能。
<input type="file" multiple>
4. 下拉菜单、文本域
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="http://www.tmooc.cn" method="get"><!-- 下拉选 -->所在城市:<select name="city"><option value="bj">北京</option><!-- selected默认选中 --><option value="sh" selected="selected">上海</option><option value="gz">广州</option></select><br><!-- 文本域 rows行 cols列-->自我介绍:<textarea name="intro" rows="3" cols="20"placeholder="说点儿啥..."></textarea><!-- 提交按钮 --><input type="submit" value="注册"/><!-- 重置按钮 --><input type="reset" /><!-- 自定义按钮 --><input type="button" value="按钮" /><button type="button">按钮</button></form><p>测试 空格<abc></p><div id="">div1</div><div id="">div2</div><div id="">div3</div><span>span1</span><span>span2</span><span>span3</span></body>
</html>
5. label标签
作用:网页中,某个标签的说明文本。
经验:用label标签绑定文本和表单控件的关系,增大表单控件的点击范围。就比如上面的王者荣耀,点击文字也能选择到
6. 按钮button
<button type="">按钮 </button>
7. div与span、字符实体
作用:布局网页(划分网页区域,摆放内容)
- div:独占一行
- span:不换行
字符实体
相关文章:
【HTML】Day02
【HTML】Day02 1. 列表标签1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格标签2.1 合并单元格 3. 表单标签3.1 input标签基本使用3.2 上传多个文件 4. 下拉菜单、文本域5. label标签6. 按钮button7. div与span、字符实体字符实体 1. 列表标签 作用:布局内容排列整齐…...
Kafka的rebalance机制
1、什么是 rebalance 机制 重平衡(rebalance)机制规定了如何让消费者组下的所有消费者来分配 topic 中的每一个分区。 2、rebalance 机制的触发条件是什么 (1)消费者组内成员变更 成员增加:当有新的消费者加入到消费…...
Spring Boot - 日志功能深度解析与实践指南
文章目录 概述1. Spring Boot 日志功能概述2. 默认日志框架:LogbackLogback 的核心组件Logback 的配置文件 3. 日志级别及其配置配置日志级别3.1 配置文件3.2 环境变量3.3 命令行参数 4. 日志格式自定义自定义日志格式 5. 日志文件输出6. 日志归档与清理7. 自定义日…...
【React+TypeScript+DeepSeek】穿越时空对话机
引言 在这个数字化的时代,历史学习常常给人一种距离感。教科书中的历史人物似乎永远停留在文字里,我们无法真正理解他们的思想和智慧。如何让这些伟大的历史人物"活"起来?如何让历史学习变得生动有趣?带着这些思考&…...
2025年贵州省职业院校技能大赛信息安全管理与评估赛项规程
贵州省职业院校技能大赛赛项规程 赛项名称: 信息安全管理与评估 英文名称: Information Security Management and Evaluation 赛项组别: 高职组 赛项编号: GZ032 1 2 一、赛项信息 赛项类别 囚每年赛 □隔年赛(□单数年…...
2、蓝牙打印机点灯-GPIO输出控制
1、硬件 1.1、看原理图 初始状态位高电平. 需要驱动PA1输出高低电平控制PA1. 1.2、看手册 a、系统架构图 GPIOA在APB2总线上。 b、RCC使能 GPIOA在第2位。 c、GPIO寄存器配置 端口:PA1 模式:通用推挽输出模式 -- 输出0、1即可 速度:5…...
推荐系统重排:DPP 多样性算法
行列式点过程(DPP)算法:原理、应用及优化 推荐系统【多样性算法】系列文章(置顶) 1.推荐系统重排:MMR 多样性算法 2.推荐系统重排:DPP 多样性算法 引言 行列式点过程(Determinanta…...
【业务场景】sql server从Windows迁移到Linux
目录 1.背景 2.Linux安装sql server 3.服务器不开端口的问题 4.数据库导入导出问题 1.背景 博主在24年年底接手运维了一个政府的老系统,整个应用和数据库单点部署在一台Windows Server服务器上,数据库选型是经典的老项目标配——sql server。随着近…...
SpringMVC(三)请求
目录 一、RequestMapping注解 1.RequestMapping的属性 实例 1.在这里创建文件,命名为Test: 2.复现-返回一个页面: 创建test界面(随便写点什么): Test文件中编写: 编辑 运行: 3.不返回…...
【HeadFirst系列之HeadFirst设计模式】第1天之HeadFirst设计模式开胃菜
HeadFirst设计模式开胃菜 前言 从今日起,陆续分享《HeadFirst设计模式》的读书笔记,希望能够帮助大家更好的理解设计模式,提高自己的编程能力。 今天要分享的是【HeadFirst设计模式开胃菜】,主要介绍了设计模式的基本概念、设计模…...
Spring线程池优雅关闭
前言 线程池大家一定不陌生,常被用来异步执行一些耗时的任务。但是线程池如何优雅的关闭,却少有人关注。 当 JVM 进程关闭时,你提交到线程池的任务会被如何处理?如何保证任务不丢? ThreadPoolExecutor Java 对线程…...
Spring为什么要用三级缓存解决循环依赖?
1.什么是循环依赖 本文为了方便说明,先设置两个业务层对象,命名为AService和BService。其中Spring是如何把一个Bean对象创建出来的,其生命周期如下: 构造方法–> 不同对象 --> 注入依赖 -->初始化前 --> 初始化后–&…...
【苏德矿高等数学】第4讲:数列极限定义-1
2. 数列极限 数列极限是整个微积分的核心。它的思想贯穿整个微积分之中。 数列极限是最基本的、最核心的、最重要的、最难的。 2.1 数列 【定义】无限排列的一列数 a 1 , a 2 , ⋯ , a n , ⋯ a_1,a_2,\cdots,a_n,\cdots a1,a2,⋯,an,⋯就称为数列,记作 { …...
Go语言的 的并发编程(Concurrency)核心知识
Go语言的并发编程(Concurrency)核心知识 在现代软件开发中,尤其是处理高并发任务时,优秀的并发编程能力显得尤为重要。Go语言(或称Golang)是为并发编程而生的一种编程语言,它通过简洁的语法和强…...
Go语言中的逃逸分析:深入浅出
Go语言中的逃逸分析:深入浅出 在Go语言中,逃逸分析(Escape Analysis)是一个非常重要且强大的编译器优化技术。它帮助编译器决定一个变量是在栈上分配还是在堆上分配,从而影响程序的性能和内存管理。本文将深入探讨Go语…...
flux中的缓存
1. cache,onBackpressureBuffer。都是缓存。cache可以将hot流的数据缓存起来。onBackpressureBuffer也是缓存,但是当下游消费者的处理速度比上游生产者慢时,上游生产的数据会被暂时存储在缓冲区中,防止丢失。 2. Flux.range 默认…...
Vue3中使用 Vue Flow 流程图方法
效果图: 最近项目开发时有一个流程图的功能,需要做流程节点的展示,就搜到了 Vue Flow 这个插件,这个插件总得来说还可以,简单已使用,下边就总结一下使用的方法: Vue Flow官网:https…...
[Effective C++]条款42 typename
本文初发于 “天目中云的小站”,同步转载于此。 条款42 : 了解typename的双重意义 本条款中我们将了解typename的两种使用场景, 对typename的内涵及使用加深认知. template声明式 在template的声明中, template<class T>和template<typename T>都是被允…...
MySQL 8 主从同步配置(Master-Slave Replication)
📋 MySQL 8 主从同步配置(Master-Slave Replication) 🔧 目标: 配置 MySQL 8 主从同步,实现 主库(Master) 处理写操作,从库(Slave) 处理读操作,达到 读写分离 和 高可用性 的目的。 🔑 核心步骤: 配置 主库(Master)配置 从库(Slave)启动主从复制验证主从…...
STM32第十一课:STM32-基于标准库的42步进电机的简单IO控制(附电机教程,看到即赚到)
一:步进电机简介 步进电机又称为脉冲电机,简而言之,就是一步一步前进的电机。基于最基本的电磁铁原理,它是一种可以自由回转的电磁铁,其动作原理是依靠气隙磁导的变化来产生电磁转矩,步进电机的角位移量与输入的脉冲个数严格成正…...
模拟(算法-6)
模拟简介 模拟就是根据题目要求,比着葫芦画瓢,即直接按照题目要求写就行了 考察的是我们的编码能力 步骤: 演草纸上画图模拟(重要) 代码编写 虽然很多时候此类题比较简单,但是也有例外,如本文第…...
Clickhouse集群部署(3分片1副本)
Clickhouse集群部署 3台Linux服务器,搭建Clickhouse集群3分片1副本模式 1、安装Java、Clickhouse、Zookeeper dpkg -i clickhouse-client_23.2.6.34_amd64.deb dpkg -i clickhouse-common-static_23.2.6.34_amd64.deb dpkg -i clickhouse-server_23.2.6.34_amd64…...
MySQL(六)MySQL 案例
1. MySQL 案例 1.1. 设计数据库 1、首先根据相关业务需求(主要参考输出输入条件)规划出表的基本结构 2、根据业务规则进行状态字段设计 3、预估相关表的数据量进行容量规划 4、确定主键 5、根据对相关处理语句的分析对数据结构进行相应的变更。 设计表的时…...
【网络协议栈】TCP/IP协议栈中重要协议和技术(DNS、ICMP、NAT、代理服务器、以及内网穿透)
每日激励:“请给自己一个鼓励说:Jack我很棒!—Jack” 绪论: 本章是TCP/IP网络协议层的完结篇,本章将主要去补充一些重要的协议和了解一些网络中常见的名词,具体如:DNS、ICMP、NAT、代理服务器…...
NLP中特征提取方法的总结
1. Bag of Words (BOW) 描述:将文本表示为一个词汇表中的词频向量,忽略词的顺序。 优点:实现简单,广泛应用。 缺点:不考虑词序和上下文信息,向量空间维度可能非常大。 应用:文本分类、情感分…...
《HarmonyOS第一课》焕新升级,赋能开发者快速掌握鸿蒙应用开发
随着HarmonyOS NEXT发布,鸿蒙生态日益壮大,广大开发者对于系统化学习平台和课程的需求愈发强烈。近日,华为精心打造的《HarmonyOS第一课》全新上线,集“学、练、考”于一体,凭借多维融合的教学模式与系统课程设置&…...
JMeter + Grafana +InfluxDB性能监控 (二)
您可以通过JMeter、Grafana 和 InfluxDB来搭建一个炫酷的基于JMeter测试数据的性能测试监控平台。 下面,笔者详细介绍具体的搭建过程。 安装并配置InfluxDB 您可以从清华大学开源软件镜像站等获得InfluxDB的RPM包,这里笔者下载的是influxdb-1.8.0.x86_…...
【微服务】3、配置管理
微服务配置管理 已掌握的微服务组件及配置管理问题引出 已掌握注册中心、Openfan、远程调用、负载均衡、网关等组件,具备微服务开发能力,但仍存在其他问题待解决。微服务和网关存在大量配置文件,其中包含很多重复配置,如数据库、日…...
数据结构(顺序表)
文章目录 数据结构概述什么是数据结构数据结构的类型常见的数据结构 线性表概念举例 顺序表基本概念基本操作 完整代码顺序表优缺点总结 数据结构概述 什么是数据结构 数据结构:数据结构就是计算机存储,组织,管理数据的方式方法 数据结构的…...
ARM架构服务器安装部署KVM虚拟化环境
一、查看内核是否支持KVM虚拟化 针对ARM架构服务器,若/dev/kvm 和 /sys/module/kvm任意一个不存在,都说明内核不支持KVM虚拟化 [rootlocalhost ~]# ls -l /dev/kvm crw-rw---- 1 root kvm 10, 232 May 6 09:18 /dev/kvm[rootlocalhost ~]# ls /sys/mo…...
Azkaban其二,具体使用以及告警设置
目录 Azkaban的使用 1、使用Flow1.0(比较老旧) 2、Flow2.0的用法 1、小试牛刀 2、YAML格式的数据 3、多任务依赖 4、内嵌流(嵌套流)案例 5、动态传参 3、Azkaban的报警机制 1)邮箱通知 2)电话报警机制 4、关…...
不只是mini-react第一节:实现最简单mini-react
项目总结构: ├─ 📁core │ ├─ 📄React.js │ └─ 📄ReactDom.js ├─ 📁node_modules ├─ 📁tests │ └─ 📄createElement.spec.js ├─ 📄App.js ├─ 📄in…...
MySQL数据库备份与恢复策略
数据是企业和应用的核心资产,可靠的备份和恢复策略是确保数据安全性和业务连续性的关键。在本篇文章中,我们将详细介绍 MySQL 数据库的备份和恢复方法,包括逻辑备份、物理备份、自动化备份,以及常见问题的处理方法。 一、逻辑备份 逻辑备份是通过导出数据库的结构和数据生…...
SpringBoot下载文件的几种方式
小文件:直接将文件一次性读取到内存中,文件大可能会导致OOM GetMapping("/download1")public void download1(HttpServletResponse response) throws IOException {// 指定要下载的文件File file new File("C:\\Users\\syd\\Desktop\\do…...
探索现代 Web 开发中的流行技术:深入学习 Vite 的使用
在前端开发的世界中,构建工具扮演着越来越重要的角色。从 Webpack 到 Parcel,再到 Rollup,每个工具都有自己的独特定位和目标。而今天,我们要讨论的是一款近年来迅速崛起并受到广泛欢迎的构建工具— Vite。 本文将从基本原理到实…...
React虚拟DOM:理解和应用
写在前面 在现代前端开发中,React 是一个非常流行的 JavaScript 库,用于构建用户界面。它引入了一个名为“虚拟 DOM”(Virtual DOM)的概念,这个概念对于 React 的高效性能和易用性至关重要。本文将深入探讨 React Vir…...
C++和SFML游戏入门
让我们深入探讨一下如何使用C和SFML(Simple and Fast Multimedia Library)来创建一个更为详细的游戏代码示例。我们将构建一个简单的2D游戏,其中包含一个可移动的角色、基本的碰撞检测以及简单的得分系统。 项目结构 首先,我们定…...
Django 表单
Django 表单 Django 表单是 Web 开发中一个重要的组成部分,它允许用户与网站进行交互。在 Django 框架中,表单用于收集和验证用户输入的数据。Django 提供了一个强大的表单处理系统,使得开发者能够轻松地创建表单,处理表单数据,并进行验证。 1. Django 表单基础 Django…...
Ubuntu 安装英伟达显卡驱动问题记录
建议 无论什么版本的系统,都建议从官网下载驱动,一般下载下来后是一个 run 开头的可执行程序,直接在命令行执行就可以。 之所以这么建议,是因为使用 包管理工具安装的驱动一般都是社区版本,社区版本的问题就是没有签名,需要在 BIOS 内关闭 security boot 才可以加载对应…...
机器视觉面试题PDF
以下是一些机器视觉面试题PDF资源的推荐: GitHub仓库• 《百面计算机视觉》面试题整理:这个GitHub仓库整理了计算机视觉算法岗的面试题,包括深度学习基础、机器学习高频面试题、传统CV(Opencv面试题)、目标检测、图像分类、图像分割、Transfo…...
【网络协议】IPv4 地址分配 - 第一部分
文章目录 十进制与二进制网络如何被寻址地址类型网络地址广播地址主机地址 如何确定网络和主机部分的位数?网络中的主机数量与前缀号的关系计算每个前缀的主机数量公式 子网掩码二进制与操作(Binary ANDing)与操作(AND Operation&…...
掌握 Dockerfile:格式、解析器指令、环境变量替换
Docker 是一个开源平台,旨在自动化应用程序的构建、交付和运行。通过 Dockerfile,您可以定义镜像的构建过程。Dockerfile 是由一系列指令组成的文件,Docker 根据这些指令构建镜像。本文将介绍常用的 Dockerfile 指令、格式、解析器指令以及环…...
AWS Glue基础知识
AWS Glue 是一项完全托管的 ETL(提取、转换、加载)服务,与考试相关,尤其是在数据集成、处理和分析方面。 1.数据集成和 ETL(提取、转换、加载) AWS Glue 主要用于构建 ETL 管道以准备数据以进行分析。作为…...
单片机-LED实验
1、51工程模版 #include "reg52.h" void main(){ while(1){ } } 2、LED灯亮 #include "reg52.h" sbit LED1P2^0; void main(){ while(1){ LED10; } } 3、LED闪烁 #include "reg52.h" sbit LED1P2^0; //P2大…...
使用Python实现健康跟踪应用:打造智能健康管理助手
随着人们对健康的关注日益增强,智能健康管理逐渐成为热门趋势。通过持续跟踪身体状况、饮食、运动和睡眠等方面的数据,我们可以更好地了解自己的健康状态,并采取相应的措施来保持身体健康。Python,作为一种简洁且功能强大的编程语言,非常适合用来开发健康跟踪应用。本文将…...
结构型模式6.享元模式
结构型模式 适配器模式(Adapter Pattern)桥接模式(Bridge Pattern)组合模式(Composite Pattern)装饰器模式(Decorator Pattern)外观模式(Facade Pattern)享元…...
AWS S3文件存储工具类
pom依赖 <!--aws-s3--> <dependency><groupId>com.amazonaws</groupId><artifactId>aws-java-sdk-s3</artifactId><version>1.12.95</version></dependency>S3Utils import cn.hutool.core.util.ZipUtil; import com.a…...
MacDriver 项目推荐
MacDriver 项目推荐 macdriver Native Mac APIs for Go. Soon to be renamed DarwinKit! 项目地址: https://gitcode.com/gh_mirrors/ma/macdriver 1. 项目基础介绍和主要编程语言 MacDriver 是一个开源项目,旨在为 Go 语言提供原生的 macOS API 支持。该项…...
笔记:一次mysql主从复制延迟高的处理尝试
背景 mysql 5.7 主从复制 主库进行了一次灌数,导致多个大事务产生,主从延迟下不去,经确认该表最终truncate,并且该表仅有insert和select操作,故对该表的事务进行跳过,直到同步至truncate 跳过事务需谨慎&…...
《Vue3实战教程》40:Vue3安全
如果您有疑问,请观看视频教程《Vue3实战教程》 安全 报告漏洞 当一个漏洞被上报时,它会立刻成为我们最关心的问题,会有全职的贡献者暂时搁置其他所有任务来解决这个问题。如需报告漏洞,请发送电子邮件至 securityvuejs.org。…...