a标签的href属性的用法

一、href值为url时，主要是做链接跳转

href一般是指向一个url地址，如<a href="http://www.jd.com">打开京东商城</a>，点击时会跳转这个链接的页面

href后面是相对路径，点击会打开或下载对应的文件

<a href="./imgs/001.jpg">超链接1</a>
<a href="../edit.rar">超链接2</a>
<a href="../note/day02.docx">超链接2</a>

二、锚链接

在同一页面中从A处跳转到B处

1.确定锚点目标即跳转去的位置，使用元素的id或name属性值，推荐使用id
<img src="imgs/wide.jpg" id="yh" name="chm" width="500"></a>
2.创建锚点链接，href值使用“#+锚名”,锚名即元素的id或name值
<a href="#yh">上面风景图</a>

从B页面的位置跳转至A页面的a位置

img.html中的<img src="imgs/001.jpg" id="ak" alt="ak47">
first.html中的<a href="img.html#ak">米哈伊尔-卡拉什尼科夫</a>
href后url+#锚名,先跳转至img.html页面再寻找id为ak的元素

三、调用JS代码

<a href="javascript:js代码"></a>，这种javascript:用法在传递this等参数时会出现问题，可能导致触发window.onbeforeunload事件，IE中可能导致gif动画停止播放，一般不推荐使用

常见的用法：

1.<a href="javascript:void(0);" onclick="js_method()"></a>
void(0)返回undefined，点击不发生跳转，通过onclick事件执行js函数
2.<a href="javascript:;" onclick="js_method()"></a>
这种是执行了一条空的js，点击不发生跳转
3.<a href="#" onclick="js_method()"></a>
点击页面回到顶部，发生跳转
4.<a href="#" onclick="js_method();return false;"></a>
点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置

a标签的href属性的用法相关推荐

HTML a 标签的 href 属性
w3school页面的描述: HTML <a> 标签的 href 属性 HTML <a> 标签实例 href 属性规定链接的目标: <a href="http ...
a标签缺少href 属性，鼠标经过不会出现手型
声明: web小白的笔记,欢迎大神指点.联系QQ:1522025433. 直接看实例吧! <!doctype html> <html> <head> <met ...
【27前端】base标签带有href属性会让chrome里的svg元素url失效
一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10 ...
a标签的href属性
<a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. javascript ...
vue-quill-editor 自定义 img 标签，给标签添加 href 属性
vue-quill-editor 自定义 img 标签,给标签添加 href 属性需求:上传图片成功之后,给图片标签插入 href 属性,内容为自定义的一段字符串,格式大概如下:<img sr ...
Html A标签中 href 和 onclick用法、区别、优先级别
http://gocom.primeton.com/blog21307_27051.htm 我以前在写<A>的href和onclick一直很随意,后来出过几次问题,以后才开始重视这个问题: ...
关于a标签的href属性的注意事项
今天在做一个lightbox效果的时候出现了一个问题. 当往下滚动再点击按钮出现lightbox的时候,lightbox的遮罩层不能铺满(即滚动高度处不能铺上),如下图所示.原因是提交按钮使用的是a标 ...
PHP抓取页面中a标签的href属性值以及a中间内容
$str = file_get_contents($zh_cn_url); $reg1='/<a href=\"(.*?)\".*?>(.*?)<\/a>/ ...
img标签地址src路径拼接_img标签的src属性的用法是什么？
首先我们来看看img标签的定义: 图片也是网页中最常见的html元素,而且是相当重要的一部分.在html网页中,图像由标签定义,是空html标签或说是单标签,它只包含属性,没有闭合标签. img标签的 ...

a标签的href属性的用法

一、href值为url时，主要是做链接跳转

二、锚链接

三、调用JS代码

a标签的href属性的用法相关推荐

最新文章

热门文章