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" />
相关推荐
gnip19 分钟前
总结一期正则表达式
javascript·正则表达式
Q_9709563922 分钟前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员37 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘42 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出44 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的44 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man1 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js