无聊的旧 HTML 可以实现 6 件很酷的事情🤯

感谢阅读

有没有想过HTML总是枯燥无味？才不是呢！这里有 6 个你可能不知道的HTML酷炫功能！

1. 预加载和缓存资源

想知道如何预加载和缓存资源吗？只需一行代码，就搞定了！

<link
  rel="preload"
  href="https://example.com/asset.png"
  as="image"
/>

2. 为页面添加自定义链接预览🖼️

还在为链接预览的生成方式感到困惑吗？只需要meta 标签！

<meta property="og:title" content="Page title" />
<meta
  property="og:description"
  content="Page description"
/>
<meta
  property="og:image"
  content="https://example.com/asset.png"
/>

meta 上面显示的标签使用Open Graph 协议，您可以使用任何meta 标签生成器为所有其他平台生成标签（例如：Twitter Cards）

3. 重定向到另一个链接↪️

将用户重定向到其他链接（通常在付款确认后使用）仅需一行代码！

<meta
  http-equiv="refresh"
  content="3; url=https://google.com/"
/>

上述代码将在 3 秒后将用户重定向到Google 。

4. 打电话或发邮件📞

需要链接来拨打电话或发送邮件吗？a标签来救援！

<a href="tel:+919876543210">Call</a>
<a href="mailto:user@emaul.com">Mail</a>

5. 添加颜色选择器🎨

想要在你的网站上添加颜色选择器吗？一行代码就够了，不需要复杂的库，甚至不需要JavaScript！

<input type="color" />

6.可编辑内容✏️

只需向元素添加属性，即可使任何内容可编辑。contenteditable

<p contenteditable="true">
  This is an editable paragraph
</p>

当与适当的样式一起使用时，它甚至可以用来创建所见即所得的编辑器。

注意：请注意使用此属性时可能出现的安全问题，因此如果您不知道其含义，请避开它​​。

就这些啦，朋友们！🎉

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。