11 个有用的HTML 属性
1. multiple
此属性允许用户输入多个值。 您可以将 multiple 属性与 <input> 标签和 <select> 标签一起使用。 此布尔属性仅对电子邮件或文件输入类型有效。
在 <select> 标签中使用 multiple 属性
|
1
2 3 4 5 6 7 |
<label for="language">Select languages:</label>
<select name="language" id="language" multiple> <option value="C++">C++</option> <option value="Python">Python</option> <option value="JavaScript">JavaScript</option> <option value="Java">Java</option> </select> |
使用 multiple 属性进行文件输入
通过对文件输入使用 multiple 属性，您可以选择多个文件（通过按住 Shift 或 Ctrl 键）。
|
1
|
<input type="file" multiple>
|
使用 multiple 属性进行电子邮件输入
通过对电子邮件输入使用 multiple 属性，您可以输入以逗号分隔的电子邮件地址列表。 将从列表中的每个地址中删除所有空格。
|
1
|
<input type="email" multiple>
|
2.contenteditable
您可以使用 contenteditable 属性使网页上的 HTML 内容可编辑。 这是一个全局属性，即它对所有 HTML 元素都是通用的。
|
1
2 3 |
<p contenteditable="true">
在这里您可以编辑您想输入的内容 </p> |
3.spellcheck
spellcheck 属性指定是否可以检查元素的拼写错误。 您可以对 <textarea> 元素中的文本、可编辑元素中的文本或输入元素中的文本（密码除外）中的文本进行拼写检查。
|
1
2 3 |
<p contenteditable="true" spellcheck="true">
在这里输入您想拼写检查的内容 </p> |
4.download
您可以使用下载属性下载资源。 download 属性告诉浏览器下载指定的 URL 而不是导航到它。 您可以将下载属性与 <a> 标签和 <area> 标签一起使用。
注意：下载属性仅适用于同源 URL。 它遵循同源策略的规则。
|
1
|
<a href="xyz.png" download="myImage">下载</a>
|
5. accept
<input> 标签的 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
2 |
<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
2 3 |
<p translate="no">
输入您想翻译或者不需要翻译的内容 </p> |
7.poster
poster 属性用于在视频下载或用户播放视频之前显示图像。
注意：如果您不指定任何内容，则在第一帧可用之前不会显示任何内容。 当第一帧可用时，它显示为海报帧。
|
1
2 3 4 |
<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4" poster="posterImage.png"> </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" />
|
|
1
|
<input type="text" inputmode="email" />
|
URL
|
1
|
<input type="text" inputmode="url" />
|
Search
|
1
|
<input type="text" inputmode="search" />
|
9. pattern
<input> 元素的模式属性允许您指定一个正则表达式，元素的值将根据该正则表达式进行验证。 您可以将模式属性与多种输入类型一起使用，例如文本、日期、搜索、URL、电话、电子邮件和密码。
|
1
2 3 |
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> </form> |
10.autocomplete
autocomplete 属性指定浏览器是否应根据用户输入自动完成输入。 您可以将 autocomplete 属性用于多种输入类型，例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。 您可以将此属性与 <input> 元素或 <form> 元素一起使用。
|
1
|
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
|
11.autofocus
autofocus 属性是一个布尔属性，指示元素应该专注于页面加载。 您可以将此属性与 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。
在 input 元素中使用 autofocus 属性
|
1
|
<input type="text" autofocus>
|
在 select 元素中使用 autofocus 属性
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 |
select name="languages" id="languages">
<option value="C++"> C++ </option> <option value="Python"> Python </option> <option value="JavaScript"> JavaScript </option> <option value="Java"> Java </option> </select> |
在 textarea 元素中使用 autofocus 属性
|
1
2 3 |
<textarea autofocus>
输入您想要显示的内容 </textarea> |
使用 JavaScript One-Liners 让您的生活更轻松
单行代码有助于以更少的代码实现更多的目标。 您可以像专业人士一样使用多个 JavaScript 单行代码来编写代码。
只需一行代码，您就可以对数组进行混合、求数组的平均值、检查数组是否为空、生成随机十六进制颜色、生成随机 UUID 等等。
