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

速通HTML

article 2026/4/6 8:48:13

HTML基础

1.快捷键

2.标签

HTML进阶

1.列表

a.无序列表

b.有序列表

c.定义列表

2.表格

a.内容

b.合并单元格

3.表单

a.input标签

b.单选框

c.上传文件

4.下拉菜单

5.文本域标签

6.label标签

7.按钮标签

8.无语义的布局标签div与span

9.字符实体

HTML基础

1.快捷键

基于VS Code记录编写过程中常用的快捷键

功能	快捷键
生成HTML基本骨架	!+回车
保存代码	Ctrl+S
在浏览器运行代码	Alt+B
注释	Ctrl+/
缩进	Tab
取消缩进	Shift+Tab
收起侧边栏	Ctrl+B

先保存，再在浏览器运行才能刷新

2.标签

标签	作用
h1——h6双标签	标题标签，独占一行
p双标签	段落标签，独占一行，段落间存在间隙
br单标签	换行标签
hr单标签	水平线标签
img	图像
audio	音频
video	视频

文本格式化标签：

标签（双标签）	作用
strong	加粗
b	加粗
em	倾斜
i	倾斜
ins	下划线
u	下划线
del	删除线
s	删除线

标签	作用
<img src="" alt="">	插入图片，src属性图像存在的位置和名称，必须写
属性
alt	替换文本，图片无法显示时显示的文字
title	提示文本，鼠标悬停时显示
width	图片宽度值为数字，没有单位，浏览器缩放图片默认等比例缩放
height	图片高度值为数字，没有单位
标签	作用
<video src=""></video>	视频标签，src属性视频存在的位置和名称，必须写
属性
controls	显示视频控制面板，在html5内如果属性值和属性名一样，可以简写为一个单词
loop	循环播放
muted	静音播放
autoplay	自动播放，浏览器支持在静音模式下自动播放。注意autoplay属性需要和muted配合使用才能生效
标签	作用
<audio src=""></audio>	音频标签，src属性音频存在的位置和名称，必须写
属性
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放，浏览器会禁止自动播放，可以通过用户点击按钮再播放
标签	作用
<a href="" target=""></a>	超链接标签，双标签，herf属性为链接，target=_blank表示新窗口跳转页面

相对路径：

. 表示当前文件所在文件夹

.. 表示当前文件上一级

/ 表示进入某文件夹里

常常使用相对路径

绝对路径：

直接在盘符里复制就好，在Windows系统里默认是\，其他系统是/，统一使用/

也可以使用网络上图片的在线网址

<!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><!-- 跳转到网络文件 --><a href="https://www.bilibili.com/">跳转到bilibili</a><br><!-- 跳转到本地文件，但是是在同一个页面跳转实现--><br><a href="./图像标签.html">跳转到图像标签</a><!-- 跳转到新标签页 --><a href="./标题和段落标签.html" target="_blank">标题和段落标签</a><br><!-- 开发初期不知道跳转链接的情况，使用#暂时填补则不会跳转 --><a href="#">空链接</a>
</body>
</html>

HTML进阶

1.列表

a.无序列表

b.有序列表

c.定义列表

2.表格

a.内容

加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略

<!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><!-- 无序列表 --><ul><li>无序列标签1</li><li>无序列标签2</li></ul><!-- 有序列表 --><ol><li>有序列标签1</li><li>有序列标签2</li></ol><!-- 定义列表 --><dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl><!-- 表格标签，加border后能显示边框 加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略--><table border="1"><thead><tr><th>第一行表头单元格1</th><th>第一行表头单元格2</th></tr></thead><tbody><tr><td>第一行内容单元格1</td><td>第一行内容单元格2</td></tr></tbody><tfoot><tr><td>第二行汇总单元格1</td><td>第二行汇总单元格2</td></tr></tfoot></table>
</body>
</html>

b.合并单元格

注意

表格是在自己的结构标签内进行合并的，不能跨结构标签thead、tbody、tfoot合并

<!-- 合并单元格，遵循“保留最左最上”原则 --><table border="1"><tr><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>70</td><td rowspan="2">80</td><td>90</td></tr><tr><td>90</td><!-- <td>80</td> 删除--><td>70</td></tr><tr><td colspan="3">160</td><!-- <td>160</td> 删除--><!-- <td>160</td> 删除--></tr></table>

3.表单

作用：收集用户信息

使用场景：

登录页面
注册页面
搜索区域

a.input标签

添加input标签占位文本：使用placeholder属性即可

b.单选框

c.上传文件

<br><!-- 表单标签——input标签使用 --><!-- 单纯的文本形式，不能换行 -->文本框：<input type="text"><br><!-- 自动非明文显示 --> <!-- input标签占位文本 -->密码框：<input type="password" placeholder="请输入密码"><br>单选框：<!-- gender是自定义名称，添加checked属性，默认选中 --><input type="radio" name="gender"> 男<input type="radio" name="gender" checked> 女<br><br><!-- 默认只可上传一个文件，添加multiple属性可实现文件多选功能 -->上传一个文件：<input type="file" ><br>上传多个文件：<input type="file" multiple><br><br><!-- 添加checked属性，实现默认选中 -->多选框：<input type="checkbox"> 苹果多选框默认选中：<input type="checkbox" checked> 草莓<br>

4.下拉菜单

<!-- 下拉菜单，使用属性selected实现默认选中-->城市：<!-- <select name="" id=""></select> name和id等是发送数据使用的属性--><select ><option>北京</option><option>上海</option><option selected>广州</option></select><br><br>

5.文本域标签

<!-- 文本域标签 与input不同，能自动换行，右下角有拖拽功能，在未来都要使用CSS设置尺寸并禁用该功能--><textarea>请输入评论</textarea><br><br><!-- 写法一： --><input type="radio" name="gender" id="man"><label for="man">男</label><!-- 写法二： --><label> <input type="radio" name="gender"> 女</label><br><br><br>

6.label标签

作用：

网页中作为某个标签的说明文本
绑定文字和表单控件的关系，增大表单控件的点击范围

7.按钮标签

<!-- 按钮标签 需要使用form标签统一管理功能才能实现，action属性是要与后台链接--><form action="">用户名：<input type="text"><br>密码：<input type="password"><br><br><!-- 如果省略type属性，是默认的提交功能 --><button type="submit"> 提交</button><button type="reset"> 重置</button><!-- 普通按钮后续与JS配合使用 --><button type="button">普通按钮</button></form><br><br>

8.无语义的布局标签div与span

作用：用于布局网页，划分区域，摆放内容

div：独占一行，换行，（大盒子）
span：不换行，（小盒子）

<!-- 无语义的布局标签 --><div> div标签</div> <span> span标签1</span><span> span标签2</span><br><br>

9.字符实体

在网页中显示预留字符

常用的字符实体：

在代码中敲很多个空格，网页仅显示一个空格

<!-- 常用的字符实体 （类似转义字符）--><!-- 在代码中敲很多个空格，网页仅显示一个空格 -->明天会&nbsp;&nbsp;更好<br><br><br>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

速通HTML

目录 HTML基础 1.快捷键 2.标签 HTML进阶 1.列表 a.无序列表 b.有序列表 c.定义列表 2.表格 a.内容 b.合并单元格 3.表单 a.input标签 b.单选框 c.上传文件 4.下拉菜单 5.文本域标签 6.label标签 7.按钮标签 8.无语义的布局标签div与span 9.字符实体 HTML…...

编程日记 2026/4/5 0:52:36

算法（四）——动态规划

文章目录基本思想适用条件最优子结构子问题重叠状态转移方程解题步骤应用斐波那契数列背包问题最大子数组和基本思想动态规划的核心思想在于将一个复杂的问题分解为一系列相互关联的子问题，通过求解子问题并保存其解，避免对相同子问题的重复计算&am…...

编程日记 2026/2/22 1:03:19

博客系统完整开发流程

前言通过前⾯课程的学习, 我们掌握了Spring框架和MyBatis的基本使用, 并完成了图书管理系统的常规功能开发, 接下来我们系统的从0到1完成⼀个项⽬的开发. 企业开发的流程 1. 需求评审(产品经理(PM)会和运营(想口号),UI,测试,开发等沟通) ,会涉及到背景/目标/怎么做,可能会有多…...

编程日记 2026/4/5 12:42:37

【C语言】指针笔试题

前言：上期我们介绍了sizeof与strlen的辨析以及sizeof，strlen相关的一些笔试题，这期我们主要来讲指针运算相关的一些笔试题，以此来巩固我们之前所学的指针运算！ 文章目录一，指针笔试题1，题目一…...

编程日记 2026/4/6 7:17:24

大数据开发平台的框架

根据你的需求，以下是从 GitHub 推荐的 10 个可以实现大数据开发平台的项目： 1. Apache Spark Apache Spark 是一个开源的分布式计算框架，适用于大规模数据处理和分析。它提供了强大的数据处理能力，支持实时数据处理、机器学习和…...

编程日记 2026/2/15 19:42:19

【Python爬虫(53)】从入门到精通：Scrapy Spider开发全攻略

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2026/4/5 13:59:06

《Keras 3 ：使用迁移学习进行关键点检测》：此文为AI自动翻译

《Keras 3 ：使用迁移学习进行关键点检测》作者：Sayak Paul，由 Muhammad Anas Raza 转换为 Keras 3 创建日期：2021/05/02 最后修改时间：2023/07/19 描述：使用数据增强和迁移学习训练关键点检测器。（i）此示例使用 Keras 3 在 Colab 中查看 GitHub 源关键点检测包…...

编程日记 2026/2/20 5:30:01

CentOS停服后的替代选择：openEuler、Rocky Linux及其他系统的未来展望

CentOS停服后的替代选择：openEuler、Rocky Linux及其他系统的未来展望引言CentOS停服的背景华为openEuler：面向未来的开源操作系统1. 简介2. 特点3. 发展趋势 Rocky Linux：CentOS的精神继承者1. 简介2. 特点3. 发展趋势其他可选的替代系统1…...

编程日记 2026/3/4 22:44:29

【Qt】桌面应用开发 ------ 绘图事件和绘图设备文件操作

文章目录 9、绘图事件和绘图设备9.1 QPainter9.2 手动触发绘图事件9.3 绘图设备9.3.1 QPixmap9.3.2 QImage9.3.3 QImage与QPixmap的区别9.3.4 QPicture 10、文件操作10.1 文件读写10.2 二进制文件读写10.3 文本文件读写10.4 综合案例 9、绘图事件和绘图设备什么时候画&#x…...

编程日记 2026/4/3 2:39:44

python与C系列语言的差异总结（3）

与其他大部分编程语言不一样，Python使用空白符（whitespace）和缩进来标识代码块。也就是说，循环体、else条件从句之类的构成，都是由空白符加上冒号(:)来确定的。大部分编程语言都是使用某种大括号来标识代码块的。下面的…...

编程日记 2026/4/2 13:46:31

OpenCV（9）：视频处理

1 介绍视频是由一系列连续的图像帧组成的，每一帧都是一幅静态图像。视频处理的核心就是对这些图像帧进行处理。常见的视频处理任务包括视频读取、视频播放、视频保存、视频帧处理等。视频分析: 通过视频处理技术，可以分析视频中的运动、目标、事件等。…...

编程日记 2026/4/4 4:25:43

【C++设计模式】观察者模式（1/2）：从基础到优化实现

1. 引言在 C++ 软件与设计系列课程中，观察者模式是一个重要的设计模式。本系列课程旨在深入探讨该模式的实现与优化。在之前的课程里，我们已对观察者模式有了初步认识，本次将在前两次课程的基础上，进一步深入研究，着重解决观察者生命周期问题，提升代码的安全性、灵活性…...

编程日记 2026/4/5 10:12:40

2025年华为手机解锁BL的方法

注：本文是我用老机型测试的，新机型可能不适用背景华为官方已经在2018年关闭了申请BL解锁码的通道，所以华为手机已经无法通过官方获取解锁码。最近翻出了一部家里的老手机华为畅玩5X，想着能不能刷个系统玩玩，但是卡…...

编程日记 2026/3/30 16:32:17

在 CentOS 7.9上部署 Oracle 11.2.0.4.0 数据库

目录在 CentOS 7.9上部署 Oracle 11.2.0.4.0 数据库引言安装常见问题vim粘贴问题环境情况环境信息安装包下载初始环境准备关闭 SELinux关闭 firewalld 安装前初始化工作配置主机名安装依赖优化内核参数限制 Oracle 用户的 Shell 权限配置 PAM 模块配置swap创建用户组与用户,…...

编程日记 2026/3/27 14:00:23

idea里的插件spring boot helper 如何使用，有哪些强大的功能，该如何去习惯性的运用这些功能

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...

编程日记 2025/11/27 11:27:23

Docker 搭建 Redis 数据库

Docker 搭建 Redis 数据库前言一、准备工作二、创建 Redis 容器的目录结构三、启动 Redis 容器1. 通过 redis.conf 配置文件设置密码2. 通过 Docker 命令中的 requirepass 参数设置密码四、Host 网络模式与 Port 映射模式五、检查 Redis 容器状态六、访问 Redis 服务总结前言…...

编程日记 2025/7/1 4:58:39

JAVAweb之过滤器，监听器

文章目录过滤器认识生命周期FilterConfigFilterChain过滤器执行顺序应用场景代码监听器认识ServletContextListenerHttpSessionListenerServletRequestListener代码过滤器认识 Java web三大组件之一，与Servlet相似。过滤器是用来拦截请求的，而非处…...

编程日记 2025/10/4 19:31:32

计算机毕业设计SpringBoot+Vue.js足球青训俱乐部管理系统(源码+文档+PPT+讲解)

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

编程日记 2026/4/4 2:05:58

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面博文内容涉及基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 😃,生活加油我站在人潮中央，思考这日日重复的生活。我突然想&#xff0c…...

编程日记 2026/3/24 4:53:28

QSplashScreen --软件启动前的交互

目录 QSplashScreen 类介绍使用方式项目中使用 THPrinterSplashScreen头文件 THPrinterSplashScreen实现代码使用代码使用效果 QSplashScreen 类介绍 QSplashScreen 是 Qt 中的一个类，用于显示启动画面。它通常在应用程序启动时显示，以向用户显…...

编程日记 2026/3/25 17:35:46

「软件设计模式」责任链模式（Chain of Responsibility）

深入解析责任链模式：用C打造灵活的请求处理链引言：当审批流程遇上设计模式在软件系统中，我们经常会遇到这样的场景：一个请求需要经过多个处理节点的判断，每个节点都有权决定是否处理或传递请求。就像企业的请假审批…...

编程日记 2026/4/5 17:18:01

蓝桥杯嵌入式客观题以及解释

第十一届省赛（大学组） 1.稳压二极管时利用PN节的反向击穿特性制作而成 2.STM32嵌套向量终端控制器NVIC具有可编程的优先等级 16 个 3.一个功能简单但是需要频繁调用的函数，比较适用内联函数 4.模拟/数字转换器的分辨率可以通过输出二进制…...

编程日记 2026/4/5 1:47:37

你对WebAssembly的看法是什么？

WebAssembly（Wasm）是一种新兴的技术，旨在通过提供一种新的低级字节码格式来提高 Web 应用程序的性能和效率。它与 JavaScript 互补，使得开发者可以将其他编程语言（如 C、C、Rust 等）编译为高效的字节码&…...

编程日记 2026/4/2 18:41:50

Qt在Linux嵌入式开发过程中复杂界面滑动时卡顿掉帧问题分析及解决方案

Qt在Linux嵌入式设备开发过程中，由于配置较低，加上没有GPU，我们有时候会遇到有些组件比较多的复杂界面，在滑动时会出现掉帧或卡顿的问题。要讲明白这个问题还得从CPU和GPU的分工说起。一、硬件层面核心问题根源剖析 CPU&#x…...

编程日记 2026/2/15 8:01:19

vscode 版本

vscode官网 Visual Studio Code - Code Editing. Redefined 但是官网只提供最新在之前的版本就要去github找了 https://github.com/microsoft/vscode/releases 获取旧版本vscode安装包的方法_vscode 老版本-CSDN博客...

编程日记 2026/2/15 17:56:35