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

【HTML】Day02

news 2025/11/21 4:38:02

【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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/11/20 1:32:03

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/11/17 10:23:12

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/11/18 2:06:48

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/11/16 21:54:27

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/11/18 8:03:54

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/11/20 10:38:39

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2025/11/17 3:51:27

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

编程新知 2025/11/19 3:03:16