HTML中有上百个标签,然而我们一般只会记住和使用少数的标签,例如 <p>
、<div>
、<input>
等,但其实还有很多实用但我们很少听说过的标签,下面让我们一起来看看这些神奇的标签吧。
1. abbr
- 缩略语
<abbr title="我是完整描述">缩写</abbr>
文档:abbr: The Abbreviation element - HTML: HyperText Markup Language | MDN
2. ins
& del
- 插入和删除
<style>
del,
ins {
display: block;
text-decoration: none;
position: relative;
}
del {
background-color: #fbb;
}
ins {
background-color: #d4fcbc;
}
del::before,
ins::before {
position: absolute;
left: .5rem;
font-family: monospace;
}
del::before {
content: '−';
}
ins::before {
content: '+';
}
</style>
<ins>我是新插入的行</ins>
<del>我是删除的行</del>
文档:ins - HTML: HyperText Markup Language | MDN
3. bdo
- 文本方向
可以指定文本的方向为 从左向右
或 从右向左
。
<bdo dir="rtl">从右向左读</bdo><br>
<bdo dir="ltr">从左向左读</bdo><br>
文档:bdo: The Bidirectional Text Override element - HTML: HyperText Markup Language | MDN
4. mark
- 文本高亮
我来展示<mark>高亮</mark>的用法。
文档:mark: The Mark Text element - HTML: HyperText Markup Language | MDN
5. progress
& meter
- 进度条
<p>
process进度条
<progress></progress>
</p>
<p>
meter进度条
<meter></meter>
</p>
文档
- progress: The Progress Indicator element - HTML: HyperText Markup Language | MDN
- meter: The HTML Meter element - HTML: HyperText Markup Language | MDN
6. sup
& sub
- 上标和下标
x<sub>0</sub><sup>2</sup>
文档
- sup: The Superscript element - HTML: HyperText Markup Language | MDN
- sub: The Subscript element - HTML: HyperText Markup Language | MDN
7. figure
- 带标题的图片
<figure>
<img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
文档:figure: The Figure with Optional Caption element - HTML: HyperText Markup Language | MDN
8. details
- 折叠菜单
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
文档:details: The Details disclosure element - HTML: HyperText Markup Language | MDN
9. datalist
- 输入建议
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
文档:datalist: The HTML Data List element - HTML: HyperText Markup Language | MDN
10. fieldset
- 标签组
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster" value="K">
<label for="kraken">Kraken</label><br>
<input type="radio" id="sasquatch" name="monster" value="S">
<label for="sasquatch">Sasquatch</label><br>
<input type="radio" id="mothman" name="monster" value="M" />
<label for="mothman">Mothman</label>
</fieldset>
文档:figure: The Figure with Optional Caption element - HTML: HyperText Markup Language | MDN
11. object
- 文件嵌入
可以利用 object
标签嵌入文件,例如 PDF、视频等。
<object
type="application/pdf"
data="./test.pdf" >
</object>
文档:object: The External Object element - HTML: HyperText Markup Language | MDN
12. noscript
- JavaScript 检测
如果浏览器不支持或禁用了 JavaScript,才会显示标签内容。
<noscript>您的浏览器不支持或禁用了 Javascript。</noscript>