HTML5新增和废弃的元素

最新推荐文章于 2022-08-18 08:27:26 发布

NUT_fireless

最新推荐文章于 2022-08-18 08:27:26 发布

阅读量579

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html html5

本文链接：https://blog.youkuaiyun.com/NUT_fireless/article/details/106451696

html5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了HTML5中新增的元素，如figure、figcaption、details、summary、mark、progress和meter，以及废弃的元素，包括basefont、big、center等。深入探讨了这些元素的应用场景和特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5新增的元素

figure元素与figcaption元素
<figure>表示一段独立的内容，通常与<figcaption>一起使用，一般用于插图，表格等。
<figcaption>是<figure>的标题，一般放在<figure>的第一行或最后一行。
一个<figure>最多只能有一个<figcaption>元素。

<figure>
       <img src="https://www.baidu.com/link?url=zzKHeo5pmxCQ8Kp5rlR3Q1NgyQmUZr9pHIF7UpSFjECvR3HOGDYljaViLEqUu8tNtGL0Om3ceH5R1kd-zR1IrIr1dvujIt38uIW5KSEIfWIzB_Ef1N6ktVzlOXAjfgA76EuA_hknlOKnRqd_uhTmQYVSppx2dY56yOTcfUvvoEdSA1nguWFM_0HeUSYQiiJnRq8pNwXoI1t07cw53vx_8SZvXjGbosH-wSsrqAhD2Q2TKiv7-Z5xJXgIzxU7uhfynB6jfFFqUv_ln6O8Q6Oz32IiSwn-ApR6-c8yavjZVs_UndX8obh6S-uVcUfpoFwxaasjX6s3Tdl5sTc1ayRtZtjY0vhv9IYqCgmJ87HGG8YghVTpcpejQ3qmg_ccYtjEt7zMz7KqnD95FuFelUu7QdPgYmP1AVF05eupHwYxAHNVBk7oPmNe7kBNHqdoc36PgG5820MtRNql7UoQgCkCyM6JjeMHxCAftHKXZNIgltNydhw42TtyF-eAuH-7dx7SjqBBfD8A9zOIedNCHmUkQIj6gva_356-Vo02hmfYx72PtzzdMLtXwLj46PrqkFxq_FJAMYDg1tHQ51HHlB2nggx8LIo-EUdOYOEZU765Voi&timg=https%3A%2F%2Fss0.bdstatic.com%2F94oJfD_bAAcT8t7mm9GUKT-xh_%2Ftimg%3Fimage%26quality%3D100%26size%3Db4000_4000%26sec%3D1590891366%26di%3D5171d61cab37a9a785cf7bcb7fda857e%26src%3Dhttp%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg&click_t=1590891382994&s_info=1462_722&wd=&eqid=c688d20d008ac181000000045ed31365">
       <figcaption>图片</figcaption>
   </figure>

details元素与summary元素
<details>提供了一个点击可以查看隐藏信息的功能。

<summary>与<details>一起出现，用来表示点击前显示的文字，代码如下：

		<details>
			<summary>显示</summary>
			12345
		</details>
		<details>
			12345
		</details>
		<details>
		    <summary>
				详细信息
			</summary>
			12345
		</details>`

mark元素
<mark>元素表示网页中需要突出或高亮显示的文字。

<p>这是一个<mark>高亮文字</mark></p>

在这里插入图片描述

progress元素
<progress>元素表示一个进度，在页面上会显示一个进度条。

<progress value="50" max="100"></progress>

在这里插入图片描述
其中value属性代表完成的进度，max代表总进度，在设定时，max和value只能为float类型，并且value必须大于0小于等于max，max必须大于0。

meter元素
<meter>用来表示规定范围内的数量值。
value，表示当前值，不设定默认为0。
min，表示最小值，必须比max小，不设定默认为 0；
max，表示最大值，必须比min大，不设定默认为 1。
low定义了区间的下限值，必须小于等于high。
high定义了区间的上限值，若小于low，则把low的值视为high的值，若大于max，则把max的值视为high的值。

<p><meter min="0" max="100" value="60" high="85">60</meter></p>
<p><meter min="0" max="100" value="90" high="85">85</meter></p>

注意区别于<progress>，如果只是用来表示百分比和进度，建议用<progress>。

HTML5废弃的元素

能用css代替的属性：
basefont，big，center，font，s，strike，tt，tr，u
frame框架
支持的浏览器太少
如：applet，bgsound，blink，marquee
其他
废除rb，使用ruby代替。
废除acronym，使用abbr代替。

参考：https://juejin.im/post/5cef3fd65188250726641538