一.页面内的锚点定位;

锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转;

1.单向定位:

锚定定位实在页面必须要发生滚动的情况下,不滚动也能发生,效果不明显;他的语法见下面代码:

<a href="#2">锚点2</a>
....文本省略
<h2><a name="2" id="2">锚点2</a></h2>

2.双向定位:

也是在单页面内进行定位,就是这处定位到文章的某一处,又可以从文章这一处回到原来的位置;见代码:

<a href="#wo" name="huiqu" id="huiqu">3年</a>
文本省略....
文本省略....
<a href="#huiqu" id="wo" name="wo">3年前的今天</a>

意思就是说从一处去,再从这一处来;

3.页面跳转定位看看是否能行,页面跳转也能精确的定位;

(1)单向定位:

只要在html中a标签中href属性加一个另一个文件的相对路径就能完成;

在index.html文件中
省略文本...
<a href="./index2.html#3">锚点3</a>
省略文本...
在index2.html文件中
文本省略<a  id="3" name="3">3年前</a>
文本省略

(2)双向定位(路由的双向绑定):

其实只要在一个a标签中加上相对的相互路径;

index.html文件中
省略文本...
<a href="./index2.html#3" id="goBack" name="goBack">锚点3</a>
省略文本...
在index2.html文件中
省略文本...<a href="./index.html#goBack" id="3" name="3">3年前</a>
省略文本...

它的优势可以很快的定位到某一点的某一个字上。

如果要实现页面路由跳转定位,可以通过js代码:

 window.parent.scrollTo(0, 0)

这是定位顶部,依然可以定位到某个某位值,但是要精确到某个字上就比较繁杂;接下来,我为大家介绍一个有关a标签的其他用法;

其实a标签有个target属性;

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

即:

<a target='_blank'></a>
//另外一个窗口打开

当然还有在css中的用法:ele:link/ele: visited /ele:active/ele: hover

我就不过多介绍这几个了,特别提一下两个伪类,ele:active和ele:hover,他们在其他元素也是常被用的两个伪类,除此之外,余下的就是a标签的独有的伪类啦。

当然还有很少用到但又常用到一些方法,通过a标签发送邮箱和打电话呀,都是有可能有道的,经常会看到有些网站会有一些运用。废话不多讲,见代码吧:

<a href="mailto:邮箱地址"></a><a href='href:电话号码'></a>

还可以通过a标签完成一些下载功能:图片及一些文件都是可以的;

<a href="#" download='a.html' id="newP">我是到5html</a>
var np = document.getElementById('newP');np.onclick = function(){var blob = new Blob([JSON.stringify('3897498')], {type: "" });np.href  = URL.createObjectURL(blob);URL.revokeObjectURL(blob);}

当然还有图片下载,这个img图片路径和href路径一致,我上面这种写法会存在bug,到怎么去解决,大家自己去解决吧,本人就不在作介绍了,当然还有一个问题通过a标签下载,要同源链接,不然无法修改文件名。修改文件名这个在实际开发中,就需要后台配合去完成了!

参考文档:http://www.w3school.com.cn/tags/att_a_target.asp

a标签有关用法以及锚点定位;相关推荐

  1. 标签有关用法以及锚点定位;

    一.页面内的锚点定位: 锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转: 1.单向定位: 锚定定位实在页面必须要发生滚动的情况下,不滚动也能发 ...

  2. html 标签、图像、链接、注释、锚点定位、特殊字符

    常用的 html 标签 <!-- 1.成对出现的标签:--><h1>h1标题</h1> <div>这是一个div标签</div> <p ...

  3. 如何用html语言定位img,html经常使用标签(图像标签img,连接标签a,锚点定位,及路径)...

    1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...

  4. 链接标签(anchor)和锚点定位

    一.链接标签 HTML中创建超链接只需要用标签环绕需要被链接的对象即可,基本原格式如下: <a href="跳转目标" target="目标窗口的弹出方式" ...

  5. 【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位

    来自2022.7.11 今日学习 一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...

  6. 【HTML】HTML 标签 ⑤ ( 锚点定位 | base 标签 | 预格式化文本标签 | HTML 特殊符号 )

    文章目录 一.锚点定位 二.base 标签 三.预格式化文本标签 四.HTML 特殊符号 一.锚点定位 锚点定位步骤 : 创建锚点 : 使用 id 属性 , 创建 跳转锚点 , 一般情况下是在各种级别 ...

  7. scrollIntoView()实现简单的锚点定位

    综述 锚点定位是一个再熟悉不过的操作了,通常会用a标签href=#XX去实现,不过这样做,有一个问题,就是页面会有刷新感,而且地址栏会有变化,F5刷新,则#XXX还是显示在地址栏里,这样如果要进一步进 ...

  8. Android tabLayout+recyclerView实现锚点定位

    原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 [Android 实现锚点定位 ](https://mp.weixin.qq ...

  9. 前端(一)——HTML之基本标签、图片标签、超链接、锚链接

    文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...

最新文章

  1. iar代码优化影响运行速度吗_IAR中优化等级对Kinetis FGPIO执行速度的影响
  2. (转)js实现继承的5种方式
  3. 【数据库系统概论】考研第五部分重点分析【5.1】
  4. 鸿蒙系统大疆,华为操作系统“鸿蒙OS”来了!
  5. java时间日期格式器_JAVA基础类库(二)-----日期、时间类和格式器
  6. c语言猴子选大王指针,C语言描述怎么用循环队列实现猴子选大王
  7. Loadrunner中web_reg_save_param的使用详解
  8. js 如何将java list集合转换成var类型数组_零基础参加郑州Java培训 一定要注意Arrays.asList的用法...
  9. 读书随笔:The Book of Why——CHAPTER 2:From Buccaneers to Guinea Pigs: The Genesis of Causal Inference
  10. Bootstrap3.0学习第十二轮(导航、标签、面包屑导航)
  11. 中兴助力软银开启首次5G测试
  12. 菜鸟学开店—最简收银POS系统
  13. iconfont-矢量图标字体的运用
  14. 【图神经网络入门】GAT图注意力网络
  15. android之App widget实际应用Demo
  16. python 操作 saltstack Api(二) 示例
  17. js导出excel文件
  18. 惠普1020打印机查看已打印页数
  19. dtft性质及证明_N第二章离散时间傅立叶变换(DTFT).ppt
  20. 如何在iPhone 12上管理5G设置来保护流量和电池续航

热门文章

  1. Chart.js清空canvas画布 clearRect()等canvas方法擦除失败(附完整代码)
  2. Baumer工业相机堡盟相机彩色相机如何实现白平衡
  3. 小猫爪:PMSM之FOC控制08-状态观测器的引入
  4. Activity-过渡动画-—-让切换更加炫酷,网易严选Android开发三面面经
  5. 网桥 - Linux实现交换机
  6. 教你如何不花一分钱,“搞”一个网站自己玩玩
  7. stc15w4k32s4芯片引脚图片_基于STC15W4K32S4芯片的智能晒衣装置
  8. 鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法
  9. Linux(程序设计):59---SIGHUP、SIGPIPE、SIGURG信号处理(附SIGURG信号处理普通数据与外带数据案例)
  10. 图像增强--grammma contrast transformation