HTML实用小技巧🚀🚀-阿里云开发者社区

HTML实用小技巧🚀🚀

2023-10-30 47

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>

💡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]*" />

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

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

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

💡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>

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

<img loading="lazy" />
<iframe src="http://www.baidu.com" loading="lazy" />

HTML实用小技巧🚀🚀

💡Tip 1：告别 `display: none`

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

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

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

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML实用小技巧🚀🚀

💡Tip 1：告别 display: none

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

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

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

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

💡Tip 1：告别 `display: none`

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

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

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

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

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