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> 标签

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

<details> 标签

Copyright 1999-2011.

- 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>

自定义有序列表的属性

  1. Coffee
  2. Tea
  3. Milk
  1. List item...1
  2. List item...2
  3. List item...3
  1. Coffee
  2. Tea
  3. 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>