15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 您不知道的12个HTML标签

您不知道的12个HTML标签

时间:2023-09-26 20:06:01 | 来源:网站运营

时间:2023-09-26 20:06:01 来源:网站运营

您不知道的12个HTML标签:HTML(超文本标记语言)用于结合使用超文本和标记语言来设计网页。

在这篇文章中,我们将看一些可以使用HTML完成的很酷的事情。让我们看一些html标记,您可能甚至不知道它们是否存在。应该利用今天。

让我们开始吧

1.<figure>标签

这可以用来标记照片。该<figure>元素也可以包含一个<figcaption>

<figure> <img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" alt="Person using lack laptop computer on brown wooden table" style="width:100%"> <figcaption>Person using lack laptop computer on brown wooden table</figcaption></figure>

2.<audio>标签

<audio>元素提供了一种在不使用任何其他插件的情况下将音频资源添加到网页的方法。⁣用于播放声音,就像播放音乐或音频流一样。它支持mp3,wav和ogg。tag标记中包含一个后备文本,以向不支持该元素的浏览器显示。⁣default默认情况下,浏览器不显示任何控件。⁣要增加用户播放,暂停,调节音量等功能,可以使用'controls'属性。

<audio controls> <source src="music.mp4" type="audio/mp4"> <source src="mucis.ogg" type="audio/ogg"></audio>

3.<video>标签

这使您可以嵌入媒体播放器以播放视频。它用于播放视频片段或视频流,而无需嵌入youtube或vimeo视频。它支持mp4,webm和ogg。

例如,您可以将视频上传到AWS S3并使用<video>标签将其嵌入到您的网站中。

您还可以指定某些属性,例如宽度,高度,自动播放,循环,控件等。

<video width="960" height="540" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"></video>

4.<progress>标签

<progress>标签代表一个任务的进度。

<progress>标签不应与混淆<meter>标签(其代表表压)。它具有两个属性值和最大值。

<progress value="57" max="100"></progress>

5.<meter>标签

您可以使用仪表元素来测量给定范围(仪表)内的数据。

这可以通过最小值和最大值或百分比来实现。

<meter value="7" min="0" max="10">7 out of 10</meter><meter value="0.4">40%</meter>

6.<data>标签

它指定元素内容的机器可读翻译。它还提供了人类可读的文本。

<ul> <li> <data value="010">Dogs</data> </li> <li> <data value="011">Cats</data> </li></ul>

7.<datalist>标签

<datalist>标签用于在表单的输入字段中提供自动完成功能。⁣specifies指定一组供用户输入的预定义建议。

<input type="text" list="days" placeholder="Choose a Day"><datalist id="days"> <option value="Monday"></option> <option value="Tuesday"></option> <option value="Wednesday"></option> <option value="Thursday"></option> <option value="Friday"></option> <option value="Saturday"></option> <option value="Sunday"></option></datalist>

8.<noscript>标签

<noscript>仅当禁用JavaScript时,浏览器才会呈现元素内的内容。它为无法使用JavaScript的组件提供了备用机制。

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

9.<detail>标签

<⁣detail>当需要提供有关用户可以选择隐藏或查看的主题的额外信息时,该标签用于制作可折叠部分。uses它使用<summary>标记来指定标题,该标题可以单击以展开或折叠详细信息。

<details> <summary>Click To Open</summary> Hey, I am natively collapsable section. My content remains hidden till you click on summary.</details>

10.<wbr>标签

<wbr>标记代表分词 机会,该词在单词太长且您不希望浏览器在随机位置将其分解时使用,有助于在想要的位置分解该词。⁣

<p>This is a lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnngggggggggggggggggggggggggggggggggggggggggg<wbr>word.</p>

11.<mark>标签

<mark> 是一个非常简单实用的本机标记,用于在没有任何CSS的情况下在您的网页中添加一些精美的文字。

<p>HTML can do <mark> MAGIC </mark>.</p>

12.<ins><del>标签

<ins>元素表示已添加到文档 <del>中的文本。⁣⁣用于已从文档中删除的文本

<p>Jatin is a <del>spider man</del> <ins>web developer</ins> from India.</p>
作者:Jatin Rao
译者:花灯姑娘
链接:12 HTML Tags You Don't Know
来源:hashnode

关键词:标签

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭