在 HTML5 推出之后，很多的 HTML 標(biāo)簽都具備了非常牛逼的功能。有些甚至可以讓我們完全脫離 JS ，通過(guò)簡(jiǎn)單的 html 就可以實(shí)現(xiàn)復(fù)雜的操作。
那么今天咱們就來(lái)看看這些牛逼的 HTML 特性！
01：在 img標(biāo)簽 中生成可點(diǎn)擊區(qū)域
<map> 配合 <area> 可以直接在 img 標(biāo)簽中創(chuàng)建部分的可點(diǎn)擊區(qū)域：
<body>
<img src="01.jpg" usemap="#work" />
<map name="work">
<!-- coords：右、上、左、下 -->
<area shape="rect" coords="25,68,220,450" href="02.jpg" />
<area shape="rect" coords="360,68,460,200" href="03.jpg" />
<area shape="rect" coords="360,268,460,200" href="04.jpg" />
</map>
</body>
- 利用
img 創(chuàng)建背景圖，作為可點(diǎn)擊的圖形 - 通過(guò)
usemap="#work" + <map name="work"> 標(biāo)記指定的 map - 在
map 標(biāo)簽中，通過(guò) area 確定點(diǎn)擊位置和展示的圖片。其中 coords 表示點(diǎn)擊位置，四個(gè)數(shù)字分別對(duì)應(yīng) 右、上、左、下
最終效果如下：
02：利用 base 標(biāo)簽設(shè)置基準(zhǔn)路徑
在前端項(xiàng)目中，通過(guò) a 標(biāo)簽跳轉(zhuǎn)鏈接是比較常見(jiàn)的需求。
一般情況下我們的跳轉(zhuǎn)通過(guò)會(huì)這么寫(xiě)：
<body>
<a href="https://space.bilibili.com/478809258">跳轉(zhuǎn)</a>
<a href="https://space.bilibili.com/478809258">跳轉(zhuǎn)</a>
<a href="https://space.bilibili.com/478809258">跳轉(zhuǎn)</a>
<a href="https://space.bilibili.com/478809258">跳轉(zhuǎn)</a>
<a href="https://space.bilibili.com/478809258">跳轉(zhuǎn)</a>
<a href="https://space.bilibili.com/478809258">跳轉(zhuǎn)</a>
</body>
但是當(dāng)鏈接比較多的時(shí)候，一旦 域名地址 發(fā)生變化，修改起來(lái)就會(huì)非常麻煩。
所以，我們會(huì)期望設(shè)置一個(gè) BASEURL，就像 axios 可以統(tǒng)一處理請(qǐng)求路徑，甚至可以在 環(huán)境變量切換 時(shí)，自動(dòng)處理它。
因此 <base> 標(biāo)簽 就顯得很有用了。我們可以通過(guò) <base> 標(biāo)簽 來(lái)達(dá)到類似 BASEURL 的效果
<body>
<base href="https://space.bilibili.com" />
<!-- 上面的 base，下面是各種跳轉(zhuǎn) -->
<a href="/478809258">跳轉(zhuǎn)</a>
<a href="/478809258">跳轉(zhuǎn)</a>
<a href="/478809258">跳轉(zhuǎn)</a>
<a href="/478809258">跳轉(zhuǎn)</a>
<a href="/478809258">跳轉(zhuǎn)</a>
<a href="/478809258">跳轉(zhuǎn)</a>
</body>
03：利用 progress 直接生成進(jìn)度條
通過(guò) progress 標(biāo)簽可以直接生成進(jìn)度條效果：
<body>
<label for="pp">一個(gè)進(jìn)度條</label>
<progress id="pp" value="0" max="100">10%</progress>
<script>
const ppElement = document.querySelector('#pp')
const interval = setInterval(() => {
ppElement.value += 1
if (ppElement.value === 100) {
clearInterval(interval)
}
}, 50)
</script>
</body>
同時(shí)也可以利用 <meter> 標(biāo)簽 實(shí)現(xiàn)不同階段的樣式漸變：
<body>
<label for="pp">類似于充電的效果</label>
<meter
id="pp"
min="0"
max="100"
low="33"
high="66"
optimum="80"
value="0"
></meter>
<script>
const ppElement = document.querySelector('#pp')
const interval = setInterval(() => {
ppElement.value += 1
if (ppElement.value === 100) {
clearInterval(interval)
}
}, 50)
</script>
</body>
該文章在 2025/4/1 11:26:09 編輯過(guò)
400 186 1886
