7 個你可能不知道但有用的 HTML 屬性

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

翻譯 | web 前端開發

HTML 是每個 Web 開發人員都必須具備的技能。如果你不瞭解這種標記語言，你就不能稱自己爲 Web 開發人員。

你在網絡上看到的每個網站都是使用 HTML 構建的，因爲它具有許多有用而強大的功能，作爲開發人員，你可以從中受益以創建網頁。話雖如此，HTML 還具有可以附加到元素或標籤的屬性，以便向 HTML 元素添加某些交互功能。

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

1、accept

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

例如，我們可以接受僅上傳 jpg 並上傳 png 到我們的服務器。

示例如下：

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

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

2、multiple

multiple 屬性可以附加到標記 和 < select > 中。它允許用戶輸入多個值。

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

示例如下：

<input type =“ file” multiple />

3、contenteditable

該屬性 contenteditable 用於使 HTML 內容在網頁上可編輯。基本上，它允許用戶編輯具有 contenteditable 屬性的頁面元素。

示例如下：

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

上面的示例使我們可以編輯網頁上的列表。

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

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

4、Download

download 屬性在 HTML 中指定當用戶單擊鏈接時將下載鏈接。此屬性允許用戶從你的網站下載文件。

示例如下：

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

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

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

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

5、translate

translate 屬性用於告訴內容是否應該翻譯。可以將其附加到所有 HTML 標記，因爲它是全局屬性。

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

這是代碼示例：

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

6、poster

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

代碼示例如下：

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

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

7、pattern

通過使用 pattern 屬性，你可以輕鬆地將正則表達式添加到表單內的輸入元素。

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

代碼示例如下：

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

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

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

結論

這些 HTML 屬性非常有用並且非常重要。它們可以使你向 HTML 元素添加額外的有用功能。這就是爲什麼我鼓勵你從其他資源中瞭解更多屬性的原因。

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/5vVD7lWPLbn5oyzhLnHjdg

猜你喜歡