HTML实用小技巧🚀🚀

文章同步在公众号:萌萌哒草头将军,欢迎关注

💡Tip 1:告别 display: none

当你需要隐藏一个元素时,首先想到的可能是display: none,或者visibility: hidden,

现在有一个更简便的方式:直接在HTML元素使用hidden属性,它的值还可以是hidden="hidden"或者hidden="invalid value"

html 复制代码
<section hidden>
    <div>萌萌哒草头将军</div>
</section>

💡Tip 2: 修改 ol标签的排序

通过 start 属性控制排序的起始位置

html 复制代码
<ol start="10">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
    <li>Fifth Item</li>
</ol>

使用 reversed 反转排序

html 复制代码
<ol reversed>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
    <li>Fifth Item</li>
</ol>

💡Tip 3: 使用 inputmode="numeric"代替 type="number"

当使用 type="number" 输入的数字时,如果输入的内容是非法的,那么实际得到的值为空字符串

但是如果使用 inputmode="numeric" 当输入的值为非法的内容时,会自动触发警告

html 复制代码
<style>
input:invalid {
    border-color: red;
}
</style>

<input type="text" inputmode="numeric" pattern="[0-9]*" />

💡Tip 4: 使用 contenteditable="true"开启富文本编辑器

在任意的HTML元素中使用contenteditable="true"即可以开启富文本编辑器。

html 复制代码
<div contenteditable="true">萌萌哒草头将军!</div>

💡Tip 5: 使用<datalist>提高用户体验

<datalist> 标签,它是 HTML5 中的一个表单元素,用于创建输入字段的预定义选项列表。它通常与input 标签的 list 属性一起使用,以提供给用户一组可供选择的选项

html 复制代码
<label>
  todo:
  <input type="text" list="datalist" />
  <datalist id="datalist">
    <option value="test1" />
    <option value="test2" />
    <option value="test3" />
  </datalist>
</label>

<label>
  Scale:
  <input type="range" min="1" max="5" step="1" list="scales" />
  <datalist id="scales">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
    <option value="5"></option>
  </datalist>
</label>

<label>
  Primary Color:
  <input type="color" list="colors" />
  <datalist id="colors">
    <option value="#4d32bf"></option>
    <option value="#ac45fa"></option>
    <option value="#f9427c"></option>
    <option value="#fac642"></option>
    <option value="#4fd6be"></option>
  </datalist>
</label>

💡Tip 6: 使用loading="lazy"懒加载资源,提高加载速度

html 复制代码
<img loading="lazy" />
<iframe src="http://www.baidu.com" loading="lazy" />
相关推荐
晓13138 分钟前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor15 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军16 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺18 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1118 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡20 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu21 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂23 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军23 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038123 分钟前
拓展运算符和剩余参数
前端