20 天学习 HTML（了解 HTML 的 20 个奇妙之处）第 2 部分

第 11 天-拖放

第 12 天-进度和计量要素

第 13 天-播放一些音乐

第 14 天-显示插入和删除

第 15 天-单词分解机会

第 16 天-最佳实践

第 17 天-在表单中添加颜色选择器和日期选择器

第 18 天-设置快捷键

第 19 天-将输入字段设为只读

第 20 天 - 改善无障碍体验的方法

第 11 天-拖放

任何 HTML 元素都可以被拖放，而不管其原生行为如何。⁣
⁣这是通过使用全局属性draggable 来完成的，即将其值设置为 true。⁣
⁣
诸如 ondragstart、ondragover 等事件用于使元素更具功能性。⁣
⁣图像和链接默认是可拖动的。

<p draggable="true">
  Drag and Drop me on the other side!
</p>

第 12 天-进度和计量要素

1. <progress>元素：
   • 显示进度条，显示任务的完成进度。⁣⁣
   • 它有两个属性max和value。⁣⁣
   • 没有 min 属性，最小值始终为 0。⁣⁣ ⁣⁣
2. <meter>元素：
   • 显示分数值或范围内的值。⁣⁣
   • 它不仅可以显示进度（高），还可以波动（高或低）。⁣⁣
   • 具有以下属性：最大、最小、高、低、最佳。

<label for="download">Download Progress</label>
<progress id="download" max="100" value="50">
</progress>
<br />
<label for="temp">Temperature Meter:</label>
<meter id="temp" min="0" max="100" low="30" high="60" optimum="80" value="10">
</meter>

第 13 天-播放一些音乐

⁣<audio>元素提供了一种无需使用任何其他插件即可将音频资源添加到网页的方法。⁣
只需在 src 属性中包含媒体路径即可。⁣
⁣
标签内包含一个后备文本，用于向不支持该元素的浏览器显示。⁣
⁣
默认情况下，浏览器不显示任何控件。⁣
要为用户添加播放、暂停、调节音量等功能，可以使用“controls”属性。

<audio controls src="dope_music.mp3">
  Your browser does not support the audio element.
</audio>

第 14 天-显示插入和删除

<ins>元素表示已添加到文档的文本。⁣⁣
<del>用于已从文档中删除的文本。⁣⁣

到目前为止，这两者都存在可访问性问题，可以通过使用带有 CSS 内容属性的 before 和 after 伪元素来克服。

<p>Go to a
  <del>movie</del>
  <ins>conference</ins>
  this weekend.
</p>

第 15 天-单词分解机会

⁣当一个单词太长，而您又不希望浏览器在随机的位置将其断开时，<wbr>有助于在您想要的位置断开该单词。⁣
⁣
该<wbr>元素指定文本中适合添加换行符的位置。

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

第 16 天-最佳实践

这是寻找编写可维护和可扩展代码的 HTML 最佳实践的好地方。

HTML 最佳实践

第 17 天-在表单中添加颜色选择器和日期选择器

⁣<input>具有 type="color" 属性的元素提供颜色选择器界面，或者用户也可以以十六进制格式输入颜色。⁣
⁣
<input>具有 type="date" 属性的元素创建日期选择器或让用户输入日期。⁣

<label>Choose Color:
</label>
<input type="color" value="#ffffff" />

第 18 天-设置快捷键

⁣accesskey是一个全局属性，用于指定激活元素的快捷键
。⁣⁣
可以根据浏览器以多种方式访问​​快捷键，例如：⁣
ctrl + alt + accesskey⁣
OR⁣
alt + accesskey
OR⁣
alt + shift + accesskey

第 19 天-将输入字段设为只读

⁣该readonly属性可防止用户编辑输入字段，即，它使元素不可变。⁣
⁣
这些只读元素可以通过：read-only 和：read-write 伪类进行样式设置。⁣
⁣
它与禁用属性不同，因为具有只读属性的元素是可聚焦的，而禁用属性则不是这样。

<label for="country">Country:
</label>
<input type="text" name="country" value="India" readonly>

第 20 天 - 改善无障碍体验的方法

1. 使用语义元素。⁣ ⁣
2. 每个表单控件都应该有一个标签。⁣ ⁣
3. 图像应包含替代文本。⁣ ⁣
4. 使用 tabindex="0" 添加通常不会获得焦点的元素，例如<div>或<span>。⁣ ⁣
5. 使用 ARIA 角色和属性来提供额外的含义。例如，role="search" 用于搜索功能。

感谢阅读❤

推特
Instagram