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

（前端基础）HTML（一）

news 2026/2/10 19:35:03

前提

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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2026/1/28 10:58:50

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2026/1/29 18:30:30

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2026/1/26 19:10:48

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2026/2/5 5:24:23