标签
记录不常用的但是有语义化的标签
embed
Input
<embed
type="application/pdf"
src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
width="640"
height="480">Output
q
TIP
HTML 引用标签 (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代。
Input
cite 这个属性的值是 URL，意在指出被引用的文本的源文档或者源信息。这个属性重在解释这个引用的参考或者是上下文。
<p>Everytime Kenny is killed, Stan will announce
<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
Oh my God, you/they killed Kenny!
</q>.
</p>Output
Everytime Kenny is killed, Stan will announce Oh my God, you/they killed Kenny!
.
<abbr>
INFO
HTML 缩写元素（<abbr>）用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。
想要创建不含解释或描述性的缩写，就直接用<abbr>不添加任何属性
Input
<p>Using <abbr>HTML</abbr> is fun and easy!</p>Output
Using HTML is fun and easy!
添加一个 title 属性，为缩写提供定义或拓展。
Input
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>Output
Ashok's joke made me LOL big time.
<address>
INFO
HTML <address> 元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
由<address>元素中任何形式的内容所提供的联系信息适用于上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。此元素应该包含联系信息对应的个人、团体或组织的名称。
- 当表示一个和联系信息无关的任意的地址时，请改用 <p> 元素而不是 <address> 元素。
- 这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 <time> 元素之中）。
Input
<address>
You can contact author at <a href="http://www.somedomain.com/contact">
www.somedomain.com</a>.<br/>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
contact webmaster</a>.<br/>
You may also want to visit us:<br/>
Mozilla Foundation<br/>
331 E Evelyn Ave<br/>
Mountain View, CA 94041<br/>
USA
</address>Output
You can contact author at www.somedomain.com.If you see any bugs, please contact webmaster.
You may also want to visit us:
Mozilla Foundation
331 E Evelyn Ave
Mountain View, CA 94041
USA
<time>
Input
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>Output
The concert took place on .
<figure>：可附标题内容元素
INFO
HTML <figure> 元素代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
Input
<style>
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 220px;
margin: auto;
};
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
}
</style>
<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>Output
引用 Input
<figure>
<figcaption><b>Edsger Dijkstra:</b></figcaption>
<blockquote>
If debugging is the process of removing software bugs, then programming must
be the process of putting them in.
</blockquote>
</figure>Output
If debugging is the process of removing software bugs, then programming must be the process of putting them in.
<picture>
INFO
HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。
浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。
Input
<picture>
<source srcset="
https://ts1.cn.mm.bing.net/th/id/R-C.9018c4f47b9796cbea207325cb60e457?rik=TKWy9KALYKcXBg&riu"
media="(min-width: 600px)"/>
<img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg" alt=""/>
</picture>Output
<details>：详细信息展现元素
INFO
<details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。
<summary> 元素可为该部件提供概要或者标签。
details.addEventListener("toggle", (event) => {
if (details.open) {
/* 元素切换至打开状态 */
} else {
/* 元素切换至关闭状态 */
}
});Input
<style>
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
}
</style>
<details open>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>Output