你还在用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:
- 代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
- 有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
- 提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
- 便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
- 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
最新文章
- 阅读笔记 The Impact of Imbalanced Training Data for Convolutional Neural Networks [DegreeProject2015] 数据分析型
- grep 与正则表达式
- 用hibernate自动创建mysql表,添加失败org.hibernate.exception.SQLGrammarException
- c#转义字符串中的所有正则特殊字符
- 【转】命令行使用7zip
- spring aop 如何切面到mvc 的controller--转载
- 【转载】Google Analytics 使用图文全攻略
- 结对编程四则运算gui
- xdebug配置
- Could not find or load main class org.apache.spark.deploy.yarn.ApplicationMaster
- python -猜字小游戏
- webpack进阶--loader
- nyoj 魔法少女
- 右值引用和std::move函数(c++11)
- [翻译] CotEditor
- tomcat占用cpu过高解决办法
- mysql 导入数据到postgresql
- android基础知识:SharedPreferences和PreferenceActivity
- Android Studio运行程序,检测不到(夜神、Genymotion)模拟器
- 『ACM C++』 PTA 天梯赛练习集L1 | 052-053
热门文章
- 在Linux系统中使用Vim读写远程文件
- PHP mysqli_select_db() 函数
- Python基础教程 (第2+3 版)打包pdf|内附网盘链接提取码
- Python安装2 —— Pycharm2019.3.3的安装
- springMVC 获取request参数
- C++关于智能指针
- ios 常用的正则表达式(手机号邮箱md5加密验证空字符串等)
- Android布局——单复选框(今天上课的内容总结下)
- 关于Linux目录访问函数总结
- 初学者都在坑里!不要在Python中使用“+”来连接字符串