广州网站设计工作室/搜狗链接提交入口

广州网站设计工作室,搜狗链接提交入口,校园网站建设的开题报告,网站开发源码1. 常用图像格式 格式特点适用场景JPEG有损压缩,文件小,不支持透明适合照片、复杂图像PNG无损压缩,支持透明(Alpha通道)适合图标、需要透明背景的图片GIF支持动画,最多256色简单动画、低色彩图标WebP谷歌开…

1. 常用图像格式

格式特点适用场景
JPEG有损压缩,文件小,不支持透明适合照片、复杂图像
PNG无损压缩,支持透明(Alpha通道)适合图标、需要透明背景的图片
GIF支持动画,最多256色简单动画、低色彩图标
WebP谷歌开发,高压缩率,支持透明和动画现代网页,替代JPEG/PNG
SVG矢量格式,无损缩放图标、LOGO、响应式设计

2. 图像标签及其属性

标签:<img>
  • 核心属性

    • src:指定图片路径(必填)。

    • alt:替代文本,图片无法显示时展示(必填,SEO和可访问性关键)。

  • 可选属性

    • width/height设置显示尺寸(单位像素或百分比)。

    • loading="lazy":延迟加载(提升页面性能)。

    • title鼠标悬停时的提示文本(非必填,与alt不同)。

示例代码
<img src="logo.png" alt="网站LOGO" width="200" height="100" loading="lazy">

3. 绝对路径 vs. 相对路径

类型定义示例优缺点
绝对路径完整URL或系统根目录开始的路径https://example.com/images/pic.jpg 或 /var/www/images/pic.jpg精准定位,依赖外部服务器稳定性
相对路径相对于当前文件的路径images/pic.jpg(同级目录下images文件夹)或 ../assets/pic.jpg(上级目录)灵活,但需注意文件结构一致性

在HTML中,相对路径用于指定当前文件与其他文件或资源之间的相对位置。相对路径的设置方法如下:

1. 同一目录下的文件

如果目标文件与当前HTML文件位于同一目录下,可以直接使用文件名作为相对路径。

<!-- 引用同一目录下的图片 -->
<img src="image.jpg" alt="描述文本"><!-- 链接到同一目录下的另一个HTML文件 -->
<a href="page.html">访问页面</a>
2. 子目录中的文件

如果目标文件位于当前目录的子目录中,需要在文件名前加上子目录的名称和斜杠 /

<!-- 引用子目录中的图片 -->
<img src="images/image.jpg" alt="描述文本"><!-- 链接到子目录中的HTML文件 -->
<a href="subdirectory/page.html">访问子目录中的页面</a>
3. 父目录中的文件

如果目标文件位于当前目录的父目录中,需要使用 .. 表示返回上一级目录,然后再加上目标文件的路径。

<!-- 引用父目录中的图片 -->
<img src="../image.jpg" alt="描述文本"><!-- 链接到父目录中的HTML文件 -->
<a href="../page.html">访问父目录中的页面</a>
4. 多级目录

如果需要访问更复杂的目录结构,可以结合以上方法。

<!-- 访问当前目录的父目录的子目录中的文件 -->
<img src="../images/logo.jpg" alt="描述文本"><!-- 访问当前目录的子目录的子目录中的文件 -->
<a href="subdir/subsubdir/page.html">访问多级子目录中的页面</a>
总结
  • 同一目录:直接使用文件名。

  • 子目录:使用 子目录名/文件名

  • 父目录:使用 ../文件名

  • 多级目录:结合以上方法,如 ../子目录名/文件名子目录名/子子目录名/文件名

通过正确设置相对路径,可以确保HTML文件正确引用所需的资源。


4. 使用图像标签的注意事项

  1. 必填alt属性:提升无障碍访问和SEO,避免留空(除非纯装饰图片,可设为alt="")。

  2. 尺寸优化:优先用width/height定义占位尺寸,避免布局偏移,但实际调整大小应通过图像编辑工具。

  3. 路径正确性:相对路径需确保文件层级正确,绝对路径需确认URL有效。

  4. 图片压缩:大图需压缩(如TinyPNG工具),减少加载时间。

  5. 响应式设计:使用srcset属性适配不同屏幕分辨率。

  6. 版权问题:避免使用未授权图片。


总结表格

分类要点
常用格式JPEG(照片)、PNG(透明)、GIF(动画)、WebP(高效)、SVG(矢量)
标签与属性<img src="..." alt="..." width="..." height="..." loading="lazy">
路径类型绝对路径(完整URL)、相对路径(images/pic.jpg../assets/pic.jpg
注意事项必填alt、压缩图片、路径验证、响应式适配、版权合规

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/73942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

内存高级话题

面试凉经&#xff0c;代码最近写的太少了&#xff0c;被面试官屠杀。 痛定思痛&#xff0c;对C新经典中的内存话题进行复现。 new A 与 new A() 的差别 &#xff08;1&#xff09;如果是一个空类&#xff0c;这两行代码没什么区别。当然现实中也没有程序员会写一个空类。 &am…

2025最全Xshell配置手册:从零开始下载安装搭建远程连接环境

&#x1f308; 软件介绍 Xshell 7 是由韩国 NetSarang 公司开发的一款功能强大的终端模拟器。它专为 Windows 操作系统设计&#xff0c;广泛应用于远程连接管理和服务器管理。 &#x1f4e5; 软件下载与准备 1. 官方下载渠道&#xff08;直接下载&#xff0c;安全无捆绑&…

算法模型从入门到起飞系列——广度优先遍历(BFS)

文章目录 前言一、广度优先遍历&#xff08;BFS&#xff09;简介1.1 广度优先遍历&#xff08;BFS&#xff09;的特点1.2 广度优先遍历&#xff08;BFS&#xff09;的要素 二、广度优先遍历&#xff08;BFS&#xff09;& 深度优先遍历&#xff08;DFS&#xff09;2.1 广度优…

CPP从入门到入土之类和对象Ⅱ

一、六大默认成员函数 默认成员函数是用户没有显式实现&#xff0c;编译器自动生成的成员函数。 一个类&#xff0c;我们在不写的情况下&#xff0c;编译器会默认生成六个默认成员函数 本文详细介绍构造函数和析构函数 二、构造函数 构造函数虽名为构造函数&#xff0c;但是…

【华三】路由器交换机忘记登入密码或super密码的重启操作

【华三】路由器交换机忘记登入密码或super密码的重启操作 背景步骤跳过认证设备&#xff1a;路由器重启设备翻译说明具体操作 跳过当前系统配置重启设备具体操作 背景 当console口的密码忘记&#xff0c;或者说本地用户的密码忘记&#xff0c;其实这时候是登入不了路由器的&am…

视图窗口的客户区

书籍&#xff1a;《Visual C 2017从入门到精通》的2.4.2 MFC应用程序类型 环境&#xff1a;visual studio 2022 内容&#xff1a;【例2.38】视图窗口的客户区 说明&#xff1a;以下内容大部分来自腾讯元宝。 1.创建一个单文档程序 一个简单的单文档程序-CSDN博客https://bl…

MySQL原理:逻辑架构

目的&#xff1a;了解 SQL执行流程 以及 MySQL 内部架构&#xff0c;每个零件具体负责做什么 理解整体架构分别有什么模块每个模块具体做什么 目录 1 服务器处理客户端请求 1.1 MySQL 服务器端逻辑架构说明 2 Connectors 3 第一层&#xff1a;连接层 3.1 数据库连接池(Conn…

当前企业使用VPN面临的不足和挑战

VPN的防护理念无法满足数字化转型的需求 古人云&#xff1a;知己知彼&#xff0c;百战不殆&#xff0c;既然要替换VPN&#xff0c;就要先了解VPN。VPN于1996年起源&#xff0c;98年首次在我国出现&#xff0c;历经25年的持续演进&#xff0c;直到现在依然广泛流行。VPN的起源背…

python中ord()和chr()转化ASCII数值+解密字符串例题

1.ASCII码简介 ASCII 即美国信息交换标准代码&#xff08;American Standard Code for Information Interchange&#xff09;&#xff0c;是基于拉丁字母的一套电脑编码系统&#xff0c;主要用于显示现代英语和其他西欧语言。 发展历程&#xff1a;ASCII 码于 1963 年首次发布…

AMBA-CHI协议详解(二十五)

AMBA-CHI协议详解&#xff08;一&#xff09;- Introduction AMBA-CHI协议详解&#xff08;二&#xff09;- Channel fields / Read transactions AMBA-CHI协议详解&#xff08;三&#xff09;- Write transactions AMBA-CHI协议详解&#xff08;四&#xff09;- Other transac…

Web 小项目: 网页版图书管理系统

目录 最终效果展示 代码 Gitee 地址 1. 引言 2. 留言板 [热身小练习] 2.1 准备工作 - 配置相关 2.2 创建留言表 2.3 创建 Java 类 2.4 定义 Mapper 接口 2.5 controller 2.6 service 3. 图书管理系统 3.1 准备工作 - 配置相关 3.2 创建数据库表 3.2.1 创建用户表…

C语言每日一练——day_7

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第七天。&#xff08;连续更新中&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…

ArcGIS10. 8简介与安装,附下载地址

目录 ArcGIS10.8 1. 概述 2. 组成与功能 3. 10.8 特性 下载链接 安装步骤 1. 安装准备 2. 具体步骤 3.补丁 其他版本安装 ArcGIS10.8 1. 概述 ArcGIS 10.8 是由美国 Esri 公司精心研发的一款功能强大的地理信息系统&#xff08;GIS&#xff09;平台。其核心功能在于…

Mac:JMeter 下载+安装+环境配置(图文详细讲解)

&#x1f4cc; 下载JMeter 下载地址&#xff1a;https://jmeter.apache.org/download_jmeter.cgi &#x1f4cc; 无需安装 Apache官网下载 JMeter 压缩包&#xff0c;无需安装&#xff0c;下载解压后放到自己指定目录下即可。 按我自己的习惯&#xff0c;我会在用户 jane 目…

【PCB工艺】基础:电子元器件

电子原理图&#xff08;Schematic Diagram&#xff09;是电路设计的基础&#xff0c;理解电子元器件和集成电路&#xff08;IC&#xff09;的作用&#xff0c;是画好原理图的关键。 本专栏将系统讲解 电子元器件分类、常见 IC、电路设计技巧&#xff0c;帮助你快速掌握电子电路…

nvm 安装某个node.js版本后不能使用或者报错,或不能使用npm的问题

安装了nvm之后发现不能使用某个版本的node.js&#xff0c;报错之后&#xff0c;不能使用npm这个命令。可以这样解决&#xff1a; 1、再node.js官网直接下载node.js 的压缩包。 找到nvm的安装目录 2、直接将文件夹解压到这个安装目录中修改一下名字即可。

【MySQL数据库】多表查询(笛卡尔积现象,联合查询、内连接、左外连接、右外连接、子查询)-通过练习快速掌握法

在DQL的基础查询中&#xff0c;我们已经学过了多表查询的一种&#xff1a;联合查询&#xff08;union&#xff09;。本文我们将系统的讲解多表查询。 笛卡尔积现象 首先&#xff0c;我们想要查询emp表和stu表两个表&#xff0c;按照我们之前的知识栈&#xff0c;我们直接使用…

Java:Apache HttpClient中HttpRoute用法的介绍

当使用Apache HttpClient组件时&#xff0c;经常会用到它的连接池组件。典型的代码如下&#xff1a; PoolingHttpClientConnectionManager connectionManager new PoolingHttpClientConnectionManager();connectionManager.setMaxTotal(httpConfig.getMaxPoolTotal());connect…

RHCE(RHCSA复习:npm、dnf、源码安装实验)

七、软件管理 7.1 rpm 安装 7.1.1 挂载 [rootlocalhost ~]# ll /mnt total 0 drwxr-xr-x. 2 root root 6 Oct 27 21:32 hgfs[rootlocalhost ~]# mount /dev/sr0 /mnt #挂载 mount: /mnt: WARNING: source write-protected, mounted read-only. [rootlocalhost ~]# [rootlo…

【css酷炫效果】纯CSS实现故障文字特效

【css酷炫效果】纯CSS实现故障文字特效 缘创作背景html结构css样式完整代码基础版进阶版(3D效果) 效果图 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u011561335/90492053 缘 创作随缘&#xff0c;不定时更新。 创作背景 刚…