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

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

news 2025/7/17 13:01:46

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

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/7/17 12:52:44

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/7/15 21:41:19

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/6/25 2:07:42

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/6/16 12:49:42

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

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

编程新知 2025/6/25 1:12:20

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/7/17 1:16:39

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/7/17 3:08:06

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/6/19 5:23:30