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

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

news 2025/7/6 2:10:23

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

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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/6/26 0:06:54

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/6/15 13:07:03

cf2117E

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

编程新知 2025/7/5 22:52:54

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/7/5 9:25:53

Rapidio门铃消息FIFO溢出机制

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

编程新知 2025/6/20 15:59:42

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/7/4 14:16:03

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/6/15 18:05:20

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/7/5 10:35:20