html 图片插入

分清相对路径、绝对路径

1.相对路径

相对是相对于你当前所编辑的HTML页面的路径,比如../../desktop/测试页面/test.html。

这就是相对路径

../ 代表上级目录

目录会随着文档的位置改变而改变。

2.绝对路径

绝对是绝对与当前主机系统的文件的路径,比如C:/Users/Administrator/Desktop/测试页面/media/demo.mp4。

这就是绝对路径

有完整的路径

写死了的,不会自己改变。

结论:因为页面是要上传服务器的,在路径随之便发生改变,这时必须用相对路径。

            但不用上传时,在自己的主机上使用的话,相对、绝对路径都可以。

### HTML 插入图片的标签和属性 在 HTML 中,插入图片的核心标签是 `<img>` 标签。此标签为自闭合标签,无需结束标记。以下是其主要属性及其作用: - **`src` 属性**:指定图片的源路径或 URL 地址。这是必填项,决定了要加载的图片位置[^2]。 - **`alt` 属性**:当图片无法正常加载时,会显示这段替代文本。通常用来描述图片的内容,增强可访问性和用户体验[^2]。 - **`title` 属性**:当用户的鼠标悬停在图片上时,会出现一个工具提示框,其中包含由 `title` 定义的文字说明。 - **`width` 和 `height` 属性**:分别定义图片的宽度和高度。这些值可以用像素 (px) 或百分比 (%) 表示。注意,如果只设置了其中一个属性,另一个会按比例缩放[^2]。 - **`class` 和 `id` 属性**:用于关联 CSS 样式或其他脚本操作,方便对特定图片应用样式或行为[^1]。 #### 示例代码 以下是一段完整的 HTML 代码片段,展示如何使用 `<img>` 标签以及常见属性的应用方式: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML 插入图片示例</title> <style> .example-image { border: 1px solid black; border-radius: 5px; max-width: 100%; } </style> </head> <body> <h1>HTML 插入图片示例</h1> <!-- 图片标签 --> <img src="images/example.jpg" alt="示例图片" class="example-image" title="这是一个示例图片"> </body> </html> ``` 在此示例中: - `src` 设置了图片的位置为相对路径 `"images/example.jpg"`[^1]。 - `alt` 提供了一段备用文字 “示例图片”,以防图片未能成功加载。 - `class` 应用了名为 `.example-image` 的 CSS 类,从而实现了样式的统一管理[^1]。 --- ### 关于路径的选择 图片路径可以分为两种形式: - **绝对路径**:指明从根目录开始的具体文件地址,例如 `http://www.example.com/images/photo.png`[^3]。 - **相对路径**:相对于当前 HTML 文件所在位置的路径,如 `../assets/image.png` 或 `./image.png`[^3]。 --- ### 额外技巧 —— 懒加载 为了优化性能,现代 Web 开发常采用图片懒加载技术。通过新增 `loading="lazy"` 属性,可以让浏览器延迟加载不在视口范围内的图片,直到用户滚动到它们附近为止。 更新后的示例如下所示: ```html <img src="images/large-photo.jpg" alt="大图示例" loading="lazy"> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值