[译]你应该知道的多个HTML属性

本文翻译自 13 HTML Attributes You Should Know About,作者:Shefali, 略有删改。

在HTML中,属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性,它们可以增强网站的视觉吸引力。

接下来开始吧!🚀

Accept 属性

您可以将accept属性与<input>元素(仅用于文件类型)一起使用,以指定服务器可以接受的文件类型。

html 复制代码
<input type="file" accept=".jpg, .jpeg, .png">

ALT 属性

您可以将alt属性与<img>元素一起使用,以指定图像无法在网页上显示时的替代文本。

html 复制代码
<img src="nature.png" alt="A beautiful sunset">

Autocomplete属性

您可以将autocomplete属性与<form><input><textarea>元素一起使用,以控制浏览器的自动完成功能。

html 复制代码
<input type="text" name="name" autocomplete="on" />

Contenteditable属性

您可以使用contenteditable属性指定元素的内容是否可编辑。它允许用户修改元素中的内容。

这是一个全局属性,这意味着您可以将此属性用于所有HTML元素。

html 复制代码
<div contenteditable="true">You can edit this content.</div>

Download属性

您可以将download属性与<a>元素一起使用,以指定当用户单击链接时,链接的资源应该被下载而不是导航到。

html 复制代码
 <a href="document.pdf" download="document.pdf">Download PDF</a>

Hidden属性

您可以使用hidden属性来隐藏网页上的元素。这对于通过JavaScript或CSS控制可见性非常有用。

这是一个全局属性,这意味着您可以将此属性用于所有HTML元素。

html 复制代码
<div hidden>This is hidden content.</div>

Loading属性

您可以将loading属性与<img>元素一起使用,以控制浏览器加载图像的方式。它有三个值:"eager"、"lazy"和"auto"。

html 复制代码
<img src="image.png" loading="lazy" />

Multiple属性

您可以将multiple属性与<input><select>元素一起使用,可以允许用户一次选择/输入多个值。

html 复制代码
<input type="file" multiple />
<select multiple>
   <option value="java">Java</option>
   <option value="javascript">JavaScript</option>
   <option value="typescript">TypeScript</option>
   <option value="rust">Rust</option>
</select>

Poster属性

您可以将poster属性与<video>元素一起使用,可以用来显示视频封面,直到用户播放视频。

html 复制代码
<video controls poster="image.png" width="500">
   <source src="video.mp4" type="video/mp4" />
</video>

Readonly属性

您可以将readonly属性与<input>元素一起使用,以指定该元素为只读,不可编辑。

html 复制代码
<input type="text" value="This is readonly." readonly />

Srcset属性

您可以将srcset属性与<img><source>(在<picture>中)元素一起使用,以提供图像源列表。这有助于浏览器为不同的屏幕尺寸选择不同的图像。

html 复制代码
<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">

Spellcheck属性

您可以将spellcheck属性与<input>元素(非密码类型)、内容可编辑元素和<textarea>元素一起使用,以启用或禁用浏览器的拼写检查。

html 复制代码
<input type="text" spellcheck="false" />

Title属性

您可以使用title属性来提供有关元素的其他信息。当用户将鼠标悬停在元素上时,通常会显示此信息。

这是一个全局属性,这意味着您可以将此属性用于所有HTML元素。

html 复制代码
<a href="document.pdf" title="Click to download">Download File</a>

Start属性

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

html 复制代码
<ol start="20">
  <li>Pineapple🍍</li>
  <li>Apple🍎</li>
  <li>Greenapple 🍏</li>
</ol>

Reversed属性

使用reversed属性可以反转列表编号的顺序。

html 复制代码
<ol reversed>
  <li>Pineapple🍍</li>
  <li>Apple🍎</li>
  <li>Greenapple 🍏</li>
</ol>

Dir属性

您可以使用dir属性设置您的文本方向从右到左还是从左到右,从右到左设置为rtl即可。

bash 复制代码
<p dir="rtl">Awesome!</p>

今天的内容就到这里,谢谢你的阅读。这么多个html属性是否有你没有发现的呢,希望对你有帮助。

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

相关推荐
Java 码农43 分钟前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan1 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown1 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh1 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥2 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球2 小时前
css新特性
前端·css
Nicholas682 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙2 小时前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
TimelessHaze2 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
jvxiao3 小时前
搭建个人博客系列--(4) 利用Github Actions自动构建博客
前端