前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html图像标签、绝对路径和相对路径

html图像标签、绝对路径和相对路径

作者头像
Devops海洋的渔夫
发布2019-05-31 16:36:43
3.9K0
发布2019-05-31 16:36:43
举报
文章被收录于专栏:Devops专栏

仅供学习,转载请注明出处

html图像标签

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

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

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

示例代码如下:

代码语言:javascript
复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <img src="e7525a4a93.jpg" alt="美女图片">
</body>
</html>

浏览器展示如下:

绝对路径和相对路径

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

  • 绝对地址:相对于磁盘的位置去定位文件的地址
  • 相对地址:相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:

  • “ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
  • “ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

当前文件路劲 ./ 示例

代码如下:

浏览器展示如下:

另一个目录下 ./images/ 示例

代码如下:

浏览器展示如下:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.01.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html图像标签
  • 绝对路径和相对路径
相关产品与服务
图像标签
图像标签采用腾讯云前沿图片分类和物体检测算法,可识别图片中出现的各种物体或场景等,返回具体名称和所属类别,覆盖日常物品、场景、动物、植物、食物、饮品、交通工具等多个大类,数百个细分类目,数千个具体标签。广泛应用于拍照识物、场景分析、内容推荐与审核、智能相册分类等场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档