前端小白历险记(一)链接的斜杠怎么没有了?

举报
张辉 发表于 2020/07/05 13:59:46 2020/07/05
【摘要】 文中自述了作者寻找斜杠的故事。

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


我们的“理想”(也就是考题)是想得到这样一个图:

image.png

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

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

        /* 导航的链接栏 */
        .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>


预览一下:

image.png

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

image.png


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


居然每个链接都如此:

image.png


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


image.png


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

image.png

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


image.png



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

image.png


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

image.png


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


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

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


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

image.png

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

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

image.png


那么你就可以点它:

image.png

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

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

image.png

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

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

image.png


正确的:<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复制到浏览器,再从浏览器刷新的时候,浏览器栏其实已经被浏览器自己更新了(隐含的字符应该都被去掉了)。这样我贴回来的时候,那些怪字符就不见了。

自然问题就解决了。


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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。