使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接

最新推荐文章于 2023-06-18 11:10:15 发布

最新推荐文章于 2023-06-18 11:10:15 发布 · 10w+ 阅读

该博客介绍了如何使用JavaScript在HTML页面上创建超链接的三种方法：直接在HTML中使用`document.write`，外部引用JavaScript文件以及使用`javascript:`伪协议。前两种方式点击链接会跳转至百度首页，第三种则在点击后在页面上显示文本“跳转成功”。示例代码详细展示了每种方法的实现细节。

查看本章节

查看作业目录

需求说明：

使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
前 2 种方式点击超链接后进入到百度首页，最后一种方式点击超链接后打印出字符串：“跳转成功”

实现思路：

创建站点，新建HTML页面，在 HTML 页面的 <body>标签中编写 JavaScript 脚本，在脚本中输出超链接
在站点内创建一个 js 文件夹，在 js 文件夹内创建 JavaScript 文件，在 JavaScript 文件内编写脚本，在脚本中输出超链接
HTML 页面中添加 <script> 标签，将 <script> 标签的 src 属性设置为步骤（2）中 JavaScript脚本文件的地址即可
在HTML 页面中，在 <body> 标签中添加一个超链接，超链接的目标地址使用 JavaScript 脚本输出

实现代码：

JS中的代码

document.write("<a href='http://www.baidu.com'>点击我跳转到百度首页</a>")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 第二种方法，调用js/index.js -->
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<br />
		<!-- 第一种方法 -->
		<script type="text/javascript">
			document.write("<a href='http://www.baidu.com'>点击我跳转到百度首页</a>");
		</script>
		<br />
		<!-- 第三种方法 -->
		<a href="javascript:document.write('跳转成功')">点击我跳转到百度首页</a>
	</body>
</html>