HTML 技巧和窍门。

2025-05-24

HTML 技巧和窍门。

在我的上一篇文章中，我分享了一些 JavaScript 技巧和窍门，在本文中，我将介绍 HTML 技巧和窍门✨。

这start attribute

Start 属性允许您指定列表项的起始编号。



 <ol start="20">
       <li>Pineapple🍍</li>
       <li>Apple🍎</li>
       <li>Greenapple 🍏</li>
 </ol>
Enter fullscreen mode Exit fullscreen mode

3 种水果，从 20 开始 20 使用 start 属性指定 3 种水果

这contenteditable attribute

将 contenteditable 属性设置为 true，您的内容将可编辑。



 <p contenteditable="true">It Can be something about you.</p>
Enter fullscreen mode Exit fullscreen mode

使用 contenteditable 属性实现可编辑段落的图示

这required attribute

在必须填写的输入字段上设置必填属性。



<input type="password" required>
Enter fullscreen mode Exit fullscreen mode

这mark tag

使用标记而不是样式跨度来突出显示文本。



 <p>This is <mark>important</mark> </p>
Enter fullscreen mode Exit fullscreen mode

使用 mark 标签实现文本高亮

这lazy loading attribute

在媒体元素上添加延迟加载属性，这将通过推迟媒体元素的加载直到用户滚动到它们来提高页面性能。



<img src='image.jpg' loading='lazy' alt='Alternative text'>
Enter fullscreen mode Exit fullscreen mode

这kbd tag

呈现键盘输入时使用 kbd 标签。



<p>Press <kbd>alt</kbd> & <kbd>tab</kbd> to change window</p>
Enter fullscreen mode Exit fullscreen mode

kbd 标签的插图

这Details & Summary tag

您可以使用内置键盘辅助功能的详细信息和摘要元素来制作美观的手风琴。



   <details>
      <summary>Can i save and love ❤️ this article?</summary>
      <p>Follow on twitter for more stuff.</p>
      <p>Save for updates.</p>
  </details>
Enter fullscreen mode Exit fullscreen mode

带问答的手风琴

这accept attribute

接受属性允许我们指定用户可以上传哪些类型的文件。



<input type="file" accept=".jpg, .pdf">
Enter fullscreen mode Exit fullscreen mode

这favicon

设置链接相对图标来定义图标



<link rel="icon" href="logo.webp">
Enter fullscreen mode Exit fullscreen mode

这picture tag

图片标签允许您根据屏幕尺寸呈现不同纵横比的图像，图片标签对于实现响应式网页设计非常有用。



<picture>
    <source srcset="large.webp" media="(min-width: 1200px)">
    <source srcset="medium.webp" media="(min-width: 800px)">
    <img src="regular.jpg" />
</picture>
Enter fullscreen mode Exit fullscreen mode

这dir attribute

您可以使用方向设置目录为自动来设置文本方向从右到左或从左到右，这将根据语言自动更改文本方向。



<p dir="rtl">Awesome!</p>
Enter fullscreen mode Exit fullscreen mode

一些从右到左书写的文本

这spellcheck attribute

使用拼写检查属性检查拼写错误。



<input type="email" spellcheck="true">
Enter fullscreen mode Exit fullscreen mode

这meta description

在 HTML 的头部添加元描述，对搜索引擎优化产生间接影响，元描述代表搜索引擎结果页面上网站名称下方显示的文本。



<meta name="description" content="Gitpod streamlines developer workflows by providing prebuilt, collaborative developer environments in your browser - powered by VS Code.">
Enter fullscreen mode Exit fullscreen mode

Gitpod.io url 及元描述输出

这abbr tag

使用 abbr 标签缩写您的内容。



<abbr title="National Aeronautics and Space Administration">NASA 🚀</abbr>
Enter fullscreen mode Exit fullscreen mode

将鼠标悬停在单词上时显示单词的缩写

这disabled attribute

使用选项元素的禁用属性来禁用下拉菜单中的项目。



 <select>
   <option>HTML</option>
   <option>CSS</option>
   <option disabled>REACT</option>
 </select>
Enter fullscreen mode Exit fullscreen mode

由于属性被禁用，无法从列表中选择选项

这poster attribute

海报属性允许您指定在视频下载时或直到用户点击播放按钮时显示的图像。



<video src="video.mp4" poster="flowers.jpg"></video>
Enter fullscreen mode Exit fullscreen mode

这reversed attribute

使用 reversed 属性，您可以反转列表数字的顺序。



  <ol reversed>
        <li>Pineapple🍍</li>
        <li>Apple🍎</li>
        <li>Greenapple 🍏</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode

以相反的顺序列出从 3 开始到 1 结束的数字，而不是从 1 到 3

希望您喜欢阅读这篇文章！如果您有话要说或有任何疑问，请随时在下面发表评论。

编码快乐✨❤️

文章来源：https://dev.to/devsyedmohsin/html-tips-tricks-that-you-will-love-to-know-27ig
Devto 翻译
PREV
JavaScript 技巧和窍门。
NEXT
面向开发人员的免费开源作品集模板⚡🚀