一个好玩的小制作，以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法

一：一个小图标的制作

我们在支付宝、微信等某些地方上传文件时会遇到以下的图标，但是这样的图标其实可以用<a/>标签以及css样式完成，

具体代码如下：

复制代码
<!DOCTYPE html>
<html>
<head></head>
<style>
    .add{
        display: block;    /*以块级元素展示，可以设置宽高*/
        width: 100px;
        height: 100px;
        position: relative;
        color: #ccc;
        transition: color .25s; /*实现动画效果*/
        border:1px solid;
    }
    .add:before{      /*在<a/>元素前有些内容*/
        content: "";  /*具体内容，此示例就不需要填写*/
        width: 80px;
        position: absolute;
        left: 10px;
        top: 45px;
        border-top: 10px solid; /*设置上边框，最后显示+当中的- */
    }
    .add:after{            /*在<a/>元素后有些内容*/
        content: "";    /*具体内容，此示例就不需要填写*/
        height: 80px;
        position: absolute;
        left: 45px;
        top: 10px;
        border-left: 10px solid; /*设置左边框，最后显示+当中的| */
    }
    .add:hover{
        color: #067;
    }
</style>
<body>
<p>mimimi</p> <!-- 无关的-->
<a class="add" href="javascript:"></a>
</body>
</html>
复制代码

 

二、由上例中的<a/>标签中的 href="javascript:" 引发的思考

　　href="javascript:" 是一个伪协议，可以让我们通过一个链接来调用javascript函数，表示在触发<a>默认动作时，执行一段JavaScript代码；

　　href="javascript:;" 表示什么都不执行，这样点击<a/>时就没有任何反应,效果等价于 href="javascript:void(0);"

　　　　注意：(1)只使用分号可能会影响before、after等操作；

　　　　　　　(2)href="javascript:void(0);" 不刷新页面；

　　　　　　　(3)如果标签是以下格式：<a href="javascript:void(0);" onclick=function()>......</a>,那么 onclick 会先于 href 执行。

　　　　　　　(4)<a href="javascript:void(0)" onclick="return false">......</a> 会阻止冒泡。

 后续遇到在更

 

posted @   shiweiqianju  阅读(294)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae