推荐 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>
效果图:
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>
效果图:
details
details 可创建一个挂件,该标签包裹了的内容默认会被隐藏,仅在被点击展开时,它才会显示内含的信息。只有 IE 不支持,详情查看浏览器兼容性。
用法:
<details>
<summary>点击查看更多</summary>
<p>我是一段被隐藏的内容</p>
</details>
效果图:
点击查看更多
我是一段被隐藏的内容
mark
用于高亮文本。 使用方法:
<p><mark> 元素用于 <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>
效果图如下: