一：一个小图标的制作
我们在支付宝、微信等某些地方上传文件时会遇到以下的图标，但是这样的图标其实可以用<a/>标签以及css样式完成，
具体代码如下：
<!DOCTYPE html> <html> <head></head> <style> .add{ display: block; /*以块级元素展示，可以设置宽高*/ 100px; height: 100px; position: relative; color: #ccc; transition: color .25s; /*实现动画效果*/ border:1px solid; } .add:before{ /*在<a/>元素前有些内容*/ content: ""; /*具体内容，此示例就不需要填写*/ 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> 会阻止冒泡。
后续遇到在更