作为一个学习前端开发的穷屌丝而言,关注前端开发是必要的,现在可以心中可以说出的吐槽语便是‘前端已经被玩坏了’,不论以后,就比如console.log()输出绚丽的图片,cursor设置进行恶搞浏览者,这里被强涛冲刷着,如同迸发的洪流,生机自然,让得这前端之界蓬勃发展。
浏览器HTML版
在浏览器地址栏运行js代码
javascript:alert('hello world!');
将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗就会出现,记住最后的分号一定要打
通过javascript我们便可以在浏览器地址栏运行js代码了
在非IE内核的浏览器地址栏可以直接运行HTML代码
data:text/html,<h1>hello world!</h1>
通过上述代码便可以在地址栏运行HTML代码
浏览器网页编辑器
接下来这一个才是牛逼的地方,把网页当做一个编辑器
data:text/html,<html contentEditable>
上述这行代码便可以将一个网页当做一个编辑器,当然这会重新开启一个新的网页,如此我们在调试窗口输入如下的JS代码便可以对一个网页进行编辑操作
document.body.contentEditable='true'
CSSHTML版
对于CSS,大家或许有些疑惑,CSS只是个样式应该没有什么特别的地方,但是我们在HTML代码中写点东西,我们就可以超神了,也许大家有些羡慕那些前端程序猿写的表白的网页啊,整个网页的样式随着代码的写入进行更换,其实啊,这个东西非常简单,是一个前端程序猿必备的一个技能同时也是一个男人必备的一个技能
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
在网页中写入上述代码你就可以飞了
console对象
当然这里提及一个console这个对象,大家可以打印出这个对象研究研究他的内部结构
console.log()能够打出一些文字信息
console.table()对于一个数组而言便是打印出一个表格了
calc属性设置
对了,最后提一句,我发现我身旁大多数前端程序猿好像有一个东西有点误解CSS无法进行运算,那么我就提供一下calc()这个函数便是可以进行简单的运算
background-position: calc(100% - 50px) calc(100% - 20px);