11 个可能你没见过,但非常特别的 HTML 标签

/ 129 次浏览 / 0
隐藏
换装

今天给大家推荐几个冷门但非常特别的 HTML 标签,不只是语义化,它们都有自己的应用场景和特殊自带功能。

见过了就略过,没见过的就当查漏补缺~

一、abbr

abbr 全称是 abbreviations,意思是缩写。应用场景也很简单,为一些文章中的缩写增加注释。

以前在文章中对于缩写的解释经常会这么做:

DAU(Daily Active User),日活跃用户数 ......

那我们用 abbr 标签呢?

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">abbr</span> <span style="line-height: 26px;">title</span>=<span style="color: #a6e22e; line-height: 26px;">"Daily Active User"</span>></span>
    DAU
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">abbr</span>></span>
<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">span</span>></span>,日活跃用户数 ......<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">span</span>></span>

展示的效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

这个标签就可以把全称隐藏掉,弱化信息量,让真正不知道该缩写的用户主动去获取缩写的具体意思,这个在 markdown 里经常会出现。

二、mark

<mark/> 在 markdown 中也是很常用的,用于将包裹的文本高亮展示。

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">mark</span>></span>高亮文本<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">mark</span>></span>

效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

如果全文统一高亮样式,可以专门对 mark 标签进行样式重置,这样就不用对你用的每个 div 加一个 highlight 的类名了,又不语义化,又徒增文档大小。

三、sup、sub

<sup/><sub/>分别表示上标和下标,在 markdown 中出现得也很频繁,比如数学公式和引用。

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">div</span>></span>3<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">sup</span>></span>[2]<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">sup</span>></span><span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">div</span>></span>
<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">div</span>></span>4<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">sub</span>></span>2<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">sub</span>></span><span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">div</span>></span>

效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

上标和下标的样式原理也比较简单,主要就是利用了 vertical-aligntopsub 属性值,然后将字号缩小,不过有现成的标签,干嘛不用呢?

四、figure

figure 是用于包裹其它标签的内容的,然后再利用另一个标签 figcaption ,可以对包裹的内容进行一个文本描述,例如:

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">figure</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">img</span> <span style="line-height: 26px;">src</span>=<span style="color: #a6e22e; line-height: 26px;">"/media/cc0-images/elephant-660-480.jpg"</span>
         <span style="line-height: 26px;">alt</span>=<span style="color: #a6e22e; line-height: 26px;">"大象"</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">figcaption</span>></span>这是一张大象的照片<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">figcaption</span>></span>
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">figure</span>></span>

效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

那要是图片挂了呢?

11 个可能你没见过,但非常特别的 HTML 标签

再友好点处理,我们把 img 标签的 alt 属性去掉。

11 个可能你没见过,但非常特别的 HTML 标签

漂亮,终于把我一直厌烦的图裂 icon 给干掉了,样式还巨好看。

当然不止能包裹 img 标签,其它任何都是可以的。

嘿嘿,给大家在本文来个实战👇,下面这个可以点击,样式也是利用了 figure 这个标签。

11 个可能你没见过,但非常特别的 HTML 标签

我是figure标签产生的

五、progress

说到 <progress/> 这个标签就很有意思了,去年有段时间我做的业务里涉及到了进度条,当时是前同事做的,然后有一些性能问题,我就在研究如何优化,减少进度条改变带来的性能问题。

虽然最后问题是解决了,但是也有幸收到了张鑫旭大佬的评论,他告诉我 progress 这个标签就足够了,既有语义化,又有进度条的功能,性能还好,兼容性也很不错。后来经过一番尝试,还真是,当时是我孤陋寡闻了,也安利给大家。

<span style="color: #75715e; line-height: 26px;"><!-- 进度条最大值为100,当前进度为60,即60% --></span>
<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">progress</span> <span style="line-height: 26px;">max</span>=<span style="color: #a6e22e; line-height: 26px;">"100"</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"60"</span>/></span>

浏览器自带的样式就已经很好看了,效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

业务中我们也就可以通过控制 value 属性,来改变进度条的进度了。

六、area

area 这个标签也非常有意思,它的作用是为图片提供点击热区,可以自己规定一张图的哪些区域可点击,且点击后跳转的链接,也可以设置成点击下载文件,我们来举个例子:

  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">img</span> <span style="line-height: 26px;">src</span>=<span style="color: #a6e22e; line-height: 26px;">"example.png"</span> <span style="line-height: 26px;">width</span>=<span style="color: #a6e22e; line-height: 26px;">"100"</span> <span style="line-height: 26px;">height</span>=<span style="color: #a6e22e; line-height: 26px;">"100"</span> <span style="line-height: 26px;">alt</span>=<span style="color: #a6e22e; line-height: 26px;">""</span> <span style="line-height: 26px;">usemap</span>=<span style="color: #a6e22e; line-height: 26px;">"#map"</span>></span>

  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">map</span> <span style="line-height: 26px;">name</span>=<span style="color: #a6e22e; line-height: 26px;">"map"</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">area</span> <span style="line-height: 26px;">shape</span>=<span style="color: #a6e22e; line-height: 26px;">"rect"</span> <span style="line-height: 26px;">coords</span>=<span style="color: #a6e22e; line-height: 26px;">"0,0,100,50"</span> <span style="line-height: 26px;">alt</span>=<span style="color: #a6e22e; line-height: 26px;">"baidu"</span> <span style="line-height: 26px;">href</span>=<span style="color: #a6e22e; line-height: 26px;">"https://www.baidu.com"</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">area</span> <span style="line-height: 26px;">shape</span>=<span style="color: #a6e22e; line-height: 26px;">"rect"</span> <span style="line-height: 26px;">coords</span>=<span style="color: #a6e22e; line-height: 26px;">"0,50,100,100"</span> <span style="line-height: 26px;">alt</span>=<span style="color: #a6e22e; line-height: 26px;">"sougou"</span> <span style="line-height: 26px;">href</span>=<span style="color: #a6e22e; line-height: 26px;">"https://www.sogou.com/"</span>></span>
  <span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">map</span>></span>

area 一般要搭配 map 标签一起使用,每个 area 标签表示一个热区,例如上面代码中,我们定义了两个热区,热区形状都为rect(矩形),他们的热区分别是:

  • 坐标 (0,0) 到坐标 (100,50) 的一个矩形
  • 坐标 (0,50) 到坐标 (100,100) 的一个矩形

我们都知道,默认的坐标轴是这样的:

11 个可能你没见过,但非常特别的 HTML 标签

因此,我们划分的两个热区就是:

11 个可能你没见过,但非常特别的 HTML 标签

最后再来看一下我们的实际效果:

11 个可能你没见过,但非常特别的 HTML 标签

i

七、details

details 字面意思是 "详情",在 markdown 里也经常用,用该标签包裹了的内容默认会被隐藏,只留下一个简述的文字,我们点击以后才会展示详细的内容。

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">details</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">p</span>></span>我是一段被隐藏的内容<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">p</span>></span>
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">details</span>></span>

效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

这还没有加任何一行的 js 代码,我们点击后,details 标签上会多一个 open 的属性,被隐藏的内容就展示出来了。

默认情况下,简要文字为 "详情",想要修改这个文字,要搭配 summary 标签来使用。

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">details</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">summary</span>></span>点击查看更多<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">summary</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">p</span>></span>我是一段被隐藏的内容<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">p</span>></span>
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">details</span>></span>

就搞定了!

11 个可能你没见过,但非常特别的 HTML 标签

八、dialog

浏览器自带弹窗方法 alertconfirmprompt,样式固定且每个浏览器不同,同时还会阻塞页面运行,除了这个还提供了一个 dialog 标签,它的使用方式有点类似于现在各大组件库的 Modal 组件了,浏览器还为该标签提供了原生的 dom 方法:showModalclose,可以直接控制弹窗的展示和隐藏。

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">dialog</span> <span style="line-height: 26px;">id</span>=<span style="color: #a6e22e; line-height: 26px;">"dialog"</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">input</span> <span style="line-height: 26px;">type</span>=<span style="color: #a6e22e; line-height: 26px;">"text"</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">button</span> <span style="line-height: 26px;">id</span>=<span style="color: #a6e22e; line-height: 26px;">"close"</span>></span>ok<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">button</span>></span>
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">dialog</span>></span>
<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">button</span> <span style="line-height: 26px;">id</span>=<span style="color: #a6e22e; line-height: 26px;">"openBtn"</span>></span>打开弹框<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">button</span>></span>

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">script</span>></span><span style="line-height: 26px;">
    <span style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> dialog = <span style="color: #a6e22e; line-height: 26px;">document</span>.getElementById(<span style="color: #a6e22e; line-height: 26px;">'dialog'</span>)
    <span style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> openBtn = <span style="color: #a6e22e; line-height: 26px;">document</span>.getElementById(<span style="color: #a6e22e; line-height: 26px;">'openBtn'</span>)
    <span style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> closeBtn = <span style="color: #a6e22e; line-height: 26px;">document</span>.getElementById(<span style="color: #a6e22e; line-height: 26px;">'close'</span>)
  
    openBtn.addEventListener(<span style="color: #a6e22e; line-height: 26px;">'click'</span>, () => {
        <span style="color: #75715e; line-height: 26px;">// 打开弹框</span>
        dialog.showModal()
    })
    closeBtn.addEventListener(<span style="color: #a6e22e; line-height: 26px;">'click'</span>, () => {
        <span style="color: #75715e; line-height: 26px;">// 隐藏弹框</span>
        dialog.close()
    })
</span><span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">script</span>></span>

效果如下:

11 个可能你没见过,但非常特别的 HTML 标签

细心的你有没有发现,这原生的弹框还自带背景蒙层,点击是关闭不掉的,但起码它不会阻塞页面。

然后我们在弹窗展示时,也可以通过 esc 键来关闭弹窗。

九、datalist

datalist 是用于给输入框提供可选值的一个列表标签,类似咱们常用的 Select 组件。

我可以用其实现一个 "输入联想" 的功能。

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">label</span>></span> 输入C开头的英文单词:<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">label</span>></span>
<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">input</span> <span style="line-height: 26px;">list</span>=<span style="color: #a6e22e; line-height: 26px;">"c_words"</span>/></span>

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">datalist</span> <span style="line-height: 26px;">id</span>=<span style="color: #a6e22e; line-height: 26px;">"c_words"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">option</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"China"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">option</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"Click"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">option</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"Close"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">option</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"Const"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">option</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"Count"</span>></span>
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">datalist</span>></span>

来试一试:

11 个可能你没见过,但非常特别的 HTML 标签

刚点击时会把所有推荐的选项都列出来,然后根据后面输入的内容,会过滤掉不匹配的选项,比如我输入 cl,会过滤掉不是 cl 开头的单词,最后只剩下 ClickClose 了。

最后我发现,他这个下拉框有点好看啊?为啥这原生的 input 框默认样式那么丑,啥时候改改。

十、fieldset

fieldset 标签是用于分组管理 form 表单内的元素的,若 fieldset 设置了 disabled 属性,则被其包裹的所有表单元素都会被禁用置灰,且不会随着表单一起提交上去,是的就成了摆设。

什么意思呢?看个例子:

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">form</span> <span style="line-height: 26px;">action</span>=<span style="color: #a6e22e; line-height: 26px;">"/example"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">fieldset</span> <span style="line-height: 26px;">disabled</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">legend</span>></span>被禁用区域<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">legend</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">label</span>></span>ID:<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">label</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">input</span> <span style="line-height: 26px;">type</span>=<span style="color: #a6e22e; line-height: 26px;">"text"</span> <span style="line-height: 26px;">name</span>=<span style="color: #a6e22e; line-height: 26px;">"id"</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"1"</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">label</span>></span>邮箱:<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">label</span>></span>
    <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">input</span> <span style="line-height: 26px;">type</span>=<span style="color: #a6e22e; line-height: 26px;">"text"</span> <span style="line-height: 26px;">name</span>=<span style="color: #a6e22e; line-height: 26px;">"email"</span> <span style="line-height: 26px;">value</span>=<span style="color: #a6e22e; line-height: 26px;">"1234567@163.com"</span>></span>
  <span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">fieldset</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">label</span>></span>名字:<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">label</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">input</span> <span style="line-height: 26px;">type</span>=<span style="color: #a6e22e; line-height: 26px;">"text"</span> <span style="line-height: 26px;">name</span>=<span style="color: #a6e22e; line-height: 26px;">"name"</span>></span>
  <span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">button</span> <span style="line-height: 26px;">type</span>=<span style="color: #a6e22e; line-height: 26px;">"submit"</span>></span>提交<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">button</span>></span>
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">form</span>></span>

这里我们把 ID邮箱 的表单包裹了起来,且设置了 disabled,只开放了一个 name 的输入控件,此时界面如下:

11 个可能你没见过,但非常特别的 HTML 标签

可以看到除了 name 输入框,其它的两个输入框都被禁用了,此时点提交会是什么样子呢?

11 个可能你没见过,但非常特别的 HTML 标签

嗯,只提交了 name 字段。

十一、noscript

这个标签是在浏览器不支持或禁用了 javascript 时才展示的,大多用于对 js 强依赖的应用,比如现在大部分的 SPA 页面,一旦不支持 javascript,页面基本上什么内容都没了,此时可以靠这个标签做友好提示。

一般我们不需要特地去使用,大多都是在打包过程中自动插入到 html 静态文件里去的,例如:

<span style="color: #75715e; line-height: 26px;">// init.js</span>
<span style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> root = <span style="color: #a6e22e; line-height: 26px;">document</span>.getElementById(<span style="color: #a6e22e; line-height: 26px;">'root'</span>)
<span style="color: #f92672; font-weight: bold; line-height: 26px;">const</span> button = <span style="color: #a6e22e; line-height: 26px;">document</span>.createElement(<span style="color: #a6e22e; line-height: 26px;">'button'</span>)
button.innerText = <span style="color: #a6e22e; line-height: 26px;">'点击出弹窗'</span>
root.appendChild(button)
<span style="color: #75715e; line-height: 26px;"><!-- index.html --></span>
<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">script</span> <span style="line-height: 26px;">defer</span> <span style="line-height: 26px;">src</span>=<span style="color: #a6e22e; line-height: 26px;">"./init.js"</span>></span><span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">script</span>></span>

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">noscript</span>></span>
  不好意思,你的浏览器不支持或禁用了 JavaScript,请更换浏览器或启用 JavaScript
<span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">noscript</span>></span>

<span style="color: #f92672; line-height: 26px;"><<span style="line-height: 26px;">div</span> <span style="line-height: 26px;">id</span>=<span style="color: #a6e22e; line-height: 26px;">"root"</span>></span><span style="color: #f92672; line-height: 26px;"></<span style="line-height: 26px;">div</span>></span>

未禁用 javascript 时,页面是这样的:

11 个可能你没见过,但非常特别的 HTML 标签

禁用了 javascript 时,是这样的:

11 个可能你没见过,但非常特别的 HTML 标签

最后

希望本文对你有所帮助,若有错误,欢迎指正,若你有更多有意思的想法,欢迎评论区讨论!

声明:文章来源于前端印象 ,作者零一

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注