HTML（四）——HTML标签（四）——HTML基本标签之图像标签和路径（重点）

最新推荐文章于 2022-09-07 09:24:49 发布
最新推荐文章于 2022-09-07 09:24:49 发布
阅读量244 收藏 1
点赞数
分类专栏： 前端学习笔记 文章标签： html 前端 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45278598/article/details/122463861
版权

目录

图像标签的其他属性

图像标签属性注意点：

代码实现

运行结果

 2 路径

前期铺垫知识

目录文件夹和根目录

VSCode打开目录文件夹

 重点

1. 相对路径

2.绝对路径

代码实现

运行结果

在HTML标签中，<img>标签用于定义HTML页面中的图像。


<img src ="图像url" />

img:image的缩写，意为图像。

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细

图像标签属性注意点：

  • 图像标签可以拥有多个属性，必须写在标签名后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 属性采取键值对的格式，即key="value"的格式，属性=“属性值。”

代码实现

<!--
 * @Description: This is about how to put pictures on the web page.
 * @Version: 1.0
 * @Author: Pomelocc0302
 * @Date: 2022-01-12 12:49:39
 * @LastEditors: Pomelocc0302
 * @LastEditTime: 2022-01-12 13:12:03
-->
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <me
最低0.47元/天 解锁文章
柚子喵cc
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html常用标签之图像标签和路径
卉卉灰灰的博客
07-05 1417
在HTML标签中，<img>标签用于定义HTML页面中的图像。 例如： <img src="图像URL"/> src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。所谓属性就是属于这个图像标签的特性。 图像要和其所运行的html放在同一目录下。 图像标签的其他属性： 属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本。图像不能显示时的文字 title 文本 提示文本。鼠标放到图像上显示的文字 width 像素
HTML 图像标签及其路径
CodeDoraemon的博客
01-22 218
1. 图像标签 在 HTML 标签中， 标签与应用与定义 HTML 中的图像 单标签 2. 图像标签的其他属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>图像标签的使用</h1> <img src = "1.png">
简述HTML标签之图像标签和路径
happiness_0的博客
11-15 256
图像标签 单标签 <img src="图像URL"/> 其中src属性为必须属性,用来指定图像文件的路径和文件名。在写图像的路径时，通常以HTML文件为参考，因此，必须把图片和HTML文件放在一起。 其他属性   alt属性 <img src="img1.jpg" alt="替换文本" /> alt属性用于当图像无法显示时，替换成文本。  title属性 <img src="img1.jpg" title="提示文本" /> title属性用于当鼠标放到
HTML复习（图像、路径、列表）
wx_tracy的博客
01-15 302
一、图像标签与路径 1、图像 ①图像标签：在 HTML 中，图像由<img> 标签定义（为单标签） 语法规范 ：<img src="图像URL" alt="some_text"/>(URL 指存储图像的位置) src是<img>标签的必须属性，它用于指定图像文件的路径和文件名 图像标签的其他属性： src:src 指 "source"。源属性的值是图像的 URL 地址 alt:用来为图像定义一串预备的可替换的文本（图像显示不出来的时候用文字替换） &l
html5 图片路径问题
Dongzhenyu0519的博客
04-27 2473
1、如果html文件和图片在同一文件目录下 <img src="holly.jpg" width="140" height="140"/> 2、如果图片在images文件夹里 而html文件与images在同一文件目录下 <img src="images/holly.jpg" width="140" height="140"/> 3、如果 图片在images文件夹 html文件在count文件夹下 而images和count在同一目录下 &lt...
从入门到精通HTML5——PDF——网盘链接
02-27
　2.7 实例演练——创建基本的HTML网页 38 　2.8 小结 39 　2.9 习题 40 　第3章 设计网页文本内容 41 　教学录像：29分钟 　3.1 标题文字的建立 42 　3.1.1 标题文字标记<h> 42 　3.1.2 标题文字的对齐方式...
HTML表格标记教程(8):背景图像属性BACKGROUND
12-11
– —————————— –>02 <!– 文件范例：10-8.htm –>03 <!– 文件说明：设定表格的背景图像 –>04 <!– —————————— –>05 <HTML>06 <HEAD>07 <TITLE>设定表格的背景...
前端HTML5 css基础
03-09
HTML Span 和 Div 标签 -------------------- * `<span>`：无语义标签，用于装内容，布局小盒子。 * `<div>`：无语义标签，用于装内容，布局大盒子。 * 特点：`<div>` 用于布局，一行只能放一个 `<div>`，大盒子；`...
HTML表格标记教程(27):单元格的背景图像属性BACKGROUND
01-21
– —————————— –>02 <!– 文件范例：10-25.htm –>03 <!– 文件说明：设定单元格的背景图像 –>04 <!– —————————— –>05 <HTML>06 <HEAD>07 <TITLE>设定单元格的...
HTML表格标记教程(37):表头的背景图象属性BACKGROUND
01-21
– —————————— –>02 <!– 文件范例：10-35.htm –>03 <!– 文件说明：设定表头的背景图像 –>04 <!– —————————— –>05 <HTML>06 <HEAD>07 <TITLE>设定表头的背景...
HTML中写图片路径的几种方法
dlrb_beautiful的博客
09-18 6837
一、如果html文件和图片在同一文件目录下： <img src="reba01.jpg" width="888" height="666"/> 二，如果图片在images文件夹里，而html文件与images在同一文件目录下： <img src="images/reba01.jpg" width="888" height="666"/> 三、如果图片在images文件夹...
HTML的图像标签、目录文件夹、路径（相对路径、路径之绝对路径）
m0_51796659的博客
09-07 2129
HTML的图像标签(src、alt 、title、width、height、border 的介绍与使用)目录文件夹（根目录的介绍)、路径（相对路径( 图像文件位于HTML文件同一级、下一级、上一级路径如何操作) 、路径之绝对路径）
HTML中图片的路径
li12632的博客
06-26 5357
1、相对路径分同一级路径和上一级路径、下一级路径。 2、绝对路径就是指图片在电脑上的绝对位置，通过这个位置可以直接查到图片C:\Users\20946\Pictures\Saved Pictures或者完整的网络地址图片的搜索结果_百度图片搜索 (baidu.com)https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=0&spn=0&di=710813568191797
HTML学习笔记4——路径
少儿编程乔老师
09-14 404
路径(重点、难点) 实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。 **目录文件夹 ** 就是普通文件夹，里面只不过存放了我们做页面所需要的 相关素材，比如 html文件，图片等等。 **根目录 ** 打开目录文件夹的第一层就是根目录 页面中的图片会非常多， 通常我们再新建一个文件夹专门用于存放图像文件（images），这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。 路径可以分为： 相对路径和绝对路径。 相对路径 以引用文件之网页所在
HTML入门5
weixin_46574699的博客
03-21 824
1.插入图像 图像标签 在 HTML 中，图像由<img>标签定义。语法为： <img src="url" alt="" /> <img>是空标签，它只包含属性，没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。alt规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title设置鼠标悬停时显示的内容（一般不用设置）。此外还可以通过设置width...
html中图片路径的几种使用方式
热门推荐
1900的博客
12-21 2万+
1、如果html文件和图片在同一文件目录下   &lt;img src="holly.jpg" width="140" height="140"/&gt; 2、如果图片在images文件夹里  而html文件与images在同一文件目录下   &lt;img src="images/holly.jpg" width="140" height="140
html设置图像路径,Html图像标签、绝对路径和相对路径：
weixin_36143290的博客
06-16 1874
Html图像标签：标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：(1)src 属性 定义图片的引用地址(2)alt 属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。(图片的文字说明)绝对路径和相对路径：像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表、java...
HTML图像标签<img>和图像相对路径、绝对路径
七七的博客
03-03 7209
图像标签和路径 图像标签 在HTML标签中， 标签用于定义HTML页面中的图像。 <img src="图像URL"> 单词image的缩写,意为图像。 src是标签的必须属性,它用于指定图像文件的路径和文件名。 图像标签的其他属性: src 图片路径 必须属性 alt 文本 替换文本。图像不能显示时显示的文字。 title 文本 提示文本。鼠标放到图像上，提示的文字 wi...
html文件中img的路径
guxuehua的博客
04-19 2912
1.当图片和html文件在同一个文件夹下时<img src="a.jpg" alt=""> 或者 <img src="./a.jpg" alt=""> 2.当图片所在的文件夹和html文件在同一个文件夹下时<img src="images/a.jpg" alt=""> 或者 <img src="./images/a.jpg" alt=""> 3.当图片和html都被各自的父文件夹包
html的img标签
最新发布
09-01
- *1* *2* *3* [HTML基础——图像标签（img标签）](https://blog.csdn.net/Ginny97/article/details/112408858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柚子喵cc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值