前端工程师必看，这些浏览器奇淫功能你知道吗？

最新推荐文章于 2022-03-01 10:33:32 发布

王佳斌

最新推荐文章于 2022-03-01 10:33:32 发布

阅读量7.4k

点赞数 21

分类专栏： + HTML

本文链接：https://blog.csdn.net/weixin_44198965/article/details/103110697

版权

+ HTML 专栏收录该内容

28 篇文章 13 订阅

订阅专栏

把浏览器变成记事本

用过记事本吗？好吧我不该问的… 打开浏览器的地址栏，粘贴代码走你~

data:text/html, <html contenteditable>

在这里插入图片描述

浏览器中 “实时” 编辑CSS代码

通过设置 style 标签的 display:block 属性的方法，能让页面的 style 标签显示出来，再加上 HTML5 contentEditable 属性这块区域就成为了可编辑状态，既然能编辑也就证明修改了源代码，模拟一个实时效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <style style="display:block" contenteditable="true">
        body{
            background:rgb(255, 255, 255);
        }
    </style>
</body>
</html>

在这里插入图片描述

地址栏运行HTML代码

在非IE内核的浏览器地址栏可以直接运行HTML代码，老规矩，代码粘贴到地址栏，走你~

data:text/html,<h1><a href="https://blog.csdn.net/weixin_44198965">hello!</a></h1>

在这里插入图片描述

你爱我吗？

var Girl = {
   face: 'perfect',//脸庞完美
   height: 176,//大高个
   weight: 120,//微胖
}

【问】博主：Do you love me？
【答】Girl：false

## 写在后面

如果觉得本文很有趣，还请高抬贵手赠予 uh5 项目一个 Star。

王佳斌

关注

21
点赞
踩
80

收藏

觉得还不错? 一键收藏
打赏
14
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录