10 個不常用但你有必要知道的 html 標籤

摘要： 轉載請註明出處：葡萄城官網 ，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 概述 HTML 也被稱為超文字記語言（ hyper text markup language ）是為網頁建立和其他可在網頁瀏覽器中看到的資訊設計的一種標記語言。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 純前端表格控制元件