知识库

Appearance

相对路径和绝对路径 ​

html
<!-- 
  相对路径，假设当前页面为 http://127.0.0.1:8080/foo/bar/index.html，
  那么将去 http://127.0.0.1:8080/foo/bar/ 下找 foo.css。
 -->
<link href="foo.css" rel="stylesheet">
<link href="./foo.css" rel="stylesheet">

<!-- 
  绝对路径，假设当前页面为 http://127.0.0.1:8080/foo/bar/index.html，
  那么将去 http://127.0.0.1:8080 下找 foo.css，注意当找不到时不会去 public 下找。
-->
<link href="/foo.css" rel="stylesheet">

base ​

html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- 设置相对路径的根 -->
  <base href="http://127.0.0.1:5500/public/" />
  <!-- 
    假设当前页面为 http://127.0.0.1:8080/foo/bar/index.html，
    那么将去 public 下找 foo.css。
  -->
  <link href="./foo.css" rel="stylesheet">
</head>