一、超链接的概念:

1>用<a>标签实现。href属性设置了要链接的网址。

链接路径URL:Uniform Resource Locator的缩写。统一资源定位符。

4部分组成:协议名、主机名、文件夹名、文件名。

相对URL通常只包含文件夹名和文件名。绝对URL包含全部信息。

2>设置链接的目标窗口。target属性,定义链接打开的目标窗口或框架,定义新的窗口。

target属性的属性值及其功能:

target属性值及功能
_blank     将链接的文档载入到一个新的未命名的浏览器窗口
_parent 将链接的文档载入包含该链接框架的父框架集或窗口。
_self 将链接的文档载入链接所在的同一框架或窗口,通常不需要设置
_top 将链接的文档载入整个浏览器窗口,而删除所有的框架
   

3>设置链接的提示信息,使用<a>标签的title属性。

4>链接网站内部的不同网页。将href设置成要链接的网页名称。

5>使用锚链接到同一个网页的不同位置。添加的锚点:id必须唯一

<a id="html"></a>
 <a id="css3"></a>
 <body>
     <div style=" width: 500px; height: 600px; background-color: #e4eef9">
         <h1 align="center">网页的超链接设计</h1><hr />
         <h3 style=" text-align:center ">使用锚链接到同一个网页的不同位置</h3>
         <a href="#html">HTML概念</a><br />
         <a href="#css3">CSS3概念</a><br />
         <a href="#JavaScript">JAVAscript概念</a><hr />
         <a id="html"></a>
         <h4>HTML</h4>
         <p>HTML 的具体概念,,,,,,,,,,,你懂得!!!</p>
         <hr />
         <a id="css3"></a>
         <h4>CSS3</h4>
         <p> 的具体概念,急急急急急急   然后你懂得。!!</p>
         <hr />
         <a id="JavaScript"></a>
         <h4>JAVAscript</h4>
         <p>javascrpt 的具体的内容!!!!!然后你懂得!!!</p>
     </div>
 </body>


6>使用锚链接到另一个网页的特定位置。

  <h3 style="text-align:center ">使用锚链接到另一个网页的特定位置</h3>
         <a href="锚链接练习网页1.html#html " target="_blank" title=" 你讲前往下一个网页">HTML的介绍</a><br />
         <a href="锚链接练习网页1.html#css3" target="_blank"  title=" 你就等着瞧吧!哈哈哈">CSS3的介绍</a></div>
 <body>
     <a id="html"></a>
     <h3>HTML介绍</h3>
     <p>hhffhsjkfkjashfkaflh黄飞鸿放寒假啊上课了 废话多萨科技家飞回家看发货就看到就发货啊发卡量发卡量房价控制法律啊安康</p>
     <a id="css3"></a>
     <h3>CSS3介绍</h3>
     <p>发生的恢复健康哈萨克链接粉红色开讲啦护肤老师发科技爱好是开发技术呵呵呵!!!</p>
 </body>

7>

HTML中网页超链接设计的更多相关文章

  1. python笔记之提取网页中的超链接

    python笔记之提取网页中的超链接 对于提取网页中的超链接,先把网页内容读取出来,然后用beautifulsoup来解析是比较方便的.但是我发现一个问题,如果直接提取a标签的href,就会包含jav ...

  2. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  3. WPF中动态更新TextBlock文字中的超链接,文本

    1.------------------------------------------------------------------------- 修改超链接的文本文字: <TextBloc ...

  4. NanUI文档 - 使用网页来设计整个窗口

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  5. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

  6. django web 中添加超链接

    django web 中添加不传参的超链接的方法如下: html: 在web中的超链接中加入一下url <a href="{% url 'app_name.views.url_func ...

  7. 看懂此文,不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  8. 爬虫_网页url设计

    为什么需要网页URL设计? 每个url不同的结构代表着不同的网页模块和信息的展现形式,为了方便维护与管理 网页url怎么设计? 分层: 主域名,子域名 一般形式为: 主域名:  www.job.com ...

  9. JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong    抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...

随机推荐

  1. YII2 日志

    YII 提供的日志写入方法: Yii::getLogger()->log($message, $level, $category = 'application') Yii::trace($mes ...

  2. Table样式

    .tb_org th { background-color: #; color: #ffffff; } .tb_org { border-right: 1px solid silver; border ...

  3. UIKit框架之UIEvent

    1.继承链:NSObject 2.事件大致可以分为三种事件:触摸事件.动作事件.遥控事件 3.获取事件的touches (1)- (NSSet<UITouch *> *)allTouche ...

  4. sharepoint2013隐藏左侧导航栏更换新的

    $("#zz16_V4QuickLaunchMenu").hide()//隐藏 更换新的 <script type="text/javascript" s ...

  5. cxGrid的使用方法

    来源 http://www.cnblogs.com/djcsch2001/archive/2010/07/19/1780573.html   1.  去掉GroupBy栏 cxGrid1DBTable ...

  6. Spring触发器配置Quartz

    参考文献:http://blog.csdn.net/liaq325/article/details/8269439 http://sundoctor.iteye.com/blog/441951 业务类 ...

  7. Dr.Kong的艺术品

    题目 Dr.Kong设计了一件艺术品,该艺术品由N个构件堆叠而成,N个构件从高到低按层编号依次为1,2,……,N.艺术品展出后,引起了强烈的反映.Dr.Kong观察到,人们尤其对作品的高端部分评价甚多 ...

  8. Android -- 距离感应器控制屏幕灭屏白屏

    权限                                                                                             <u ...

  9. volatile关键字的使用

    (简要概括:volatile变量有两个作用:一个是告诉编译器不要进行优化:另一个是告诉系统始终从内存中取变量的地址,而不是从缓存中取变量的值) 一.前言 1.编译器优化介绍: 由于内存访问速度远不及C ...

  10. “-bash: svn: command not found”

    今天升级了Xcode5.界面更加的清爽了,但是在命令行里SVN也失去了作用了. 当我要更新的时候提示:“-bash: svn: command not found” 解决办法: 1:打开Prefere ...