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

HTML第二节

article 2026/4/2 3:10:03

一.列表

1.列表的简介

2.无序列表

注：1.ul里面只能放li，不能放标题和段落标签

2.li里面可以放标题和段落等内容

3.有序列表

4.定义列表

注：要实现上图的效果需要CSS

二.表格

1.表格介绍

注：1.th有额外的效果，可以使字体加粗并居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
</html>

注：1.利用border加入了1像素的边框

2.表格标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title>
</head>
<body><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>

注：1.使用表格标签对内容和效果无任何影响，只是为了方便阅读

3.合并单元格

注：1.保留的是最左和最上的单元格

2.有了表格结构标签后就不能跨结构合并单元格

注：1.如上图要保留的是1，删除2

2.不能够将tbody和tfoot的内容合并在一起，tbody只能和tbody合并

三.表单

1.表单的概念

2.input标签

注：1.text标签用于输入用户名

2.radio用于类似选择男女的选项

3.checkbox用于下面一种情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单练习</title>
</head>
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件<input type="file">
</body>
</html>

注：1.代码前面的密码框，文本框是提示文字

3.input标签占位文本（placeholder）

文本框：<input type="text" placeholder="请输入用户名">
<br><br>
密码框：<input type="password" placeholder="请输入密码">

4.单选框（radio）

注：1.用name来给单选框来起名字，名字一样的会被分到同一个组，同一组只能选择一个

2.使用checked可以使网页打开时默认选中哪个选项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单选框练习</title>
</head>
<body>性别：<input type="radio" name="gender">沃尔玛购物袋<input type="radio" name="gender" checked>武装直升机
</body>
</html>

会默认选中武装直升机，如果两个选项均有checked，那么就会默认最后一个选项

4.上传多个文件（multiple）

5.多选框

<!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>兴趣爱好：<input type="checkbox" checked>唱<input type="checkbox">跳<input type="checkbox">rap<input type="checkbox">篮球
</body>
</html>

四.下拉菜单

注：1.selected会使其默认选中，如果不加selected的话，则是第一个为默认选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉菜单</title>
</head>
<body>城市：<select><option >北京</option><option >上海</option><option >武汉</option><option selected>郑州</option><option >深圳</option></select>
</body>
</html>

五.文本域（可以输入多行数据）

注：1.textarea里面也可以放placeholder，使提示文字变浅

六.lable标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>label标签练习</title>
</head>
<body>性别：<input type="radio" id="man" name="gender"><label for="man">男</label><label><input type="radio" name="gender">女</label>
</body>
</html>

注：1.label标签可以增加选项点击的范围，比如可以直接点击“男”字就能选上选项

2.注意写的时候将name属性带上

七.按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮练习</title>
</head>
<body><form action="">用户名：<input type="text"><br><br>密码：<input type="password"><br><br><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button></form>
</body>
</html>

注：1.只有将用户名，密码，按钮等内容放在同一个表单域（form）中才能实现reset重置功能

2.form中的action属性，是提交到后台，后台的地址

八.div和span标签

<!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><div>这是div标签</div><div>这是div标签</div><span>这是span标签</span><span>这是span标签</span>
</body>
</html>

九.字符实体

注：1.中文字符大小的空格字符：&emsp;

、

本文是对B站上黑马免费课程的总结，供自己学习使用

HTML第二节

一.列表 1.列表的简介 2.无序列表注：1.ul里面只能放li，不能放标题和段落标签 2.li里面可以放标题和段落等内容 3.有序列表 4.定义列表注：要实现上图的效果需要CSS 二.表格 1.表格介绍注：1.th有额外的效果，可以…...

编程日记 2026/4/2 3:10:03

坐标变换及视图变换和透视变换（相机透视模型）

文章目录 2D transformationScaleReflectionShear（切变）Rotation around originTranslationReverse变换顺序复杂变换的分解齐次坐标（Homogenous Coordinates）3D transformationScale&TranslationRotation Viewing / Camera t…...

编程日记 2026/4/2 14:28:36

Vue 表单优化：下拉框值改变前的确认提示与还原逻辑实现

在开发表单类功能时，我们经常需要对用户的重要操作进行确认提示，以避免误操作导致的数据丢失或错误。本文将通过一个实际案例，介绍如何在 Vue 中实现下拉框值改变前的确认提示，并在用户取消操作时还原原始值。场景描述在项目中…...

编程日记 2026/3/30 22:36:17

使用mermaid查看cursor程序生成的流程图

一、得到cursor生成的流程图文本 cursor写的程序正常运行后，在对话框输入框中输入诸如“请生成扫雷的代码流程图”，然后cursor就把流程图给生成了，但是看到的还是文本的样子，保留这部分内容待用二、注册一个Mermaid绘图账号 …...

编程日记 2026/3/19 17:00:41

Flask 应用结构与模块化管理详细笔记

1. 代码结构优化：StructureA 最初的 Flask 项目结构适用于小型应用，但不适用于大型应用。为了改进代码结构，我们将 URL 管理应用拆分为多个模块。 1.1 StructureA 目录结构 StructureA |-- .flaskenv |-- app.py |-- views.py |-- templat…...

编程日记 2026/4/2 13:16:12

(八)趣学设计模式之装饰器模式！

目录一、啥是装饰器模式？二、为什么要用装饰器模式？三、装饰器模式的实现方式四、装饰器模式的优缺点五、装饰器模式的应用场景六、装饰器模式 vs 代理模式七、总结 🌟我的其他文章也讲解的比较有趣😁，如果喜欢…...

编程日记 2026/3/28 5:02:20

JVM线程分析详解

java线程状态： 初始(NEW)：新创建了一个线程对象，但还没有调用start()方法。运行(RUNNABLE)：Java线程中将就绪（ready）和运行中（running）两种状态笼统的称为“运行”。线程对象创建…...

编程日记 2026/3/29 22:00:26

毕业项目推荐：基于yolov8/yolo11的野生菌菇检测识别系统（python+卷积神经网络）

文章目录概要一、整体资源介绍技术要点功能展示：功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出（xls格式）功能6 支持切换检测到的目标查看二、数据集三、算法介绍1. YO…...

编程日记 2026/4/1 22:50:51

DeepSeek 助力 Vue3 开发：打造丝滑的页眉（Header）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2026/4/2 12:13:00

常用空间数据结构对比

空间数据结构是用来组织和查询多维空间数据的算法结构。它们在地理信息系统 (GIS)、计算机图形学、机器人导航、机器学习等领域非常重要。以下是几种常见空间数据结构的对比： 1. 四叉树（Quadtree） 适用场景：二维空间数据&#x…...

编程日记 2025/8/31 2:19:23

PHP应用程序设计：一个实际的例子（3）

使应用程序适用于网络如果你正好计划用P H P开发你自己的服务程序（或者其他一些相似的东西），请重新思考一下。你可能已经对这些思想有些迷惑了：实现一个聊天服务程序意味着实现一个网络服务程序。这是我们实际上介绍给大家的东西…...

编程日记 2026/4/2 14:51:20

RabbitMQ 的介绍与使用

一. 简介 1> 什么是MQ 消息队列（Message Queue，简称MQ），从字面意思上看，本质是个队列，FIFO先入先出，只不过队列中存放的内容是message而已。其主要用途：不同进程Process/线程T…...

编程日记 2026/3/17 21:07:19

spring boot 连接FTP实现文件上传

spring boot　连接FTP实现文件上传 maven： <dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><version>3.8.0</version></dependency>接口示例： ApiO…...

编程日记 2026/2/21 1:26:41

OpenCV给图像添加噪声

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述如果你已经有了一张干净的图像，并希望通过编程方式向其添加噪声，可以使用 OpenCV 来实现这一点。以下是一个简单的例子&a…...

编程日记 2026/3/26 22:06:57

Elasticsearch：使用阿里云 AI 服务进行嵌入和重新排名

作者：来自 Elastic Toms Mura 将阿里云 AI 服务功能与 Elastic 结合使用。更多阅读，请参阅 “Elasticsearch：使用阿里 infererence API 及 semantic text 进行向量搜索”。在本文中，我们将介绍如何将阿里云 AI 功能与 Elastics…...

编程日记 2026/2/27 11:52:20

管理后台环境配置

后端配置及启动 a. 软件安装 1. Java sdk 1.8 2. maven 3.6 3. intellij IDEA 2024 4. Visual C Redistributable 5. mongodb 7.0 6. mysql 8.0 双击安装：mysql-installer-community-8.0.41.0.msi 版本选择：Full，包括服务器和客户端 …...

编程日记 2026/3/30 23:59:05

数字IC低功耗后端设计实现之power gating和isolation技术

考虑低功耗设计需求，下图中间那个功能模块是需要做power domain的，即这个模块需要插MTCMOS。需要开启时，外面的VDD会和这个模块的LOCAL VDD形成通路，否则就是断开即power off状态。这些低功耗设计实现经验，你真的懂了…...

编程日记 2026/4/2 12:15:02

【网络编程】几个常用命令：ping / netstat / xargs / pidof / watch

ping：检测网络联通 1. ping 的基本功能2. ping 的工作原理3. ping 的常见用法4. ping 的输出解释5. ping 的应用场景6. 注意事项 netstat：查看网络状态 1. netstat 的基本功能2. 常见用法3. 示例4. 输出字段解释5. netstat 的替代工具6. 注意事项 xargs&…...

编程日记 2026/4/1 17:42:07

sqlilab 46 关（布尔、时间盲注）

sqlilabs 46关（布尔、时间盲注） 46关有变化了，需要我们输入sort，那我们就从sort1开始递增测试： 发现测试到sort4就出现报错： 我们查看源码： 从图中可看出：用户输入的sort值被用于查…...

编程日记 2026/3/7 1:22:48

视觉应用工程师（面试）

视觉应用工程师（面试） 1.自我介绍、会的技能、项目 2.相机和机械手调试过程检查硬件，看软件驱动是否链接，调节相机和镜头保证能够识别这个物料，看接口和通讯是否正常，如：波特率，数…...

编程日记 2026/3/3 2:25:38

redis restore 命令的用法

Redis 的 RESTORE 命令用于将序列化后的数据（通常由 DUMP 命令生成）恢复为 Redis 的键值。它在数据迁移、备份恢复和跨实例同步等场景中非常有用。以下是详细说明： 作用数据恢复将 DUMP 命令生成的序列化数据重新加载到 Redis 中&#xff…...

编程日记 2026/3/30 23:35:06

当AI重构认知：技术狂潮下的教育沉思录

备注：文章未Deepseek R1模型辅助生成，如有不妥请谅解。以下使原文： 我有三个娃，各间隔4到5岁，经历过搜索引擎，短视频，短剧，本身曾经也是教育专业出生，任何事务都有两面性…...

编程日记 2026/3/31 3:05:13

《Effective Objective-C》阅读笔记（下）

目录内存管理理解引用计数引用计数工作原理自动释放池保留环以ARC简化引用计数使用ARC时必须遵循的方法命名规则变量的内存管理语义 ARC如何清理实例变量在dealloc方法中只释放引用并解除监听编写“异常安全代码”时留意内存管理问题以弱引用避免保留环 …...

编程日记 2026/3/25 23:49:12

穷举vs暴搜vs深搜vs回溯vs剪枝（典型算法思想）—— OJ例题算法解析思路

回溯算法的模版 void backtrack(vector<int>& path, vector<int>& choice, ...) {// 满⾜结束条件if (/* 满⾜结束条件 */) {// 将路径添加到结果集中res.push_back(path);return;}// 遍历所有选择for (int i 0; i < choices.size(); i) {// 做出选择…...

编程日记 2026/4/2 10:28:21

【Java项目】基于Spring Boot的校园博客系统

【Java项目】基于Spring Boot的校园博客系统技术简介：采用Java技术、Spring Boot框架、MySQL数据库等实现。系统简介：校园博客系统是一个典型的管理系统，主要功能包括管理员：首页、个人中心、博主管理、文章分类管理、文章信息…...

编程日记 2026/3/8 13:19:30

计算机毕业设计SpringBoot+Vue.js图书进销存管理系统(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2026/3/11 4:51:46

算法-数据结构（图）-迪杰斯特拉最短逻辑算法（ Dijkstra）

迪杰斯特拉算法（Dijkstras Algorithm） 是一种用于计算单源最短路径的经典算法，由荷兰计算机科学家艾兹赫尔迪杰斯特拉（Edsger W. Dijkstra） 于1956年提出。它的主要目标是找到从图中的某个源节点到所有其他节点的最短…...

编程日记 2026/3/6 6:54:45

C语言【进阶篇】之指针——涵盖基础、数组与高级概念

目录 🚀前言🤔指针是什么🌟指针基础💯内存与地址💯指针变量💯 指针类型💯const 修饰指针💯指针运算💯野指针和 assert 断言 💻数组与指针💯数组名…...

编程日记 2026/3/12 20:19:28

关于命令行下的 git（ git add、git commit、git push)

文章目录关于 gitgit 的概念git 操作（git add、git commit、git push 三板斧）安装 git新建仓库及配置git clone.gitignoregit addgit commitgit push其他 git 指令git pull（把远端的东西拉到本地进行同步）其他指令关于 git git…...

编程日记 2026/3/31 22:01:25

DaoCloud 亮相 2025 GDC丨开源赋能 AI 更多可能

2025 年 2 月 21 日至 23 日，上海徐汇西岸，2025 全球开发者先锋大会以 “模塑全球，无限可能” 的主题，围绕云计算、机器人、元宇宙等多元领域，探讨前沿技术创新、应用场景拓展和产业生态赋能，各类专业论坛、…...

编程日记 2026/3/12 12:07:42