英文 | https://javascript.plainenglish.io/7-useful-html-attributes-that-you-probably-dont-know-661784fe21e

翻譯 | web前端開發(fā)

HTML是每個(gè)Web開發(fā)人員都必須具備的技能。如果你不了解這種標(biāo)記語言，你就不能稱自己為Web開發(fā)人員。

你在網(wǎng)絡(luò)上看到的每個(gè)網(wǎng)站都是使用HTML構(gòu)建的，因?yàn)樗哂性S多有用而強(qiáng)大的功能，作為開發(fā)人員，你可以從中受益以創(chuàng)建網(wǎng)頁。話雖如此，HTML還具有可以附加到元素或標(biāo)簽的屬性，以便向HTML元素添加某些交互功能。

在本文中，我們將為你提供一些你可能尚未聽說過的有用的HTML屬性的列表。因此，讓我們開始吧。

1、accept

如你所知，HTML允許你創(chuàng)建輸入，你可以在其中上傳文件。除此之外，HTML屬性accept還用于上傳輸入，以指定文件類型或用戶可以上傳到服務(wù)器的唯一格式。

例如，我們可以接受僅上傳jpg并上傳png到我們的服務(wù)器。

示例如下：

<input type =“file” accept =“.jpg，.png” >

你可以在Codepen中查看它的線上效果：https://codepen.io/MehdiAoussiad/pen/jOrZVeo

2、multiple

multiple 屬性可以附加到標(biāo)記<input>和<select>中。它允許用戶輸入多個(gè)值。

例如，我們還可以允許用戶上載多個(gè)文件。

示例如下：

<input type =“ file” multiple />

3、contenteditable

該屬性contenteditable用于使HTML內(nèi)容在網(wǎng)頁上可編輯?；旧?，它允許用戶編輯具有contenteditable屬性的頁面元素。

示例如下：

<div>      <h1> Employees: </h1>      <ul contenteditable="true">        <li> 1. John </li>        <li> 2. Mehdi </li>        <li> 3. James </li>      </ul>  </div>

上面的示例使我們可以編輯網(wǎng)頁上的列表。

你可以在Codepen中查看它的線上效果：

https://codepen.io/MehdiAoussiad/pen/VwKzmKL

4、Download

download屬性在HTML中指定當(dāng)用戶單擊鏈接時(shí)將下載鏈接。此屬性允許用戶從你的網(wǎng)站下載文件。

示例如下：

<div> <a href="index.html" download="fileName">下載此文件</a> </ div>

但你只需要在屬性上指定文件名，指定download文件的href路徑。

你可以在Codepen中查看示例效果：

https://codepen.io/MehdiAoussiad/pen/eYBWopo

5、translate

translate屬性用于告訴內(nèi)容是否應(yīng)該翻譯。可以將其附加到所有HTML標(biāo)記，因?yàn)樗侨謱傩浴?/span>

例如，每當(dāng)將頁面翻譯成另一種語言時(shí)，就可以在文本徽標(biāo)上使用此屬性，以保持相同的品牌名稱。

這是代碼示例：

<p translation =“ no” > Mehdi </ p>

6、poster

Poster屬性用于在HTML視頻下載時(shí)或用戶單擊播放按鈕之前顯示圖像。

代碼示例如下：

<video poster="picture.jpeg" controls>   <source src="file.mp4" type="file/mp4">   <source src="file.ogg" type="file/ogg"></video>

在你單擊播放按鈕之前，圖像將顯示為視頻的縮略圖。

7、pattern

通過使用pattern屬性，你可以輕松地將正則表達(dá)式添加到表單內(nèi)的輸入元素。

我們還可以將另一個(gè)title屬性與pattern屬性一起使用，以幫助用戶在輸入上編寫正確形式的文本。

代碼示例如下：

<form >  <label for="input">Country Code:</label>  <input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code.">  <input type="submit"></form>

你可以在Codepen中查看線上效果：

https://codepen.io/MehdiAoussiad/pen/xxRaPZW

結(jié)論

這些HTML屬性非常有用并且非常重要。它們可以使你向HTML元素添加額外的有用功能。這就是為什么我鼓勵(lì)你從其他資源中了解更多屬性的原因。

感謝您閱讀本文，希望對你有用。

本文完?

學(xué)習(xí)更多技能

請點(diǎn)擊下方web前端開發(fā)