`
flysnowxf
  • 浏览: 578849 次
  • 性别: 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

    在压缩包中的“demo”文件可能包含了一个或多个HTML文件和相关的图像文件，这些文件展示了如何在实际环境中使用相对路径和img标签。通过查看这些示例，你可以更好地理解它们如何协同工作，以及在不同场景下如何选择...

    html相对路径问题及图片标签

    本文将深入探讨“html相对路径问题”以及如何在HTML中正确使用图片标签。 **1. HTML相对路径** 相对路径是相对于当前HTML文件的位置来指定链接的路径。它分为几种类型： - **当前目录路径**：如果资源位于当前...

    java Web 中相对路径绝对路径问题总结

    在Java Web开发中，理解和掌握相对路径与绝对路径的运用是至关重要的，因为这直接影响到资源定位、页面跳转以及文件读写等操作的正确性。以下是对Java Web中相对路径与绝对路径问题的深入总结： ### 一、路径概念与...

    JSP相对路径的练习

    - **基础理解**：相对路径是相对于当前文件的路径，用于在同一个网站或项目内部导航。它可以帮助减少代码的冗余，因为不必每次都写完整的服务器路径。 - **上下文路径**：在JSP中，上下文路径是应用程序在服务器上...

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

    首先，绝对路径会导致的问题在于，如果项目部署在一个非根目录的位置，例如`/subdirectory/`，那么所有指向资源的绝对路径（如`/css/main.css`）将无法正确找到。为了解决这个问题，我们需要调整Webpack的配置。 ...

    【前端学习笔记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 ...

    JSP 页面中用绝对路径显示图片

    例如，可以将静态资源如图片、CSS、JavaScript文件等放在一个统一的公共目录下，然后使用绝对路径引用。同时，为了提高性能和减少HTTP请求，可以使用像Apache Tomcat这样的服务器配置来指定静态资源的路径，比如通过...

    jsp html 路径解决

    在JSP开发中，理解并熟练掌握绝对路径与相对路径的概念和用法，以及如何利用JSTL等标签库和EL表达式来简化路径管理是非常重要的。此外，熟悉JSP内置对象的使用也是提高开发效率的关键之一。通过本文的学习，希望能够...

    HTML中img相对路径的学习测试文件夹demo

    - 使用绝对路径（根相对路径）对于全局资源如logo或通用图片是推荐的，因为它们在网站的任何页面都应能正确显示。 - 相对路径适用于特定页面或局部资源，这样可以减少因文件移动而导致的链接失效。 6. **问题与...

    kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法

    在KindEditor的部分版本中（如4.1.10），存在一个已知的问题：当用户在编辑器中输入段首空格时，这些空格在提交后无法被正确保存到数据库中。这导致用户在后续编辑时，原有的空格会消失不见，从而影响文档的格式和...

    某马机构----相对路径.rar

    - **HTML链接**：在`&lt;a&gt;`标签中，相对路径用于链接到其他HTML页面。 - **图像引用**：在`&lt;img&gt;`标签中，相对路径用于指向图片资源。 - **样式表和脚本**：在`&lt;link&gt;`和`&lt;script&gt;`标签中，相对路径用于引用CSS和...

    css批量图片路径替换

    对CSS、HTML、JS中的图片路径进行批量替换是一个常见的前端维护任务，通过正则表达式和批处理脚本可以高效地完成。合理规划项目结构和使用自动化工具能进一步提高工作效率。在实际操作时，务必谨慎，确保替换后所有...

    Javascript中使用A标签获取当前目录的绝对路径方法

    我们可以创建一个A标签元素，并给其href属性赋予相对路径，然后通过该属性获取绝对路径。 在JavaScript中使用A标签获取当前目录绝对路径的示例代码如下： ```javascript var a = document.createElement('a'); a....

    Web开发中的路径问题

    在实际开发中，要根据具体需求灵活选择绝对路径和相对路径的使用，同时充分利用`&lt;base&gt;`标签来确保页面链接的正确性。通过合理规划和规范化的路径处理，可以提高代码的可维护性和应用的稳定性。

    Url相对路径的问题总结

    本篇文章主要探讨Url的相对路径问题及其解决方案，尤其是针对HTML5的Base标签和非HTML5环境下的C#代码处理。 相对路径是相对于当前文档位置的链接，而绝对路径则是完全指定的URL，包括协议、域名、路径等完整信息。...

    struts2中绝对路径上传图片和显示图片

    Struts2是一个非常流行的Java Web框架，用于构建和维护可扩展、高效且易于管理的企业级应用程序...不过，为了更好的用户体验和安全性，建议使用相对路径或基于云存储服务的解决方案，以减少直接暴露服务器路径的风险。

    问一个关于echarts本地路径的问题

    使用相对路径而不是绝对路径可以增加代码的移植性。如果使用了构建工具，它们通常有处理静态资源路径的配置，比如Webpack的`publicPath`选项。 6. **示例代码分析**：在提供的`demo1`文件中，可能包含了这个问题的...

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

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

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