html5--1.8超链接下

下面演示链接打开新网友不关闭原网页。


外部网站: 百度

这是用a标签的target属性实现的,用的target="_blank"
这样新出现的页面会另外再开一个页面
target属性的四个值:
_self:当前位置;默认的,没有效果
_blank:新窗口;
_top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;

下面演示网页内部锚点


锚点1
锚点2
锚点3

锚点1

这里是用a标签的id属性来实现网页内部锚点的。
通过id链接到a标签引用位置的地址href
引用id的时候有#号。

代码:

<a href="#1">锚点1</a>

<a id="1">锚点1
网页内部使用锚点的方法:

1、设置目的位置a标签的id

2、将引用位置a标签的href设置为引用id

一个锚点需要用两个a标签实现

锚点2

html中的id和name属性的区别:
id属性:通用属性,可以理解为元素的身份证,一个html里面id不重复
name属性:可以理解为元素的名字,名字可重复,可同名

锚点3


学习要点:

target属性
id或name属性和创建文档内链接

1.target属性的四个值:
_self:当前位置(默认,加上不会有效果)
_blank:新窗口;
_top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;

2.id属性:通用属性,可以理解为元素的身份证;name属性:可以理解为元素的名字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>链接演示下</title>
  6. </head>
  7. <body bgcolor="Beige">
  8. <h1 align="center">下面演示<mark>链接</mark>打开新网友不关闭原网页。</h1>
  9. <hr>
  10. 外部网站: <a href="https://www.baidu.com" target="_blank">百度</a><br>
  11.  
  12. <h5>
  13. <p>
  14. 这是用a标签的target属性实现的,用的target="_blank"<br>
  15. 这样新出现的页面会另外再开一个页面<br>
  16. target属性的四个值:<br>
  17. _self:当前位置;默认的,没有效果<br>
  18. _blank:新窗口; <br>
  19. _top(最顶层框架),_parent(父框架),这两个属性咱不做讲解,后边的章节再说;
  20. </p>
  21. </h5>
  22.  
  23. <h1 align="center">下面演示网页<mark>内部锚点</mark></h1>
  24. <hr>
  25.  
  26. <a href="#1">锚点1</a>
  27. <a href="#2">锚点2</a>
  28. <a href="#3">锚点3</a>
  29. <br><br>
  30. <a id="1">锚点1
  31. <h5>
  32. <p>
  33. 这里是用a标签的id属性来实现网页内部锚点的。<br>
  34. 通过id链接到a标签引用位置的地址href。<br>
  35. 引用id的时候有#号。<br>
  36. </p>
  37. </h5>
  38. <br><br><br><br>
  39. <a id="2">锚点2
  40. <h5>
  41. <p>
  42. html中的id和name属性的区别:<br>
  43. id属性:通用属性,可以理解为元素的身份证,一个html里面id不重复;<br>
  44. name属性:可以理解为元素的名字,名字可重复<br>
  45. </p>
  46. </h5>
  47. <br><br><br><br>
  48. <a id="3">锚点3<br><br><br><br><br><br>
  49. <br><br><br><br><br><br>
  50. <br><br><br><br><br><br>
  51. <br><br><br><br><br><br>
  52. <br><br><br><br><br><br>
  53. <br><br><br><br><br><br>
  54. <br><br><br><br><br><br>
  55. <br><br><br><br><br><br>
  56. </body>
  57. </html>

html5--1.8超链接下的更多相关文章

  1. PowerPoint超链接字体颜色修改、怎么去掉超链接下划线

    经常在做PPT幻灯片时会遇到这样一个问题,给文字加超链接后发现链接的颜色是蓝色的,而且还带有下划线,这种效果与主题的色彩搭配简直是太影响美观效果了.有没有什么办法可以去掉PPT中的超链接下划线?再将超 ...

  2. html5实现移动端下拉刷新(原理和代码)

    这篇文章给大家介绍的内容是关于html5实现移动端下拉刷新(原理和代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功 ...

  3. 轻松实现HTML5时钟(分享下自己对canvas的理解,原来没你想像的那么难哦)

    Hey,guys! 让我们一起用HTML5实现一下简易时钟吧! 接触canvas时, 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的 钢笔工具 是一样的.所 ...

  4. HTML5的一个写下拉文本框标签

    新的HTML5有个标签,能够下拉的文本框 代码如下 <input list="browsers"> <datalist id="browsers&quo ...

  5. html5+css3实现手机下拉和下拉刷新

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 来吧,HTML5之基础标签(下)

    <dialog> 标签 定义对话框或窗口. <dialog> 标签是 HTML 5 的新标签.目前只有 Chrome 和 Safari 6 支持 <dialog>  ...

  7. 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...

  8. 解决<a>文本本身带下划线和超链接下划线重合的问题

    <a style="padding-bottom: 1PX;border-bottom: 1PX #254fc5 solid;text-decoration: none;"& ...

  9. html5 标签在 IE 下使用

    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datal ...

随机推荐

  1. Shiro学习(7)与Web整合

    Shiro提供了与Web集成的支持,其通过一个ShiroFilter入口来拦截须要安全控制的URL.然后进行对应的控制,ShiroFilter相似于如Strut2/SpringMVC这样的web框架的 ...

  2. IOS知识点收集

    17  duplicate symbols for architecture armv7s 用cocoapods 的时候出现,这种错误一般是由重复引用库文件引起. 原因:自己尝试添加Reachabil ...

  3. iOS 自己定义页面的切换动画与交互动画 By Swift

    在iOS7之前,开发人员为了寻求自己定义Navigation Controller的Push/Pop动画,仅仅能受限于子类化一个UINavigationController,或是用自己定义的动画去覆盖 ...

  4. robotframework使用之 下拉框的选择

    选择下拉框有几种方式处理,首先在浏览器F12选择下拉框 1. F12后看见下拉框的源码是<option xxx> <select class="w_60" dat ...

  5. MVC项目总结

    View命名 View下有多个模块的文件夹,我们根据微软的规定,每个模块下的首页都为Index.cshtml命名 获得当前页面的控制器名称 var currentControllerName = th ...

  6. LeetCode222——Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  7. 限制UITextView的字数和字数监控,表情异常的情况和禁用表情

    限制UITextView的字数和字数监控,表情异常的情况和禁用表情   3523FD80CC4350DE0AE7F89A8532B9A8.png 因为字数占一个字符,表情占两个字符.你要是限制15个字 ...

  8. 再看GS线程

    再看GS线程 void GameServer::ProcessThreadTry() { ; packet rcvPkt; rcvPkt.data = * ]; //该事件工厂主要创建了两个定时器1. ...

  9. 【BZOJ4052】[Cerc2013]Magical GCD 乱搞

    [BZOJ4052][Cerc2013]Magical GCD Description 给出一个长度在 100 000 以内的正整数序列,大小不超过 10^12.  求一个连续子序列,使得在所有的连续 ...

  10. spring事务和mysql的隔离级别

    mysql事务.mysql隔离级别.mysql锁.mysql数据一致性.Spring事务.Spring事务传播性之间的关系 一直有些模糊,整理一下.   mysql事务: 在mysql中,只有使用了I ...