精华内容
下载资源
问答
  • 关的任务是编写一个带超链接的HTML页面,链接包含页面内导航链接和跳转其他网页的链接。显示效果如下: 相关知识 概念 超链接网页互连的核心,网页之间通过超链接连接一起。 我们使用<a> 标签定义...

    任务描述

    本关的任务是编写一个带超链接的HTML页面,链接包含页面内导航链接和跳转其他网页的链接。显示效果如下:
    在这里插入图片描述

    相关知识

    概念

    • 超链接是网页互连的核心,网页之间通过超链接连接在一起。

    我们使用<a> 标签定义超链接。

    一个简单的例子如下:

    <a href="https://baidu.com">百度搜索</a>
    

    点击a元素内容后打开百度搜索网页。

    其中,href属性指定了超链接的目标,本例中即跳转到百度。

    属性

    href属性

    • href 属性是超链接最重要的属性,它用于指定超链接目标的 URL。

    典型的超链接格式如下:

     <a href="URL">
    

    其中,目标URL有三种类型:

    • 锚 URL (anchor URL):指向同一页面内某一位置;
    • 相对 URL (relative URL):指向同一网站的不同文件;
    • 绝对 URL (absolute URL):指向另一个网站。

    提示:

    URL:Uniform Resource Locator,统一资源定位器;

    为什么叫作锚URL呢?

    • 锚的含义取于船上的锚,船把锚沉在水底后,如果船随水飘移了,只要一拉锚的锁链就会回到抛锚的位置。同样的,在html中点锚链接就能回到指定位置。

    这三种链接实际效果是如何的呢?下面让我们通过三组实例来加深理解。

    锚 URL实例:创建网页内导航

    <body>
        <h1>HTML 入门</h1>
        <h2>本页目录</h2>
        <ul>
            <li><a href="#toc1">简介</a></li>
            <li><a href="#toc2">第1关</a></li>
            <li><a href="#toc3">第2关</a></li>
        </ul>
        <h2 id="toc1">简介</h2>
        <p>HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
        在CSS(Cascading Style Sheets,级联样式表单)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
        <h2 id="toc2">第1关</h2>
        <p>初识HTML:简单的Hello World网页</p>
        <h2 id="toc3">第2关</h2>
        <p>HTML链接:带超链接的网页</p>
        <hr>
        <p><a href="#">回到顶部</a></p>
    </body>
    

    显示和操作效果如下:
    在这里插入图片描述
    其中第5行:

    <a href="#toc1">简介</a>
    

    定义了一个指向#toc1目标的锚链接。所以,点击之后会定位到第10行:id属性值为toc1的位置。

    <h2 id="toc1">简介</h2>
    

    所以,完整的一对页面内导航的写法为:

    <a href="#id值内容">简介</a>
    
    <开始标签 id="id值内容">内容<结束标签>
    

    此外,当href="#"时,默认回到网页顶部位置。

    相对 URL实例:跳转到同一网站的另一个网页

    <body>
        <h2>主页</h2>
        <h3>网站导航:</h3>
        <ul>
            <li><a href="./home.html">主页</a></li>
            <li><a href="./blog.html">博客</a></li>
            <li><a href="./project.html">项目</a></li>
            <li><a href="./about.html">关于我</a></li>
        </ul>
    </body>
    

    显示和操作效果如下:
    在这里插入图片描述
    在上述例子中,因为home.htmlblog.htmlproject.htmlabout.html均在同一文件夹中;
    所以第6行:

    <a href="./blog.html">博客</a>
    

    ./blog.html链接到了同一文件夹中的blog.html页面。

    我们说的相对URL是相对于什么呢?

    是相对于当前网页home.html路径的URL。.代表当前路径,所以./blog.html代表当前路径下的blog.html网页。

    绝对 URL实例:跳转到另一网页

    <body>
        <p>你可以使用搜索引擎,例如
            <a href="https://www.google.cn" title="google搜索">Google</a><a href="https://www.baidu.com" title="Baidu搜索">Baidu</a><a href="https://www.bing.com" title="bing搜索">Bing</a>等,搜索网络信息。</p>
    </body>
    

    显示和操作效果如下:
    在这里插入图片描述
    绝对URL即指定了完整的网页路径。

    发送电子邮件

    我们还可以将href属性值设置为mailto:邮箱地址,这样做可以调起邮箱应用,发送邮件到对应地址。

    例如:

    <p>发送邮件到:<a href="mailto:someone@email.com">someone</a>
    

    target属性:在何处打开链接

    target属性规定了在何处打开超链接。

    一个常用的例子如下:

    <p><a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>
    

    其中,我们指定了 target="_blank",所以在点击之后,将在新标签中打开链接。

    编程要求

    请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面,具体要求是:

    1. 补全第17行href属性值和第27行id属性值,使得点击第1关和第2关之后,可以导航到相应内容位置;
    2. 为第22、23和24行的的三个<a>标签添加target属性,使得链接在新标签中打开;
    3. 完善第32行<a>标签,使得邮箱链接起作用;
    4. 完善第33行<a>标签,使得点击回到顶部之后,可以导航到页面顶部。

    测试说明

    补充完代码后,点击测评,平台会对你编写的代码进行测试,当你的结果与预期输出一致时,即为通过;

    • 把自己的生活当作正文,把书籍当作注解。

    代码文件:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>HTML链接</title>
        <meta name="description" content="HTML链接知识讲解">
        <meta name="keywords" content="HTML, Link">
    </head>
      <!--------- Begin-------->
    
    <body>
        <h1>HTML 入门</h1>
        <h2>本页目录</h2>
        <ul>
            <li><a href="#toc1">简介</a></li>
            <li><a href="#toc2">第1关</a></li>
            <li><a href="#toc3">第2关</a></li>
        </ul>
    
        <h2 id="toc1">简介</h2>
        <p>
            <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
            <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets,级联样式表单)和
            <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
        <p>自1995年HTML2.0面世,HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准,2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升,使HTML迎来了新的爆发式发展。</p>
        
        <h2 id="toc2">第1关</h2>
        <p>初识HTML:简单的Hello World网页</p>
        <h2 id="toc3">第2关</h2>
        <p>HTML链接:带超链接的网页</p>
        <hr>
        <p>若需帮助,请发送问题到<a href="mailto:someone@email.com">E-Mail</a></p>
        <p><a href="#">回到顶部</a></p>
    </body>
      <!--------- End-------->
    
    </html>
    
    展开全文
  • 超链接元素,这个元素的英文全名是Anchor,的将它翻译成“锚”,其主要目的是设置的超链接后,可以跳到指定网络节点位置。 2.设定联络信息<address>元素:<address>这个元素主要用于显示个别...

    1.<a>····</a>的基本应用:<a>是超链接元素,这个元素的英文全名是Anchor,的将它翻译成“锚”,其主要目的是在单本设置的超链接后,可以跳到指定网络节点位置。

    2.设定联络信息<address>元素:<address>这个元素主要用于显示个别内容或是整个网站内容的联系信息。在设计网页时,有时需要在网页下方放置联络信息,便可以使用这个元素。

    展开全文
  • 提取Excel超链接信息.rar,当用户从网页或其他的超文本中复制数据到Excel工作表中时,所得到的数据中会包含大量的超链接,许多有价值...如例,用户希望看到真正的邮件地址,可是它们都被包含B列的超链接中,没有显示
  • cdsn博客使用超链接

    千次阅读 2016-06-03 11:37:54
    超级链接由源地址文件和目标地址文件构成,当访问单击超链接时,浏览器会从相应的目标地址检索网页显示在浏览器中,如果目标地址还是网页而是其他类型的文件,浏览器会自动调用机上的相关程序打开所访问的文件或...

    1、超链接基本知识

    1)超链接是网页中最重要的元素之一,超级链接由源地址文件和目标地址文件构成,当访问单击超链接时,浏览器会从相应的目标地址检索网页并显示在浏览器中,如果目标地址还是网页而是其他类型的文件,浏览器会自动调用本机上的相关程序打开所访问的文件或下载该文件。一个网站由多个页面组成,页面之间依据链接确定相互的导航关系。网络中的一个个网页也是通过超级链接的形式关联在一起的。有多种链接的实现方法,包括锚点链接、外部链接、E-mail链接、FTP链接、下载文件链接、脚本链接和空链接等。

    2)网页中的超链接按照链接路径的不同,可以分为相对路径绝对路径绝对路径完全路径,绝对路径不管源文件在什么位置,都可以非常精确地找到,除非目标文档的位置发生变化,否则链接不会失败。相对路径在当前文档与所链接的文档处于同一文件夹内特别有用,是指相对当前文档的简化路径。文档相对路径还可用来链接到其他文件夹中的文档,方法是利用文件夹层次结构,指定从当前文档到所链接的文档的路径。

    注:使用相对路径还是绝对路径,有一条通用规则:链接存储在一起的文档时应用相对路径;链接到其他地方(其他计算机、其他硬盘或其他网站)的文档时,应使用绝对路径。

     

    2、创建基本超链接:利用超链接不仅可以进行网页间的相互链接,还可以使网页链接到其他相关的图像文件、多媒体及下载程序等。

    1)超链接标记:虽然超链接在网页制作中占有重要的地位,但其标记只有一个,那就是<a>标记,它是一个行内元素,可成对出现在文档的任何位置。

    语法:<a href=”链接地址”>链接内容</a>

    说明:<a>标记的属性值如下表所示

     

    <a>标记的属性值

    属性值

    说明

    href

    指定链接地址

    name

    给链接命名

    title

    给链接添加提示文字

    target

    指定链接的目标窗口

    accesskey

    链接热键

     

    2)设置超链接的目标窗口:在创建网页的过程中,默认情况下超链接在原来的浏览器窗口中打开,也可以使用target属性控制打开的目标窗口。

    说明:target属性的取值如下表所示。

     

    traget属性的取值

    属性值

    说明

    _self

    在当前页面中打开链接

    _blank

    在一个全新的空白窗口中打开链接

    _top

    在顶层框架(根框架)中打开链接

    _parent

    在当前框架的上一层打开链接

    疑问:顶层框架、当前框架中的框架指什么?

     

    3、创建锚点链接:在浏览网页时,如内容较多导致页面过长,需不断拖拉滚动条长能看到其他,这样很不方便,这时可在文档中使用锚点链接。

    1)创建锚点:锚点可与链接文字在同一页面,也可在不同的页面。但要实现网页内部的锚点链接,需先创建锚点,通过它才能对页面的内容进行引导和跳转。

    语法:<a name=”锚点的名称”></a>

    说明:锚点名称可以是数字或英文(中文应也可以的,我试了下的),或两者混合,要区分大小写,同一网页中可有无数个锚点,但不能有相同名称的两个锚点。(如果有相同,则会链接到从网页最上面下来最近的那个点,即从上到下逐一检查,找到就链接过去~)

    注:虽然是双标记,但中间一般不放见容的样子……

     

    2)链接同一页面的锚点:创建锚点后,就可以创建链接到同一页面的锚点链接了。

    语法:<a href=”#锚点的名称”>链接内容</a>

    说明:在#”符号的后面输入页面中创建的锚点名称,可以链接到页面中不同的位置。

     

    3)链接到不同页面的锚点:可以链接到不同的页面。

    语法:<a href=”链接文件地址#锚点名称”>链接内容</a>

     

    4、链接到其他超链接:除了在网页中创建以上讲述的链接外,还可以创建到外部网站的链接、E-mail链接、FTP链接、Telnet链接、下载文件链接、脚本链接和空链接等。

    1)链接到外部网站:是跳转到当前网站外部,一般情况下需要使用绝对的链接路径,经常使用HTTP协议实现外部链接。

    语法:<a href=”http://网站地址”>链接内容</a>

    说明:http://表示这是关于HTTP协议的外部链接,在其后输入网站的网址即可。

     

    2)创建E-mail链接:单击该链接时,可打开浏览器默认的E-mail处理程序,收件人邮件地址被E-mail超链接中指定的地址自动写入,较方便。但现在一般用户都是使用在线的邮箱,所以对他们来说意义不大

    语法:<a href=mailto:电子邮件地址>链接内容</a>

    说明:电子邮件地址后面还可增加一些参数,如下表所示。

     

    邮件的参数

    属性值

    说明

    语法

    cc

    抄送收件人

    <a href=mailto:电子邮件地址?cc=电子邮件地址>链接内容</a>

    subject

    电子邮件主题

    <a href=”mailto:电子邮件地址?subject=主题文字”>链接内容</a>

    bcc

    暗送收件人

    <a href=”mailto:电子邮件地址?bcc=电子邮件地址”>链接内容</a>

    body

    电子邮件内容

    <a href=”mailto:电子邮件地址?body=邮件内容”>链接内容</a>

    例如:<a href="mailto:main@html.com?cc=copy@html.com&subject=主题&body=您的意见是:&bcc=bcopy@html.com">邮件联系</a>

    注:?用于分隔mailto:电子邮件地址和其他部分,而&用于分隔其他各参数,同一个参数可以出现多次,如果主题出现多次,以最后出现的主题为邮件主题。还有就是里面不能也一般不需要使用英文状态下的双引号。(ie下是这样的,别的我没有测试应该没区别

     

    3)创建Telnet链接:远程登录Telnet是指一台计算机远程连接到另一台计算机,并在远程计算机上运行自己系统的程序,从而达到共享计算机软件和硬件资源的目的。

    语法:<a href=”telnet://地址”>链接内容</a>

    说明:这种链接方式与其他两种类似,不同的是登录的是Telnet站点。

     

    4)创建下载文件链接:如果要在网站中提供下载资料,就要为文件提供下载链接,即超链接指向的不是一个网页文件而是其他文件,如:zip、mp3、exe等文件,郸链接时就会下载相应文件。

    语法:<a href=”文件地址”>链接文字</a>

     

    5)创建脚本链接:可以通过脚本来实现HTML语言本身完成不了的某些功能。

    语法:<a href=”javascript:脚本语言”>链接文字</a>

    说明:javascript后面编写的就是具体的脚本语言。

    例如:<a href="javascript:window.close()">关闭窗口</a>

     

    6)创建空链接:可通过#”符号实现空链接。所谓空链接,是指光标指向链接后变成手形,但单击后,仍停留在当前页面。

    语法:<a href=”#”>链接内容</a>
    展开全文
  • 如图,需要点击左侧菜单后灰色区域显示对应的页面,我想的是每一个菜单的超链接触发js函数,函数里改变右侧iframe的src,不知实际中常用的做法是什么,望指教! (本人大四,是做java后端的,前端了解的比较少)
  • 怎么去掉html a超链接下划线

    千次阅读 2020-06-13 15:59:02
    我们HTML网页制作过程中,相信大家对css文本超链接这个概念并不陌生。我们都知道想要给某段文本或者指定元素添加一个锚点也就是超链接需要用到HTML中的a标签。 那么有的新手可能就会发现,使用a标签时文本超链接...

    我们在HTML网页制作过程中,相信大家对css文本超链接这个概念并不陌生。我们都知道想要给某段文本或者指定元素添加一个锚点也就是超链接需要用到HTML中的a标签。

    那么有的新手可能就会发现,在使用a标签时文本超链接会自动出现下划线!这就让一些小白们感到苦恼了,因为从视觉美观上来说枯燥单调的文本超链接显示显然并不好看。所以如何使html css超链接去掉下划线,即怎么去掉文本超链接下划线成了新手们暂时较为棘手的问题。

    本篇文章就给大家详细讲讲怎么去掉css a标签超链接下划线

    一段HTML a标签示例代码如下:

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>a 标签超链接使用示例</title>
    
    </head>
    
    <body>
    
    <a href="">请看我这个超链接是不是有下划线!</a>
    
    </body>
    
    </html>
    
    

    效果如下图:

    如图,大家是不是可以看到熟悉的下划线!那么下面我们在css中添加一个style样式属性!

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>css超链接去掉下划线示例</title>
    
    <style>
    
    a{
    
    text-decoration: none;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <a href="">大家再看我还有没有下划线了!</a>
    
    </body>
    
    </html>
    
    

    效果如下图:

    从图上可以发现,此时文本超链接下划线是不是已经去掉了?这个效果实现是不是非常简单呢?大家主要掌握一个样式属性就是text-decoration: none;这个属性。给对应的a标签文本添加这个属性就可以去除文本超链接下划线了。

    那边以上就是本篇文章关于如何去掉HTML css文本超链接下划线的具体方法介绍!内容浅显易懂!希望对有需要的朋友有所帮助!如果大家想要学习更多关于网页前端css知识,请关注我!!!

    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(网页制作,网站开发,web开发,从0基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系统路线图】全栈工程师学习路线以及规划都有整理,分享给小伙伴)点:学习前端,我们是认真的

    展开全文
  • 如题 点击按钮打开一个webview 在这个网页中有其他的页面的超链接 怎么实现点击其他页面的超链接在本webview中显示
  •  QQ号码 替换成 实际的QQ号,src=" 在线状态图标 ",这些图片可以使是网站上的 也可以 引入超链接,链接到别的网站上的图片。  这种方法的缺点 是 必须加为好友后 才能进行交流。 2、通常用的还有这种:  这...
  • 对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常被链接的元素下带有下划线或者以不同的颜色显示来进行区分。按照使用对象的不同,链接可以分为文本超链接,图像超链接,E-mail链接,...
  • 本网页对该链接的描述</a>  如使用target="_blank",可新浏览器窗口或新标签页中打开网页 -HTML5中,block anchor是锚标记的新功能,能够将一个或多个元素(包括作为块显示的,如div\h1或段落)配...
  • 1 登陆以下网址: http://wp.qq.com/login.html?target=1 2 复制代码到HTML中即可 ...更改显示的图像和位置。更改位置只需要给这个超链接加一个id并css中做手脚即可。 同理,如果是阿里...
  • 网页编程的学习笔记

    千次阅读 2013-09-29 22:51:52
    一般情况下超链接打开的目标网页是在本网页之内打开的,但是利用上面的代码可以在新窗口中打开目标网页,再重新打开时仍然在已经开启的目标网页中显示. n (2)框架中指定子网页的Name 上面的网页框架中,点击下面的
  • 解决了!又一次体会到成功的喜悦。发现自己还是有用的! 问题描述: 项目开发中发现,QQ 2008官方版本 Windows ...现象表现为,点击 QQ 九宫格的超链接 http://3g.qq.com , 显示空白页面。 但是同样的cab包,安
  • 网页显示效果如下图所示: 操作效果如下图所示: 相关知识 网页中播放音频,对大家而言是一件习以为常的事,但若想要同时兼容多种浏览器和设备,并不是一件容易的事。所以,关中,我们为大家讲解了几种...
  • Jquery 网页弹幕插件,可视频播放 窗口中显示评论文字,增加网站趣味性,弹幕插件支持图片、文字以及超链接。支持速度、高度、颜色、数量等自定义。能轻松集成到论坛,博客等网站中。
  • 网页制作 第十章测试

    2020-06-05 11:08:34
    第1部分 总题数: 10 【单选题】 (2分) 网页元素不包括( )。 A....B....C....D....题总得分2分 ...在网页中能显示版权符号的选项是( )。 A. &copy; B. &nbsp; C. &quot; D. &lt; 题总得分2
  • 战风HTMLEditor是一个具有较...代码模式下:您可以对网页进行源码级编辑,以满足您的更高编辑需求。 软件具有意见反馈和更新提示功能,可以及时的实现用户和开发者的交流。 软件为绿色软件,自解压安装即可。
  • 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者... 网页的代码套用、编写并非简单,如果应用中没能显示出编写的“网页的代码”那也是值得我们再次思考的问题,因为我 们没有做好这一篇网页...
  • 本文介绍了Android 使用jQuery实现item点击显示或隐藏的特效的示例,分享给大家,具体如下: 效果图 分析 上图中的功能很多APP上都可能用到过,...不推荐使用超链接关联的方式把jQuery集成到网页中,如帮助页面
  • 版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处http://xinyistudio.vicp.net/和作者信息及声明 MSChart控件是微软很早就推出的基于图形显示数据的ActiveX控件,我们知道Web网页开发中...
  • 页面上有TextBox,供用户输入数据,当用户点击页面上的超链接时会进入另一个页面,这时候,再点击浏览器“后退”按钮,就会回到原来的页面,并显示刚才TextBox中输入的文字。然而,有些时候这些数据是机密的,不能...
  • 章主旨  介绍<img>标签及其基本属性;介绍URL和文件路径 ...p>标签来标记文本段落,用<...而这章我将介绍如何在网页显示图片图片,同时也会介绍有关于文件路径的知识。 一...
  • 软件把超链接分为两部分看待:连接和连接名称 通过对这两部分的设定来提取符合要求的连接 可以设定只提取含有某“特征词”的网址 也可以设定过滤含有某“特征词”的网址(针对链接) 可以设定只提取链接名称含有...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 233
精华内容 93
关键字:

在本网页显示超链接