Html图像标签、绝对路径和相对路径:

Html图像标签:

<img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:

(1)src 属性 定义图片的引用地址

(2)alt 属性 定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片,所以此属性非常重要。(图片的文字说明)

<img src=”images/pic.jpg” alt=”产品图片” />

绝对路径和相对路径:

像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表、javascript等等,引用地址分为绝对地址和相对地址。

绝对地址:相对于磁盘的位置去定位文件的地址

相对地址:相对于引用文件本身去定位被引用的文件地址

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页插入图片</title>
</head>
<body>
    <h1>图片</h1>

    <h2>相对路径</h2>
    <!-- 网页和images在同一目录 -->
    <!-- 完整的写法是:./images/我是仙女.jpg  ./ 表示当前目录,可以省略 -->
    <img src="./images/我是仙女.jpg" alt="做个优雅的女人" />
    <img src="images/loading.gif" alt="加载中" />

<!-- 网页所在的目录和images 在同一目录 -->
<!-- 图片并没有展示出来 -->
    <img src="../images/哥总是这么迷人.jpg" alt="哥总是这么迷人" />

<h2>绝对路径,不建议使用</h2>
<!-- 图片并没有展示出来 -->
    <img src="C:\Users\Ren\Desktop\img\5.jpg" alt="生无可恋" />

</body>
</html>

页面显示效果:

原文地址:https://www.cnblogs.com/reyinever/p/10549854.html

时间: 2024-08-06 04:17:46

Html图像标签、绝对路径和相对路径:的相关文章

PHP(一般标签介绍,标签特性,实体名称,绝对路径与相对路径)

h1:为标题  h1~h6 标题会逐渐变小 需更换标签里面的数字 如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>---标题 <h3>这是标题123</h3>---标题 <p>:段落 常用!<.P > 自动默认一行 基本常用: <strong>  <b>  都为加粗文体 <em>  <cite>  <i> 都为倾斜 &

1.5、html图像、绝对路径和相对路径

html图像 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持. <img src="images/pic.jpg" alt="产品图片" /> 绝对路径和相对路径 像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址. 绝对

web前端入门到实战:HTML中img标签的src属性绝对路径问题解决办法,完全解决!

HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,tomcat,html,img,src,java 注意:不需要寻找tomcat真实路径下的server.xml去修改,这个地方不需要修改. 解决办法:1.在eclipse中找到你的项目发布的tomcat服务器,然后找到左侧Servers下对应的你的Tomcat服务器中的server.xml文件,如下图所示:

图像标签

图像标签用于向网页中添加图片 形式:<img .../> 对图片属性修饰: src = ".."  用于存放图片的路径 alt = ".."  用于添加图片的说明文字 height = ".." 图片的高度 width = ".."  图片的宽度 border = "12" 图片的边框 代码举例: <html> <head> <title>无标题文档</

XHTML 相对路径与绝对路径

文件路径 文件路径就是文件在电脑(服务器)中的位置,表示文件路径的方式有两种:相对路径和绝对路径. 路径标识: 标识符号 说明 / 路径标识 . 当前目录 .. 上一层目录 "."和".."常与"/"结合使用表示各个路径层次: 路径 说明 ./ 当前路径,可省略 / 网站根目录,为绝对路径 ../ 上一层目录,可重复使用,如../../,表示上上层目录 相对路径(Relative Path) 相对路径就是指由这个文件所在的路径引起的跟其它文件(或

[小知识点]绝对路径与相对路径.

1, 绝对路径与相对路径:1.1 路径分为两种 第一种:绝对路径 (1)文件的完全路径, 比如:file:///C:/Users/asus/Desktop/1018/day01/code/图像标签.html 第二种:相对路径(*****) (1)一个文件相对于另外一个文件的位置 第一种情况:图片和html文件在一个文件夹下面 (1)在html中直接写图片的名称 第二种情况:图片在html的下层目录 (1)把html的完全路径和图片的完全路径写出来 html: C:\Users\asus\Desk

1.3 图像标签

文本使网页的内容得到充实,那图像使网页的内容更加丰富多彩.使用图像不仅能使网页更加美观.大方.整洁.形象和生动,而且能给网页增添无限生机,从而吸引更多的浏览者.因此图像在网页中的作用是举足轻重的.作为一个网页设计者,掌握好网页中图像的应用尤为重要.下面我们就开始介绍常用的图片格式,以及如何在网页中实现图文并茂的页面. 本节单词记忆:标签 1.img 属性 1.src 2.width 3.height 网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因

HTML的图像标签

网页的图像标签 常见的图像格式 JPG GIF PNG BMP 图像标签可以带属性,格式为: <img src="path" alt="text" title="text" width="x" height="y" /> 位置含义(其中,src和alt是必填,其他选填) path:文件位置(推荐使用相对位置) text:当找不到文件的时候,替代的文字 text:鼠标悬停在图片上的时候,显示什么文

7.HTML图像标签

HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签 img 以及和他相关的属性. 1.使用方法 1 <img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值"> 2.属性 src:指定我们要加载的图片的路径和图片的名称以及图片格式. width:指定图