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

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

需求说明:


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

6.png


实现思路:

  1. 创建站点,新建HTML页面,在 HTML 页面的 <body>标签中编写 JavaScript 脚本,在脚本中输出超链接
  2. 在站点内创建一个 js 文件夹,在 js 文件夹内创建 JavaScript 文件,在 JavaScript 文件内编写脚本,在脚本中输出超链接
  3. HTML 页面中添加 <script> 标签,将 <script> 标签的 src 属性设置为步骤(2)中 JavaScript脚本文件的地址即可
  4. 在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>
相关文章
|
2天前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
10 2
JavaScript HTML DOM
|
3天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
13 2
前端JS读取文件内容并展示到页面上
|
1天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
12 5
|
1天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
11 4
|
1天前
|
JavaScript 前端开发
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
9 2
|
4天前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
13 1
|
19天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
32 13
|
1月前
|
Linux
Linux 服务器下载百度网盘文件
本教程指导如何使用 `bypy` 库从百度网盘下载文件。首先通过 `pip install bypy` 安装库,接着运行 `bypy info` 获取登录链接并完成授权,最后将文件置于指定目录并通过 `bypy downdir /Ziya-13b-v1` 命令下载至本地。
32 1
Linux 服务器下载百度网盘文件
|
18天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
16天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐