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

【HTML】Day02

news 2026/2/9 6:12:33

【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>测试&nbsp;&nbsp;&nbsp;空格&lt;abc&gt;</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. 列表标签 作用&#xff1a;布局内容排列整齐…...

编程日记 2025/1/5 18:20:53

AI 自动化编程对编程教育的影响

AI 自动化编程的未来 引言 你是否曾想过&#xff0c;未来的程序员需要掌握哪些技能呢&#xff1f;随着人工智能的迅猛发展&#xff0c;特别是生成式AI工具的普及&#xff0c;编程的世界正在发生翻天覆地的变化。编程教育也在这种环境下进行着深刻的转型。那么&#xff0c;AI …...

编程日记 2025/1/5 18:12:45

Java100道面试题

1.JVM内存结构 VM内存结构指的是JVM运行时数据区结构&#xff0c;它主要包含以下几个部分&#xff1a; 堆&#xff08;Heap&#xff09;&#xff1a;线程共享。 JVM堆&#xff08;Heap&#xff09;是Java虚拟机中的一块内存区域&#xff08;所有线程共享&#xff09;&#x…...

编程日记 2025/1/5 18:09:41

解密人工智能：如何改变我们的工作与生活

引言&#xff1a;AI崛起背后的思考 在过去的几十年里&#xff0c;人工智能&#xff08;AI&#xff09;从科幻小说中的神秘存在&#xff0c;逐渐走进了我们的日常生活。无论是智能手机的语音助手&#xff0c;还是推荐心仪商品的电商平台&#xff0c;AI技术已悄然融入工作与生活的…...

编程日记 2025/1/5 18:07:39

Linux postgresql-15部署文档

一、PostgreSQL的安装 1、下载地址 postgresql安装包下载地址&#xff1a;https://www.postgresql.org/download/linux/redhat/ 2、安装脚本 复制下面的安装脚本即可&#xff1a; sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64…...

编程日记 2025/1/5 18:06:34

visual studio 安全模式

一、安全模式&#xff1a; 在 Visual Studio 中&#xff0c;安全模式是一种启动方式&#xff0c;允许你在禁用所有扩展和自定义设置的情况下启动 Visual Studio。这个模式可以帮助排除插件或扩展引起的问题&#xff0c;特别是在 Visual Studio 无法正常启动时。 二、安全模式下…...

编程日记 2025/1/5 18:05:32

Pandas-timestamp和datetime64的区别

文章目录 1. Timestamp&#xff08;时间戳&#xff09;2. Datetime64&#xff08;日期时间64位&#xff09;3. 主要区别&#xff1a; pandas.Timestamp 和 pandas.Datetime64 都是用于表示日期和时间的 Pandas 对象&#xff0c;但它们有一些关键的区别&#xff1a; 1. Timesta…...

编程日记 2025/1/5 18:03:30

@MapperScan

简介&#xff1a; MapperScan注解是MyBatis框架在Spring Boot中的一个重要集成注解 作用&#xff1a; MapperScan主要作用是告诉Spring框架在启动时扫描指定的包路径&#xff0c;并将该路径下的所有MyBatis的Mapper接口批量注入到Spring容器中。这样&#xff0c;开发者就可以…...

编程日记 2025/1/5 18:01:26

SQL中聚类后字段数据串联字符串方法研究

在 SQL 中&#xff0c;使用 聚类&#xff08;GROUP BY&#xff09; 后将某个字段的数据串联为一个字符串&#xff0c;常见的方法包括以下几种&#xff0c;取决于数据库管理系统&#xff08;DBMS&#xff09;的具体支持功能&#xff1a; 1. 使用 GROUP_CONCAT &#xff08;MySQL…...

编程日记 2025/1/5 17:59:24

【嵌入式硬件】直流电机驱动相关

项目场景&#xff1a; 驱动履带车&#xff08;双直流电机&#xff09;前进、后退、转弯 问题描述 电机驱动MOS管烧毁 电机驱动采用IR2104STRH1R403NL的H桥方案&#xff08;这是修改之后的图&#xff09; 原因分析&#xff1a; 1.主要原因是4路PWM没有限幅&#xff0c;修改…...

编程日记 2025/1/5 17:57:20

CSP初赛知识学习计划（第一天）

计算机知识全解析 一、计算机的发展历程 计算机的发展堪称一部波澜壮阔的科技史诗&#xff0c;其源头可追溯至古老的计算工具。早期&#xff0c;为了满足人类在天文、历法计算以及商业贸易中对数据处理的需求&#xff0c;算盘、算筹等手动计算器械应运而生&#xff0c;它们依…...

编程日记 2025/1/5 17:55:13

【嵌入式硬件】嵌入式显示屏接口

数字显示串行接口&#xff08;Digital Display Serial Interface&#xff09; SPI 不过多赘述。 I2C-bus interface 不过多赘述 MIPI DSI MIPI (Mobile Industry Processor Interface) Alliance, DSI (Display Serial Interface) 一般用于移动设备&#xff0c;下面是接口…...

编程日记 2025/1/5 17:52:08

07-ArcGIS For JavaScript--隐藏参数qualitySettings（memory和lod控制）

目录 1、综述2、sceneview.qualitySettings2.1、sceneview.qualitySettings.memoryLimit2.2、lodFactor2.3 additionalCacheMemory 3、结论 1、综述 先上重点&#xff0c;SceneView.qualitySettings为隐藏对象参数&#xff0c;该对象的memoryLimit和lodFactor等值&#xff0c;…...

编程日记 2025/1/5 17:49:06

QML自定义数值编辑框SpinBox样式

代码展示 import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.1Window {visible: truewidth: 640height: 480title: qsTr("Hello World")SpinBox {id: controlvalue: 50editable: truecontentItem: TextInput {z: 2text: control.textFromVal…...

编程日记 2025/1/5 17:48:05

【数据可视化-10】国防科技大学录取分数线可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/1/5 17:46:03

深入探索：将 Elasticsearch 与 Ruby 工具结合使用

深入探索&#xff1a;将 Elasticsearch 与 Ruby 工具结合使用 一、背景介绍 1. Elasticsearch 与 Ruby 的结合背景 在现代软件开发中&#xff0c;Elasticsearch 作为一个基于 Lucene 的搜索引擎&#xff0c;以其分布式、可扩展、实时搜索等特点而广受欢迎。Ruby&#xff0c;…...

编程日记 2025/1/5 17:45:01

Istio 补充 Kubernetes 的不足

1 Istio 补充 Kubernetes 的不足 Kubernetes 强大但无法解决复杂分布式系统中的非功能性需求&#xff0c;如流量路由、协议转换、请求重试和负载均衡。Istio作为Service Mesh&#xff0c;通过独立的代理进程处理这些需求&#xff0c;避免直接修改业务代码。 2. 独立的代理进程…...

编程日记 2025/1/5 17:40:56

远程主机执行脚本1、无脚本内容外协。

使用 ssh rootyour_host bash -c "source <(cat)" < your_scripts.sh 或类似的命令来远程执行脚本&#xff0c;而不让脚本内容外泄或不让其他人看到脚本信息的原因通常是为了安全性和隐私保护。以下是几种考虑&#xff1a; 安全性&#xff1a;通过直接将脚本内…...

编程日记 2025/1/5 17:33:48

Jmeter进阶篇（32）Jmeter 在 MySQL 数据库压测中的应用

一、引言 在当今数字化时代，数据库性能的优化对于企业的发展至关重要。随着业务量的不断增长，数据库需要承受越来越大的压力。MySQL作为一种广泛使用的开源数据库，其性能和稳定性备受关注。为了确保数据库在高负载情况下能够正常运行，进行压测是必不可少的环节。Jmeter作为…...

编程日记 2025/1/5 17:31:44

Python脚本实现通过Vector VN1630A CAN盒子与ECU通信

1 安装 python-can 包 安装命令如下&#xff1a; pip install python-can安装完成后可用下面命令查看是否安装成功及版本。 pip show python-canName: python-can Version: 4.4.2 Summary: Controller Area Network interface module for Python Home-page: https://github.…...

编程日记 2025/1/5 17:28:41

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2026/2/8 20:41:53

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/12/16 18:04:55

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50