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

（前端基础）HTML（一）

news 2026/5/8 8:42:57

前提

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

Windows 无缝运行 deepin 25｜WSL 离线安装全指南

在日常的开发与测试中，许多用户希望能在 Windows 环境下便捷地使用 Linux 工具链。此时，WSL（Windows Subsystem for Linux，适用于 Linux 的 Windows 子系统） 便是最佳选择。什么是 WSL？ WSL 是微软提供的…...

编程新知 2026/5/8 8:04:44

XUnity.AutoTranslator终极指南：5分钟破解Unity游戏语言壁垒

XUnity.AutoTranslator终极指南：5分钟破解Unity游戏语言壁垒【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 还在为看不懂日文RPG、英文独立游戏而苦恼吗？XUnity.AutoTranslator作…...

编程新知 2026/5/8 7:41:29

论文AI率达标指南：亲测5款实用降AI工具，高效消除AIGC痕迹

每到毕业季，不少同学都会收到导师的同款提醒：“你这篇论文AIGC率太高了，拿回去重改。”但“太高”到底是指多少？不同院校的要求天差地别，不同检测系统的结果也各不相同：有的学校要求AI率不超过30%才算合格&…...

编程新知 2026/5/8 7:31:05

做海外盲盒APP选什么开发语言稳定还适配欧美用户太实用了

选对开发语言才能适配欧美用户的使用习惯很多人做海外项目最容易踩的坑就是，用国内开发的逻辑直接套海外场景。做盲盒APP更是如此，不光要系统稳定不崩，还要适配欧美的网络环境、用户支付习惯，甚至不同地区的合规要求，…...

编程新知 2026/5/8 7:06:32

Dify插件开发实战：Python SDK快速构建AI工作流扩展工具

1. 项目概述与核心价值如果你正在为 Dify 构建自定义插件，并且厌倦了从零开始处理复杂的协议、序列化和生命周期管理，那么langgenius/dify-plugin-sdks这个项目就是你一直在找的“脚手架”。简单来说，它是一套官方维护的软件开发工具包&#…...

编程新知 2026/5/8 6:27:18

别再死记硬背了！用ASL代码实例拆解ACPI表（从RSDP到DSDT）

别再死记硬背了！用ASL代码实例拆解ACPI表（从RSDP到DSDT） ACPI规范文档动辄上千页，但真正能解决问题的知识往往藏在代码细节里。我曾花了三个月逆向分析某服务器主板的电源管理异常，最终发现问题的根源是一个被错误声明…...

编程新知 2026/5/8 5:54:39

LLMs-from-scratch-CN性能优化技巧：从FLOPS分析到高效注意力实现

LLMs-from-scratch-CN性能优化技巧：从FLOPS分析到高效注意力实现【免费下载链接】LLMs-from-scratch-CN LLMs-from-scratch项目中文翻译项目地址: https://gitcode.com/gh_mirrors/llm/LLMs-from-scratch-CN LLMs-from-scratch-CN是一个专注于LLM模型构建与…...

编程新知 2026/5/8 4:41:15