前端小白历险记（一）链接的斜杠怎么没有了？

至理名言——不会挖坑就是不会学习——是作者本人说的。这不，这几天要做 WEB前端全栈成长计划 的考核题，检验自己是真本事还是假把式的时候到了。

我们的“理想”（也就是考题）是想得到这样一个图：

点击后可以进入不同的页面。

张小白颤颤巍巍地写下以下几行代码：

        /* 导航的链接栏 */
        .nav-left-box {
            color: #293040;
            height: 60px;
            float:left;
            position: relative;
        }
        
        <span class="nav-left-box">
        
            <span id="navagate0" class="nav-text"><a href="https://classroom.devcloud.huaweicloud.com/home">首页</a></span>
            <span id="navagate1" class="nav-text"><a href="https://classroom.devcloud.huaweicloud.com/home/course/teachingmarket">教学市场</a></span>
            <span id="navagate2" class="nav-text"><a href="https://classroom.devcloud.huaweicloud.com/home/course/cloudclassroom">云课堂</a></span>
            <span id="navagate3" class="nav-text"><a href="https://classroom.devcloud.huaweicloud.com/home/course/microauthentication">培训认证</a></span>
            <span id="navagate4" class="nav-text"><a href="https://classroom.devcloud.huaweicloud.com/home/course/cloudlab">云端实验室</a></span>
            <span id="navagate5" class="nav-text"><a href="https://classroom.devcloud.huaweicloud.com/home/experimentalclass">新工科试验班</a></span>
            <span id="navagate6" class="nav-text"><a href="https://bbs.huaweicloud.com/forum/forumdisplay-fid-708-orderby-lastpost.html">学习交流</a></span>
        </span>

预览一下：

怎么链接不起作用？咋回事？审查元素吧：

这是什么鬼？还有这样的解析方式？我中毒了吗？浏览器被劫持了？斜杠青年的斜杠被夺走了？我岂不是变成了一个无杠青年？

居然每个链接都如此：

问了几个人，说可能混进了什么不可见字符。VSCode这里是UTF-8编码

重新删除http这段，另行手打一行，保存后，居然就能正常显示：

看样子好像没啥变化，但是实质上预览页面已经正常有链接了。

我们如法炮制，手写一行<a href="">XXX</a>，将未显示链接的那段链接剪贴后，在浏览器上打开，再去浏览器ctrl-c, ctrl-v,将链接拷回到新写的哪一行的引号内。

你会发现，这些链接又都能出来了——

这就是斜杠青年斜杠失而复得的过程。是为记。

---------------下面是更新的内容-----------------

在有心人 @胡琦 胡哥的帮助下，继续定位了问题所在。为此对他表示感谢。具体内容如下：

首先，在vscode的插件市场中找到 hexdump，这是个能将 字符显示为 16进制的插件。

这里面有两个版本，我当时选择了1.7.2版本安装。

这样，在打开HTML文件之后，右上角有个  这样的图片，如果用鼠标悬停，可以看到这样的提示：

那么你就可以点它：

左边蓝色和白色显示16进制内容，右边绿色显示原文。

我们把鼠标往下拖，拖到第一个出问题的<a href的位置：

然后，我可以用鼠标将其框起来。 我们可以根据ASCII码表查到，3C是 小于号< , 3E是大于号 > 那么，上图被框中的地方就是 链接的部分。

可以比较目前链接错误的，以及链接正确的十六进制内容：

正确的：<a href这段  十六进制为 61(a) 20(空格） 68（h）

错误的：<a href这段  十六进制为 61(a) C2 A0(显示为空格，其实是两个字符） 68（h）

空格的ASCII码是20。但是不知道是何缘故，错误的那个链接，显示的是 C2 A0两个字符。所以如果我把这个错误的链接复制多份，做成多个链接，自然每个都无法显示链接。导致 @胡琦 指出的 导致a标签没有正常闭合 导致的解析错误。

那为啥前面提到的做法：

我们如法炮制，手写一行<a href="">XXX</a>，将未显示链接的那段链接剪贴后，在浏览器上打开，再去浏览器ctrl-c, ctrl-v,将链接拷回到新写的哪一行的引号内。

这样能解决问题呢？

那应该是因为我从VScode复制到浏览器，再从浏览器刷新的时候，浏览器栏其实已经被浏览器自己更新了（隐含的字符应该都被去掉了）。这样我贴回来的时候，那些怪字符就不见了。

自然问题就解决了。

好了，总算彻底解决了小白的第一个问题。让我们再看看前端小白还会遇到什么古灵精怪的问题吧。。。。