【Web开发】你可能不知道的 18 个HTML/CSS/JavaScript前端技巧

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年6月13日 10:36 本文热度 108

作为前端开发者，我们通常关注的是全局——框架、库和主要功能。但有时，一些鲜为人知的技巧也能让我们的工作真正闪耀光芒。

今天，我们将深入探讨 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 = 'https://www.example.com/path?param1=value1#hash';console.log(a.host);     // www.example.comconsole.log(a.pathname); // /pathconsole.log(a.search);   // ?param1=value1console.log(a.hash);     // #hash

4. 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 keydocument.addEventListener('keydown', (e) => {  if (e.keyCode === 123) e.preventDefault();});// Disable right-clickdocument.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 Error1..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 标准的复杂性。

记住，能力越大，责任越大。请明智地使用这些技巧，始终将性能、可访问性和用户体验放在首位。祝您编码愉快！

该文章在 2025/6/13 10:36:36 编辑过