HTML
HTML 是网络的基石。 了解这种标记语言的一些鲜为人知但有用的部分可以让前端工作更轻松。HTML 属性提供了多种功能，可以充分利用 HTML。 它定义了 HTML 元素的附加特征或属性。

1、**multiple**

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

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

  1. <label for="language">Select languages:</label>
  2. <select name="language" id="language" multiple>
  3.     <option value="C++">C++</option>
  4.     <option value="Python">Python</option>
  5.     <option value="JavaScript">JavaScript</option>
  6.     <option value="Java">Java</option>
  7. </select>

使用 multiple 属性进行文件输入

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

  1. <input type="file" multiple>

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

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

  1. <input type="email" multiple>

2、**contenteditable**

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

  1. <p contenteditable="true">
  2.     在这里可以编辑想输入的内容
  3. </p>

3、**spellcheck**

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

  1. <p contenteditable="true" spellcheck="true">在这里输入想拼写检查的内容</p>

4、**download**

可以使用下载属性下载资源。download 属性告诉浏览器下载指定的 URL 而不是导航到它。 可以将下载属性与 标签和 标签一起使用。
注意：下载属性仅适用于同源 URL。 它遵循同源策略的规则。

  1. <a href="xyz.png" download="myImage">下载</a>

5、**accept**

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

接受音频文件

  1. <input type="file" id="audioFile" accept="audio/*">

接受视频文件

  1. <input type="file" id="videoFile" accept="video/*">

接受图像文件

  1. <input type="file" id="imageFile" accept="image/*">

接受 Microsoft Word 文件

  1. <input type="file" id="docpicker"accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

接受 PNG 或 JPEG 文件

  1. <input type="file" id="imageFile" accept=".png, .jpg, .jpeg">

接受 PDF 文件

  1. <input type="file" id="pdfFile" accept=".pdf">

6、**translate**

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

  1. <p translate="no">输入想翻译或者不需要翻译的内容</p>

输入想翻译或者不需要翻译的内容

7、**poster**

poster 属性用于在视频下载或用户播放视频之前显示图像。
注意：如果不指定任何内容，则在第一帧可用之前不会显示任何内容。 当第一帧可用时，它显示为海报帧。

  1. <video controls
  2.              src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
  3.              poster="posterImage.png">
  4. </video>

8、**inputmode**

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

None

  1. <input type="text" inputmode="none" />

Numeric

  1. <input type="text" inputmode="numeric" />

Tel

  1. <input type="text" inputmode="tel" />

Decimal

  1. <input type="text" inputmode="decimal" />

Email

  1. <input type="text" inputmode="email" />

URL

  1. <input type="text" inputmode="url" />

Search

  1. <input type="text" inputmode="search" />

9、pattern

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

  1. <form>
  2.     <input name="username" id="username" pattern="[A-Za-z0-9]+">
  3. </form>

10、**autocomplete**

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

  1. <input name="credit-card-number" id="credit-card-number" autocomplete="off">

11、**autofocus**

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

在 input 元素中使用 autofocus 属性

在 input 元素中使用 autofocus 属性

在 select 元素中使用 autofocus 属性

  1. <select name="languages" id="languages">
  2.     <option value="C++">
  3.         C++
  4.     </option>
  5.     <option value="Python">
  6.         Python
  7.     </option>
  8.     <option value="JavaScript">
  9.         JavaScript
  10.     </option>
  11.     <option value="Java">
  12.         Java
  13.     </option>
  14. </select>

在 textarea 元素中使用 autofocus 属性

  1. <textarea autofocus>
  2.     输入想要显示的内容
  3. </textarea>