整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML问题:如何实现分享URL预览?

端功能问题系列文章,点击上方合集↑

序言

大家好,我是大澈!

本文2100+,整篇阅读大约需要3分钟。

本文主要内容分三部分,如果您只需要解决问题,请阅读第一、二部分即可。如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,从此让解决问题的你不再孤单!

ello大家好,今天广州蓝景跟大家分享一些html的使用技巧。

1. 使用capture属性打开设备摄像头

正如input标签具有email、text和password属性一样,我们也可以通过一些属性打开移动设备的摄像头以捕获图像。

那就是capture属性,属性值有两个:

  • user用于前置摄像头
  • environment用于后置摄像头
<input type="file" capture="user" accept="image/*">

2. 网站自动刷新

你可以在head标签中将网站设置为定时刷新!

<head>
    <meta http-equiv="refresh" content="10">
</head>

此代码段可以实现每10秒刷新一次网站。

3. 激活拼写检查

你可以使用HTML的spellcheck属性并将其设置为true以激活拼写检查。使用lang属性指定待检查的语言。

<input type="text" spellcheck="true" lang="en">

这是一个标准属性,得到了大多数浏览器的支持。

4. 指定要上传的文件类型

你可以使用accept属性在input标签中指定允许用户上传的文件类型。

<input type="file" accept=".jpeg,.png">

5. 阻止浏览器翻译

将translate属性设置为no会阻止浏览器翻译该内容。如果你不想翻译某个短语或单词,例如logo、公司或品牌名称,那就可以应用这个属性。

<p translate="no">Brand name</p>

6. 在input标签中输入多个项目

这可以通过multiple属性来完成。

<input type="file" multiple>

适用于文件和电子邮件。如果是电子邮件,则可以用逗号分隔。

7. 为视频创建海报(缩略图)

使用poster属性,我们可以在视频加载时,或者在用户点击播放按钮之前,显示指定的缩略图。

如果不指定图片,则默认使用视频的第一帧作为缩略图。

<video poster="picture.png"></video>

8. 点击链接自动下载

如果你希望在单击目标资源的链接时下载特定资源,那就添加download属性。

<a href="image.png" download>

今天就分享到这里,想要了解更多前端技术知识,可以关注我们广州蓝景。

我们浏览网页时可能需要把网页上的内容保存下来,这时候有几种方式可以做到:1、把重要的内容复制出来;2、对网页进行截图保存,我们推荐过的截图插件如印象笔记·剪藏、Full Page Screen Capture等;3、把网页保存成PDF,如Adobe Acrobat。4、直接把网页保存成HTML。当然所有浏览器都有另存页面为HTML 文档的功能,不过可能会遇到一些问题,保存后不是各种资源如JS、CSS和图片的文件很多,就是打开后无法载入样式表,图片显示不出来,要把网页备份起来或传送给别人就很麻烦。本文要介绍的SingleFile是一款免费浏览器扩展,可以将完整的页面保存到一个HTML文件中,包括所有CSS和图片等等,让用户即使在一个HTML文档中也能浏览完整内容。除了单一页面外,SingleFile还支持保存选中的部分、非固定标签页或所有页面,操作上也非常的简单易用。如果你有保存页面的需求,可以试试这款插件。


简介

SingleFile