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

（前端基础）HTML（一）

news 2026/2/10 14:27:35

前提

W3C:World Wide Web Consortium（万维网联盟）

Web技术领域最权威和具有影响力的国际中立性技术标准机构

其中标准包括：机构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

HTML：超文本标记语言

建立html文件

利用浏览器打开该文件

若出现错误提示：

打开文件设置：

选择Tools：

HTML基本结构

DOCTYPE:告诉浏览器，我们要使用什么规范
<html>:整个网页
head：网页头部
body：网页主体
title：网页标题
meta：描述性标签，用来描述网站的信息

Ctrl+/:html文件的注释快捷键

meta标签使用：

如网易云：

网页基本标签

标题标签<h1>
段落标签<p>
换行标签<br/>
水平线标签<hr/>
字体样式标签<strong>、<em>
注释和特殊符号  > < ©

块元素：无论内容多少，该元素独占一行（p、h1-h6）

行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行（a、strong、em）

图像标签

常见图像格式JPG、GIF、PNG、BMP

利用img标签嵌入图像

<img src="图像地址" alt="图像的替换文字" title="鼠标悬停时提示文字" width="图像宽度" height="图像高度"/>

该处选择资源目录下的图片文件中的图片进行测试

src：图片地址

相对地址：../resources/image/apple.jpg

绝对地址：D:\学习资料\java\前端\resources\image\apple.jpg

图片不存在的情况：

链接标签

文本、图像超链接

<a href="链接路径" target="链接在哪个窗口打开"></a>

href:可以是html文件、URL地址

target：链接在哪个窗口打开

_blank:在新标签中打开
_self:默认值。在自己的网页中打开

锚标签

使用方法：

需要一个锚标记
跳转到标记#

页面跳转：

功能性链接

邮件链接：mailto：邮箱地址

列表标签

列表：信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者更快捷地获得相应的信息。

列表分类：

无序列表

<ol><li></li>
</ol>

有序列表

<ul><li></li>
</ul>

定义列表

<dl><dt>列表名称</dt><dd>列表内容</dd>
</dl>

表格

表格简单通用，结构稳定。

基本结构有：单元格、行、列、跨行、跨列

如下：

表格标签：table
行row：tr
列：td
边框：border
跨行：colspan，参数是跨的列数
跨列：rowspan，参数使跨的行数

<table><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

媒体元素

视频元素标签：video

音频元素标签：audio

属性src：所要选中的文件位置
属性controls:控制播放
属性autoplay:自动播放

<video src="mp4文件" controls autoplay></video>
<audio src="mp3文件" controls autoplay></audio>

扩展：页面结构分析

header	标题头部区域内容（页面或页面中的一块区域）
footer	标记脚部区域内容（整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（侧边栏）
nav	导航类辅助内容

iframe内联框架

<iframe src="页面地址" name="框架标识名" frameborder="0"></iframe>

使用方法：

width:宽度

height：高度

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="700px"></iframe>

该处跳转到百度

也可以通过a标签往iframe加东西

name：框架标识名

target：链接在哪个窗口打开

（前端基础）HTML（一）

前提 W3C:World Wide Web Consortium（万维网联盟） Web技术领域最权威和具有影响力的国际中立性技术标准机构其中标准包括：机构化标准语言（HTML、XML） 表现标准语言（CSS） 行为标准&#xf…...

编程日记 2025/2/17 0:20:09

Linux文件管理：硬链接与软链接

文章目录 1. 硬链接的设计目的（1）节省存储空间（2）提高文件管理效率（3）数据持久性（4）文件系统的自然特性 2. 软链接的设计目的**（1）跨文件系统引用****&#x…...

编程日记 2025/2/17 0:14:00

pnpm, eslint, vue-router4, element-plus, pinia

利用 pnpm 创建 vue3 项目 pnpm 包管理器 - 创建项目 Eslint 配置代码风格(Eslint用于规范纠错，prettier用于美观） 在设置中配置保存时自动修复提交前做代码检查 husky是一个 git hooks工具（git的钩子工具，可以在特定实际执行特…...

编程日记 2025/2/17 0:09:55

在软件产品从开发到上线过程中，不同阶段可能出现哪些问题，导致软件最终出现线上bug

在软件产品从开发到上线的全生命周期中，不同阶段都可能因流程漏洞、技术疏忽或人为因素导致线上问题。以下是各阶段常见问题及典型案例： 1. 需求分析与设计阶段问题根源：业务逻辑不清晰或设计缺陷典型问题： 需求文档模糊&#…...

编程日记 2025/2/17 0:05:48

Spring Boot中如何自定义Starter

文章目录 Spring Boot中如何自定义Starter概念和作用1. 概念介绍2. 作用和优势2.1 简化依赖管理2.2 提供开箱即用的自动配置2.3 标准化和模块化开发2.4 提高开发效率2.5 提供灵活的配置覆盖3. 应用场景创建核心依赖1. 确定核心依赖的作用2. 创建 starter-core 模块2.1 依赖管理…...

编程日记 2025/2/17 0:04:43

制作Ubuntu根文件

系列文章目录 Linux内核学习 Linux 知识（1） Linux 知识（2） WSL Ubuntu QEMU 虚拟机 Linux 调试视频 PCIe 与 USB 的补充知识 vscode 使用说明树莓派 4B 指南设备驱动畅想 Linux内核子系统 Linux 文件系统挂载 QEMU 通过网络实现…...

编程日记 2025/2/16 23:56:21

SpringBoot快速接入OpenAI大模型（JDK8）

使用AI4J快速接入OpenAI大模型本博文给大家介绍一下如何使用AI4J快速接入OpenAI大模型，并且如何实现流式与非流式的输出，以及对函数调用的使用。介绍由于SpringAI需要使用JDK17和Spring Boot3，但是目前很多应用依旧使用的JDK8版本&…...

编程日记 2025/2/16 23:54:16

UniApp 中制作一个横向滚动工具栏

前言最近在用 UniApp 开发项目时，需要一个横向滑动的工具栏。常见的工具栏一般都是竖着的，但横向滑动的工具栏不仅能展示更多内容，还能让界面看起来更加丰富。不过很多朋友可能会发现，如何让内容“横着”展示又不变形、能流畅滚…...

编程日记 2025/2/16 23:51:05

react中如何获取真实的dom

在 React 中，获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性，用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 DOM 元素或组件实例。 1. 函数组件中的 useRef 在函数组件中，获取 DOM 元素的引用需要使用 …...

编程日记 2025/2/16 23:47:52

5G与物联网的协同发展：打造智能城市的未来

引言随着科技的不断进步，智能城市的概念已经不再是科幻小说中的幻想，它正在逐步走进我们的生活。而这背后的两大驱动力无疑是 5G和物联网（IoT）。5G网络以其高速率、低延迟、大容量的优势，与物联网的强大连接能力相结…...

编程日记 2025/2/16 23:35:33

【Qt】实现定期清理程序日志

在现有Qt程序中实现可配置日志保存天数的代码示例，分为界面修改、配置存储和核心逻辑三部分： // 1. 在配置文件（如settings.h）中添加保存天数的配置项 class Settings { public:int logRetentionDays() const {return m_settings…...

编程日记 2025/2/16 23:34:29

git bisect 使用二分法查找引入错误的提交

git bisect 使用二分法查找引入错误的提交 Git bisect 命令官方文档 git bisect 这个命令使用二分搜索算法来查找项目历史中哪个提交引入了一个错误使用该命令时，首先告诉它一个已知包含错误的 “坏” 提交以及一个已知在错误出现之前的 “好” 提交然后 git b…...

编程日记 2025/2/16 23:33:24

一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法

论文标题中文标题：一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法英文标题：A Joint Routing and Time-Slot Scheduling Load Balancing Algorithm for In-Vehicle TSN 作者信息 Bo Xu, Xinrui Chang, Dongyang Xu, Shuo Wang, Uzair As…...

编程日记 2025/2/16 23:32:21

【弹性计算】容器、裸金属

容器、裸金属 1.容器和云原生1.1 容器服务1.2 弹性容器实例1.3 函数计算 2.裸金属2.1 弹性裸金属服务器2.2 超级计算集群 1.容器和云原生容器技术起源于虚拟化技术，Docker 和虚拟机和谐共存，用户也找到了适合两者的应用场景，二者对比如下图…...

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

Golang关于结构体组合赋值的问题

现在有一个结构体，其中一个属性组合了另外一个结构体，如下所示： type User struct {Id int64Name stringAge int64UserInfo }type UserInfo struct {Phone stringAddress string }如果要给 User 结构体的 Phone 和 Address 赋值的话&am…...

编程日记 2025/2/16 23:26:09

DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？

DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？ 文章目录 DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？一、引言1. 背景2. 问题二、DeepSeek vs ChatGPT：谁更胜一筹？2.1 语言生成能力评测对比场景…...

编程日记 2025/2/16 23:21:58

1.在github.com的主页根据提示新建一个depository。 2.配置用户名和邮箱 git config --global user.name "name" git config --global user.email "email" 3.生成ssh秘钥 ssh-keygen -t rsa 找到public key 对应的文件路径 cat /root/.ssh/id_rsa 复制显…...

编程日记 2025/2/16 23:16:48

Spring Boot 携手 DeepSeek：开启智能交互新时代

前言在当今数字化浪潮汹涌澎湃的时代，人工智能技术正以前所未有的速度改变着我们的生活和工作方式。大语言模型作为人工智能领域的一颗璀璨明星，凭借其强大的自然语言处理能力，为各个行业带来了新的发展机遇。DeepSeek 作为一款性能卓越的大语言模型，以其高效、准确的文本…...

编程日记 2025/2/16 23:14:38

基于SSM+uniapp的数学辅导小程序+LW示例参考

1.项目介绍系统角色：管理员、普通用户功能模块：用户管理、学习中心、知识分类管理、学习周报管理、口算练习管理、试题管理、考试管理、错题本等技术选型：SSM，Vue（后端管理web），uniapp等测试环…...

编程日记 2025/2/16 23:12:31

HTML的入门

一、HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。超文本：就是超越了文本；HTML不仅仅可以用来显示文本(字符串、数字之类)，还可以显示视频、音频等…...

编程日记 2025/2/16 23:10:24

idea大量爆红问题解决

问题描述在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决就是如上所展示的问题，但是程序依然可以启动。问题解决…...

编程新知 2026/2/8 6:37:38

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/12/14 17:38:17

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2026/2/5 4:25:15

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/6 5:38:46

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享文件木马：https://w…...

编程新知 2026/1/25 10:13:29

深度学习习题2

1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录一、SQL注入二、字符型SQL注入三、字符型注入与数字型注入四、源码分析五、渗透实战 1、渗透准备 2、SQL注入探测 （1）输入单引号 （2）万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/5 5:47:53

git: early EOF

macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标如果springboot父工程没有加入websocket的起步依赖，添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/9/20 3:28:39

前提