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. 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
  • 相关阅读:
    [转]C# 高级编程(第3版)--Active Directory编程
    [转]解决ClickOnce签名过期问题
    服务器应用程序不可用 的几种解决方案
    [转]用SQL Server 2005 Reporting Services生成报表
    [转] 错误 0xc00470fe: 数据流任务: 产品级别对于 组件“源 TestDB01$”(1) 而言不足
    [转]让.Net 程序脱离.net framework框架运行
    .NET中Web Service的异常机制
    查看WebSite Properties时,ASP.net Tab 消失不见了
    XPath语法简介与举例
    SQL SERVER 2005恢复数据错误解决:The backup set holds a backup of a database other than the existing 'XXX' database
  • 原文地址:https://www.cnblogs.com/nys013/p/13246762.html
Copyright © 2011-2022 走看看