推荐 6 个少见却非常实用的 HTML 标签

128 阅读1分钟

推荐 6 个少见却非常实用的 HTML 标签

noscript

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则在 HTML 元素中定义脚本未被执行时的替代内容。这个标签是在浏览器不支持或禁用了 javascript 时才展示的。一般在打包过程中自动插入该元素到 html 静态文件里去。 用法:

<noscript>
  <!-- anchor linking to external file -->
  <a href="http://www.mozilla.com/">External Link</a>
</noscript>
<p>Rocks!</p>

效果图:

截屏2022-04-24 下午3.10.09.png

abbr

abbr 全称是 abbreviations,意思是缩写。应用场景也很简单,可以通过可选的 title 属性提供完整的描述。为一些文章中的缩写增加注释。

用法:

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

展示效果如图: CVR

progress

HTML中的元素用来显示一项任务的完成进度。

用法:

<progress value="70" max="100">70 %</progress>

效果图:

截屏2022-04-24 下午2.46.34.png

details

details 可创建一个挂件,该标签包裹了的内容默认会被隐藏,仅在被点击展开时,它才会显示内含的信息。只有 IE 不支持,详情查看浏览器兼容性

用法:

<details>
  <summary>点击查看更多</summary>
  <p>我是一段被隐藏的内容</p>
</details>

效果图:

点击查看更多

我是一段被隐藏的内容

mark

用于高亮文本。 使用方法:

<p>&lt;mark&gt; 元素用于 <mark>高亮</mark> 文本</p>

效果图如下:

<mark> 元素用于 高亮 文本

figure

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

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

效果图如下:

截屏2022-04-24 下午2.42.41.png