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

【HTML】Day02

news 2026/2/7 17:15:49

【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

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/1/26 20:38:50

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/7 11:00:30

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/1/28 8:48:34

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2026/2/4 17:42:50