广州蓝景分享—8个HTML使用技巧

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>

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

软今天详细介绍了改进后的拼写检查功能，并已经在最新发布的Edge 83稳定版中发布。这项新功能称之为Windows Spellcheck，替代了Edge浏览器中现有的Hunspell拼写检查体验。

这项新功能是基于所有Chromium浏览器开发的，支持Windows8.1以及更高版本系统。微软表示Windows Spellcheck具备众多优势，包括支持额外的语言和方言、共享的自定义词典，以及对电子邮件地址、缩略语和URL的支持也得到了改进。

下面是Hunspell Spellcheck和Windows Spellcheck的对比分析。

该拼写检查功能在Edge新版中默认启用，Windows的首选语言设置将在浏览器中自动继承。您可以导航到 edge://settings/languages 页面，以便配置所有在您输入时将被拼写检查的语言。此外，您还可以通过导航到 "时间和语言">"语言 "并选择 "添加首选语言"，在Windows设置中安装其他语言进行拼写检查。

头条创作挑战赛#

本文同步本人掘金平台的原创翻译文章：https://juejin.cn/post/7085863634449989639

HTML 是 web 开发的基石。然而很多急于速成的开发者对其浅尝即止，立马去学习 CSS, JS 或其他，错失了其潜力。

下面是很多初学者对 HTML 不熟悉的属性。

也许拥有几年的开发者都不知道。说的就是俺

1. Multiple

multiple 属性是一个布尔值，允许用户在 <input> 标签操作，<input> 标签的类型 type 是 file 或者 email。当然，你也可以用在 <select> 标签。

对于 email 类型的 <input>，添加上 multiple 属性，你输入的邮箱值需要用 , 分隔开，内容不允许有空格。

对于 file 类型的 <input>，你可以多选文件上传。

<input type="file" multiple />
复制代码

2. Accept

<input> 元素有 accept 属性，它允许你指明上传文件 file 的类型。

你需要通过 , 来分割文件类型。

<input type="file" accept=".png, .jpg" />
复制代码

当然，你还可以使用它上传音频或视频。

3. Contenteditable

contenteditable 是一个全局的属性（对于所有的 HTML 元素都适用），它可以使得 HTML 的可被用户编辑。

需要注意的是，它仅对可见内容和DOM的内容进行更改。

<div contenteditable="true">I'm a cool editable div ;)</div>
复制代码

当然，如果你想使得整个文档的内容都可以编辑，你可以直接使用 document.designMode = "on"，关闭编辑则使用 document.designMode = "off"。如果你想保存整个文档或者某个编辑内容，可以直接通过 DOM 操作完成。

4. Spellcheck

spellcheck 也是一个全局的属性，可以检验 HTML 内容是否有拼写的语法错误，你可以用在 input 或其他元素上。

⚠️注意：通常不检查不可编辑元素的拼写错误，即使 spellcheck 被设置为 true 并且浏览器支持检查。

<!-- 不检查 -->
<p spellcheck="true">
Thanks furr checkinng my speling :)</p>

<!-- 检查 -->
<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>
复制代码

5. Translate

translate 告诉浏览器指定的内容是否应该被翻译。

比如：你想阻止谷歌自动翻译你公司名称或者品牌名称。

<footer><p translate="no">LearnPine</p></footer>
复制代码

6. Poster

当视频正在加载中或者当用户开始播放视频前，我们可以用 poster 属性设定指定的视频海报。

如果 poster 未指定图片，则视频的第一帧可用之后作为海报显示。

<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>
复制代码

7. Download

download 属性结合 <a> 元素，告诉浏览器下载的 URL，而不是导航到它，提示用户将其下载到本地。

你还可以命名文件。

<a href="index.html" download="fileName">Download me :)</a>
复制代码

url 指向 video，image 资源，不会直接下载，会进行跳转

原文 7 useful HTML attributes you may not know

Not Bad!

在线咨询

上一篇：什么是 HTML？
下一篇：前端JavaScript获取当前时间的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商