作为前端开发者，我们通常关注的是全局——框架、库和主要功能。但有时，一些鲜为人知的技巧也能让我们的工作真正闪耀光芒。
今天，我们将深入探讨 18 个鲜为人知的前端小技巧，它们可能会给你带来惊喜，提升你的开发水平。
1. 浏览器地址栏：不止眼前所见
你知道浏览器的地址栏不仅仅是导航功能吗？让我们来探索一些隐藏的功能：
1.1 执行 JavaScript 代码
试试这个：在地址栏中输入 javascript:alert('Hello, World!') 并按回车键。瞧！你已经直接从地址栏运行了 JavaScript。
专业提示：某些浏览器可能会出于安全原因删除 javascript: 部分。在这种情况下，你需要手动输入。
你也可以使用 location.href 或 window.open 来实现相同的效果：
location.href = "javascript:alert('Hello, World!')";
window.open("javascript:alert('Hello, World!')");1.2 运行 HTML
想把你的浏览器标签页变成一个迷你 HTML 游乐场吗？试试这个：
data:text/html,<div>Hello, World!</div>
等等，还有更多！你可以使用以下方法创建一个即时编辑器：
data:text/html,<html contenteditable>
现在，你手边就有一个完全可编辑的页面！
2. 使任何网页都可编辑
想编辑任何网页上的文本吗？这里有一行代码可以实现：
document.body.contentEditable = 'true';
将这段代码粘贴到浏览器的控制台中，整个页面瞬间就变成了你的画布！
3. 使用锚标签解析 URL
需要快速解析 URL？不起眼的 <a> 标签可以帮你搞定：
const a = document.createElement('a');
a.href = '
console.log(a.host); //
console.log(a.pathname); // /path
console.log(a.search); // ?param1=value1
console.log(a.hash); // #hash4. HTML ID 和全局变量的奇葩案例
你知道元素的 ID 会变成全局变量吗？真的！
<div id="myElement"></div> <script> console.log(myElement); //<div id="myElement"></div> </script>
但要小心——如果你没有意识到这一点，可能会导致意外的行为。
5. CDN 链接中的协议相对 URL
从 CDN 加载资源时，可以省略协议：
<script src="//cdn.example.com/script.js"></script>
这个巧妙的技巧可以确保资源使用与当前页面相同的协议加载。
6. 光标消失恶作剧
想迷惑你的同事吗？试试这个 CSS：
* { cursor: none !important;}看着他们费力地寻找光标！（当然，要谨慎使用。）
7. 使用 CSS 实现文本模糊效果
使用 text-shadow 创建酷炫的文本模糊效果：
.blurred-text {
color: transparent;
text-shadow: #111 0 0 5px;
user-select: none;
}非常适合那些“被遮盖”的效果！
8. Hidden 属性
无需 JavaScript 或 CSS 即可隐藏元素：
<div hidden>Now you see me, now you don't!</div>
简单、语义化且有效。
9. 保护你的代码（某种程度上）
虽然并非万无一失，但你可以阻止随意的检查：
// Disable F12 key
document.addEventListener('keydown', (e) => {
if (e.keyCode === 123) e.preventDefault();
});
// Disable right-click
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
});请记住，这不是真正的安全——只是一个小障碍。
10. CSS 三角形
用纯 CSS 创建三角形：
.triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: red;
}有了 CSS，谁还需要图片？
11. 无穷悖论
这里有一个 JavaScript 怪癖，可能会让你大吃一惊：
const a = Infinity; console.log(a === a - 1); // true
无穷大减一仍然是无穷大！
12. 数字包装器奇闻
你有没有试过在数字字面量上调用方法？
1.toString(); // Syntax Error 1..toString(); // Works! Returns "1"
那个额外的点至关重要。
13. 防止 iframe 嵌入
防止您的网站被嵌入 iframe：
if (window.location !== window.parent.location) {
window.parent.location = window.location;
}让您的内容保持在它应该在的位置！
14. 被低估的 <datalist>
使用 <datalist> 增强您的输入字段：
<input list="fruits" name="fruit"> <datalist id="fruits"> <option value="Apple"> <option value="Banana"> <option value="Cherry"> </datalist>
它类似于 <select>，但可以输入！
15. 使用 CSS 实现竖排文本
将文本横向显示：
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}非常适合东亚语言风格。
16. 防止文本被选中
不想让用户选中您的文本？
document.addEventListener('selectstart', (e) => {
e.preventDefault();
});请谨慎使用，因为它会影响可访问性。
17. 一行多个表达式
使用逗号运算符组合表达式：
let a = 1, b = 2; (a += 2), (b += 3); console.log(a, b); // 3, 5
简洁，但请谨慎使用以提高可读性。
18. inset 简写
使用 inset 简化你的定位：
.box {
position: absolute;
inset: 0; /* Equivalent to top: 0; right: 0; bottom: 0; left: 0; */
}更少的输入，同样的效果！
总结
这 18 个前端技巧展示了 Web 技术的深度和奇特之处。有些技巧在日常使用中很实用，而另一些则更具奇特之处，凸显了浏览器和 Web 标准的复杂性。
