错误的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<base href="//www.w3cschool.cn/" target="_blank">
</head>
<body style="background-color:yellow;">
<a href="//www.w3cschool.cn/">Visit W3CSchool!</a>
<a id="tips">Useful Tips Section</a>
<a href="#">Visit the Useful Tips Section</a>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
<div><img src="./images/ball.png" alt="ball"/></div>
</body>
</html>
实验结果:
what ****k?
查了很久一直没找到头绪,后来发现是base的问题。。。。
<base href="//www.w3cschool.cn/" target="_blank">
弄懂这个问题首先要理解这行代码的意思:
<a href="#">Visit the Useful Tips Section</a>
这个代码会在下面的路径前面加上base的路径,所以
<div><img src="./images/ball.png" alt="ball"/></div>
当我想输出这个ball的时候,不会再我的本地查,会直接在w3c网站找,那么路径当然是有问题的啦~~~
正确的姿势是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background-color:yellow;">
<a href="//www.w3cschool.cn/">Visit W3CSchool!</a>
<a id="tips">Useful Tips Section</a>
<a href="#">Visit the Useful Tips Section</a>
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
<div><img src="./images/ball.png" alt="ball"/></div>
</body>
</html>
删去这个base的默认头