使用 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>
相关文章
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
373 2
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
340 3
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
182 4
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
508 6
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
496 0
html5+three.js公路开车小游戏源码
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
872 1
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
798 2
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
337 2
下一篇
开通oss服务