HTML两大点击元素:button和a

前言

今天,您将学习到两大点击元素button和a(按钮和超链接)的用法。还有拓展如何让超链接像按钮一样有点击事件。如果拓展让您感到有所帮助,不忘点赞加关注

按钮 button

html的小伙伴们都知道,想在网页中显示一个网页得用button元素。

<button onclick="function()">a button</button>

onclick是一个函数,按钮点击后会发生function()的事件,这个function()是在js定义的。

一个实例:

<html>

<body>

<button onclick="func()">Click me Please!</button>
<h1 id="text"></h1>

</body>

<script>

function func(){
    var element = document.getElementById("text");//获取上边的h1对象
    element.innterHTML = "您已经触发了func()!";//修改文字内容
}

</script>

</html>

运行之后,您的网页右上角会有一个按钮,点击之后,您会发现下边多了一行字。

超链接 a

a 元素也是一个较为常见的元素,表超链接。

<a href="https://www.csdn.net/">点此超链接进入csdn</a>

同学们如果看了效果,应该很快就会理解。href里面的值便是你点击后所显示的网页。

拓展:让a元素也有点击事件

然而大部分的网页的按钮都被超链接所代替,那么如何让超链接也有点击事件呢?不妨先猜一下。

有的同学可能作出下面的代码:

<a href="" onclick="func()"></a>

这种方法不可取!运行之后,您可能发现一些bug。为了保险,正确的方法是:

<a href="#" onclick="func()"></a>

这样就可以了。

总结

如果对您有所帮助,不忘点赞关注!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值