【译】HTML 中 5 大特性, 你也许没有用过(但应该了解它们)HTML 提供了许多强大的高级特性, 通过它们可以显著

• 免责声明
• 英语渣渣, 不会翻瞎翻, 本文仅供大家参考
• 原文作者: Safdar Ali
• 原文链接: Top 5 HTML Features You’re Not Using (But Should Be)

HTML 作为 WEB 开发的基础。然而呢, 大部分开发者只是了解一些简单的标签元素, 比如:

<div>, <p>, and <img>,

HTML 提供了许多强大的高级特性, 通过它们可以显著的为你的 WEB 页面增强功能和性能! 遗憾的是很多强大的特性并没有被很好的运用起来。在这篇文章里, 我们将探讨 5 个 HTML 特性, 这几个 HTML 你大概率没有使用过, 但因为使用起来。

1. Dialog 元素

该元素是一个元素的 HTML 元素, 通过它能够允许你不依赖于 JavaScript 库来创建一个对话弹窗。它能够被用于警告、确认对话框、或自定义弹层, 为弹窗提供更加语义化的方法。

这里是一个例子:

<dialog id="myDialog">
  <p>This is a modal dialog</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

使用该元素, 你能够轻松控制弹窗的开启和关闭, 也更好理解和设置样式。

兼容性补充:

2. Picture 元素

在根据不同屏幕大小和分辨率创建创建响应式图片中, 该元素在中是扮演着重要的角色。它允许你罗列出多张可用图片源, 并根据设备的特征自动选择最合适的一张进行展示。

这里是一个例子:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive Image">
</picture>

该元素为每个不同设备提供最合适的图片, 从而改善加载时间和用户体验。

兼容性补充:

补充: source 元素中 media 可以是任何媒体查询规则, 所以这里通过它其实我们还可以为不同设备的主题色(暗色/亮色)提供不同的图片

3. Output 元素

该元素设计出来, 目的是为了用于展示用户交互后的一个计算结果。当用户输入时你想要在表单中实时给出反馈(展示)情况下, 它就与其的好用。

这里是一个例子:

<!-- oninput 属性制定 output 的计算规则 -->
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> -
  <input type="number" id="b" value="0">
  = <output name="result">0</output>
</form>

该表单可以在不使用大量的 JavaScript 来创建一个简单的交互式动态表单

4. Data 元素

该元素将机器能够理解的值和人类能够理解的信息关联起来。它在为你的内容添加语义化的情况下非常的有用, 例如将你的产品 ID 和展示名称关联起来

这里是一个例子:

<p>Price: <data value="49.99">$49.99</data></p>

搜索引擎和 Web 爬虫会使用这个附件的值, 去更好的推导网页的内容, 通过该特性可能更好的提高你的网站的 SEO 成绩!

5. Details 和 Summary 元素

这两个元素是以前组合使用的, 用于创建一个可展开的内容片段。这个特性可以很好的创建 FAQs, 可折叠内容块, 或任何你想要隐藏和显示信息的场景。

这里是一个例子:

<details>
    <summary>More Information</summary>
    <p>This is the hidden content that will be revealed when you click on "More Information".</p>
</details>

这两个元素帮助你简单的通过减少用户首次获取的信息量来更好的提升用户体验, 让你的页面保持纯净和可读性。

总结

HTML 已经取得了很好的发展, 这些新特性能够很好的证明它已经变得越来越强大和灵活了。将这些鲜为人知的特性整合进你的项目中, 可以让你在不依赖第三方库或者框架的情况下创建出响应更快、动态, 对用户更友好的 Web 页面。所以尝试使用这些 HTML 特性 --- 你有可能会在开发过程中得到惊喜!!

今天就到这里了。

另外, 你可以在这儿分享你最喜欢的开发资源, 来帮助更多的初学者!