多个HTML属性

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

接下来开始吧！🚀

Accept 属性

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

<input?type="file"?accept=".jpg,?.jpeg,?.png">

ALT 属性

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

<img?src="nature.png"?alt="A?beautiful?sunset">

Autocomplete属性

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

<input?type="text"?name="name"?autocomplete="on"?/>

Contenteditable属性

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

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

<div?contenteditable="true">You?can?edit?this?content.</div>

Download属性

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

?<a?href="document.pdf"?download="document.pdf">Download?PDF</a>

Hidden属性

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

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

<div?hidden>This?is?hidden?content.</div>

Loading属性

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

<img?src="image.png"?loading="lazy"?/>

Multiple属性

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

<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>元素一起使用，可以用来显示视频封面，直到用户播放视频。

<video?controls?poster="image.png"?width="500">
???<source?src="video.mp4"?type="video/mp4"?/>
</video>

Readonly属性

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

<input?type="text"?value="This?is?readonly."?readonly?/>

Srcset属性

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

<img?src="image.jpg"?srcset="image.jpg,?image-2x.jpg,?image-3x.jpg">

Spellcheck属性

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

<input?type="text"?spellcheck="false"?/>

Title属性

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

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

<a?href="document.pdf"?title="Click?to?download">Download?File</a>

Start属性

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

<ol?start="20">
??<li>Pineapple🍍</li>
??<li>Apple🍎</li>
??<li>Greenapple?🍏</li>
</ol>

Reversed属性

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

<ol?reversed>
??<li>Pineapple🍍</li>
??<li>Apple🍎</li>
??<li>Greenapple?🍏</li>
</ol>

Dir属性

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

<p?dir="rtl">Awesome!</p>