使用 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>
相关文章
|
9天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
12天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
25 4
|
11天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
34 0
html5+three.js公路开车小游戏源码
|
20天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
70 6
|
29天前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
33 4
|
1月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
|
1月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
99 1
|
1月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
70 2