我随手写了一行这样的内容：
结果它没有像普通文字一样显示出来，而是直接变成了一个可以点击的日期选择器：
<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
