ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

链接的斜杠怎么没有了?

2020-11-09 22:35:35  阅读:181  来源: 互联网

标签:怎么 字符 显示 浏览器 ctrl 斜杠 链接


 

至理名言——不会挖坑就是不会学习——是作者本人说的。这不,这几天要做 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>

 

预览一下:

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进制的插件。

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

自然问题就解决了。

 

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

 

标签:怎么,字符,显示,浏览器,ctrl,斜杠,链接
来源: https://www.cnblogs.com/hzcyaw/p/13951302.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有