跳至主要內容

HTML实用小技巧🚀🚀

萌萌哒草头将军大约 2 分钟前端HTML

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

💡Tip 1：告别 display: none

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

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

<section hidden>
  <div>萌萌哒草头将军</div>
</section>

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

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

<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 反转排序

<ol reversed>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ol>
image.png
image.png

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

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

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

<style>
  input:invalid {
    border-color: red;
  }
</style>

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

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

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

<div contenteditable="true">萌萌哒草头将军!</div>
rich.gif
rich.gif

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

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

<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>
image.png
image.png
image.png
image.png

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

<img loading="lazy" /> <iframe src="http://www.baidu.com" loading="lazy" />
默认页脚
Copyright © 2024 萌萌哒草头将军