HTML5新增和废弃的元素

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

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

HTML5新增和废弃的元素

HTML5新增的元素

  1. 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>
  1. details元素与summary元素
    <details>提供了一个点击可以查看隐藏信息的功能。
    在这里插入图片描述
    在这里插入图片描述
    <summary><details>一起出现,用来表示点击前显示的文字,代码如下:
		<details>
			<summary>显示</summary>
			12345
		</details>
		<details>
			12345
		</details>
		<details>
		    <summary>
				详细信息
			</summary>
			12345
		</details>`
  1. mark元素
    <mark>元素表示网页中需要突出或高亮显示的文字。
<p>这是一个<mark>高亮文字</mark></p>

在这里插入图片描述

  1. progress元素
    <progress>元素表示一个进度,在页面上会显示一个进度条。
<progress value="50" max="100"></progress>

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

  1. 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废弃的元素

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值