如何利用HTML超链接打开链接文件

HTML利用超链接打开链接文件

HTML利用超链接打开链接文件 先看两个示例 建立一个超链接 这个示例演示了如何在HTML文件里创建超链接。 将一个图片作为一个超链接 这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。a和href属性 HTML用来表示超链接，英文叫anchor。 可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下： 链接的显示文字 点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。 比如链接到https://www.sodocs.net/doc/119224225.html,/html站点首页，就可以这样表示： 站长网站长学院https://www.sodocs.net/doc/119224225.html,/html首页 target属性 使用target属性，可以在一个新窗口里打开链接文件。 站长网站长学院 https://www.sodocs.net/doc/119224225.html,/html首页 示例 title属性 使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。 站长网站长学院网站 如果希望注释多行显示，可以使用 作为换行符。 站长网站长学院网站 示例 name属性 使用name属性，可以跳转到一个文件的指定部位。 使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name： 参见第一章 第一章 示例 name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置Name属性。当用户点击某个章节的链接时，这个章节的内容就显示在最上面。 如果浏览器不能找到Name指定的部分，则显示文章开头，不报错。 链接到email地址 在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用可以实现这样的功能。 联系新浪

网站制作HTML文件中最重要的应用之一就是超链接

HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。 建立超链接的标签为和 格式为：超链接名称 说明：标签表示一个链接的开始，表示链接的结束； 属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问 TARGET:该属性用于指定打开链接的目标窗口，其默认方式是原窗口。 建立目标窗口的属性 TITLE：该属性用于指定指向链接时所显示的标题文字。 "超链接名称"是要单击到链接的元素，元素可以包含文本，也可以包含图像。文本带下划线且与其它文字颜色不同，图形链接通常带有边框显示。用图形做链接时只要把显示图像的标志嵌套在之间就能实现图像链接的效果。当鼠标指向"超链接名称"处时会变成手状，单击这个元素可以访问指定的目标文件。 4-1 链接路径 每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。 URL(Uniform Resourc Locator)中文名字为"统一资源定位器"。指的就是每一个网站都具有的地址。同一个网站下的每一个网页都属于同一个地址之下，在创建一个网站的网页时，不需要为每一个连接都输入完全的地址，我们只需要确定当前文档同站点根目录之间的相对路径关系就可以了。因此，链接可以分以下三种：

CSS样式表链接

1 、内联样式表 例如我们要设置一HTML 页面中所有H1 标题字显示为蓝色，其代码如下：< HTML> < HEAD> < TITLE>This is a CSS samples< /TITLE> < STYLE TYPE="text/css"> < !-- H1 { color: blue } --> < /STYLE> < /HEAD> < BODY> ... 页面内容… < /BODY> < /HTML> 1、样式表信息包括在 < style> 和 < /style> 标记中； 2、放到 < HEAD> 和< /HEAD> 中去； 3、整个页面中产生作用。 注意： 1、< STYLE> 标记中包括了TYPE ＝“text/css” ，这是让浏览器知道你是使用CSS1 样式规则。 2.、加入< !-- 和--> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。 在使用样式表时，经常会有多标志用同一个属性 比如： B { color: red} I { color: red} H1 { color: red} 用逗号分隔各个HTML 标志，把三行代码合并成一行，我们可以写成：B,I,H1 {color: red} 同一个HTML 标志，可能定义到多种属性，例如，我们规定把从H1 到H6 各级标题定义为红色黑体字，带下划线，则应写为： H1,H2,H3,H4,H5,H6 { color: red; text-decoration: underline; font-family: " 黑体" } 注意各个标志属性之间用分号隔开。

内联样式表还包括一种直接插入方式，即单独指定HMTL 页面中某一个标志，规定其风格样式，可以写为： < Table style=" font-size:10pt; color:blue"> 定义该表格内的字符大小为10pt ，颜色为蓝色。 2 、外部样式表 建立一个完全独立的文本文件，其扩展名为.css，文件内容则输入样式表信息，除去任何相关的HTML 语言。 例如在外部样式表中输入： body { line-height: 130pt} H1,H2,H3,H4,H5,H6 { color: red; text-decoration: underline; font-family: " 黑体" } b { font-style: italic; color: #FF3333; text-decoration: underline } 少了< STYLE> 和注释标记。保存为example.css 。 有两种办法可以实现引用外部样式表。 （一）使用< LINK> 标记链接外部样式表 < LINK REL=STYLESHEET HREF="example.css"> HREF 中应包含路径信息。 一个HTML 文档可引用多个外部样式表，例如： < LINK REL=STYLESHEET HREF="example.css"> < LINK REL=STYLESHEET HREF="style/other.css"> 首先链接的example.css 作为该文档缺省样式表，当样式定义产生冲突时首先满足前者。 （二）使用@IMPORT 导入样式表信息 存在于在< STYLE> 和< /STYLE> 标记中 例如： < STYLE TYPE=“text/css”> @import “example.css”; @import “style/other.css”; < /STYLE> 样式表产生作用的优先级按照导入的先后顺序来设定。样式表信息规则一多，就比较容易产生冲突。这时就看哪一个样式表被引用在前，它就是具有第一优先权的。

HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局

单元5网页超链接与导航栏的美化与布 局 一个完整的网站往往包含了多种不同形式的超链接，可能是文本，也可能是图像，单击网页中的超链接，就可以跳转到另一个网页，或者同一个网页中的不同位置。网页中应用最广泛的是文本超链接，其默认的样式是蓝色并添加下划线。 导航栏可以理解为超链接的有序排列，导航栏的布局方式通常分为横向排列、纵向排列、弧形排列、浮动式和标签式等多种形式，导航栏也可做成弹出式菜单形式。 【知识预览】 1．HTML5的超链接与导航标签 （1）标签 标签用于定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是href属性，它指示链接的目标。 （2）