我隨手寫了一行這樣的內容：
結果它沒有像普通文字一樣顯示出來，而是直接變成了一個可以點擊的日期選擇器：
<input type="date">
這就有點好玩了。
明明我只是寫了一行代碼，爲什麼它會在文章裏“活過來”？
其實這背後不是玄學，而是一個很常見的網頁渲染現象。
一、文章頁面本質上也是網頁
我們平時在平臺上發文章，看起來是在寫“文本”，但從瀏覽器的角度看，最終展示出來的東西其實是一個網頁。
網頁的基礎語言就是 HTML。
比如：
瀏覽器看到這段代碼，就會把它渲染成一段普通文本。
而如果瀏覽器看到的是：
它就會理解爲：這裏需要顯示一個日期選擇控件。
所以最終效果就是：
<input type="date">
也就是說，問題的關鍵在於：平臺有沒有把你輸入的 HTML 當成普通文本處理。
二、爲什麼有的平臺會直接渲染 HTML？
正常來說，文章平臺爲了安全，通常會對用戶輸入的內容進行處理。
比如你寫：
平臺可以選擇把它當成普通文本顯示出來，也可以選擇交給瀏覽器直接渲染。
如果平臺沒有把這段 HTML 轉義掉，那麼瀏覽器就會真的執行它的顯示邏輯。
所謂“轉義”，簡單說就是把 HTML 的尖括號變成普通字符。
例如原本是：
轉義後大概會變成：
這樣瀏覽器就不會把它當成控件，而是會把它當成普通文字顯示。
三、一些比較有意思的 HTML 原生控件
經實際測試均可運行，大部分單擊或者雙擊白框即可
不是我雙擊騙取點贊啊，這代碼它真的本來就這樣，請蒼天，辨忠奸
下面這些都是瀏覽器自帶的 HTML 表單控件。如果平臺沒有過濾，它們可能會直接顯示出對應效果。
1. 日期選擇器
代碼是：
實際效果：
<input type="date">
2. 時間選擇器
代碼是：
實際效果：
<input type="time">
3. 顏色選擇器
代碼是：
實際效果：
<input type="color">
這個就比較有意思，點開之後可以直接選顏色。
4. 滑動條
代碼是：
實際效果：
<input type="range" min="0" max="100" value="50">
5. 勾選框
代碼是：
實際效果：
<input type="checkbox" checked>
如果寫多個，還可以假裝做一個調查問卷：
<input type="checkbox"> 我只是路過看看 <input type="checkbox"> 我開始好奇了 <input type="checkbox"> 我也想發一篇試試
6. 下拉菜單
代碼是：
實際效果：
<select> <option>普通文章</option> <option>網頁文章</option> <option>電子表單</option> </select>
7. 進度條
代碼是：
實際效果：
<progress value="66" max="100"></progress>
看起來很像任務進度，雖然它實際上什麼任務也沒有。
8. 儀表條
代碼是：
實際效果：
<meter value="0.7">70%</meter>
不同瀏覽器裏顯示效果可能不太一樣，有些會顯示成類似狀態條的東西。
四、這算漏洞嗎？
不一定。
如果只是 <input>、select、details、progress 這類普通 HTML 標籤被渲染出來，一般更像是平臺的富文本渲染策略比較寬鬆。
它不一定會造成安全問題，只是讓文章裏出現了一些原生網頁控件。
但如果平臺允許更危險的內容，比如：
或者允許事件屬性，例如：
那就不是單純整活了，而是可能涉及 XSS，也就是跨站腳本攻擊。
簡單說，XSS 就是攻擊者把惡意腳本塞進網頁裏，讓其他用戶打開頁面時自動執行。
所以，安全的平臺一般會過濾掉 <script>、onerror、onclick、iframe、外鏈腳本等高風險內容。
五、爲什麼有些標籤能顯示，有些標籤不能？
因爲平臺通常會有一套過濾規則。
它可能允許一部分比較安全的標籤，例如：
但會過濾掉另一部分危險標籤或屬性，例如：
所以你可能會看到這種情況：
** 日期選擇器可以顯示；
滑動條可以顯示；
顏色選擇器可以顯示；
但是腳本不能執行；
外部頁面不能嵌入；
點擊事件也不能觸發。
這說明平臺並不是完全不處理 HTML，而是可能只過濾了其中一部分。
六、這種現象爲什麼有趣？
因爲它讓一篇普通文章突然有了一點“網頁交互感”。
比如下面這個小組合：
<details> <summary>點擊進行今日精神狀態測試</summary>
<p>請選擇今天的起牀時間：</p> <input type="time">
<p>請選擇今天的心情顏色：</p> <input type="color">
<p>調整今日摸魚程度：</p> <input type="range" min="0" max="100" value="80">
<p>確認選項：</p> <input type="checkbox"> 我今天非常清醒
<br> <input type="checkbox"> 我今天只是看起來清醒
<br> <input type="checkbox"> 我已經不想解釋了
</details>
它沒有真正提交數據，也沒有後臺邏輯，但視覺上已經很像一個小網頁了。
這也是它好玩的地方： 文章還是文章，但看起來已經偷偷長出了按鈕、滑塊、日期框和菜單。
七、最後提醒一下
這種玩法建議只試一些無害的 HTML 原生標籤。
比如：
不建議測試腳本、事件、外鏈嵌入之類的內容。
一方面可能觸發平臺審覈，另一方面也確實可能涉及安全問題。
簡單總結就是：
如果你寫的 HTML 被當成普通文字，它就是代碼。
如果它被瀏覽器識別並渲染出來，它就變成了網頁的一部分。
而我們看到的這個日期選擇器，本質上就是文章編輯器和瀏覽器渲染機制之間產生的一點小縫隙。
有點離譜，但確實挺好玩。
更多遊戲資訊請關註：電玩幫遊戲資訊專區
電玩幫圖文攻略 www.vgover.com
