zoukankan      html  css  js  c++  java
  • 你还在用a标签吗?——用button替代a

    前言:a标签,不止你在用,我也在用。但某些时候我们可以考虑用button替代a。

    在多页应用中,a标签很常见,我们常用来作为一个普通超链接,进行页面跳转。

    而在单页应用中,我们使用路由进行页面切换,a标签的使用就少了。

    不过当我们不需要跳转,只需要点击某个元素来达到一些效果的需求时,常常使用a标签。

    如图,智联招聘上的这些选项,就是a标签,没有使用a标签进行页面的跳转,而是监听点击事件然后进行一些操作,这其实也是我们比较普遍的a标签用法。

    这是一个修改了样式的a标签——

    a{
        text-decoration: none;
        color: #666666;
        font-size: 20px;
    }
    a:hover{
        color: #3EA4DA;
    }

    看似很好,但隐藏着一些我们不想要的效果——

    1.能拖拽  

     2.会跳转,即使不写href地址,也会刷新页面

    当然,我们可以通过js解决以上两个问题:

    href值为javascript:;   点击后执行一条空代码不跳转页面

    ondragstart='return false'   阻止拖动事件的默认行为

    <a href="javasricpt:;" ondragstart='return false' >我是一个a标签</a>

    不过我想提出另一个思路:用button替代a

    这是同样进行了样式修改的button标签  

    和a标签对比,差别不大,只需修改样式,无需写js代码。

    且样式修改也很简单,三个关键——border、background、outline设为none即可

    button{
        border: none;
        background: none;
        outline: none;
        font-size: 20px;
        color: #666666;
    }
    button:hover{
        color: #3EA4DA;
    }

      

    最后,并不是要求大家都要使用button,而舍去a,而且我个人有时也会习惯用a,只是提供一个思路:可用button替代a


    补充:

    Q:反正都是要去除默认样式的,为什么不直接用一个span标签?

    A:

    1.鼠标样式:当鼠标移入span时,显示的样式为,不像button和a标签是我们比较喜欢的效果:

      当然,这个可以通过样式cursor:default;修改。default是默认样式,箭头,同button;pointer是手指,同a。

    2.双击选中文本:双击span就会选中文本,如图。用户点击某一元素时,有时会多次点击,点击时间间隔短,便会产生双击效果,就会选中文字如图,这个效果就不是很好了。

    3.HTML语义化:HTML100多个标签的存在,就是为了HTML语义化,而不是让我们所有元素都是div或span。

      HTML丰富的标签,目的在于通过标签名传达标签内容类型的一些信息,就像h1标签传达了标题,header标签传达了头部...

      在这里a标签和button标签,则传达了是链接、按钮,都是用于点击的元素

     Q:为什么要语义化?(转载自:https://blog.csdn.net/qq_38128179/article/details/80811339

    A:

    1. 代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
    2. 有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
    3. 提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
    4. 便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
    5. 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
  • 相关阅读:
    配置Apache虚拟主机
    Apache: You don't have permission to access / on this server
    wordpress之备份与恢复数据
    ruby之各种概念
    Oracle之比较NVARCHAR2字符串
    Centos安装ruby--jekyll
    Linux之IO Redirection
    SecureCRT导入已有会话
    jdk1.8新特性应用之Iterable
    jdk1.8新特性应用之Collection
  • 原文地址:https://www.cnblogs.com/nys013/p/13246762.html
Copyright © 2011-2022 走看看