必知必会！新媒体网页设计中的超级链接

最新推荐文章于 2025-02-23 00:03:46 发布

原创最新推荐文章于 2025-02-23 00:03:46 发布 · 1.6k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

计算机系统发展史及基础

1、超级链接的几个知识点

（1）超级链接的分类：根据创建链接对象的不同和链接到目标的位置和方式的不同，链接可分为源端点链接和目标端点链接。

源端点链接包括文本链接、图像链接和表单链接；目标端点链接包括内部链接、外部链接、锚点链接、电子邮件链接、下载链接和空链接。

在HTML中，链接是通过<a>标签创建的，不同的链接类型通过属性来区分。

源端点链接

（1）文本链接：这是最常见的链接类型，允许用户点击文本内容来导航到另一个页面或资源。

<a href="http://www.example.com">访问示例网站</a>

（2）图像链接：使用图像作为链接的载体，点击图像可以导航到另一个页面或资源。


<a href="http://www.example.com">
  <img src="image.jpg" alt="示例图片">
</a>

（3）表单链接：通常，表单不是通过<a>标签创建链接的，而是通过表单的action属性来指定提交数据的目标URL。但是，如果想要通过链接打开一个表单的提交对话框，可以使用<a>标签的href属性指向一个JavaScript函数，该函数会触发表单的提交。

<a href="javascript:document.getElementById('myForm').submit();">提交表单</a>

目标端点链接

（1）内部链接：指向同一网站内的其他页面或资源的链接。


<a href="/about.html">关于我们</a>

（2）外部链接：指向其他网站页面的链接。

<a href="http://www.external-site.com">访问外部网站</a>

（3）锚点链接：指向同一页面内特定位置的链接。

<a href="#section2">跳转到第二部分</a>

（4）电子邮件链接：通过点击链接启动电子邮件客户端，并预先填充收件人地址。

<a href="mailto:info@example.com">给我们发送邮件</a>

（5）下载链接：链接到可以下载的文件，通常会在服务器上设置相应的MIME类型，以便浏览器能够处理下载。

<a href="download/file.zip">下载文件</a>

（6）空链接：不指向任何目标，通常用于页面设计中预留位置，或者通过JavaScript动态添加功能。

<a href="#">空链接</a>

2、如何定义链接目标

链接的目标可以通过target属性来进一步定义，例如_blank表示在新窗口或标签页中打开链接，_self表示在相同的框架中打开链接（默认值），_parent表示在父框架集中打开链接，_top表示在整个窗口中打开链接。

（1）_blank：在新窗口或标签页中打开链接。

<a href="http://www.example.com" target="_blank">在新窗口中打开示例网站</a>

（2）_self：在同一框架或窗口中打开链接文件。（默认值，所以通常不需要显式指定）。

<a href="http://www.example.com" target="_self">在同一框架中打开示例网站</a>

（3）_parent：在上一级窗口中打开链接文件。在框架网页中比较常用。

<a href="http://www.example.com" target="_parent">在父框架集中打开示例网站</a>

（4）_top：在整个窗口中打开链接，忽略任何框架。

<a href="http://www.example.com" target="_top">在整个窗口中打开示例网站</a>

（5）new：作用同_blank，当重复单击同一链接时，new是始终在同一个新窗口刷新，而_blank则是始终产生不同的新窗口。

3、如何创建图像链接

在HTML中，创建图像映射（image map）可以实现图像上的不同区域作为不同的链接。图像映射允许你定义多个热点区域，每个区域可以链接到不同的目标。

（1）指针热点（整个图像作为一个链接）：这不是图像映射，而是将整个图像作为一个链接。

<a href="http://www.example.com">
  <img src="image.jpg" alt="示例图片">
</a>

（2）矩形热点：使用<map>和<area>标签创建矩形热点区域。

<img src="image.jpg" alt="示例图片" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="50,100,150,200" href="http://www.example.com" alt="矩形区域">
</map>

coords属性指定了矩形的左上角（50,100）和右下角（150,200）的坐标。

（3）圆形热点：使用<map>和<area>标签创建圆形热点区域。

<img src="image.jpg" alt="示例图片" usemap="#imagemap">
<map name="imagemap">
  <area shape="circle" coords="100,100,50" href="http://www.example.com" alt="圆形区域">
</map>

coords属性指定了圆心的坐标（100,100）和圆的半径（50）。

（4）多边形热点：使用<map>和<area>标签创建多边形热点区域。

<img src="image.jpg" alt="示例图片" usemap="#imagemap">
<map name="imagemap">
  <area shape="poly" coords="50,100,150,100,100,200" href="http://www.example.com" alt="多边形区域">
</map>

coords属性指定了多边形每个顶点的坐标。至少需要三个点来定义一个多边形。

4、创建脚本链接

（1）简单的JavaScript警告框：

<a href="javascript:alert('这是一个警告框！');">点击我</a>

当用户点击这个链接时，会弹出一个警告框显示消息。

（2）调用函数：假设你有一个JavaScript函数叫做myFunction，你可以在链接中调用它：

<a href="javascript:myFunction();">执行函数</a>
<script>
  function myFunction() {
    alert('函数被调用了！');
  }
</script>

（3）修改页面内容：你可以使用JavaScript来修改页面的内容，例如，改变一个<div>的内容：

<a href="javascript:document.getElementById('myDiv').innerHTML = '内容已改变';">改变内容</a>
<div id="myDiv">这里的内容将会被改变。</div>

虽然使用javascript:协议在href属性中嵌入JavaScript是一种常见做法，但是它不符合现代Web开发中关于分离内容和行为（content和行为）的最佳实践。此外，它可能会带来一些安全风险，比如代码注入攻击。

因此，更推荐的做法是使用事件处理来绑定行为，例如，使用addEventListener或者在HTML中直接使用onclick属性。以下是一个使用onclick属性的示例：

<a href="#" onclick="myFunction(); return false;">执行函数（推荐方式）</a>
<script>
  function myFunction() {
    alert('函数被调用了！');
  }
</script>

return false;阻止了链接的默认行为（即跳转到#），这样就不会在页面中看到不必要的滚动。这种方法将JavaScript代码与HTML内容分离，使得代码更容易管理和维护。

5、网页中常用的JavaScript是什么

（1）变量声明：

var（ES5及之前版本）：用于声明变量。
let（ES6及之后版本）：用于声明块级作用域的变量。
const（ES6及之后版本）：用于声明块级作用域的常量。

var x = 10;
let y = 20;
const z = 30;

（2）数据类型：：

String：字符串类型。
Number：数字类型。
Boolean：布尔类型。
Array：数组类型。
Object：对象类型。
null：空值。
undefined：未定义。

（3）函数：用于定义可重复使用的代码块。

function myFunction(a, b) {
  return a + b;
}

（4）条件语句：if、else if、else：用于条件判断。

if (x > 10) {
  // 执行代码
} else if (x < 10) {
  // 执行其他代码
} else {
  // 执行默认代码
}

（5）循环语句：for、while、do-while：用于循环执行代码。

for (let i = 0; i < 10; i++) {
  // 执行十次
}

（6）事件处理：通过事件监听器来响应用户操作。

document.getElementById('myButton').addEventListener('click', function() {
  // 点击按钮时执行
});

6、相对路径和绝对路径

在网页设计中，相对路径和绝对路径是用于链接到网页中的资源（如图片、样式表、脚本等）的两种不同类型的路径。

（1）相对路径（Relative Path）：相对路径是指从当前文件（即包含该路径的文件）到目标资源的相对位置。它基于当前文件的位置来指定路径，不包含域名信息。相对路径适用于网站内部资源的链接，当网站的结构保持不变时，这些路径不会断裂。

假设你有以下文件结构：

- website/
  - index.html
  - images/
    - logo.png
  - css/
    - style.css

在 index.html 中，你可以使用以下相对路径来链接到其他文件：

链接到 style.css

<link rel="stylesheet" type="text/css" href="css/style.css">

链接到 logo.png：

<img src="images/logo.png" alt="Logo">

（2）绝对路径（Absolute Path）：绝对路径是指从网站根目录到目标资源的完整路径，包括域名。它不依赖于当前文件的位置，而是从网站的顶层开始指定路径。绝对路径通常用于链接到外部资源或确保链接不会因页面位置的变化而断裂。

假设你的网站域名为 www.example.com，并且你有以下文件结构

- http://www.example.com/
  - images/
    - logo.png
  - css/
    - style.css

在任意的 HTML 文件中，你可以使用以下绝对路径来链接到这些资源：

链接到 style.css：

<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">

链接到 logo.png：

<img src="http://www.example.com/images/logo.png" alt="Logo">

在实际的网页设计中，相对路径是最常用的，因为它提供了更大的灵活性和可移植性。然而，当需要确保链接不会因页面移动或网站重构而断裂时，绝对路径可能是更好的选择。

标签

#媒体 #html #css