继上一篇： 每位高级Web工程师都应掌握的24个强大HTML属性！(一) - 掘金 (juejin.cn) HTML的24个强大属性，我继续开始写剩余的12个属性。
13. Translate
在HTML中，Translate属性是用于指定一个元素是否应该被翻译的属性。
添加图片注释，不超过 140 字（可选）
Translate属性的值必须是布尔值，yes或no。 Translate属性的默认值为yes，表示元素需要被翻译。 当Translate属性的值为no时，元素不需要被翻译。 Translate属性的支持程度因浏览器而异，不同浏览器可能具有不同的翻译算法和字典。 在使用Translate属性时，需要注意安全问题，以避免XSS攻击和恶意脚本注入。
如果一个元素设置了Translate属性，浏览器将根据该属性的值决定是否翻译元素的内容。Translate属性通常在多语言版本的网站中使用，用于控制哪些元素需要被翻译，哪些元素不需要被翻译。
14. Loading
在HTML中，loading属性是一个新的属性，用于指定浏览器在加载资源时的优先级。
添加图片注释，不超过 140 字（可选）
这个属性可以应用于标签如、、、和。
lazy: 表示资源应该在页面加载后进行懒加载。这是默认值。 eager: 表示资源应该在页面加载时立即加载。 auto: 表示浏览器应该自行决定何时加载资源。
loading属性并不被所有浏览器支持，因此在使用它们时需要进行兼容性检查。
15. Onerror
onerror是一个JavaScript事件处理程序，它在JavaScript发生错误时触发。
添加图片注释，不超过 140 字（可选）
onerror事件处理程序可以添加到window对象上，用于全局捕获JavaScript错误。这意味着无论在页面的哪个部分发生错误，都可以使用onerror来捕获和处理它。这对于调试和错误报告非常有用。
在onerror事件处理程序中，通常可以访问以下信息：
message: 错误信息的描述。 source: 发生错误的脚本的URL。 lineno: 发生错误的行号。 colno: 发生错误的列号。 error: 包含有关错误的详细信息的Error对象。
onerror事件处理程序只能捕获那些没有被其他错误处理程序捕获的JavaScript错误。最好在代码中使用try-catch语句来捕获和处理JavaScript错误，因为这样可以更精确地处理错误并提供更好的错误消息和调试信息。
16. Poster
poster是HTML5的标签的一个属性，它用于指定在视频加载和播放之前显示的图像。这个图像通常用作视频的封面，提供了视频内容的预览。当用户点击播放按钮之前，这个封面图像会显示在视频播放器上。这有助于提供更好的用户体验，并让用户知道他们将要观看的内容。
添加图片注释，不超过 140 字（可选）
poster属性只适用于标签，而不适用于标签。它通常用于提供视频的预览图像或缩略图。这个预览图像将在用户点击播放按钮之前显示在视频播放器上，以提供视频内容的预览。对于音频，通常没有类似的预览图像需求。
17. Controls
controls是HTML5中和标签的一个属性，用于指定是否显示媒体播放器的控件。当将controls属性设置为"controls"时，浏览器会自动显示媒体播放器的控制面板，包括播放/暂停按钮、音量控制、进度条等，使用户能够控制媒体的播放和调整音量。这提供了更好的用户体验，让用户能够方便地操作媒体内容。如果不设置controls属性或将其设置为其他值，媒体播放器的控件将不会显示。
添加图片注释，不超过 140 字（可选）
如果将controls属性设置为"controls"，则会在媒体播放器上显示控件，如播放/暂停按钮、音量控制、进度条等。这些控件允许用户控制媒体的播放、暂停、音量调整和查看播放进度，提供了更方便的媒体播放体验。
<!DOCTYPE html>
<html>
<head>
<title>Controls Example</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`
controls属性仅在支持HTML5的浏览器中可用。如果浏览器不支持HTML5，控制面板将不会显示。因此，在使用HTML5的和标签以及controls属性时，需要考虑浏览器兼容性，以确保在不同的浏览器中正常显示媒体控件。通常，现代浏览器都支持HTML5和controls属性，但仍然需要谨慎处理兼容性问题。
18. Autoplay
autoplay是HTML5中和标签的一个属性，用于指定媒体是否应该在页面加载时自动播放。当将autoplay属性设置为"autoplay"时，媒体将在页面加载后立即开始播放，而无需用户手动点击播放按钮。这对于自动播放视频或音频内容很有用，如广告、背景音乐等。需要注意的是，自动播放媒体可能会干扰用户体验，因此在使用时需要谨慎考虑。在某些浏览器中，自动播放功能可能会受到限制，通常要求用户与页面进行互动才能启用自动播放。
添加图片注释，不超过 140 字（可选）
<!DOCTYPE html>
<html>
<head>
<title>Autoplay Example</title>
</head>
<body>
<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`
自动播放可能会对用户体验产生负面影响，因此在使用autoplay属性时需要谨慎。在某些情况下，浏览器可能会阻止自动播放，例如在移动设备上，用户必须首先与页面进行互动才能启用自动播放。这是为了减少不必要的干扰和数据消耗，以提高用户的控制权和隐私。因此，在决定是否使用autoplay属性时，需要考虑用户的体验和浏览器的兼容性，并在必要时提供手动播放选项。
19. Loop
loop是HTML5中和标签的一个属性，用于指定媒体在播放结束后是否应该循环播放。当将loop属性设置为"loop"时，媒体会在播放结束后自动重新开始播放，循环播放媒体内容。这对于需要无限循环播放音乐、视频或动画的情况非常有用。通过将loop属性应用于媒体标签，您可以实现持续的媒体循环播放效果。
添加图片注释，不超过 140 字（可选）
<!DOCTYPE html>
<html>
<head>
<title>Loop Example</title>
</head>
<body>
<video width="320" height="240" loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`
循环播放可能会对用户体验产生负面影响，因此在使用loop属性时需要谨慎。
20. Cite
cite是HTML中的一个全局属性，它可以用于指定引文的来源或引用的资源的URL。通常，cite属性用于标签，以提供引文的链接或引用的资源的URL。这有助于读者查找原始信息，从而提高引文的可信度和可访问性。通过cite属性，您可以提供有关引文来源的重要信息，如作者、出版日期、网页链接等。这有助于支持引文的准确性和透明度。
添加图片注释，不超过 140 字（可选）
cite属性的值应该是一个指向引用来源的URL。
cite属性可以应用于标签，如
、、等。如果引用的来源不是URL，那么cite属性的值可以设置为描述引用来源的字符串。<!DOCTYPE html> <html> <head> <title>Cite Example</title> </head> <body> <blockquote cite="https://www.example.com/quote"> This is a quote from an external source. </blockquote> <q cite="https://www.example.com/quote"> This is a short quote from an external source. </q> <del cite="https://www.example.com/deleted"> This text has been deleted from an external source. </del> <ins cite="https://www.example.com/inserted"> This text has been inserted from an external source. </ins> </body> </html>cite属性不会自动创建链接，所以如果您需要创建一个链接，需要使用标签，并将href属性设置为cite属性的值。
21. Datetime
datetime是HTML中
添加图片注释，不超过 140 字（可选）
datetime属性的值应该是一个有效的日期和时间格式，例如：YYYY-MM-DDThh:mm:ss。
datetime属性不会自动格式化日期和时间，因此您需要使用JavaScript或其他工具来格式化日期和时间。
22. Async
async是HTML中
添加图片注释，不超过 140 字（可选）
如果将async属性设置为async，脚本将以异步方式加载，不会阻止页面的解析和渲染。以异步方式加载的脚本可能在页面的其余部分加载之前执行，因此需要谨慎使用。如果脚本依赖于页面的其他部分，这可能会导致错误。因此，在使用async属性时，特别是当脚本有依赖关系时，需要小心确保脚本的执行顺序和依赖关系。
23. Defer
defer是HTML中
添加图片注释，不超过 140 字（可选）
如果将defer属性设置为defer，脚本将延迟加载，直到页面解析完成后再执行它。这意味着脚本会在页面解析时加载，但不会阻止页面的渲染，脚本会在解析完成后按顺序执行。
<!DOCTYPE html> <html> <head> <title>Defer Example</title> <script defer src="script.js"></script> </head> <body> <p>This is a paragraph.</p> </body> </html>在上面的示例中，我们将defer属性设置为defer，这将导致脚本被延迟加载。在这种情况下，脚本将在页面解析后执行，不会阻止页面的加载。这意味着脚本的执行会在页面解析和渲染完成后进行，从而提高了页面的加载性能。
24. Draggable
添加图片注释，不超过 140 字（可选）
Draggable是HTML5中的一个属性，允许用户通过拖动来移动元素。当一个元素设置为draggable时，用户可以使用鼠标或触摸屏来拖动该元素。在拖动元素时，会触发一系列事件，如dragstart、drag和dragend，这些事件可以用于实现拖放功能。
作为一名专业的前端工程师，您可能已经在项目中使用了许多上面分享的24个强大的属性中的一些属性。这些属性可以帮助改善用户界面和用户体验，根据具体项目的需求选择合适的属性非常重要。
如果喜欢我的文章，可以收藏它，并且关注我，我每天给您带来开发技巧
