`
flysnowxf
  • 浏览: 573491 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html相对路径变绝对路径（一个标签解决）

    博客分类：
  • Web
htmlbase相对路径绝对路径 
阅读更多
我们抓取一些网站的页面后，会发现有的页面中的url是相对路径，我们直接打开这个html，格式就是乱的。需要把相对路径的url修改为绝对路径，难道需要手动在这些url前面加上一个域名前缀吗？

最简单的解决方法：
在head中使用base标签。
引用
浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。


例子： 
<head>
<base href="http://www.w3school.com.cn/i/" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>

其中eg_smile.gif为相对路径，但因为存在base href，浏览器会自动解析为http://www.w3school.com.cn/i/eg_smile.gif。

参考：
http://www.w3school.com.cn/tags/tag_base.asp
分享到：
| 常见的设备User-Agent
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    相对路径和img标签demo

    介绍html相对路径和img标签的html的压缩包

    解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中，在部署过程中，用到了反向代理，这就要求前端代码中不能使用绝对路径。但是我们知道，一般情况下，通过webpack+vuecli默认打包后的HTML、css、js等文件，使用的都是绝对路径。下面可以举几个例子...

    【前端学习笔记day09】2.5. html图像标签、绝对路径和相对路径

    html图像标签、绝对路径和相对路径html图像标签、绝对路径和相对路径html图像标签绝对路径和相对路径 2.5. html图像标签、绝对路径和相对路径 绝对路径和相对路径 像网页上插入图片这种外部文件，需要定义文件的...

    HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    HTML相对路径指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。例如：文件1.htm的绝对路径是：d:/www/html/1.htm文件2.htm的绝对路径是：d:/www/html/2.htm那么：1.htm相对于2.htm的路径就是：1.htm ...

    Url相对路径的问题总结

    最让人担心的是，有时候必须使用绝对路径(如asp.net中的master内容)，因为处于开发过程，没有目标地址，也就无法配置绝对路径。有时确必须使用相对路径。 但是相对路径写好了，却存在各种各样的问题。 今天，我介绍...

    Html读取本地文件夹下图片并显示的示例代码

    Html中Img指定源时需要的是绝对路径。 解决方法： 调用Web API接口FileReader中readAsDataURL方法读取数据（这个函数参数file标签获取到的文件路径），然后把数据加载到FileReader中（base64格式），之后就可以用...

    HTML+css知识总结(建议收藏）

    链接标签：a标签后必跟herf=“x”，其中x可以引用外部的链接或者内部链接，内部链接可以分为绝对路径与相对路径。上级路径表达../,下级路劲表达/，这个上下级是相对的。 a标签也可用于描点定位，在h1-6的标题标签里

    HTML5常用标签

    1.标题标签 h1-h6 双标记，块级元素 align 内容水平对齐方式 默认值 left 居左 right 居右 center 居中 2.块级元素和行内元素 ...相对路径 同一等级 直接书写 下一级 / 上一级 …/ 上两级 …/…/ 绝对路径 al

    【JavaScript源代码】vue动态加载本地图片的处理方法.docx

    　通常，我们的一个img标签在html中是这么写的：　 src="../images/demo.png"&gt;　这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话，这类资源将会直接被拷贝，而不会经过 webpack 的处理。　...

    后台首选布局技术,Frameset绝对经典 精简 清晰布局

    你可使用绝对路径或相对路径，有关此两者详见於【连结进阶】。 marginwidth=5 表示框架宽度部份边缘所保留的空间。 marginheight=5 表示框架高度部份边缘所保留的空间。 scrolling="Auto" 设定是否要显示卷轴，YES ...

    HTML的基础内容文档

    常用标签、特殊符号、div标签、列表、图片、绝对路径和相对路径、超链接a标签、表格和表单

    05html基础1.3.mp4

    本节视频课主要讲解：Html5基础——图片标签img、相对路径和绝对路径、图片的类型及选择等 ，这几个知识点。

    网页精华代码集.doc

    　window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。 　用单引号和双引号都可以，只是不要混用。 　这一...

    java实现js、css、图片合并到html文件

    技术点：1、使用htmlparser解析html文件，得到html代码里的js、css、img链接 2、将相对路径的链接转变成绝对路径，并读取资源 3、将css和js合并到html 4、将图片转换成base64编码，写入标签的src

    爱淘课1初识HTML代码.swf

    第五课(相对路径和绝对路径) 第六课 标题字 第七课 文本样式基本标记 第八课 文本格式化标记 第九课 常用的段落标记 第十课 插入特殊符号 第十一课：图像格式与图像标签 第十二课：图像标签的常用属性 第十...

    HtmlUtils.java

    通过该工具类实现对HTML文件标签中的相对路径转化为绝对路径，里面有测试类

    HTML5-Ajax-Freemarker:通过HTML表示静态页面，Ajax和Freemarker做数据交互的一个动态小demo

    HTML5-Ajax-Freemarker 通过HTML表示静态页面，Ajax和Freemarker做数据...可将freemarker直接拖到桌面（里面有响应的css文件和js文件），当然我这里的生成html文件路径是绝对路径，可以改为相对路径。其数据交互模式

    Web前端大作业-港珠澳大桥.zip

    并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片，以及除了主页面index.html之外的二级页面，其存放在html文件夹下，在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径，创建好的...

    html入门到放弃笔记

    1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div 这是一个div"&gt; 四大标准属性： 1、id ：定义元素在页面中独一无二的...

Magicbox
Global site tag (gtag.js) - Google Analytics