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

【前端】如何制作一个自己的网页（5）

news 2026/2/10 1:22:42

上节课我们学习了以下知识：

1、网页中常见的文本元素，如标题元素与段落元素；

2、两个通用属性id与class；

3、元素的两种类型——块级元素与行内元素。

其实除了文本内容外，网页还可以包含图片、超链接等各类信息，为我们展示更多的内容。

本节课我们将学习网页中常用的两个非文本元素——图片与超链接。

那么浏览器是如何从HTML中获取图片地址的呢？

它主要是依靠一个名为img的标签。

右边的代码实现了一个包含图片的网页。

其中第9行，使用了img元素为网页添加图片。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片结构</title>

</head>

<body>

    <p>您上传的头像：</p>

    <img src="image/head.png" alt="头像">

</body>

</html>

解释代码：

<img>标签

img 元素可以为网页插入一张图片，它是一个由单标签组成的行内元素。

也就是说，它只包含开始标签，且多个元素可以在同一行显示。

img全称：image - 图像

图片的地址

src 属性用于记录图片所在的文件位置，浏览器可以通过该地址找到要使用的图片。

例如，我们要显示images文件夹中名为head.png的图片。

稍后我们会详细学习获取图片地址的方法。

src全称：source - 来源

描述图片

alt 属性用来记录一段文字。

当浏览器未能找到图片时，alt中的内容会代替图片显示在网页中。

alt全称：alternate - 代替的

总结：

具体设定：

设置图片宽高

网页中的图片默认以原始大小显示。当图片过大时，屏幕无法完整显示图片内容。

此时，你可以通过width属性和height属性，设置图片的宽度和高度。

属性的值为数字+像素单位(px)，如100px。

等比例缩放

你也可以只设置图片的宽度（或高度），浏览器会按照比例自动调整图片的高度（或宽度）。

比如，右边的代码仅设置了宽度，浏览器会按照比例自动调整图片的高度。

代码会写了，但我们如何获取图片的地址呢？通常我们会从两个位置获取图片：

1、获取自己电脑中的图片地址；

2、获取网络中的图片地址。

接下来就让我们学习一下获取图片地址的方法。

选择图片，点击右键，选择复制图片地址，写入src=“”中

相同的文件夹

当图片与HTML文档在同一个文件夹时，图片地址的格式如下：

./文件名称.文件类型

可简写为文件名称.文件类型

其中.代表文档所在的文件夹，/用来分割文件夹与文件的名称。

不同的文件夹

图片数量较多时，我们可以将所有图片放在同一个文件夹中（如右图images），并将该文件夹与html文档放在一起。

此时，文件夹中的图片地址格式如下：

文件夹名称/文件名称.文件类型

相关文章：

【前端】如何制作一个自己的网页（5）

上节课我们学习了以下知识&#xff1a; 1、网页中常见的文本元素&#xff0c;如标题元素与段落元素&#xff1b; 2、两个通用属性id与class&#xff1b; 3、元素的两种类型——块级元素与行内元素。 其实除了文本内容外&#xff0c;网页还可以包含图片、超链接等各类信息&a…...

编程日记 2024/10/18 1:45:40

Unity实战案例全解析 类宝可梦回合制的初级案例 源码分析（加了注释和流程图）

这是一个老教程了&#xff0c;但是对于没有写过回合制的初级程序同学来讲是比较适合的&#xff0c;也可以直接看源码&#xff0c;半小时内可以解决战斗 当然&#xff0c;我也没写过回合制系统所以就到处找&#xff0c;思路明白了就能自己修改了 视频教程 - 油管链接 Turn-Bas…...

编程日记 2024/10/18 1:44:39

AI绘图大模型 Stable Diffusion 使用详解

近年来&#xff0c;生成式 AI 技术&#xff0c;特别是 AI 绘图模型的进展令人瞩目。Stable Diffusion 是其中一款开源的大规模图像生成模型&#xff0c;它能够根据文本描述生成高质量的图像&#xff0c;支持从写实风格到卡通、幻想等各种不同的视觉效果。本文将深入介绍如何使用…...

编程日记 2024/10/18 1:43:37

es索引库操作和使用RestHignLevelClient客户端操作es

目录 es索引库操作 mapping映射操作 索引库的CURD操作 1.创建索引库和映射 ​编辑 2.查询索引库 3.删除索引库 4.修改索引库 5.总结 文档的CURD操作 1.新增文档 2.查询文档 3.删除文档 4.修改文档 全量修改 增量修改 5.总结 RestAPI 使用API例子 需要的数…...

编程日记 2024/10/18 1:42:36

安卓数据共享

在 Android 中&#xff0c;数据共享是指不同应用之间共享数据或同一应用不同组件之间共享数据的机制。SQLite 数据库、内容提供者&#xff08;Content Provider&#xff09;、共享偏好&#xff08;Shared Preferences&#xff09;和文件存储等方式可以实现数据共享。下面将详细…...

编程日记 2024/10/18 1:41:35

Gin框架操作指南02：JSON渲染

官方文档地址&#xff08;中文&#xff09;&#xff1a;https://gin-gonic.com/zh-cn/docs/ 注&#xff1a;本教程采用工作区机制&#xff0c;所以一个项目下载了Gin框架&#xff0c;其余项目就无需重复下载&#xff0c;想了解的读者可阅读第一节&#xff1a;Gin操作指南&#…...

编程日记 2024/10/18 1:39:33

【随手记】MySQL单表访问方法

在MySQL查询优化器中&#xff0c;单表访问方法&#xff08;Access Method&#xff09;指的是查询时数据库如何从一个表中访问所需的数据。不同的访问方法适用于不同的查询场景&#xff0c;主要包括 const、ref、ref_or_null、range、index 和 all。这些方法从效率上依次递减&am…...

编程日记 2024/10/18 1:38:31

机器学习：情感分析的原理、应用场景及优缺点介绍

一、情感分析算法概述 情感分析是自然语言处理中的一个重要任务&#xff0c;主要用于判断文本中所包含的情感倾向&#xff0c;如正面、负面或中性。 二、基于词典的情感分析算法 原理 词典构建&#xff1a;首先需要构建一个情感词典。这个词典包含了一系列带有情感倾向的词汇…...

编程日记 2024/10/18 1:35:27

基于SSM的医院药品管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

编程日记 2024/10/18 1:33:26

特征融合篇 | YOLOv10 引入动态上采样模块 | 超过了其他上采样器

本改进已集成到YOLOv8-Magic 框架 论文名称：《Learning to Upsample by Learning to Sample》 论文地址：https://arxiv.org/abs/2308.15085 代码地址：https://github.com/tiny-smart/dysample 我们提出了 DySample，一种超轻量级且有效的动态上采样器。尽管最近基于内核的…...

编程日记 2024/10/18 1:31:24

【Linux系列】写入文本到文件

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2024/10/18 1:30:23

【踩坑随笔】Tensorflow-GPU训练踩坑

一个无语的坑&#xff0c;4060单卡训练&#xff0c;8G内存本来就不够&#xff0c;还没开始训练就已经爆内存了&#xff0c;但是居然正常跑完了训练&#xff0c;然后一推理发现结果就是一坨。。。往回翻日志才发现原来中间有异常。 首先解决第一个问题&#xff1a;Could not lo…...

编程日记 2024/10/18 1:29:22

【云岚到家】-day07-4-实战项目-优惠券活动-项目准备

【云岚到家-即刻体检】-day07-4-实战项目-优惠券活动-活动管理 1 模块需求分析1.1 业务流程1.2 界面原型1.3 业务模块 2 模块设计2.1 数据流2.2 表结构设计2.2.1 优惠券活动表设计2.2.2 优惠券表设计2.2.3 优惠券核销表2.2.4 优惠券退回表 2.3 创建数据库2.4 创建工程 1 模块需…...

编程日记 2024/10/18 1:24:18

axios的使用

在 Vue 项目中&#xff0c;封装 Axios 并实现加密、重复请求优化、请求取消、页面切换时取消未完成的请求、以及区分上传和下载操作是非常常见的需求。下面将逐一讲解这些需求的实现方式。 1. Axios 的基本封装 首先&#xff0c;我们可以将 Axios 封装到一个服务层中&#xf…...

编程日记 2024/10/18 1:22:16

Ubuntu 使用命令克隆和恢复SD卡

因为平常我需要做很多张开发板的出货卡&#xff0c;测试卡&#xff0c;那么我需要将备份下来文件&#xff0c;方便后续管理&#xff0c;这里时候需要用到Ubuntu上面的命令来克隆镜像和恢复镜像到SD卡上 先查询自己的SD卡是在sdx&#xff0c;以我的为例子&#xff0c;为sdb 备…...

编程日记 2024/10/18 1:20:14

Java 小游戏《超级马里奥》

文章目录 一、效果展示二、代码编写1. 素材准备2. 创建窗口类3. 创建常量类4. 创建动作类5. 创建关卡类6. 创建障碍物类7. 创建马里奥类8. 编写程序入口 一、效果展示 二、代码编写 1. 素材准备 首先创建一个基本的 java 项目&#xff0c;并将本游戏需要用到的图片素材 image…...

编程日记 2024/10/18 1:19:13

go语言defer详解

什么是defer&#xff1f;为什么需要defer&#xff1f;怎样合理使用defer?defer进阶 defer的底层原理是什么&#xff1f;利用defer原理defer命令的拆解defer语句的参数闭包是什么&#xff1f;defer配合recover后记参考资料 什么是defer&#xff1f; defer是Go语言提供的一种用…...

编程日记 2024/10/18 1:17:11

【C语言】循环中断break

在循环使用过程中&#xff0c;可能遇到某些情况需要终止循环。比如按座位查找一位学生&#xff0c;循环查找&#xff0c;找到时可以直接停止。后续的循环将不再执行。 break;只跳出一层循环 例子中的素数判断&#xff0c;查找到根号n停止&#xff1a;一个合数等于两个数的乘积…...

编程日记 2024/10/18 1:16:10

centos ping能通但是wget超时-解决

问题截图&#xff1a; 域名解析地址为IPV6地址&#xff0c;建议您调整IPV4优先级之后&#xff0c;再尝试访问&#xff0c;请参考Linux系统IPv4/IPv6双栈接入优先使用IPv4设置&#xff1a;移动云帮助中心 实操截图&#xff1a;...

编程日记 2024/10/18 1:13:08

SDIO - DWC MSHC 电压切换和频率切换

背景 我们的sdio访问sd card过去一直跑在低频上&#xff0c;HS50M。前段时间给eMMc添加了HS200模式&#xff0c;eMMc的总线模式定义是这样的&#xff1a; 可以看到1.8V的IO 电压可以支持所有模式&#xff0c;我们过去的芯片&#xff0c;由硬件部门放到evb上&#xff0c;其IO …...

编程日记 2024/10/18 1:12:07

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/2/8 14:57:14

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/2/6 23:56:39

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48

均衡后的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

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/8 22:07:52

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35