后端开发教程 - Java、Spring Boot 实战 - msg200.com
7 个有趣的 HTML 属性（你可能不知道）
allow在 <iframe> 中cite在 <blockquote> （以及 <del>、<ins> 或 <q>）中datetime在 <ins> 和 <del> 中headers在 <th> 和 <td> 中inputmode在 <textarea> 中或使用“contenteditable”ping在<a>中poster在<视频>中
allow
该allow属性定义了一个策略，其中包含可用的功能。它可以具有的iframe一些值包括：加速度计、全屏、麦克风、USB……
“允许”重新定义了如何将功能包含在其中，iframe.这是前进的方式并留下属性allowfullscreen或allowpaymentrequest遗留。
使用示例：
<!--
The page in the iframe will be able to use the camera,
accelerometer, gyroscope, and geolocation; but it won't be
able to use the microphone or the magnetometer, for example.
-->
<iframe src="/url-to-load"
title="demo"
width="700"
height="400"
allow="accelerometer; camera; geolocation; gyroscope">
</iframe>
cite
这是 的一个有趣属性<blockquote>，但它也可以用于<del>、<ins>或<q>（引用的内联版本）。
该值将是一个包含在线资源的 URL，其中包含引用的参考（或在<ins>和的情况下<del>分别包含插入/删除信息）。
它不是必需的属性，但如果我们引用在线文章或文档，它可能会很有趣。
使用示例：
<blockquote cite="https://dev.to/alvaromontoro/don-t-just-practice-coding-n0d">
<p>
Coding is fundamental for a developer, but there's more
to it than just that: soft skills are essential too!
Actually, social and communication skills are almost as
critical and not as easy to master.
</p>
</blockquote>
datetime
它通常datetime与 一起使用<time>，但<ins>和<del>元素也会使用它！
对于ins和del，datetime将指示插入/删除的时刻，并且必须是带有可选时间字符串的有效日期。
使用示例：
<p>
Marie enjoys reading books, visiting new places,
<del datetime="2010-07-10T19:00">listening to BSB,</del>
<ins datetime="2020-11-08T12:00">programming in HTML,</ins>
and a nice cup of coffee.
</p>
headers
表格单元格（<td>或<th>）可以由不同的标题定义（例如，最常见的是列标题和行标题），但在复杂的表格中，可能不止这两个标题。headers属性将包含应用于给定单元格的标题 ID 列表。
此属性在复杂表格中非常有用，因为它为机器提供了上下文。它对于辅助技术或增强体验可能很有用，但遗憾的是，它的支持并不完善。因此请谨慎使用！
使用示例：
<table>
<caption>Weekend plan</caption>
<thead>
<tr>
<th></th>
<th id="saturday">Saturday</th>
<th id="sunday">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td></td><th id="morning" colspan="2">Morning</th>
</tr>
<tr>
<th id="hour08">8:00-10:00</th>
<td headers="saturday morning hour08">Soccer practice</td>
<td headers="sunday morning hour08">Reading</td>
</tr>
<tr>
<th id="hour10">10:00-12:00</th>
<td headers="saturday morning hour10">Basketball game</td>
<td headers="sunday morning hour10">Brunch</td>
</tr>
</tbody>
<tbody>
<tr>
<td></td><th id="afternoon" colspan="2">Afternoon</th>
</tr>
<tr>
<th id="hour12">12:00-14:00</th>
<td headers="saturday afternoon hour12">Siesta</td>
<td headers="sunday afternoon hour12">Golf</td>
</tr>
<tr>
<th id="hour14">14:00-18:00</th>
<td headers="saturday afternoon hour14">Party!</td>
<td headers="sunday afternoon hour14">Monday readiness</td>
</tr>
</tbody>
</table>
inputmode
该<input>标签具有不同的类型，会在移动设备上触发不同的键盘输入。例如，如果您在移动设备上打开键盘时选择“数字”类型，则键盘只会显示数字。
<textarea>元素contenteditable可以通过使用全局属性获得类似的效果inputmode。因此，开发人员可以决定在可编辑元素获得焦点时打开哪种类型的键盘。
该inputmode属性可以具有以下值：十进制、电子邮件、无（焦点时不显示键盘）、数字、搜索、电话、文本（默认）或 url。
使用示例：
<textarea inputmode="none" name="myTextarea"></textarea>
<div contenteditable inputmode="decimal"></div>
ping
该<a>标签具有ping属性，用于指定单击链接时将调用的 URL。“ping”也可以在图像地图内的区域中使用。
该 URL 将收到一条包含“PING”（字面意思）内容的 POST 消息，该消息可用于跟踪目的并提供有关访问者及其如何使用该网站的统计数据和信息。
此属性的一个大问题是Firefox 不支持它，这使得很多用户无法使用它。
使用示例：
<a href="https://twitter.com/alvaro_montoro" ping="/url-stats.php">
Check my twitter profile
</a>
poster
开发人员在网页上添加视频时常犯的一个（相对）错误是，点击后用图片替换掉原先的图片<video>。这种做法既不灵活，也效率低下，因为视频只有在被添加到页面上后才会开始加载。
属性poster才是最佳选择。它将是图片的 URL，在视频开始播放时被替换。它看起来一样，但它提供了对视频及其加载方式的更多控制。
使用示例：
<video controls poster="link-to-poster-image.jpg">
<source src="link-to-video.mp4" type="video/mp4">
<source src="link-to-video.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>