外链论坛

 找回密码
 立即注册
搜索
查看: 81|回复: 1

10个有用的HTML5功能,您可能未运用

[复制链接]

2941

主题

330

回帖

9919万

积分

论坛元老

Rank: 8Rank: 8

积分
99199430
发表于 2024-6-29 18:16:13 | 显示全部楼层 |阅读模式

HTML5不是新事物。自从最初颁布(2008年1月)败兴咱们始终运用它的有些功能。今天给大众分享的是有些让你意想不到的效果,和特性!到日前为止,我还真正运用过它!

在本文中,我列出了十个HTML5我过去没用过但此刻发掘有用的功能。

1. 输出标签

<output>标签暗示的运算的结果。一般,此元素定义一个区域,该区域将用于表示某些计算得出的文本。

代码如下:

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)"> <input type="number" id="a" value="0"> * <input type="number" id="b" value="0"> = <output name="x" for="a b"></output> </form>

效果如下:

小小提示

倘若您要在客户端JavaScript中执行任何计算,并且期盼结果反映在页面上,请运用<output>标记。您不必走动运用就可获取元素的额外过程getElementById()。

2.仔细信息标签

该<details>标签供给随需应变的细节给用户。倘若必须按需向用户表示内容,请运用此标记。默认状况下,小部件是关闭的。打开后,它将展开并表示其中的内容。

该<summary>标签运用<details>来为它指定一个可见的标题。

代码如下:

<details> <summary>Click Here to get the user details</summary> <table> <tr> <th>#</th> <th>Name</th> <th>Location</th> <th>Job</th> </tr> <tr> <td>1</td> <td>Adam</td> <td>Huston</td> <td>UI/UX</td> </tr> </table> </details>

效果如下:

回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-29 09:31:57 | 显示全部楼层
外链论坛的成功举办,是与各位领导、同仁们的关怀和支持分不开的。在此,我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-5 21:42 , Processed in 0.062408 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.