Web前端 您所在的位置:网站首页 超链接新窗口打开的属性和属性值是 Web前端

Web前端

2024-07-07 13:17| 来源: 网络整理| 查看: 265

一.超链接

HTML使用标签 来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

一个未访问过的链接显示为蓝色字体并带有下划线。 访问过的链接显示为紫色并带有下划线。 点击链接时,链接显示为红色并带有下划线。 注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。 1. 格式的写法 (1). href属性 DOCTYPE html> 超链接 超链接 超链接2

结果: 在这里插入图片描述

(2). name属性

通过name属性来规定锚(anchor)的名称,锚可以用于创建HTML页面中的书签

通过name属性定义了三个超链接,name属性定义了三个锚点"anchor01"、“anchor02”、“anchor03”,这三个锚点相当于书签的作用

其中href属性值分别设定为"#anchor01"、"#anchor02"、"#anchor03",分别链接到这三个锚点

DOCTYPE html> 超链接 HTML5 + CSS + JS --- HTML超链接;a;之name属性 anchor01 anchor02 anchor03 锚点 - 01 锚点 - 02 锚点 - 03

在这里插入图片描述

(3). target属性

指定超链接打开的位置和跳转到页面的位置

DOCTYPE html> Document 超链接1 超链接2 这是一个新的超链接 去底部 回到顶部 (4). id属性

在HTML文档中插入ID:

有用的提示部分

在HTML文档中创建一个链接到"(id=“tips”)":

访问有用的提示部分

或者,从另一个页面创建一个链接到"(id=“tips”)":

访问有用的提示部分

结果: 在这里插入图片描述

2. 电子邮件链接

电子邮件就是我们常说的E-mail,在HTML中为我们提供了一个mailto链接用于实现电子邮件的发送地址

在HTML中使用mailto链接,需要本机安装电子邮件客户端软件

(1). 发送邮件

mailto关键字用于定义电子邮件发送地址[email protected]

DOCTYPE html> 电子邮件链接 HTML5 + CSS + JS --- HTML超链接;a;之mailto链接 电子邮件发送及抄送地址:;; [email protected] ;;. 通过"mailto:[email protected]"实现功能.

在这里插入图片描述 在这里插入图片描述

(3). 实现抄送功能

抄送,顾名思义就是把你所要发送的邮件copy一份,同时发给别的人,注明“抄送”字样,这是提示对方,他不是主送人,不用答复、批复。

但这样收件人是能够看出来你在发给他的同时还发给谁了。如果不想别人知道,可以选择“暗送”和“密送”,是指在发给收件人的同时,还悄悄地抄送给别的人,收件人是看不出来的。

mailto定义电子邮件发送地址, ?后的cc参数定义了抄送地址

DOCTYPE html> 电子邮件链接 HTML5 + CSS + JS --- HTML电子邮件之抄送地址 电子邮件发送及抄送地址:;; [email protected][email protected] ;;. 通过"mailto:[email protected][email protected]"实现抄送功能.

在这里插入图片描述 在这里插入图片描述

(4). 实现电子邮件标题和正文

subject参数用于定义邮件标题 body参数用于定义邮件正文 各参数之间通过&字符连接

DOCTYPE html> 电子邮件链接 HTML5 + CSS + JS --- HTML电子邮件之标题和正文 电子邮件标题与正文:;; mailto:[email protected][email protected] &subject=Email%20Subject &body=Email%20Body%20Text. ;; 通过"subject"和"body"实现电子邮件标题和正文.

在这里插入图片描述 在这里插入图片描述

二 .连接路径 1. 相对路径

相对于当前文件的路径

html 相对路径的写法:

./ :代表文件所在的目录(可以省略不写)如果写成image/background就相当于是在html文件下找image文件夹,当然是找不到的 ../ :代表文件所在的父级目录 ../../ :代表文件所在的父级目录的父级目录 / :代表文件所在的根目录 DOCTYPE html> 相对路径 超链接1 超链接2 超链接3 2. 绝对路径

文件的完整路径

例如:

三. 超链接的类型 1. 根据目标端点的内容分类 (1). 内部链接

同一个网站内部,不同网页之间的链接关系

语法

源端点 (2). 外部链接

跳转到当前网站外部

语法:

源端点 URL格式服务描述默认端口号服务基本作用http://www进入万维网80超文本传输mailto:E-mail启动邮件发送系统ftp://FTP进入文件传输服务器21文件上传 下载telnet://Telnet启动远程登录方式23远程登录news://News启动新闻讨论组SSH22安全的远程登录DNS53域名解析 (3). 书签链接

指的是目标端点为网页中的某个书签(锚点)的链接。

举例:网页的回到顶部

创建书签方式:

创建书签

语法:

[文字/图片]

创建书签链接

语法:

链接到同一页面中的书签 称为内部书签链接 源端点 链接到其他页面中的书签,称为外部书签链接 源端点 (4). 脚本链接

指的是使用脚本作为链接目标端点的链路。通过HTML语言完成不了的功能

基本语法

源端点 (5). 文件下载链接

当链接的目标文档类型属于.doc、.rar、.cab、.zip、.exe等时 可以获得文件下载链接

要创建文件下载,只要在链接地址处输入文件路径即可,当用户单击链接后,浏览器会自动判断文件类型,作出不同情况的处理

语法:

链接内容 2. 按照源端点的内容,又可将链接分类 (1). 文本链接

指的是源端点为文本的超链接

语法

文本 (2). 图像链接

指的是源端点为图片文件的超链接

语法

四. 超链接与浮动框架 1. 在页面中嵌入浮动框架

浮动框架就像HTML页面中的其他对象一样,可以出现在页面的任何一个位置,但是与其对象不同的是浮动框架在页面中构建了一个区域,在这个区域中可以显示另一个HTML页面的内容,区域中显示的页面使用浮动框架的属性src来指定

基本语法

源文件地址指的是需要在浮动框架中显示的页面的地址,可以是绝对地址,也可以是相对地址 DOCTYPE html> 浮动框架 浮动框架就像HTML页面中的其他对象一样,可以出现在页面的任何一个位置, 但是与其对象不同的是浮动框架在页面中构建了一个区域, 在这个区域中可以显示另一个HTML页面的内容, 区域中显示的页面使用浮动框架的属性src来指定

在这里插入图片描述

2. 对浮动框架的属性进行设置 设置浮动框架大小

基本语法

设置浮动框架的边框

浮动框架边框的设置使用属性frameborder,可取值0或1

语法:

浮动框架作为超链接目标

应用方法:首先需要给浮动框架命名,然后将框架名作为超链接的target的属性值

DOCTYPE html> 浮动框架 链接到新浪网:目标窗口为浮动窗口

在这里插入图片描述 在这里插入图片描述



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有