連結的斜槓怎麼沒有了？

至理名言——不會挖坑就是不會學習——是作者本人說的。這不，這幾天要做 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複製到瀏覽器，再從瀏覽器重新整理的時候，瀏覽器欄其實已經被瀏覽器自己更新了（隱含的字元應該都被去掉了）。這樣我貼回來的時候，那些怪字元就不見了。

自然問題就解決了。

 

好了，總算徹底解決了小白的第一個問題。讓我們再看看前端小白還會遇到什麼古靈精怪的問題吧。。。。