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

HTML回顾

article 2025/8/27 15:55:40

html全称：HyperText Markup Language（超文本标记语言）

注重标签语义，而不是默认效果

规则

块级元素包括: marquee、div等

行内元素包括: span、input等

规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）

规则2：行级元素中能写：行内元素，但不能写：块级元素

规则3：标签内编写多个同名属性，后面的会失效，也就是说只有第一个生效

特殊规则：h1~h6不能互相嵌套

特殊规则：p标签中不能写块元素（未过时的）

特殊规则：a标签中不能写a标签

文本标签

在这里插入图片描述

图片标签与常见的图片格式

在这里插入图片描述

jpg 格式
一种有损的压缩格式
支持的颜色丰富、占用空间小、不支持透明背景、不支持动态图
png 格式
一种无损的压缩格式
支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图
bmp 格式
一种不进行压缩的格式
支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图
gif 格式
仅支持256种颜色，色彩呈现不是很完整
支持的颜色较少、支持简单透明背景、支持动态图
webp 格式
谷歌推出的一种格式
具备以上几种格式的优点，但兼容性不太好。
base64 格式
1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
2. 原理：把图片进行 base64 编码，形成一串文本
3. 如何生成：靠一些工具或网站
4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

超链接

在html代码里敲的多个回车或多个空格，只会被浏览器解析为一个空格
虽然 a 是行内元素，但 a 元素可以包裹除它自身以外的任何元素
跳转浏览器无法打开的文件，则会引导用户下载
若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称

跳转锚点

<!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="#xyy">找喜羊羊</a><a href="#htl">找灰太狼</a><a href="#wk">找悟空</a><a href="#atm">找奥特曼</a><a href="#gs">找怪兽</a><a name="xyy"></a><p>我是喜羊羊</p><img src="./images/喜羊羊.jpg" /><a name="htl"></a><p>我是灰太狼</p><img src="./images/灰太狼.jpg" /><p id="wk">我是悟空</p><img src="./images/悟空.jpg" /><p id="atm">我是奥特曼</p><img src="./images/奥特曼.jpg" /><p id="gs">我是怪兽</p><img src="./images/怪兽.jpg" /><p>整体介绍完毕了</p><a href="#">回到顶部</a><a href="">刷新页面</a><a href="javascript:alert(666);">点我弹窗</a>
</body>
</html>

两种跳转锚点的办法（推荐使用第二种）

a 标签的name属性标记锚点，利用顶部 a 标签的 href 属性跳转
直接使用id属性标记锚点，利用顶部 a 标签的 href 属性跳转

超链接唤醒应用
代码

<!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="tel:10086">电话联系</a><a href="sms:10086">短信联系</a><a href="mailto:10086@qq.com">邮件联系</a>
</body>
</html>

列表

有序列表（Ordered List） <ol>
无序列表（Unordered List） <ul>
自定义列表（Definition List） <dl>
列表项（List items） <li>
定义标题（Definition Title） <dt>
定义描述（Definition Description）<dd>

代码

<!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><h2>把大象放进冰箱分几步？</h2><ol><li>打开冰箱</li><li>把大象放进去</li><li>关上冰箱</li></ol><h2>我的爱好</h2><ul><li>看电影</li><li>打游戏</li><li>学习</li></ul><h2>我的好友</h2><dl><dt>张三</dt><dd>喜欢打游戏</dd><dt>李四</dt><dd>喜欢看电影</dd><dt>王五</dt><dd>喜欢学习</dd></dl>
</body>
</html>

表格

基本结构

一个完整的表格由: 表格标题、表格头部、表格主体、表格脚注，四部分组成。
在这里插入图片描述

在这里插入图片描述

代码:

<!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"><!-- 表格标题 --><caption>学生信息表</caption><!-- 表格头 --><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><!-- 表格内容 --><tbody><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>20</td><td>女</td></tr></tbody><!-- 表格尾部 --><tfoot><tr><td colspan="3">版权所有</td></tr></tfoot></table></body></html>

几个常用的标签

代码

<!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.baidu.com/">百度一下</a><br><a href="https://www.jd.com/">去京东</a><!-- 分割线标签 --><div>第一章</div><p>xxxxxxx, 就这样最后王子和公主就在一起了</p><hr><div>第二章</div><p>一个月黑风高的晚上,xxxxxxx</p><!-- 预格式化标签 --><pre>I       Love        YouI   Love    YouLove</pre>
</body></html>

表单

<!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="https://search.jd.com/search"><label for="zhanghu">账户：</label><input id="zhanghu" type="text" name="account" placeholder="请输入账户"><br><label for="mima">密码：</label><input id="mima" type="password" name="password" placeholder="请输入密码"><br><!-- 单选框 --><label>性别：</label><input id="nan" type="radio" name="sex" value="男" checked><label for="nan">男</label><input id="nv" type="radio" name="sex" value="女"><label for="nv">女</label><br><!-- 多选框 --><label>爱好：</label><label><input type="checkbox" name="hobby" value="吃饭">吃饭</label><label><input type="checkbox" name="hobby" value="睡觉">睡觉</label><label><input type="checkbox" name="hobby" value="打游戏">打游戏</label><br><label>其他<textarea name="other" cols="30" rows="10"></textarea></label><br><!-- 隐藏域 --><input type="hidden" name="tag" value="123"><!-- 下拉框 --><label>籍贯：</label><select name="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select><br><!--<button type="submit">确认</button><button type="reset">重置</button><button type="button">按钮</button>--><input type="submit" value="确认"><input type="reset" value="重置"><input type="button" value="按钮"></form>
</body>
</html>

注意:

button按钮的默认type值为submit，会引起表单的提交
普通按钮的type值需写为button
两种与label关联方式
- 让 label 标签的 for 属性的值等于表单控件的 id
- 把表单控件套在 label 标签的里面

fieldset 与 legend 控件
代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单控件fieldset与legend</title>
</head><body><form action="https://search.jd.com/search"><fieldset><legend>主要信息</legend><label for="zhanghu">账户：</label><input id="zhanghu" type="text" name="account" placeholder="请输入账户"><br><label for="mima">密码：</label><input id="mima" type="password" name="password" placeholder="请输入密码"><br><!-- 单选框 --><label>性别：</label><input id="nan" type="radio" name="sex" value="男" checked><label for="nan">男</label><input id="nv" type="radio" name="sex" value="女"><label for="nv">女</label></fieldset><br><fieldset><legend>附加信息</legend><!-- 多选框 --><label>爱好：</label><label><input type="checkbox" name="hobby" value="吃饭">吃饭</label><label><input type="checkbox" name="hobby" value="睡觉">睡觉</label><label><input type="checkbox" name="hobby" value="打游戏">打游戏</label><br><label>其他<textarea name="other" cols="30" rows="10"></textarea></label><br><!-- 下拉框 --><label>籍贯：</label><select name="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option></select></fieldset><!-- 隐藏域 --><input type="hidden" name="tag" value="123"><br><!--<button type="submit">确认</button><button type="reset">重置</button><button type="button">按钮</button>--><input type="submit" value="确认"><input type="reset" value="重置"><input type="button" value="按钮"></form>
</body></html>

框架标签

<!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><!-- 利用iframe标签实现网页嵌套 --><!-- <iframe src="https://www.4399.com" frameborder="1" width="1000" height="500"></iframe><iframe src="https://www.taobao.com" frameborder="1" width="500" height="500"></iframe> --><!-- 利用与超链接的target属性配合使用 --><a href="https://www.4399.com" target="container">去4399</a><a href="https://www.taobao.com" target="container">去淘宝</a><!-- 与表单的target属性配合使用 --><form action="https://so.toutiao.com/search" target="container"><input type="text" name="keyword"><input type="submit" value="搜索"></form><iframe frameborder="0" width="500" height="500" name="container"></iframe>
</body></html>

字符实体

在这里插入图片描述

<!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><!-- 空格 --><p>加油&nbsp;加油&nbsp;加油</p><!-- < 和 > --><p>我们学习过很多的标题标签，其中&lt;h1&gt;是最厉害的一个！</p><p>我们今天学习了一个可以表示空格的字符实体，它是：&amp;nbsp;</p><p>我们今天学习了一个可以表示 & 的字符实体，它是：&amp;amp;</p><p>当前商品的价格是: &yen;199</p><p>&copy;版权所有</p><p>2 &times; 2 = 4</p><p>2 &divide; 2 = 1</p>
</body></html>

全局属性

在这里插入图片描述

meta元信息

在这里插入图片描述

代码

<!DOCTYPE html><html lang="en"><head><!-- 配置字符编码格式 --><meta charset="UTF-8"><!-- 针对IE浏览器的一个兼容设置 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 针对移动端的设置 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置网页关键字，针对搜索引擎 --><meta name="keywords" content="HTML,CSS,JavaScript"><!-- 配置网页描述 --><meta name="description" content="网页描述"><!-- 配置网页作者 --><meta name="author" content="linux-hzh"><!-- 配置网页版权 --><meta name="copyright" content="linux-hzh"><!-- 配置网页搜索引擎索引 --><meta name="robots" content="index,follow"><!-- 配置网页自动刷新 --><meta http-equiv="refresh" content="3;url=https://www.baidu.com"><title>meta元信息</title>
</head><body><h1>你好呀</h1>
</body></html>

HTML回顾

html全称：HyperText Markup Language（超文本标记语言） 注重标签语义，而不是默认效果规则块级元素包括: marquee、div等行内元素包括: span、input等规则1：块级元素中能写：行内元素、块级元素&…...

编程日记 2025/8/20 2:58:45

机器视觉6-halcon高级教程

机器视觉6-halcon高级教程双目立体视觉原理视差外极线几何双目标定双目立体视觉之Halcon标定一．标定结果二.Halcon标定过程1.获取左右相机图像中标定板的区域;2.提取左右相机图像中标定板的MARK点坐标和摄像机外部参数;3.执行双目标定;4.获取非标准外极线几何到标…...

编程日记 2025/8/24 23:59:48

YOLOv8 的双 Backbone 架构：解锁目标检测新性能

一、开篇：为何踏上双 Backbone 探索之路在目标检测的领域中，YOLOv8 凭借其高效与精准脱颖而出，成为众多开发者和研究者的得力工具。然而，传统的单 Backbone 架构，尽管已经在诸多场景中表现出色，但仍存在一…...

编程日记 2025/8/25 17:58:34

1.4 TypeScript 编译是如何工作的？

TypeScript 是 JavaScript 的超集，最显著的优势是引入了静态类型检查。它能帮助开发者在编写代码阶段捕获错误，从而提升代码的健壮性和可维护性。虽然 TypeScript 本身不能直接在浏览器或 Node.js 中运行，但它可以被编译成标准的 JavaScript&…...

编程日记 2025/8/20 8:24:12

【HTML-4】HTML段落标签：构建内容结构的基础

在网页开发中，段落标签<p>是最基础也是最重要的HTML元素之一。这篇博客将深入探讨段落标签的用法、最佳实践以及相关技术细节。 1. 段落标签的基本用法 HTML段落标签用于定义文本段落，浏览器会自动在段落前后添加一定的空白（margin&a…...

编程日记 2025/7/6 6:48:59

国际前沿知识系列五：时间序列建模方法在头部撞击运动学测量数据降噪中的应用

目录国际前沿知识系列五：时间序列建模方法在头部撞击运动学测量数据降噪中的应用一、引言二、时间序列建模方法 （一）ARIMA 模型 （二）指数平滑法 （三）小波变换三、实际案例分析 &…...

编程日记 2025/6/23 16:05:32

未授权访问漏洞利用链实战总结

一、渗透测试核心思路攻击链路径： 未授权访问 → 接口信息泄露 → 敏感数据获取 → 账户爆破 → 权限提升 → 系统控制二、关键步骤拆解与分析信息收集阶段初始突破口： 系统登录页看似无效，但通过JS文件分析发现隐藏接口（如 …...

编程日记 2025/8/16 21:32:59

Centos上搭建 OpenResty

一、OpenResty简介 OpenResty 是基于 Nginx 的扩展平台，完全兼容 Nginx 的核心功能（如 HTTP 服务和反向代理），同时通过内嵌 LuaJIT 支持，允许开发者用 Lua 脚本灵活扩展业务逻辑。它简化了动态逻辑的实现。二、安装…...

编程日记 2025/6/22 15:27:30

Web 服务、 Nfs 服务器以及 Dns 服务器综合实验

要求： 1.web 服务的资源文件通过 nfs 服务器共享 www.luntan.com 2.确保所有主机时间同步 3.定义本地 dns 服务器解析 web 主机域名实验： 主机服务程序192.168.96.142dns、nfs192.168.96.132web 服务器说明： 设备 IP服务端 192…...

编程日记 2025/8/21 21:39:16

保证数据库 + redis在读写分离场景中事务的一致性

在 Spring Boot 中实现数据库与 Redis 的一致性，特别是处理读写分离时，确保数据修改的事务一致性是一个常见的挑战。因为 Redis 是一个内存数据库，通常用于缓存，而关系型数据库是持久化存储，两者之间的数据同步和一致性…...

编程日记 2025/8/3 8:05:31

汇编语言的子程序魔法：解锁四则运算的奥秘

在嵌入式系统的世界里，汇编语言就像是魔法师手中的魔杖，能够直接操控硬件，实现各种神奇的功能。今天，我将带你走进一场充满乐趣的实验：如何用汇编语言实现四则运算，并将它们封装成子程序。这不仅是一次技术…...

编程日记 2025/8/26 5:55:10

快速解决Linux 中yum镜像拉取失败问题

在linux中使用yum命令拉取镜像的时候，如果出现如下类似报错： 我这里是安装Erlang环境也是同样报错： 其实就是网络环境的问题，更换为国内的镜像源就行了，可以选择cmd的ssh连接方式(命令：ssh root192.168.xxx…...

编程日记 2025/8/5 4:58:20

C#核心概念解析：析构函数、readonly与this关键字

🔍 析构函数：资源清理的最后防线核心作用析构函数（~ClassName）在对象销毁前执行，专用于释放非托管资源（如文件句柄、非托管内存）。托管资源（如.NET对象）由GC自动回收…...

编程日记 2025/6/20 6:58:20

HarmonyOS基础组件:Button三种类型的使用

简介 HarmonyOS在明年将正式不再兼容Android原生功能，这意味着对于客户端的小伙伴不得不开始学习HarmonyOS开发语言。本篇文章主要介绍鸿蒙中的Button使用。 HarmonyOS中的Button相较于Android原生来说，功能比较丰富，扩展性高，减…...

编程日记 2025/8/27 13:38:36

深入理解设计模式之适配器模式

深入理解设计模式之适配器模式 1. 适配器模式概述适配器模式(Adapter Pattern)是一种结构型设计模式，它允许将一个类的接口转换为客户端所期望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的类能够协同工作，扮演了"转换器&quo…...

编程日记 2025/8/18 17:29:07

预训练模型：深度学习的通用特征引擎

预训练模型是深度学习领域的重要技术，其核心思想是通过大规模数据预先学习通用特征，再迁移到具体任务中进行微调。以下是其定义、原理及与其他模型的对比分析： 一、预训练模型的定义与原理基本概念预训练模型（Pre-trained Model…...

编程日记 2025/8/26 11:17:48

C++题解(33)2025年顺德区中小学生程序设计展示活动（初中组C++）U560876 美丽数（一）和 U560878 美丽数（二）题解

U560876 美丽数（一） 题目描述小明很喜欢3和5这两个数字，他将能被3或5整除的数叫做美丽数。现在给你一个整数n，你能告诉小明第n个美丽数是多少吗？ 输入格式输入有多行，每行只有一个整数${n_i}$。输出格式…...

编程日记 2025/8/19 3:30:18

产业互联网+三融战略：重构企业增长密码

产业互联网时代：用"三融"重构企业增长飞轮在产业互联网浪潮下，企业面临资源分散、资金短缺、人才难聚的三重挑战。本文提出的"融人、融资、融资源"顶层设计，正为新时代企业构建增长新引擎。一、三级合伙人体系&#x…...

编程日记 2025/8/25 23:38:52

yum源repo文件： wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repodocker源repo文件： yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装docker和docker c…...

编程日记 2025/7/20 10:09:31

通过设备节点获取已注册的 i2c client

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言代码分析前言另一个驱动通过设备节点获取已注册的i2c client 代码分析 #include <linux/kernel.h> #include <linux/init.h> #include <li…...

编程日记 2025/8/16 18:30:39

Centos系统资源镜像配置

主要体现 yum 命令执行报错，排除网络连接问题解决步骤： 下载安装工具 # 安装 wget curl vim yum install -y wget curl vim 原有repo文件备份 # 进入配置文件所在文件夹 cd /etc/yum.repos.d# 创建 backup 文件夹 mkdir backup# 备份文件放置文件夹 m…...

编程日记 2025/8/11 22:49:13

【Linux网络篇】：Socket网络套接字以及简单的UDP网络程序编写

✨感谢您阅读本篇文章，文章内容是个人学习笔记的整理，如果哪里有误的话还请您指正噢✨ ✨ 个人主页：余辉zmh–CSDN博客 ✨ 文章所属专栏：Linux篇–CSDN博客文章目录网络编程套接字一.预备知识1.理解源IP地址和目的IP地址2.认识端…...

编程日记 2025/8/11 11:35:10

学习路之uniapp--unipush2.0推送功能--给自己发通知

学习路之uniapp--unipush2.0推送功能--给自己发通知一、绑定云空间及创建云函数二、编写发送界面三、效果后期展望： 一、绑定云空间及创建云函数 package.json {"name": "server-push","dependencies": {},"main": "…...

编程日记 2025/8/24 4:42:41

Java面向对象一

系列文章目录 Java面向对象二-CSDN博客目录系列文章目录前言一、初步认识面向对象 1.类和对象的简单理解 2.类的构成二、类的实例化 1.对象的创建 2.对象的初始化三、this引用的作用四、构造方法 1.构造方法的提供 2.对象的构造 3.构造方法的重载 4.th…...

编程日记 2025/6/5 11:06:48

怎么开发一个网络协议模块（C语言框架）之(二) 数据结构设计

一、数据结构设计模板分析 (gdb) p gVrrpInstance $3 = { INT4 socketV4 = 107, .... vrrpStatisticsEntry_t SvrrpStatistics = {delIp4Count = 0, delIp6Count = 0, delIp4Error = 0, delIp6Error = 0, addIp4Count = 0, addIp6Count = 3, addIp4Error = 0, addIp6Error …...

编程日记 2025/6/2 23:08:29

30天自制操作系统day5（vram和显存）（GDT和IDT）（c语言结构体）（汇编-c）（ai辅助整理）

day5 harib02d c语言结构体的一些解释 struct BOOTINFO { char cyls, leds, vmode, reserve; short scrnx, scrny; char *vram; }; //最开始的struct命令只是把一串变量声明集中起来，统一叫做“struct BOOTINFO”。 //最初是1字节的变量cyls，接着是1字…...

编程日记 2025/8/7 15:16:42

【音频】drc 限幅器、多带限幅器、压缩器、多带压缩器

以下是关于 DRC 限幅器、多带限幅器、压缩器、多带压缩器的详细解释，它们均为音频处理领域的动态范围控制设备，主要用于调整音频信号的动态范围（即最大音量与最小音量的差值），以优化音质或满足特定播放需求：一、DRC 限幅器（Dynamic Range Compression Limiter）核心功…...

编程日记 2025/6/15 8:56:01

leetcode hot100刷题日记——12.反转链表

解答： /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x), next(n…...

编程日记 2025/8/26 13:28:26