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

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

news 2025/12/28 8:42:40

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

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/12/26 13:33:30

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

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/10/24 14:20:29

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/12/12 3:26:16

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/12/24 9:59:28

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/12/16 3:23:56

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/12/21 4:56:54

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/12/24 22:45:32