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

（前端基础）HTML（一）

news 2025/12/2 12:18:15

前提

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>
  • 注释和特殊符号&nbsp;  &gt;    &lt;    &copy;

块元素：无论内容多少，该元素独占一行（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标记脚部区域内容（整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
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&#xff08;万维网联盟&#xff09; Web技术领域最权威和具有影响力的国际中立性技术标准机构 其中标准包括&#xff1a;机构化标准语言&#xff08;HTML、XML&#xff09; 表现标准语言&#xff08;CSS&#xff09; 行为标准&#xf…...

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

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

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

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

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

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

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

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

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

编程日记 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 知识&#xff08;1&#xff09; Linux 知识&#xff08;2&#xff09; WSL Ubuntu QEMU 虚拟机 Linux 调试视频 PCIe 与 USB 的补充知识 vscode 使用说明 树莓派 4B 指南 设备驱动畅想 Linux内核子系统 Linux 文件系统挂载 QEMU 通过网络实现…...

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

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

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

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

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

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

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

react中如何获取真实的dom

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

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

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

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

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

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

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

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

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

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

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

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

论文标题 中文标题&#xff1a;一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法 英文标题&#xff1a;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.容器和云原生 容器技术 起源于虚拟化技术&#xff0c;Docker 和虚拟机和谐共存&#xff0c;用户也找到了适合两者的应用场景&#xff0c;二者对比如下图…...

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

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

现在有一个结构体&#xff0c;其中一个属性组合了另外一个结构体&#xff0c;如下所示&#xff1a; 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&#xff1a;AI对决中的赢家是……人类吗&#xff1f; 文章目录 DeepSeek vs ChatGPT&#xff1a;AI对决中的赢家是……人类吗&#xff1f;一、引言1. 背景2. 问题 二、DeepSeek vs ChatGPT&#xff1a;谁更胜一筹&#xff1f;2.1 语言生成能力评测对比场景…...

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

新建github操作

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.项目介绍 系统角色&#xff1a;管理员、普通用户功能模块&#xff1a;用户管理、学习中心、知识分类管理、学习周报管理、口算练习管理、试题管理、考试管理、错题本等技术选型&#xff1a;SSM&#xff0c;Vue&#xff08;后端管理web&#xff09;&#xff0c;uniapp等测试环…...

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

HTML的入门

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

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/12/1 12:18:21

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2025/12/1 3:59:38

51c自动驾驶~合集58

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

编程新知 2025/12/2 6:11:19

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/12/2 9:58:49

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/12/1 13:44:47

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/12/1 22:22:07

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/11/27 6:19:44

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/11/28 23:27:07

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18