Question

页面的网址无法正常工作。我制作了常用标题的html（header.html）。我在里面写了

{% load static%}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'header.css' %}">
<header class="clearfix">
        <h1 class="title">WEB SITE</h1>
　　　　　<ul class="top-menu">
            <li class="top-menu-item"><a class="icon_head" href="send">SEND</a></li>
            <li class="top-menu-item"><a class="icon_head" href="see">SEE</a></li>
            <li class="top-menu-item"><a class="icon_head" href="know">KNOW</a></li>
     　 </ul>
        <a class="logout_button" href="logout_view">LOGOUT</a>
</header>

在index.html中，header.html读起来像

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/accounts/detail.css">
    <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    <title>WEB SITE</title>
</head>

<body class="relative">

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/accounts/header.css">
{% load static%}
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'header.css' %}">
    <header class="clearfix">
            <h1 class="title">WEB SITE</h1>
    　　　　　<ul class="top-menu">
                <li class="top-menu-item"><a class="icon_head" href="send">SEND</a></li>
                <li class="top-menu-item"><a class="icon_head" href="see">SEE</a></li>
                <li class="top-menu-item"><a class="icon_head" href="know">KNOW</a></li>
         　 </ul>
            <a class="logout_button" href="logout_view">LOGOUT</a>
    </header>

    <main>
        <div class="container">
            <p>Hello World</p>
        </div>
    </main>

    <footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">XOXO</a></li>
        </ul>
      </div>
    </footer>
</body>

</html>

当我输入标题的SEND＆amp; SEE＆amp; KNOW链接时，它们正常工作。另一方面，我在detail.html中写过

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script>
<title>WEB SITE</title>
<body class="relative">
<header class="clearfix">
    <h1 class="title">WEB SITE</h1>
    <ul class="top-menu">
        <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i>
        </li>
        <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i>
        </li>
        <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head"
                                                                                href="know">KNOW</a></i></li>
    </ul>
    <a class="logout_button" href="logout_view">LOGOUT</a>
</header>

<main>
    <div class="container">
        <div class="detailimg col-xs-8">
            <div class="relative_ele">
                <div class="image">
                    <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=results.jpg"
                         width="500px" height="300px" alt="SEE">
                </div>
                <div class="vertical-center-container ">
                    <p class="hthree">I LOVE YOU</p>
                    <p class="hthree_small">I MISS YOU</p>
                </div>
            </div>
            <div class="table-padding">
                <table border="0 " class="table table-bordered ">
                    <thead>
                    <tr>
                        <th class="index " colspan="4 " bgcolor=pink>ITEMS</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td bgcolor="#FFEEFF " rowspan="2" align="center ">XOXO1</td>
                        <td align="center ">
                            <a class="index" href="results1">XOXO2</a>
                        </td>

                        <td bgcolor="#FFEEFF " rowspan="4" align="center ">XOXO3</td>
                        <td align="center ">
                            <a class="index" href="results2">XOXO4</a>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
    </div>
</main>
<footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">XOXO</a></li>
        </ul>
      </div>
</footer>

</body>

</html>

但是当我输入标题的SEND＆amp; SEE＆amp; KNOW链接时，它们无效并且发生错误。例如，在index.html中发送链接，它发送http://localhost:8000/accounts/send即可。但是，detail.html中的SEND链接会发送http://localhost:8000/accounts/detail/send。 http://localhost:8000/accounts/detai我将使用detail.html的网址。我真的不明白为什么会发生这种情况。我不能将header.html用于index.html＆amp; detail.html？我该如何解决这个问题？

Answer 1

在<a href="send">Send</a> href属性＆＃34;发送＆＃34;是 relative url：浏览器通过将其附加到当前页面网址来解析它。

这通常不是您想要的行为。解决方案是提供从站点根目录的绝对路径。所以，如果＆＃34;发送＆＃34;的位置页面为http://localhost:8000/accounts/send，然后将网址构建为前导/，如下所示：

<a href="/send">Send</a>

，浏览器将始终正确解析网址。

另见this question的答案。

页面的网址无法正常工作

1 个答案: