10 个不经常使用但你有必要知道的 html 标签

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

---

概述

HTML 也被称为超文本记语言（ hyper text markup language ）是为网页建立和其余可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息，如标题、段落和列表等，也可用来在必定程度上描述文档的外观和语义。

今天咱们将介绍您可能不知道的十个 HTML 标签。虽然不经常使用，可是一旦遇到使用场景使用起来将是很是方便的。

若是您想了解有关 HTML 的更多信息，能够访问 W3Schools 获取更多 HTML 信息。

audio：

<audio> 标签订义声音，好比音乐或其余音频流。目前支持三种文件格式：MP3，WAV 和 OGG。

<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

点击此处查看结果

blockquote

<blockquote> 标签订义块引用。 <blockquote> 与 </blockquote> 之间的全部文本都会从常规文本中分离出来，常常会在左、右两边进行缩进（增长外边距），并且有时会使用斜体。也就是说，块引用拥有它们本身的空间。

Here comes a long quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

请注意，浏览器在 blockquote 元素先后添加了换行，并增长了外边距。

点击此处查看结果

output

<output> 标签订义不一样类型的输出，好比脚本的输出。标签包含如下属性 for 规定一个或多个元素的 id 列表，以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系。 form 规定 <output> 元素所属的一个或多个表单的 id 列表，以空格分隔。 name 规定 <output> 元素的名称。 Internet Explorer 不支持 <output> 标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

点击此处查看结果

picture

<picture> 元素经过包含零或多个 <source> 元素和一个 <img> 元素来为不一样的显示 /设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，若是没有匹配的，就选择 <img> 元素的 src 属性中的 URL。而后，所选图像呈如今<img>元素占据的空间中。

picture 标签的属性以下：

srcset （必需） - 定义要显示的图像的 URL

media - 接受一般在 CSS 中定义的任何有效媒体查询（ media queries ）

例以下面所示

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

根据浏览器的最小宽度的变化，picture 将显示不一样的图片

点击此处查看结果

progress

<progress> 标签标示任务的进度（进程）。用于进度条显示

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

点击此处查看结果

meter

<meter> 标签订义已知范围或分数值内的标量测量。也被称为 gauge （尺度）。也能够用于进度条的显示

<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>

点击此处查看结果

template

<template>标记内的内容自己是对用户隐藏的，经过 JS 能够将其用于重复实例化显示。至关有定义了一个模板，该模板能够经过 JS 重复被调用展现。

例以下面定义模板：

<template>
    <img src=” icon.jpg ”>
</template>

在 JS 中能够经过 cloneNode() 方法，来重复实例化显示该模板中的内容：

const template = document.querySelecor(‘ template ’);
const templateClone = myTemplate.content.cloneNode(true);
document.body.appendChild(templateClone);

time

<time> 标签订义公历的时间（ 24 小时制）或日期，时间和时区偏移是可选的。

time 主要做用在于能够方便的被爬虫抓取，从而得到相应的数据。

time 自己对页面布局没有任何影响

例如：

<p>
咱们在天天早上 <time>9:00</time> 开始营业。
</p>

video

与<audio>相对应，<video> 标签订义视频，好比电影片断或其余视频流。

<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

点击此处查看结果

wbr

wbr 是 Word Break Opportunity 的简写，规定在文本中的何处适合添加换行符。

例以下面的对于较长的单词 XMLHttpRequest 但愿在换行时候可以截断换行而不是整个换行的状况下可使用，下面的代码在换行的时候截断成 XML Http Request 分别进行换行，而不是 XMLHttpRequest 整个进行换行。

<p>
若是想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

点击此处查看结果

---

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

了解可嵌入您系统的在线 Excel，请前往SpreadJS 纯前端表格控件