HTML标签测试

图片来源：picsum
内容来源：MDN RUNOOB

<pre>和<code>标签

<pre><code> </code></pre>
共同点：都主要应用于浏览器显示计算机中的源代码。
不同点：code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示所必须的样式。code标签和pre标签是可以嵌套使用的，但是必须注意两者的嵌套顺序。来源：zj_zxj


<pre class="language-html"><code class="language-html">
	<p>用于展示缩写词，鼠标浮动会展示出完整词 <br />
	The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
	</p></code>
</pre>

<figure> 标签

<figure>
	<img src="https://picsum.photos/1000/300" alt="随机图片尺寸为1000*300" />
	<figcaption>随机图片</figcaption>
</figure>

<details> 标签

- by Refsnes Data. All Rights Reserved.
All content and graphics on this web site are the property of the company Refsnes Data.

<details><summary>Copyright 1999-2011.</summary>
	<p> - by Refsnes Data. All Rights Reserved.<br/>
		All content and graphics on this web site are the property of the company Refsnes Data.</p>
<

HTML块引用元素 <blockquote>

块引用标签 blockquote

后面是行内引用：行内引用可简写为:<q> </q>

<ruby> 标签

汉 ( Han ) 字 ( zi )

<ruby>
	汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
	字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

<abbr> 标签

用于展示缩写词，鼠标浮动会展示出完整词
The WHO was founded in 1948.


<p>用于展示缩写词，鼠标浮动会展示出完整词 <br />
 The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>

自定义有序列表的属性

Coffee
Tea
Milk

List item...1
List item...2
List item...3

Coffee
Tea
Milk

<ol style="list-style-type:lower-alpha">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ol>
<ol reversed>
	<li>List item...1</li>
	<li>List item...2</li>
	<li>List item...3</li>
</ol>
<ol start="5">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Milk</li>
</ol>


ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}

Emoji

来源：runoob


<span style="font-size: 50px;">&#129409</span>
<span style="font-size: 50px;">&#8986</span>
<span style="font-size: 50px;">&#8987</span>
<span style="font-size: 50px;">&#9749</span>
<span style="font-size: 50px;">&#9800</span>
<span style="font-size: 50px;">&#9801</span>
<span style="font-size: 50px;">&#9875</span>
<span style="font-size: 50px;">&#9889</span>
<span style="font-size: 50px;">&#9917</span>
<span style="font-size: 50px;">&#9935</span>
<span style="font-size: 50px;">&#9969</span>
<span style="font-size: 50px;">&#9978</span>

🦁 ⌚ ⌛ ☕ ♈ ♉ ⚓ ⚡ ⚽ ⛏ ⛏ ⛏ ⛏ ⛏ ⛱ ⛺
🗼 🗿 😀 😁 😂 😃 😄 😅

🦁 ⌚ ⌛ ☕ ♈ ♉ ⚓ ⚡ ⚽ ⛏ ⛏ ⛏ ⛏ ⛏ ⛱ ⛺ 🗼 🗿 😀 😁 😂 😃 😄 😅

Html的ASCII符号


<span>&# 38</span>

& ✺

UTF-8杂项符号


<span>&#9775</span>

☯ ♬ ♫ ⚛ ⚝ ⚧ ⚳ ⚸