mkimq

你可能还没有听说过的 HTML 属性

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

multiple

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

  • 在<select>标签中使用 multiple 属性
<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 键)。

<input type="file" multiple />
  • 使用 multiple 属性进行电子邮件输入

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

<input type="email" multiple />

contenteditable

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

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

spellcheck

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

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

download

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

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

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

accept

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

  • 接受音频文件
<input type="file" id="audioFile" accept="audio/*" />
  • 接受视频文件
<input type="file" id="videoFile" accept="video/*" />
  • 接受图像文件
<input type="file" id="imageFile" accept="image/*" />
  • 接受 Microsoft Word 文件
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
  • 接受 PNG 或 JPEG 文件
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg" />
  • 接受 PDF 文件
<input type="file" id="pdfFile" accept=".pdf" />

translate

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

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

poster

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

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

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

inputmode

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

  • None
<input type="text" inputmode="none" />
  • Numeric
<input type="text" inputmode="numeric" />
  • Tel
<input type="text" inputmode="tel" />
  • Decimal
<input type="text" inputmode="decimal" />
  • Email
<input type="text" inputmode="email" />
  • URL
<input type="text" inputmode="url" />
  • Search
<input type="text" inputmode="search" />

pattern

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

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

autocomplete

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

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

autofocus

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

  • 在 input 元素中使用 autofocus 属性与

  • 在 select 元素中使用 autofocus 属性

<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 属性
<textarea autofocus>
输入您想要显示的内容
</textarea>

Readonly

指定输入字段是只读的。

<input type="text" id="sports" name="sports" value="golf" readonly>

用户仍然可以选择它、突出显示它并从中复制文本。要禁止这些操作，请改用 disabled 属性。

Hidden

指定元素是否可见。

<p hidden>This text is hidden</p>

Loading

指定浏览器是应该立即加载图像还是推迟加载屏幕外图像，例如，直到用户滚动到它们附近。

<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">

Onerror

如果未加载原件，则允许添加备用图像。

<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>

如果后备图像本身不可用， this.onerror=null 用于防止循环。

Controls

指定是否应在播放器上显示音频/视频控件。

<audio controls<source src="track11.mp3"  type="audio/mpeg"></audio>

Autoplay

确保音频/视频在加载后立即自动开始播放。

<video autoplaysrc="https://cdn.mysite.com/media/myvideo.mp4"poster="image.png"></video>

Loop

指定音频/视频将在每次完成时重新开始。

<audio loop<source src="track323.mp3"  type="audio/mpeg"></audio>

Cite

指向内容的来源、更改或删除的参考点。

<blockquote cite="https://mysite.com/original-source-url">
    <p>Some awesome quote</p>
</blockquote>

Datetime

它指定删除/插入文本的日期和时间。


<p>  My plans for 2021 include visiting Thailand,
<del datetime="2021-01-01T18:21">creating 6 courses,</del>
<ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on
<time datetime="2021-12-31">
</time>.</p>

当与 <time>元素一起使用时，它表示机器可读格式的日期/时间。

Async

确保脚本与页面的其余部分异步执行。

<script src="script.js" async></script>

Defer

确保在页面完成解析后执行脚本。

<script src="script.js" defer></script>

Draggable

指定元素是否可拖动。


<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {  var data = e.dataTransfer.getData("text");  
e.target.appendChild(document.getElementById(data));}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p>
贡献者: mankueng