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