分享 15 个 HTML 新特性,大多数人可能不知道,建议尽早使用上
创始人
2025-07-12 06:10:58
0

在过去的几年里,前端开发发生了革命性的变化,变得更高效、更快,当然也更大。 SPA 框架的引入使 Web 开发发生了重大变化。更多繁重的工作转移到了前端,需要处理更多的事情,例如动态 UI、路由、状态管理等。因此,程序员习惯于使用新方法和第三方来减轻一些繁重的工作。当然,它有它的优点,但也有缺点,让我们变得更懒惰。但是如果我告诉你,在前端的这段时间里,你可能错过了一些基本功能,而不是使用它们,而是使用第三方包甚至更糟糕的是,自定义样式来实现基本的东西?是的,当然,让我们从 HTML 中您可能不知道的 15 个功能的基础开始,它们将帮助您轻松实现友好的 UI。事不宜迟,我们开始学习吧!

1、内容可编辑属性

contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。您需要这样 设置它。

Earth 616 superheroes

  • 1. Iron Man
  • 2. Captain America
  • 3. Black Panther

2、详情标签(Details)

标签向用户提供按需详细信息。默认情况下,小部件是折叠的。打开时,它会展开并显示其中的内容。

标签与
一起使用实现一个可以折叠打开标题及详情内容。

Click here to see more from Earth 616
ID Name Location Job
1 John Doe Earth Human

3、Datalist 标签

标记指定预定义选项列表并提供自动完成功能。




 

4、Range 属性

范围输入类型的表单类似于滑块范围选择器。


    


    

5、Meter 标签

标签定义了定义范围内的标量测量值或分数值


40%
60%

6、 Progress 标签

标签表示任务的进度。


7、颜色选择器

一个简单的颜色选择器。

Color Picker!

8、标记内容标签

使用 标记突出显示任何文本内容。

Did you know that not all heroes wear capes.

9、块引用和引用

如果您要包含来自不同来源的内容,您绝对应该引用该来源。

It's an imperfect world, but its the only one we've got.

--TONY STARK, IRON MAN

10、缩写标签(Abbreviation)

“abbr”是abbreviation的简称!这里的想法是,如果您使用标题(例如“Mr.”)或首字母缩略词(例如“SHIELD”),abbr 标签会准确指示该缩写的含义。

Agent Phil Coulson leads a team of highly skilled agents from the global law-enforcement organisation known as SHIELD.

11、 and

实际上有一个标记用于带删除线的文本,另一个标记表示替换文本。

Iron Man Captain America is ehmmm.. yea the captain!

12、Output 标签

标签表示计算的结果。通常,此元素定义一个区域,该区域将用于显示某些计算的文本输出。

* =

13、Hidden 属性

在隐藏元素方面,我们都尝试过不同的方法,比如使用 opacity:0, visibility:hidden, height:0; width:0, display:none 在我们的 CSS 文件中。每一个都有自己的用例,适用于不同的布局。另一个与它们类似的选项是隐藏的 HTML 属性。如果一个元素在其上指定了隐藏,它将被隐藏。我碰巧有用于存储值的隐藏输入,所以如果您也需要它,请不要吃惊。

14、Time 标签

该元素的 datetime 属性用于将时间转换为机器可读的格式,以便浏览器可以提供通过用户日历添加日期提醒,搜索引擎可以产生更智能的搜索结果。

The next assemble meeting is postponed on .

15、Audio 标签

结束

好了,今天的分享就到这里,通过本文的学习,你可以轻松的使用HTML原生标签能力,就能够实现以前复杂的第三方UI组件提供的功能。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...