原文链接： 作者：genns 如果翻译不准，还请见谅。
列出了如何使用日常使用的基本概念来操作 HTML、CSS 和 JavaScript。
使用 CSS 禁用所有内容
将字段拆分为块，无可变性
甚至更短：
请记住，开始使用 const，如果需要修改其值，请尽可能使用 let 并避免使用 var。
保存和加载日期
仍然将日期时间保存在 UTCI ISO 中，并使用本地 ISO 将其加载到 UI 中。 使用本机小部件来防止面部日期格式首选项（中档等）
推荐使用sessionStorage和localStorage。 如果不是绝对必要，请勿滥用 cookie。 如果需要更多的本地存储空间，可以使用IndexedDB。
通过单击标题选择 HTML 表格列
请记住，onclick 始终会覆盖之前的函数（如果有），对于多个函数请使用 addEventListener()。
重构时重命名
我们将在对对象字段进行排序时重命名时间属性。
请记住，sort() 修改了原始字段。
手动完成下拉菜单
您是否使用过 jQueryUI 或 Bootstrap 的第三方选项来手动完成下拉菜单？ 彻头彻尾的重量级混乱。
幸运的是，几年前，我们得到了期待已久的解决方案：NativeHTML5Autocomplete 下拉菜单，这是所有设备都支持的轻量级标准。
节省时间和对工具的依赖，尽可能减轻库和框架的重量。
使用 CSS Grid 实现真正轻松的响应
CSSGrid 是处理响应性的最简单、最干净和最强大的方法，这是一种在过去几年中已经可用的全新方法。
CSSGrid会改变以往文档的布局方式，不再需要divitis（大量的div）和JavaScript根据屏幕修改div位置（Bootstrap现在就是这么做的），可以使用纯CSS网格布局，才有意义div，并且独立于文档源顺序。
不需要接触 HTML 或 JavaScript，也不需要 Bootstrap 甚至复杂的 CSS 规则，你在 CSS 中看到的就是你在屏幕上看到的。
在不丢失交互的情况下连接 UI 的各个部分
请记住，target 是风暴的原因，currentTarget 是您分配给受众的内容。
HTML 输入 24 小时格式的时间
依赖原生 HTML 小部件，不受第三方库的影响。 但是，有时存在限制，如果您以前处理过 HTMLin time，您知道它是什么css方块，请尝试设置最大或最小小时/分钟和/或从 12 小时格式更改为 24 小时格式，反之亦然。 到目前为止，防止此类问题的一个很好的解决方案是使用两种类型的输入和 JS。
请记住，方程 == 双重比较，方程和类型 === 三重比较。
如果要检查变量是否未定义，只需使用三方块 a===undefined，对于 null 也是如此。 如果你想检查它是否存在，请使用 typeofa!='undefined'。
循环n次，无可变变量
像这样：
水平和垂直中心
忘记任何复杂的方法，只需使用 Flexbox，并在容器中设置水平中心和垂直中心即可。
异步抓取
将 fetch() 与异步函数结合使用。
注意，正如你所注意到的，我不写分号，它完全没问题，在 JavaScript 中，它不是强制性的，JS 引擎会检测它并插入它，无论你想写与否，只要小心一个新行开始使用括号并防止返回不同行中的值就足够了。
带左右键的页码
滚动到视图中
我创建 n 个随机彩色框（div）来随机选择其中一个并使其在图层上可见。 每次重新运行代码时，您都会在屏幕上看到选定的框，无论其位置如何。
展平对象字段
请记住，如果您想创建一个平面链接字段列表，可以使用 flat() 轻松完成。
嵌套对象字段
返回一个包含 n 个元素的字段，其中填充了内容：
返回一个具有 name 属性和内容值的对象：
带有对象的 3 级字段（嵌套）
没有重复值的字段
采集策略：
筛选策略（更容易弄清楚，但速度较慢）：
带单位的 HTML 输入
响应式背景循环视频
请注意，可以添加尽可能多的源来支持不同的视频格式。
如何复制特定的 HTML 元素
我想要这样的东西：
在撰写本文时，标准仅支持 window.print() ，但我们可以使用 CSS 和一些 JavaScript 来实现此方法：
查看、隐藏、输入和生成密码
输入内部有一个提示，后面是一个显示密码的按钮，最后是另一个生成随机密码的按钮。
查看或隐藏密码：
设置随机密码并确保其显示：
无限制的上一个和下一个选择
选择选择循环中的每个元素。 如果完成元素列表后立即前进，则选择将从头开始，反之亦然。
请记住使用 nextElementSibling 和 previousElementSibling （DOM 元素），而不是 nextSibling 和 previousSibling （DOM 对象）。 DOM 对象可以是任何东西：注释、孤立文本、换行符等。在我们的示例中，如果我们将所有 HTML 元素放在一起且同时不包含任何内容，则同级元素将起作用；
响应式完美圆
我见过许多创建响应式多维数据集的奇怪方法，这就是为什么我想分享一种简单的方法。 转到下面的 JSFiddle 链接并调整结果窗口的大小。
键盘点击定义圆圈区域
我们将通过在框区域内单击的位置来定义圆的区域。 我们可以用 JavaScript Storm、一点基本物理知识和 CSS 来处理这个问题。
长度和高度是相同的，我们为物理设置哪一个并不重要：
键盘光标距圆心的绝对位置：
最大值将告诉我们圆的面积之比：
文字叠加
实际上您在想，您可以打开鼠标的插入键，但如果您没有它，或者您想在输入某些特定的输入和文本区域时仍保持覆盖模式（独立）。 你可以轻松做到。
使用闭包重置计数器
设置一个带有闭合件和一些外部可访问选项的基本计数器。
请记住，闭包仅允许记录和保护变量。
无限滚动
您是否见过这些手册在向上滚动时“加载更多”？
您是否在 Tumblr 上看到它们的图片、在 Gmail 上看到它们的消息或在 Facebook 上看到它们？ 无限滚动是分页的替代品，而且它无处不在。 它根据用户需求（间接）优化加载数据的用户体验。
您可以更快地加载页面、网页、应用程序，它只加载需要的内容。 您不需要添加额外的交互、按钮或小部件，因为这是有习惯的正常阅读行为：用键盘或脚趾在可触摸屏幕上向上滚动。
只需注意里面的例子，我们可以创建节点并更有效地使用。
材质图标
使用 box-shadow 的基本 CSS 过渡
如果键盘位于元素上，并且具有简单的进出过渡效果（缓慢开始和结束），我们的 CSS 将发生变化。 我们用内部阴影填充元素（插入）
将 HTML 表格导入为 CSV 文件
假设您有一个 HTML 表格并希望将其下载为 CSV 表格。
首先，您需要将 HTML 转换为 CSV：
然后，可以使用 blob 和链接来下载它：
老鼠风暴
使用 event.code 获得人类可读的形式来了解按下了什么键。 如果要区分小写字母，请使用event.key，并避免使用浏览器快捷键，即：Ctrl+P（复制）
像 jQuery 这样的短选择器
当你必须选择 DOM 元素时，使用 JavaScript 有点不合适，在这些情况下我们可能会错过 jQuery，因为 JavaScript 太长了。
我们不喜欢在编码时重复，如果你在 JavaScript 的开头定义下一个代码，你将能够比 jQuery 做得更好。
现在，我们的例子可以写得更简洁：
这很容易记住，因为 $ 的行为类似于带有 CSS 选择器的 jQuery，$$ 的行为相同，但它允许您选择多个元素。 第一个返回找到的第一个元素，第二个返回元素列表。
还有一点，这段代码你不能使用jQuery，因为jQuery也使用$，如果你需要它，你必须将我们代码中的$更改为另一个东西，即：qS。
请记住css方块，在 JavaScript 中，我们有比类更好的东西：原型。 无论您是否使用类，原型都会在幕后使用。
属性和属性有什么区别？
属性在 DOM 中； 属性位于 HTML 中，解析为 DOM。
当不需要逻辑时，防止使用 switch 子句
链表更快，在下一个例子中，如果你现在想要第九个月，只需编码months[9]。
推荐
