Mysterious behavior of .css and .js resource references

Question

Google Chrome

Hello!
I am making an extension for chrome.
I decided to make a link to my site in a pop-up window.
For example:

<a href="http://site.ru/any.php/" target="_blank">Сайт</a>

As a result, in the tab that opened, I watched the page as if without css and js.
In place of css and js files was HTML!!! I started to understand: I looked through the built-in inspector, where, according to chrome, links to resources lead.
It turned out that any link of the form:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

actually leads to:
http://site.ru/any.php/css/bootstrap.min.css
Replacing the reference with an absolute one solves the problem, but I don't want to do that.

Answer 1

And why, in fact, this behavior is mysterious to you? Here, in my opinion, everything is simple - the links are relative, which means they are taken relative to the current path (pay attention to the last slash in the link). To avoid this without specifying absolute references, you can use the base tag

Answer 2

replace with references relative to the root

<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">

Answer 3

There is a simple rule: all URLs must be absolute. Many more complement: absolute and complete.