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

（前端基础）HTML（一）

news 2025/10/2 17:27:01

前提

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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/10/1 14:36:26

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2025/9/28 3:03:45

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/7/6 11:42:31

浅谈不同二分算法的查找情况

二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。需要说明的是，以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决问题背景在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...

编程新知 2025/9/27 14:12:14