html标签路径,HTML图片标签路径解析

img标签中src属性表示的是引用的图片路径，有两种路径类型： 1. 绝对路径    2. 相对路径。

绝对路径：使用图片在硬盘上的绝对位置来访问图片，通常是从根目录开始，向下一个目录一个目录的寻找。mac查看图片绝对路径方法：

打开终端:

然后会出来一个白色的框：

然后把图片拖入这个白色的框里：

这个框里显示的路径就是绝对路径。

下面先测试一下使用绝对路径的img标签：

下面是图片和html文件的结构：

通过上面的看绝对路径的方法查看了这个current.jpg的绝对路径是： /Users/caiyao/Desktop/图片引用测试/html_folder/current.jpg

html文件代码如下：

页面显示为：

可以正常显示。

还有一种路径写法是相对路径，就是图片相对于当前html文件的路径，有两个特殊的符号  【..】两个点表示相对于当前html文件的上级文件夹。 【.】一个点表示的就是当前文件，比如有如下这样的文件结构：

层次为：桌面   -> 桌面引用测试  -> html_folder  -> inner  -> inner_inner

在这个层次里由几个图片文件，分别为:outer.jpg   current.jpg  inner.jpg inner_inner.jpg  这四个图片文件。如何根据上面说的相对路径的规则写这几个图片相对于test.html文件的相对路径？

outer.jpg:  ../outer.jpg    这是outer.jpg的相对于test.html的相对路径。 上面说了..表示相对于html文件的上级，../out.jpg标识的就是相对于这个html文件的上级文件夹里有个outer.jpg这样一个图片文件。

下面测试一下在页面里显示outer.jpg这个图片的代码:

页面显示效果：

页面显示正常。

current.jpg： ./current.jpg  一个点表示的是当前文件夹，那./current.jpg表示的就是相对于当前文件夹下的一个名字为current.jpg的图片文件。

测试代码：

页面显示效果：

inner.jpg : ./inner/inner.jpg。 一个点表示的是当前文件夹，./inner/inner.jpg表示的是当前文件夹下的inner文件夹里的名字为inner.jpg的图片。

测试代码：

页面效果：

inner_inner.jpg： ./inner/inner_inner/inner_inner.jpg。 找inner_inner.jpg的过程为： 当前文件夹下有个inner文件夹，然后inner文件夹下还有个inner_inner文件夹，图片就是inner_inner文件夹下的名字为inner_inner.jpg的图片文件。

测试代码为：

页面显示：

cocos2d-x之 利用富文本控件解析xhml标签(文字标签，图片标签，换行标签，标签属性)

执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...

微信小程序使用wxParse，解决图片显示路径问题

我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...

HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.

HTML学习笔记——图片显示、图片跳转、图片相对路径

1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 /p>

webpack处理Img标签路径的几种情况

在使用webpack过程中遇到这个问题,各种搜索遇到此问题的还真不少,但都没有一个完整的说明. 后来研究下,图片除了路径替换还是就是图片做优化主是小于一定大小的通过转 base64 inline方式减 ...

xamarin.android之 Android 4.4+ 获取图片真实路径

Android 4.4以下 选择图片是可以获取到图片路径的.高于Android 4.4获取图片路径只是获取到一个图片编号. 所以需要针对Android版本进行路径解析: #region 高于 v4.4 ...

JSP Servlet 路径解析 路径设置

转自:http://ethen.iteye.com/blog/800415 在用JSP和Servlet编写Web应用时,经常遇到的问题就是找不到.do路径,或者.do路径不能解析,其实归根到底就是Se ...

随机推荐

再论App的安全性

现代人早已脱离不了智能手机,几乎人手一机,常见人边走边滑,着实危险.大家用手机App购物,用网银App付费,用股票App下单炒股,太方便了所以成了家常便饭. 没错,就是因为太方便,所以大多只会留意好不 ...

BITED数学建模七日谈之五：怎样问数学模型问题

下面进入数学建模经验谈第五天:怎样问数学模型问题 写这一篇的目的主要在于帮助大家能更快地发现问题和解决问题,让自己的模型思路有一个比较好的形成过程. 在我们学习数学模型.准备比赛的时候,经常会遇到各种 ...

java数组复制的方式和效率比较

java中,数组的复制有以下三种方式: 1. 调用System.arraycopy(Arrays.copyOfRange可以当作第四种,但是底层调用的是System.arraycopy,所以,认为是同 ...

【web必知必会】—— 图解HTTP(转)good

本篇总结关于http的相关知识,主要内容参考如下导图: 主要讲解的内容有: 1 URL与URI的区别. 2 请求报文与相应报文的内容. 3 GET与POST的区别. 4 http的cookie.持久化 ...

如何删除Kafka的Topic

在server.properties文件中添加配置:delete.topic.enable=true 创建kafka主题: kafka-topics.sh --create --zookeeper 1 ...

Thinkphp----------Thinkphp3.2的目录结构介绍

ThinkPHP框架目录结构\index.php      入口文件\Application    应用目录\Public            资源文件目录\ThinkPHP      框架核心目录 ...

sqlserver数据库中sql的使用

目录: 1. 分组排序更新 2. 将查询结果插入到新的表中 3. 创建/更新存储过程 4. 创建/更新视图 5. 插入数据 6. 增加表格的列 7. 创建表格 8. 创建索引 9. 递归查询 1. 分 ...

jqgrid获取选中行指定列的值

部分js如下: var id = $("#grid-table").jqGrid('getGridParam','selrow');//根据点击行获得点击行的id(id为jsonR ...

【laravel5.4 + TP5.0】hasOne和belongsTo的区别

1.从字面理解:假如A比B大,那么A hasOne B: B belongsTo A: 2.个人总结: 3.从代码角度: 主要是看你是在哪一个model(模型)中编写这个关联关系,父关联对象就是在父关 ...

partial function

[partial function] functools.partial(func[,*args][, **keywords]) Return a new partial object which w ...