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

速通HTML

news 来源：原创 2025/9/15 8:39:53

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…...

编程日记 2025/9/15 8:39:53

从 Spring Boot 2 升级到 Spring Boot 3 的终极指南

一、升级前的核心准备 1. JDK 版本升级 Spring Boot 3 强制要求 Java 17 及以上版本。若当前项目使用 Java 8 或 11，需按以下步骤操作： 安装 JDK 17：从 Oracle 或 OpenJDK 官网下载，配置环境变量（如 JAVA_HOME&…...

编程日记 2025/9/10 12:34:31

Java 大视界 —— Java 大数据在智慧能源微电网能量管理中的关键技术（100）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/9/14 0:16:32

springboot实现多文件上传代码 package com.sh.system.controller;import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.PostMap…...

编程日记 2025/9/10 13:07:46

vue自定义指令千分位

问题开发的时候经常会遇到需要在输入框中输入数字转为千分位，点击填写时又转为数字的情况解决因此直接在vue中注入自定义指令，通过使用自定义指令达到效果；限制input输入框只能输入数字和一位小鼠带你自定义指令-千分位 // 自定义指令-千…...

编程日记 2025/9/10 12:37:03

深入理解Redis：数据类型、事务机制及其应用场景

在当今快速发展的技术领域中，Redis作为一种高性能的内存数据库，已经被广泛应用于各种场景，从简单的缓存实现到复杂的数据处理任务。其灵活性和高效性主要来源于对多种数据结构的支持以及强大的功能特性，如事务处理、持久化选项、高…...

编程日记 2025/9/13 1:43:28

JVM生产环境问题定位与解决实战（三）：揭秘Java飞行记录器(JFR)的强大功能

提到飞行记录器，或许你的脑海中并未立刻浮现出清晰的画面，但一说起“黑匣子”，想必大多数人都能恍然大悟，知晓其重要性及用途。在航空领域，黑匣子作为不可或缺的设备，默默记录着飞行过程中的每一项关键数据…...

编程日记 2025/9/14 19:30:53

MongoDB私人学习笔记

俗话说“好记性不如烂笔头”，编程的海洋如此的浩大，养成做笔记的习惯是成功的一步！ 此笔记主要是ZooKeeper3.4.9版本的笔记，并且笔记都是博主自己一字一字编写和记录，有错误的地方欢迎大家指正。一、基础知识&#xf…...

编程日记 2025/9/14 17:18:45

Ant Design按钮样式深度适配：实现＜Button＞与＜a＞标签颜色完美同步

Ant Design按钮样式深度适配：实现与标签颜色完美同步问题现象诊断组件结构原型 <Button type"link" disabled{disabled}><a href"...">下载</a> </Button>样式冲突表现状态按钮颜色链接颜色视觉问题启用态Ant蓝…...

编程日记 2025/9/13 21:52:17

linux下软件安装、查找、卸载

目录常见安装方式有三种： 1.源码安装。 2.rpm安装方式。 3.yum/apt工具级别安装。对于前两种安装方式，因为软件可能有依赖关系（安装的软件依赖于某些库，而这些库又依赖于某些库，这些都需要手动安装）…...

编程日记 2025/9/10 11:02:29

鸿蒙开发深入浅出01（基本环境搭建、页面模板与TabBar）

鸿蒙开发深入浅出01（基本环境搭建、页面模板与TabBar） 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…...

编程日记 2025/9/10 12:56:53

【DeepSeek】-macOS本地终端部署后运行DeepSeek如何分析图片

【DeepSeek】-macOS本地终端部署后运行DeepSeek如何分析图片根据您的需求，目前需要了解以下几个关键点及分步解决方案： --- 一、现状分析 1. Ollama 的限制： - 目前Ollama主要面向文本大模型，原生不支持直接上传/处理图片 …...

编程日记 2025/9/14 10:51:15

微信小程序源码逆向 MacOS

前言日常工作中经常会遇到对小程序的渗透测试，微信小程序的源码是保存在用户客户端本地，在渗透的过程中我们需要提取小程序的源码进行问题分析，本篇介绍如何在苹果电脑 MacOS 系统上提取微信小程序的源码。 0x01 微信小程序提取在苹果电…...

编程日记 2025/9/13 1:43:42

2025年2月科技热点深度解析：AI竞赛、量子突破与开源革命

引言 2025年的科技领域持续呈现爆发式增长，AI大模型竞争白热化、量子计算商业化加速、开源工具生态繁荣成为本月最受关注的议题。本文结合最新行业动态，从技术突破、商业布局到开发者生态，全面解析当前科技热点，为读者提供深度洞…...

编程日记 2025/9/13 19:11:57

Wireshark简单教程

1.打开Wireshark,点击最上面栏目里面的“捕获”中的“选项” 2.进入网卡选择界面,选择需要捕获的选择，这里我选择WLAN 3.双击捕获选择出现下面界面 4.点击如下图红方框即可停止捕获 5.点击下图放大镜可以进行放大 6.你也可以查询tcp报文如下图...

编程日记 2025/9/10 4:55:46

stm32单片机个人学习笔记16（SPI通信协议）

前言本篇文章属于stm32单片机（以下简称单片机）的学习笔记，来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记，只能做参考，细节方面建议观看视频，肯定受益匪浅。 STM32入门教程-2023版细…...

编程日记 2025/9/14 3:06:47

面试题——简述Vue 3的服务器端渲染（SSR）是如何工作的？

面试题——简述Vue3的服务器端渲染（SSR）是如何工作的？ 服务器端渲染（SSR）已经成为了一个热门话题。Vue 3，作为一款流行的前端框架，也提供了强大的SSR支持。那么，Vue 3的SSR究竟是如何…...

编程日记 2025/9/11 17:47:53

Ubuntu 22.04安装K8S集群

以下是Ubuntu 22.04安装Kubernetes集群的步骤概要一、设置主机名与hosts解析 # Master节点执行 sudo hostnamectl set-hostname "k8smaster" # Worker节点执行 sudo hostnamectl set-hostname "k8sworker1"# 所有节点的/etc/hosts中添加： ca…...

编程日记 2025/9/13 21:51:08

Ubuntu搭建esp32环境配置打开AT指令集 websocket功能

1，搭建前提环境搭建参考乐鑫官网给的本地编译 ESP-AT 工程方法因为公司电脑和网络的特殊性，不能正确解析域名（仅在浏览器上可以访问） ，所以这边访问的时候改成了ssh 未了避免使用外网困难的问题，这里用…...

编程日记 2025/9/14 17:43:29

java八股文-消息队列

一、MQ基础篇 1. 什么是消息队列？ 消息队列（MQ）是分布式系统中实现异步通信的中间件，解耦生产者和消费者。 2. 使用场景有哪些？ 异步处理（如注册后发送邮件）系统解耦（不同服务通过…...

编程日记 2025/9/10 8:43:34

[晕事]今天做了件晕事65，gcc，cmake, pragam

文章目录晕事cmake，unity，对gcc pragma指令有没有影响pragma指令的影响pragma指令的使用规范使用注意事项：晕事最近在某些不能有优化的函数前加了指令 #pragma GCC optimize ("O0")我记得是这个指令只影响当前编译单元。但是被人找上来了，因为这个文件所牵…...

编程日记 2025/9/14 18:48:14

SAP-ABAP：使用ST05（SQL Trace）追踪结构字段来源的步骤

ST05 是 SAP 提供的 SQL 跟踪工具，可以记录程序运行期间所有数据库操作（如 SELECT、UPDATE、INSERT）。通过分析跟踪结果，可以精准定位程序中结构字段对应的数据库表。步骤1：激活ST05跟踪事务码 ST05 → 点击 Activa…...

编程日记 2025/9/10 12:35:30

STM32--SPI通信讲解

前言嘿，小伙伴们！今天咱们来聊聊STM32的SPI通信。SPI（Serial Peripheral Interface）是一种超常用的串行通信协议，特别适合微控制器和各种外设（比如传感器、存储器、显示屏）之间的通信。如果你…...

编程日记 2025/9/13 7:28:29

cpu、mem监控

deepseek 1、安装依赖2、psutil库3、streamlit库4、实战4.1 单机CPU和内存使用率监控4.2 多机CPU和内存使用率监控 1、安装依赖 /usr/bin/python3 -m pip install psutil streamlit2、psutil库 psutil是一个跨平台的Python库，用于获取系统使用情况的信息&#xf…...

编程日记 2025/9/10 13:07:17

工程实践中常见的几种设计模式解析及 C++ 实现

工程实践中常见的几种设计模式解析及 C 实现在软件工程中，设计模式是一种通用的解决方案，用于解决常见问题和优化代码结构。它们通过提供一种规范化的编程思想，帮助开发者写出更高效、可维护和可扩展的代码。本文将介绍几种在工程实践中常见…...

编程日记 2025/9/13 13:01:06

ollama在linux上进行部署——离线安装说明

1. 官网下载ollama压缩包 https://ollama.com/download/ollama-linux-amd64.tgz sudo tar -C /usr -xzf ollama-linux-amd64.tgz #解压安装 2. 添加systemctl服务启动文件添加服务文件：/etc/systemd/system/ollama.service [Unit] DescriptionOllama …...

编程日记 2025/9/10 12:34:54

(一)趣学设计模式之单例模式！

目录一、啥是单例模式？二、为什么要用单例模式？三、单例模式怎么实现？1. 饿汉式：先下手为强！ 😈2. 懒汉式：用的时候再创建！ 😴3. 枚举：最简单最安全的单例&a…...

编程日记 2025/9/9 22:39:46

基于无人机遥感的烟株提取和计数研究

一.研究的背景、目的和意义 1.研究背景及意义烟草作为我国重要的经济作物之一，其种植面积和产量的准确统计对于烟草产业的发展和管理至关重要。传统的人工烟株计数方法存在效率低、误差大、难以覆盖大面积烟田等问题，已无法满足现代烟草种植管理的需求…...

编程日记 2025/9/14 15:08:13

在windows下安装windows+Ubuntu16.04双系统(上)

这篇文章的内容主要来源于这篇文章，给文章很详细的介绍了如何从windows下安装windowsubuntu16.04双系统。我刚开始装双系统都是参照这个方法，该作者前后更新了两个版本，在这里对其稍微进行整理一下。一、准备：（这里推…...

编程日记 2025/9/15 0:31:19

TensorFlow 是一个由 Google 开发的开源机器学习库

TensorFlow 是一个由 Google 开发的开源机器学习库，被广泛应用于深度学习和人工智能领域。它的基本概念包括以下几点： 张量（Tensors）：在 TensorFlow 中，数据的基本单位是张量，它类似于多维数组或…...

编程日记 2025/9/10 12:15:43

C++ day4 练习

一、练习1 找到第一天mystring练习，实现以下功能： mystring str "hello"; mystring ptr "world"; str str ptr; str ptr; str[0] H; 【代码】： #include <iostream> #include <cstring> #include &l…...

编程日记 2025/9/10 12:33:57

利用机器学习实现实时交易欺诈检测

以下是一个基于Python的银行反欺诈AI应用示例代码，演示如何利用机器学习实现实时交易欺诈检测。该示例使用LightGBM算法训练模型，并通过Flask框架构建实时检测API： python import pandas as pd from sklearn.model_selection import train_test_split from sklearn.preproc…...

编程日记 2025/9/14 0:29:47

基于Hadoop的汽车大数据分析系统设计与实现【爬虫、数据预处理、MapReduce、echarts、Flask】

文章目录有需要本项目的代码或文档以及全部资源，或者部署调试可以私信博主项目介绍爬虫数据概览HIve表设计Cars Database Tables 1. cars_data2. annual_sales_volume3. brand_sales_volume4. city_sales_volume5. sales_volume_by_year_and_brand6. sales_distri…...

编程日记 2025/9/14 0:29:46

安宝特科技 | Vuzix Z100智能眼镜+AugmentOS：重新定义AI可穿戴设备的未来——从操作系统到硬件生态，如何掀起无感智能革命？

一、AugmentOS：AI可穿戴的“操作系统革命” 2025年2月3日，Vuzix与AI人机交互团队Mentra联合推出的AugmentOS，被业内视为智能眼镜领域的“iOS时刻”。这款全球首个专为智能眼镜设计的通用操作系统，通过三大突破重新定义了AI可穿戴…...

编程日记 2025/9/14 0:29:44

蓝桥杯之日期题

文章目录 1.蓝桥杯必备知识点2. 题型13.需求2 1.蓝桥杯必备知识点蓝桥杯是一个面向全国高校计算机相关专业学生的学科竞赛，涵盖多个赛道，常见的有软件类（如 C/C 程序设计、Java 软件开发、Python 程序设计）和电子类（…...

编程日记 2025/9/14 0:29:42

sklearn中的决策树-分类树：实例-分类树在合成数据集上的表现

分类树实例：分类树在合成数据集上的表现代码分解在不同结构的据集上测试一下决策树的效果（二分型，月亮形，环形） 导入 import numpy as np from matplotlib import pyplot as plt from matplotlib.colors import Li…...

编程日记 2025/9/14 0:29:40

es-head（es库-谷歌浏览器插件）

1.下载es-head插件压缩包，并解压缩 2.谷歌浏览器添加插件 3.使用...

编程日记 2025/9/14 0:29:38

AI客服-接入deepseek大模型到微信（本地部署deepseek集成微信自动收发消息）

1.本地部署 1.1 ollama Ollama软件通过其高度优化的推理引擎和先进的内存管理机制，显著提升了大型语言模型在本地设备上的运行效率。其核心采用了量化技术（Quantization）以降低模型的计算复杂度和存储需求，同时结合张量并行计算&…...

编程日记 2025/9/14 0:29:32

kotlin 知识点七泛型的高级特性

对泛型进行实化泛型实化这个功能对于绝大多数Java 程序员来讲是非常陌生的，因为Java 中完全没有这个概念。而如果我们想要深刻地理解泛型实化，就要先解释一下Java 的泛型擦除机制才行。在JDK 1.5之前，Java 是没有泛型功能的，…...

编程日记 2025/9/14 0:29:30

正则表达式–断言

原文地址：正则表达式–断言 – 无敌牛欢迎参观我的个人博客：正则表达式特殊字符 – 无敌牛断言assertions 1、(?...)：正向预查（positive lookahead），表示某个字符串后面应该跟着什么。但这个字符串本身…...

编程日记 2025/9/14 0:29:29

OceanBase数据库实战：Windows Docker部署与DBeaver无缝对接

一、前言 OceanBase 是一款高性能、高可扩展的分布式数据库，适用于大规模数据处理和企业级应用。随着大数据和云计算的普及，OceanBase 在企业数字化转型中扮演着重要角色。学习 OceanBase 可以帮助开发者掌握先进的分布式数据库技术，提升数…...

编程日记 2025/9/14 0:29:27

C++：开胃菜练习项目---定长内存池的实现以及测试

项目介绍简介作为学习tcmalloc高并发内存池项目前的一个铺垫。作为程序员(C/C)我们知道申请内存使用的是malloc，malloc其实就是一个通用的大众货，什么场景下都可以用，但是什么场景下都可以用就意味着什么场景下都不会有很高的性能&#xf…...

编程日记 2025/9/14 0:29:25

【LLM】本地部署LLM大语言模型+可视化交互聊天，附常见本地部署硬件要求（以Ollama+OpenWebUI部署DeepSeekR1为例）

【LLM】本地部署LLM大语言模型可视化交互聊天，附常见本地部署硬件要求（以OllamaOpenWebUI部署DeepSeekR1为例） 文章目录 1、本地部署LLM（以Ollama为例）2、本地LLM交互界面（以OpenWebUI为例）3、本…...

编程日记 2025/9/14 0:29:23

JVM相关面试题

1. 类加载与双亲委派机制聊一下你对类加载器的理解。类加载器是JVM用来加载类文件到内存的组件。它负责将字节码文件解析为java.lang.Class实例，并存储到运行时数据区的方法区中。类加载器分为Bootstrap ClassLoader、Extension ClassLoader和Application ClassLo…...

编程日记 2025/9/14 16:50:14