第4章 用HTML建立超链接
建立超链接的方法
建立超链接的方法
建立超链接
什么是超链接？
超链接是指在网页中，通过点击某个文本或图像，可以跳转到其他网页或特定位置的链接。
基本语法
超链接的基本语法如下： [链接文本](链接地址)
显示链接文本
可以在方括号中输入链接的文本，例如： [点击这里](
跳转到外部网页
超链接可以跳转到其他网页，只需要在圆括号中输入目标网页的地址，例如： [跳转到百度](
跳转到内部网页
如果目标网页是同一网站下的内部页面，可以使用相对路径进行跳转。
例如： [跳转到关于页](/about)
跳转到特定位置
有时候我们希望链接直接跳转到目标页面的某个特定位置，可以在目标地址后面加上锚点，例如： [跳转到页面底部](
链接到电子邮箱
可以使用超链接发送电子邮件，只需要将mailto:加上邮箱地址
作为链接地址，例如： [发送邮件](mailto:)
链接到电话号码
有时候需要在网页中直接拨打电话，可以使用tel:加上电话号码
作为链接地址，例如： [拨打电话](tel:
图片链接
超链接不仅可以应用于文本，还可以应用于图片。
例如： 
以上就是建立超链接的一些基本方法，通过这些方法，你可以方
便地在网页中添加链接，实现页面之间的跳转和交互。
网页制作与开发教程_第4章建立超链接ppt课件
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
【例4-2】 路径示例 <html>
<head> <title>超链接</title>
</head> <body>
【例4-3】 超链接颜色设置示例 <html>
<head> <title>链接颜色的变化</title>
</head> <body text=blue alink=red vlink=yellow link=green>
注意<a href=1.html>颜色</a>的变化 </body> </html>
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
4.5
实践与练习：导航条
小结
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
4.2 使用Dreamweaver 8设置超链接
4.2.1 文字超链接 使一些文字成为超链接的方法非常简
单。用鼠标选中要变成超链接的文字，再 在“属性”面板的“链接”输入框中输入 要跳转到的目标页面，也可以按下输入框 旁边的文件夹图标，选择要跳转的文件。
Html语言——超级链接
编码 %3B %2F %3F %3A %40 %3D %26 %3C
7
School of Applied Technology Soochow University
URL的保留字符和不安全字符 的保留字符和不安全字符
字符 > “ ＃ : % { } |
2011-3-21
描述 大于号 双引号 井号 冒号 百分号 左大括号 又大括号 竖线
注意：一般除了字母、数字和“ 注意：一般除了字母、数字和“$,-,_,.,+,!,*,’,()外，其他 外 所有字符都应该使用编码” 所有字符都应该使用编码”
2011-3-21 School of Applied Technology Soochow University 9
2 建立指向其他页面的链接 其格式为： 其格式为： <a href=”目标文件的路径／目 目标文件的路径／ 目标文件的路径 标 文 件 名 .html”> 热点文本 </a>
热点文本
5） 创建指向本页中的链接 要在当前页面内实现超链接，需要定义两个标记： 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标 另一个为书签标记。超链接标记的格式为： 记，另一个为书签标记。超链接标记的格式为： <a href=”#记号名”> 热点文本<／a> 记号名” 热点文本 ／ 记号名 即单击热点文本，将跳转到“记号名”开始的文本。 即单击热点文本，将跳转到“记号名”开始的文本。 书签就是用<a>标记对该文本做一个记号。若有多个链接的书签名， <a>标记对该文本做一个记号 书签就是用 <a> 标记对该文本做一个记号 。 若有多个链接的书签名 ， 书签名在<a> name属性中定义 <a>的 属性中定义。 书签名在<a>的name属性中定义。 格式为： 格式为： <a name=”记号名”> 目标文本附近的字符串 <／a> 记号名” 记号名 ／
网页设计实用教程第4章超链接ppt课件
目录
• 引言 • 超链接的基本概念 • 如何创建超链接 • 超链接的使用场景 • 超链接的优化技巧 • 总结与展望
01 引言
课程简介
本章将介绍超链接在网页设计中的重 要性和应用，帮助读者掌握如何创建 和管理超链接，提高网页的交互性和 用户体验。
学习目标：了解超链接的概念、类型 和创建方法；掌握如何设置链接颜色 、下划线样式等样式属性；理解相对 路径和绝对路径的区别和应用场景。
链接的命名规范
总结词：统一规范
详细描述：超链接的命名应该统一规范，保持一致的风格和格式。这有助于提高网站的规范性和专业 性，同时也有利于网站的SEO优化。
链接的颜色和字体设置
总结词：突出重点
详细描述：为了突出重点，超链接的颜色和字体设置应该 与普通文本有所区别。通常，超链接会以醒目的颜色和不 同的字体样式显示，以吸引用户的注意力。
详细描述：超链接的交互设计应该提供易于返回的功能 ，方便用户返回上一个页面或回到主页。这有助于提高 用户体验，降低用户的操作成本。
06 总结与展望
超链接的重要性
导航功能
超链接是网页导航的核心，通过 超链接，用户可以方便地跳转到 其他页面或网站，提高浏览体验。
信息关联
超链接可以将不同页面或网站的内 容关联起来，形成知识网络，方便 用户获取更全面的信息。
02 超链接的基本概念
什么是超链接
总结词
超链接是网页中非常重要的元素之一，它允许用户通过点击文本、图片或其他 网页元素，从一个网页跳转到另链接，用户可以通过点击超链接来访问不同的网页 或网站。超链接使用户能够方便地浏览和获取信息，是互联网中不可或缺的组 成部分。
总结词
HTML使用标签a来设置超文本链接
HTML使⽤标签a来设置超⽂本链接HTML 超链接（链接）HTML使⽤标签 <a>来设置超⽂本链接。
超链接可以是⼀个字，⼀个词，或者⼀组词，也可以是⼀幅图像，您可以点击这些内容来跳转到新的⽂档或者当前⽂档中的某个部分。
当您把⿏标指针移动到⽹页中的某个链接上时，箭头会变为⼀只⼩⼿。
在标签<a> 中使⽤了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：⼀个未访问过的链接显⽰为蓝⾊字体并带有下划线。
访问过的链接显⽰为紫⾊并带有下划线。
点击链接时，链接显⽰为红⾊并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展⽰样式会根据 CSS 的设定⽽显⽰。
HTML 链接语法链接的 HTML 代码很简单。
它类似这样：<a href="url">链接⽂本</a>href 属性描述了链接的⽬标。
.实例<a href="https:///">访问教程</a>上⾯这⾏代码显⽰为：访问菜鸟教程点击这个超链接会把⽤户带到菜鸟教程的⾸页。
提⽰: "链接⽂本"不必⼀定是⽂本。
图⽚或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性使⽤ target 属性，你可以定义被链接的⽂档在何处显⽰。
下⾯的这⾏会在新窗⼝打开⽂档：实例<a href="https:///" target="_blank" rel="noopener noreferrer">访问教程!</a>HTML 链接- id 属性id属性可⽤于创建在⼀个HTML⽂档书签标记。
提⽰: 书签是不以任何特殊的⽅式显⽰，在HTML⽂档中是不显⽰的，所以对于读者来说是隐藏的。
实例在HTML⽂档中插⼊ID:<a id="tips">有⽤的提⽰部分</a>在HTML⽂档中创建⼀个链接到"有⽤的提⽰部分(id="tips"）"：<a href="#tips">访问有⽤的提⽰部分</a>或者，从另⼀个页⾯创建⼀个链接到"有⽤的提⽰部分(id="tips"）"：<a href="https:///html/html-links.html#tips">访问有⽤的提⽰部分</a>基本的注意事项 - 有⽤的提⽰注释：请始终将正斜杠添加到⼦⽂件夹。
第4章 建立超链接
“Internet属性 属性” 图4-6 “Internet属性”对话框
4.1.4 特定目标的链接 在制作网页时， 在制作网页时，可能会出现网页内容 过长或者是网页内容繁杂混乱的情况， 过长或者是网页内容繁杂混乱的情况，这 样当用户浏览网页时就会很不方便。 样当用户浏览网页时就会很不方便。要解 决这个问题， 决这个问题，可以使用超链接的手段在网 页开头的地方制作一个向导链接， 页开头的地方制作一个向导链接，直接链 接到特定的目标，这个目标成为“锚记” 接到特定的目标，这个目标成为“锚记”。
• • • • •
图4 - 5
超链接文字的颜色设置
【例4-3】 超链接颜色设置示例 】 <html> <head> <title>链接颜色的变化 链接颜色的变化</title> 链接颜色的变化 </head> <body text=blue alink=red vlink=yellow link=green> 注意<a 颜色</a>的变化 注意 href=1.html>颜色 颜色 的变化 </body> </html>
【例4-4】 锚记应用示例 】
<html> <head> <title>特定链接 特定链接</title> 特定链接 </head> <body> <h1>古诗鉴赏 古诗鉴赏</h1><p> 古诗鉴赏 <h3>单击 href=#春宫怨 春宫怨 单击<a 春宫怨>春宫怨 单击 春宫怨 春宫怨</a></h3><p> <h3>单击 href=#登科居 登科居 单击<a 登科居>登科居 单击 登科居 登科居</a></h3><p> <h3>单击 href=#五十言怀诗 五十言怀诗 单击<a 五十言怀诗>五十言怀诗 单击 五十言怀诗 五十言怀诗</a></h3><p> <a name=春宫怨 春宫怨><h2>春宫怨 春宫怨</h2></a> 春宫怨 春宫怨 昨夜风开露井桃， 昨夜风开露井桃，<p> 未央前殿月轮高。 未央前殿月轮高。<p> 平阳歌舞新承宠， 平阳歌舞新承宠，<p> 帘外春寒赐锦袍。 帘外春寒赐锦袍。<p> <br><br><br>
网页设计与制作
11.1属性选择器 11.2关系选择器 11.3结构化伪类选择器 11.4伪元素选择器 11.5 </html>链接伪类 11.6综合案例——CSS选择器应用 小结 习题
12.1盒子模型概述 12.2盒子模型相关属性 12.3背景属性 12.4 CSS3渐变属性 12.5综合案例 小结 习题
13.1 CSS3过渡 13.2 CSS3动画 13.3 CSS3变形 13.4综合实例 小结 习题
网页设计与制作
读书笔记模板
01 思维导图
03 目录分析 05 精彩摘录
目录
02 内容摘要 04 读书笔记 06 作者介绍
思维导图
关键字分析思维导图
网页
网页
教学
书
实例 综合
案例
读者 习题
元素
结构
第章
设计
属性
应用
小结
列表
网页
选择器
内容摘要
本书使用页制作工具Dreamweaver CC、Web技术标准HTML5和CSS3设计与制作页。本书将教学内容划分为16 个教学单元，从初学者的角度出发，以知识点示例、章节综合案例、全书综合案例和实验手册等形式，全面涵盖 页设计的基础知识、HTML5和CSS3技术、DIV CSS页布局技术等。讲解过程由浅入深、循序渐进，力求通过实例操 作让读者快速掌握页设计的方法和技巧。媒体资源包含书中所有实例的源文件以及教学用课件及相应微课视频， 以方便读者学习和参考。本书可供高等院校相关专业作为教材使用，也可供相关人员参考使用。
3.1列表元素 3.2图像标记 3.3 HTML5中的页面元素及属性 3.4综合案例 小结 习题
4.1初步认识超链接 4.2初步认识超链接的标记 4.3书签链接 4.4设置不同的链接对象 4.5页中的锚点 4.6综合案例 小结 习题
创建超链接实验报告
一、实验目的1. 理解超链接的概念和作用。
2. 掌握在网页中创建超链接的方法。
3. 学会使用不同类型的超链接，如文本超链接、图像超链接等。
4. 熟悉超链接属性设置，提高网页设计水平。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 网页制作软件：Dreamweaver CC三、实验内容1. 超链接的基本概念超链接（Hyperlink）是网页中的一种重要元素，用于连接不同的网页或页面元素。
通过超链接，用户可以轻松地在不同的页面之间进行跳转，提高浏览体验。
2. 创建文本超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的文本。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
3. 创建图像超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在“设计”视图中，选中要设置为超链接的图像。
（3）在“属性”面板中，找到“链接”属性，输入目标网页的URL。
（4）点击“保存”按钮，保存网页。
4. 创建锚点超链接（1）打开Dreamweaver CC，创建一个新的HTML文档。
（2）在需要创建锚点的位置，插入一个锚点标记（在“插入”面板中找到“常用”类别，选择“锚点”）。
（3）在“属性”面板中，为锚点设置一个ID，例如“top”。
（4）在目标位置，创建一个文本超链接，在“链接”属性中输入锚点的ID，如“#top”。
5. 设置超链接属性（1）在“属性”面板中，可以设置超链接的以下属性：- 链接目标：选择在新窗口中打开链接，或在当前窗口中打开链接。
- 图像映射：为图像创建热点区域，实现多个链接。
- 替换文本：为超链接设置鼠标悬停时的提示文本。
- 转换效果：设置超链接的显示效果，如边框、颜色等。
（2）根据实际需求，设置超链接属性，提高网页美观度。
四、实验结果与分析通过本次实验，我们掌握了以下内容：1. 超链接的基本概念和作用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4.2 设置页面内部特定目标的链接
<body> <h1>Web设计学习向导 设计学习向导</h1> <h1>Web设计学习向导</h1> <h2>在这里向您推荐最好的Web设计图书 在这里向您推荐最好的Web设计图书</h2> <h2>在这里向您推荐最好的Web设计图书</h2> href="#first">第 本书</a> href="#second">第 本书</a> <a href="#first">第1本书</a> <a href="#second">第2本书</a> <h3><a name="first"></a>精通CSS+DIV网页样式与布局 精通CSS+DIV网页样式与布局</h3> <h3><a name="first"></a>精通CSS+DIV网页样式与布局</h3> <p>本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术 本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术， <p>本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术，通过 大量实例对CSS进行深入浅出的分析，主要Байду номын сангаас括CSS的基本语法和概念， CSS进行深入浅出的分析 CSS的基本语法和概念 大量实例对CSS进行深入浅出的分析，主要包括CSS的基本语法和概念， 设置文字、图片、背景、表格、表单和菜单等网页元素的方法， 设置文字、图片、背景、表格、表单和菜单等网页元素的方法，以及 CSS滤镜的使用 滤镜的使用。 CSS滤镜的使用。</p> <h3><a name="second"></a>CSS设计彻底研究</h3> CSS设计彻底研究 <h3><a name="second"></a>CSS设计彻底研究</h3> <p>本书是一本深入研究和揭示CSS设计技术的书籍 本书是一本深入研究和揭示CSS设计技术的书籍。 <p>本书是一本深入研究和揭示CSS设计技术的书籍。本书在透彻地讲解 CSS核心技术的基础上 深入到各个实际应用领域中， 核心技术的基础上， CSS核心技术的基础上，深入到各个实际应用领域中，充分向读者演示 了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。 CSS的各项技术 了如何使用CSS的各项技术，实现令人眩目的网页布局和效果。</p>
4.7 框架之间的链接
<html> <head> <title>水平排列窗口 水平排列窗口</title> <title>水平排列窗口</title> </head> <frameset cols="30%,40%,*" > <frame name="leftFrame" src="a.htm"> <frame name="centerFrame" src="b.htm"> <frame name="rightFrame" src="c.htm"> </frameset> <noframes> <body> <p>This page uses frames, but your browser doesn't support them.</p> </body> </noframes> </html>
4.6 创建热点区域
可利用Dreamweaver精确定位热点区域 可利用Dreamweaver精确定位热点区域 Dreamweaver
4.7 框架之间的链接
• 框架的基本页面结构： 框架的基本页面结构： <html> <head> <title>…</title> </head> <frameset> <frame src="url"> </frameset> </html> 注意： 注意： <framset>…</framset>标记 <framset>…</framset>标记 是与<body>…</body>标 是与<body>…</body>标 <body>…</body> 记同级的．因此， 记同级的．因此，不要将 <framset>标记包含在 <framset>标记包含在 <body>标记之中 标记之中． <body>标记之中．
4.5 设置以新窗口显示链接页面
在默认情况下，点击链接， 在默认情况下，点击链接，目标页面是在同 一个页面显示． 一个页面显示． 若要在新窗口中显示目标页面，则需要在<a> 若要在新窗口中显示目标页面，则需要在<a> 标记中设置“target”属性 属性． 标记中设置“target”属性．
href=“1<a href=“1-1.html” target=“_blank”>……</a>
4.7 框架之间的链接
<html> <head> <title>纵横排列窗口 纵横排列窗口</title> <title>纵横排列窗口</title> </head> <frameset rows="*" cols="25%,*" frameborder="1" border="1" framespacing="50"> <frame src="left.htm" name="leftFrame" scrolling="NO" noresize> <frameset rows="21%,*" > <frame src="top.htm" name="topFrame" > <frame src="main.htm" name="mainFrame"> </frameset> <noframes> <body> <p>This page uses frames, but your browser doesn't support them .</p> </body> </noframes> </frameset>
第4章 用HTML建立超链接 章 建立超链接
4.1 4.2 4.3 4.4 4.5 4.6 4.7 设置基本文本超链接 设置页面内部特定目标的链接 设置图片的超链接 设置电子邮件链接 设置以新窗口显示链接页面 创建热点区域 框架之间的链接
4.1 设置基本文本超链接
<html> <head> <title>超链接 超链接</title> <title>超链接</title> </head> <body> "01.html">链接01页面 链接01页面</a> <a href= "01.html">链接01页面</a> </body> </html>
4.3 设置图片的超链接
<html> <head> <title>图片的超链接 图片的超链接</title> <title>图片的超链接</title> </head> <body> <a href=1.html><img src=cup.gif></a> </body> </html>
4.4 设置电子邮件链接
4.7 框架之间的链接
<html> <head> <title>垂直排列窗口 垂直排列窗口</title> <title>垂直排列窗口</title> </head> <frameset rows="40%,40%,*" frameborder="NO" border="0" framespacing="0"> <frame src="a.htm" name="topFrame" > <frame src="b.htm" name="middleFrame"> <frame src="c.htm" name="bottomFrame"> </frameset> <noframes> <body> <p>This page uses frames, but your browser doesn'tsupport them.</p> </body> </noframes> </html>