学习前端,有很多标签其实有很多不同的功能,但是用到的不多,所以就没有发现;当发现的时候,觉得很不可思议,有耳目一新的感觉。例如a 标签,之前只是知道,使用a标签,可以打开一个链接,然后访问一个新的页面。之前使用的时候,也没有管那么多,就直接使用了,突然发现,a标签的用法,其实不仅仅可以在一个新页面中打开一个网页那么简单。当然了,这里最主要的,只涉及了一个target属性;单单这个target 属性,就有好几个值。下面就看看,到底有哪些值

1. target = _self  ,这是默认属性,也是用得最多的,表示在新窗口中打开链接的内容

2.target = _parent  , 当等于这个值时候,表示在父级框架中打开连接的内容

3.target = _blank ,当等于这个属性时,表示在新窗口中打开链接的内容

4.target = _top ,表示在顶级框架中,打开链接的内容

5. target= bodyframe ,当target 等于bodyframe 属性时,表示在bodyframe 这个框架中打开链接。  ***备注:这里的 bodyframe 是框架的名字,这里a 标签要搭配一个框架标签 iframe标签来使用*** ,如果没有iframe 框架标签,会在新窗口中打开一个链接

6.target = view_window , 当target = view_window 时,会在新窗口中打开链接,这里可以多个链接都加入 target=view_window 属性,当都加入这个属性时,这些a标签的链接都会映射到这个view_window 窗口之中,如果第一次打开没有关闭view_window,那么下次再点击a标签的时候,就会在当前打开的view_window 窗口中显示链接的内容,可以达到不改变窗口,而改变内容的效果

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>点击一下a标签,查看他们的差异</h3>
<ul>
<li><a href="./bbb.html" target="view_window">打开view_window</a></li>
<li><a href="./ccc.html" target="view_window">打开view_window</a></li>
<li><a href="./aaa.html" target="view_window">打开view_window</a></li>
<li><a href="./aaa.html" target="bodyFrame">打开iframe</a></li>
<li><a href="./ccc.html" target="_blank">打开_blank</a></li>
<li><a href="./aaa.html" target="_self">打开_self</a></li>
<li><a href="./aaa.html" target="_parent">打开_parent</a></li>
<li><a href="./aaa.html" target="_top">打开_top</a></li>
</ul>
<iframe name="bodyFrame" frameborder="0" width="100%" height="500" scrolling="no"></iframe>
</body>
</html>

1. 点击 view_window 触发的效果,窗口不变,改变内容;

2. 点击 iframe 触发,在iframe 框架中显示内容

3. 点击“打开_blank”的效果:在新窗口中打开一个网页

4. 点击  _self 效果:在当前窗口框架中显示链接的页面

5.点击_parent :在父类框架窗口中显示链接

6. 点击_top : 在顶级框架中打开显示链接

二:标签另外有一个链接状态:主要有几种状态:这里主要是使用css样式来控制的a链接显示效果

1. 未点击,即未访问 即

2.正在点击,正在访问

3.已经点击,已经访问过

4.鼠标移入效果,

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 未访问,红色,无下划线 */ a:link {
color: red;
text-decoration: none;
}
/* 处于激活状态 */ a:active {
color: blue;
}
/* 处于已经访问状态 */ a:visited {
color: purple;
text-decoration: none;
}
/* 处于鼠标移入状态 */ a:hover {
color: green;
}
</style>
</head> <body>
<h3>点击,仔细看下点击过程的a标签的显示效果</h3>
<ul>
<li><a href="./ccc.html" target="_blank">打开_blank</a></li>
<li><a href="./aaa.html" target="_self">打开_self</a></li>
<li><a href="./aaa.html" target="_parent">打开_parent</a></li>
<li><a href="./aaa.html" target="_top">打开_top</a></li>
</ul>
<iframe name="bodyFrame" frameborder="0" width="100%" height="500" scrolling="no"></iframe>
</body>
</html>

运行效果:当没有访问过时,连接程红色;当处于活动状态时,连接呈蓝色(次出效果没有显示出来),当处于鼠标移入状态时,链接呈绿色,当已经访问过时候,链接呈紫色

html 基础之a标签的属性target解析的更多相关文章

  1. 超链接a标签的属性target的可选值有哪些以及区别

    超链接a标签的属性target的可选值有哪些以及区别 1.<a target="_blank"></a> 2.<a target="_par ...

  2. HTML基础篇(标签和属性整--已剔除不被浏览器支持的部分)

    行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...

  3. HTML+css基础 p段落标签 a 超链接标签 Src和href有什么区别和关联? target属性 Meta标签

    p段落标签: <p></p> 1.他是唯一一个可以不写结束标签的双标签. a 超链接标签: 从一个页面链接到另一个页面.靠的是href属性.  Src和href有什么区别和关联 ...

  4. Html标签<a>的target属性

    target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...

  5. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

  6. HTML&CSS基础-标签的属性

    HTML&CSS基础-标签的属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!-- html 根标签,一个页面中有且只有一个根标签,网页中的 ...

  7. html中各种标签和属性(最基础的基本都有)

    1.标题标签: h1~h6  ctrl+1~6 2.段落标签: p      ctrl+shift+p 3.换行标签: br     shift+回车 4.水平线:   hr 5.加粗标签: stro ...

  8. HTML+css基础 img 标签的属性

    img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...

  9. 【HTML】 HTML基础知识 一些标签

    额..是这样的,去年为了学习web框架,自己开发了一个zbx配置管理的二次开发系统,当时从零开始接触web开发,也第一次接触到了前端的一些知识.其中最基础的就是html/css了.我把那部分笔记整理上 ...

随机推荐

  1. folly无锁队列,尝试添加新的函数(续)

    基于上一篇文章,dropHead取出节点后,删除节点,会出现内存访问的问题.按照这个逻辑,如果将移出的节点保存到一个无锁队列中,然后在需要节点的时候,从这个备用的无锁队列中取出节点,那么应该就可以避开 ...

  2. Jmeter(四十)BeanShell范例

    这世间,死一个人是一件大事,人名.地名都会被广传:死一百人就只是一个数字了. ---<传记文学:从晚清到民国> 一.生成随机手机号码 编译器调试: package performance. ...

  3. react 数据管理之state思想指南

    react的数据管理库有不少,最常听到的可能是mobx redux altjs之类的,当然还有很多其他,可以自己搜索. 为什么需要数据管理库呢,因为react本身只是为了实现view的表现,而不是数据 ...

  4. Android Studio连接不到MuMu模拟器;

    网易推出的mumu模拟器还挺好用的,主要是流畅占内存小: 但是安装mumu模拟器后,as连接不到mumu模拟器: 好了,教程来了:两步走: 先把模拟器运行起来! 第一步:打开Terminal,输入:  ...

  5. TableStore:创建SyncClient+getRow读取一行数据

    1.通过控制台或者客户端,在TableStore中新建了实例owlforest,在实例详情中获取到实例访问地址endPoint 2.新建表user,确定主键为userid(Interger)类型,因为 ...

  6. 获取图片src

    用jquery获取图片src(不知道为什么总是undefined): $('img').eq(i).src; $('img').eq(i).attr('src'); //上面两种都是获取不到,不知道为 ...

  7. properties文件读取

    package properties; import java.io.FileInputStream; import java.io.FileNotFoundException; import jav ...

  8. JVM总结-反射

    反射是 Java 语言中一个相当重要的特性,它允许正在运行的 Java 程序观测,甚至是修改程序的动态行为. 举例来说,我们可以通过 Class 对象枚举该类中的所有方法,我们还可以通过 Method ...

  9. 图算法之——dijkstra算法

    一.算法特点 目标:找出加权图中前往X的最短路径 适用于:无环有向加权图,且各边的权值为正 二.算法思路 三.算法示例演示 如下图,请找出结点v1到其他各个结点的最短路径: 首先创建一个字典(散列表) ...

  10. [转]IISExpress配置使其能通过IP访问方法

    转自http://www.cnblogs.com/liujh/p/4315927.html 环境说明: 本机IP:192.168.2.100:Web端口:11843 步骤一 打开[我的文档]\IISE ...