11个前端程序员必备的有用HTML属性

我不是女神ヾ 2024-03-17 16:50 56阅读 0赞

HTML 是网络的基石。 了解这种标记语言的一些鲜为人知但有用的部分可以让您的前端工作更轻松。 HTML 属性提供了多种功能，可以帮助您充分利用 HTML。 它定义了 HTML 元素的附加特征或属性。在本文中，将带您了解 11 个您可能还没有听说过的 HTML 属性。

#### 1. multiple ####

此属性允许用户输入多个值。 您可以将 multiple 属性与 <input> 标签和 <select> 标签一起使用。 此布尔属性仅对电子邮件或文件输入类型有效。

**在 <select> 标签中使用 multiple 属性**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7</p> </td> 
   <td> <p>&lt;label&nbsp;for="language"&gt;Select languages:&lt;/label&gt;<br> &lt;select name="language"&nbsp;id="language"&nbsp;multiple&gt;<br> &lt;option value="C++"&gt;C++&lt;/option&gt;<br> &lt;option value="Python"&gt;Python&lt;/option&gt;<br> &lt;option value="JavaScript"&gt;JavaScript&lt;/option&gt;<br> &lt;option value="Java"&gt;Java&lt;/option&gt;<br> &lt;/select&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**使用 multiple 属性进行文件输入**

通过对文件输入使用 multiple 属性，您可以选择多个文件（通过按住 Shift 或 Ctrl 键）。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;multiple&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**使用 multiple 属性进行电子邮件输入**

通过对电子邮件输入使用 multiple 属性，您可以输入以逗号分隔的电子邮件地址列表。 将从列表中的每个地址中删除所有空格。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="email"&nbsp;multiple&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 2.contenteditable ####

您可以使用 contenteditable 属性使网页上的 HTML 内容可编辑。 这是一个全局属性，即它对所有 HTML 元素都是通用的。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3</p> </td> 
   <td> <p>&lt;p contenteditable="true"&gt;<br> 在这里您可以编辑您想输入的内容<br> &lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 3.spellcheck ####

spellcheck 属性指定是否可以检查元素的拼写错误。 您可以对 <textarea> 元素中的文本、可编辑元素中的文本或输入元素中的文本（密码除外）中的文本进行拼写检查。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3</p> </td> 
   <td> <p>&lt;p contenteditable="true"&nbsp;spellcheck="true"&gt;<br> 在这里输入您想拼写检查的内容<br> &lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 4.download ####

您可以使用下载属性下载资源。 download 属性告诉浏览器下载指定的 URL 而不是导航到它。 您可以将下载属性与 <a> 标签和 <area> 标签一起使用。

注意：下载属性仅适用于同源 URL。 它遵循同源策略的规则。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;a href="xyz.png"&nbsp;download="myImage"&gt;下载&lt;/a&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 5. accept ####

<input> 标签的 accept 属性指定用户可以上传的文件类型。 您可以指定一个或多个文件类型的逗号分隔列表作为其值。

**接受音频文件**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;id="audioFile"&nbsp;accept="audio/*"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**接受视频文件**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;id="videoFile"&nbsp;accept="video/*"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**接受图像文件**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;id="imageFile"&nbsp;accept="image/*"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**接受 Microsoft Word 文件**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;id="docpicker"<br> accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**接受 PNG 或 JPEG 文件**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;id="imageFile"&nbsp;accept=".png, .jpg, .jpeg"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**接受 PDF 文件**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="file"&nbsp;id="pdfFile"&nbsp;accept=".pdf"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 6. translate ####

translate 属性告诉浏览器在页面本地化时该元素是否应该被翻译。 它可以有 2 个值：“是”或“否”。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3</p> </td> 
   <td> <p>&lt;p translate="no"&gt;<br> 输入您想翻译或者不需要翻译的内容<br> &lt;/p&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 7.poster ####

poster 属性用于在视频下载或用户播放视频之前显示图像。

注意：如果您不指定任何内容，则在第一帧可用之前不会显示任何内容。 当第一帧可用时，它显示为海报帧。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4</p> </td> 
   <td> <p>&lt;video controls<br> src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"<br> poster="posterImage.png"&gt;<br> &lt;/video&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 8.inputmode ####

inputmode 属性指示浏览器在用户选择任何 input 或 textarea 元素时显示哪个键盘。 此属性接受各种值：

**None**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="none"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**Numeric**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="numeric"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**Tel**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="tel"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**Decimal**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="decimal"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**Email**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="email"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**URL**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="url"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**Search**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;inputmode="search"&nbsp;/&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 9. pattern ####

<input> 元素的模式属性允许您指定一个正则表达式，元素的值将根据该正则表达式进行验证。 您可以将模式属性与多种输入类型一起使用，例如文本、日期、搜索、URL、电话、电子邮件和密码。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3</p> </td> 
   <td> <p>&lt;form&gt;<br> &lt;input name="username"&nbsp;id="username"&nbsp;pattern="[A-Za-z0-9]+"&gt;<br> &lt;/form&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 10.autocomplete ####

autocomplete 属性指定浏览器是否应根据用户输入自动完成输入。 您可以将 autocomplete 属性用于多种输入类型，例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。 您可以将此属性与 <input> 元素或 <form> 元素一起使用。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input name="credit-card-number"&nbsp;id="credit-card-number"&nbsp;autocomplete="off"&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 11.autofocus ####

autofocus 属性是一个布尔属性，指示元素应该专注于页面加载。 您可以将此属性与 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。

**在 input 元素中使用 autofocus 属性**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;input type="text"&nbsp;autofocus&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**在 select 元素中使用 autofocus 属性**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14</p> </td> 
   <td> <p>select name="languages"&nbsp;id="languages"&gt;<br> &lt;option value="C++"&gt;<br> C++<br> &lt;/option&gt;<br> &lt;option value="Python"&gt;<br> Python<br> &lt;/option&gt;<br> &lt;option value="JavaScript"&gt;<br> JavaScript<br> &lt;/option&gt;<br> &lt;option value="Java"&gt;<br> Java<br> &lt;/option&gt;<br> &lt;/select&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**在 textarea 元素中使用 autofocus 属性**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3</p> </td> 
   <td> <p>&lt;textarea autofocus&gt;<br> 输入您想要显示的内容<br> &lt;/textarea&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

#### 使用 JavaScript One-Liners 让您的生活更轻松 ####

单行代码有助于以更少的代码实现更多的目标。 您可以像专业人士一样使用多个 JavaScript 单行代码来编写代码。

只需一行代码，您就可以对数组进行混合、求数组的平均值、检查数组是否为空、生成随机十六进制颜色、生成随机 UUID 等等。