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 純前端表格控件