查看本章节

查看作业目录

需求说明：

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

实现思路：

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

实现代码：

JS中的代码

  1. document.write("<a href='http://www.baidu.com'>点击我跳转到百度首页</a>")
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<!-- 第二种方法，调用js/index.js -->
  7. 		<script type="text/javascript" src="js/index.js"></script>
  8. 	</head>
  9. 	<body>
  10. 		<br />
  11. 		<!-- 第一种方法 -->
  12. 		<script type="text/javascript">
  13. 			document.write("<a href='http://www.baidu.com'>点击我跳转到百度首页</a>");
  14. 		</script>
  15. 		<br />
  16. 		<!-- 第三种方法 -->
  17. 		<a href="javascript:document.write('跳转成功')">点击我跳转到百度首页</a>
  18. 	</body>
  19. </html>

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

  1. 几种方式实现Javaweb页面跳转

    背景:       自己经手的一个java项目要实现带参页面跳转和页面跳转,完成任务后,总结一下自己知道了的几种方式. 实现: 首先我们有两大种方式来实现页面跳转:1.JS(javascript):2 ...

  2. springmvc和servlet在上传和下载文件（保持文件夹和存储数据库Blob两种方式）

    参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...

  3. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  4. word HTML文件与Markdwon互相转换的几种方式

    Tip:word文件与Markdwon转换往往是可逆的.无论使用哪种方式,要想完美转换,必须要预先处理掉markdown与word不兼容的格式,如word文件对象,带边框的代码块等等 方法一:借助pa ...

  5. vue-router 路由传参的几种方式，刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  6. 模块化Javascript代码的两种方式

    1.将模块整体放在函数里 function buildMonthNameModule() { var names = ["January ", "February&quo ...

  7. CefSharp获取页面Html代码的两种方式

    CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...

  8. 如何将class文件打包成jar 这里提供两种方式！

    原地址:http://blog.163.com/09zzy@126/blog/static/711976652011101001530/ 如何将class文件打包成jar文件,这是一个很严肃的问题,当 ...

  9. Git设置文件或目录忽略跟踪的三种方式

    1. 共享的忽略设置方式 本地仓库根目录,创建.gitignore文件,并编辑正则匹配需要忽略的文件或目录. .gitignore文件需要上传到仓库,同时会影响到他人,共享忽略设置 注意: .giti ...

随机推荐

  1. Lombok安装及Spring Boot集成Lombok

    文章目录 Lombok有什么用 使用Lombok时需要注意的点 Lombok的安装 spring boot集成Lombok Lombok常用注解 @NonNull @Cleanup @Getter/@ ...

  2. 利用Lombok编写优雅的spring依赖注入代码,去掉繁人的@Autowired

    大家平时使用spring依赖注入,都是怎么写的? @Servicepublic class OrderService {@Autowiredprivate UserService userServic ...

  3. Linux服务器---xopps

    XOOPS XOOPS是一款用php制作的开源网站管理系统,可用于构建各种网络站点. 1.下载XOOPS软件(https://xoops.org/) 2.将XOOPS软件中的htdocs文件夹拷贝到a ...

  4. Linux基础命令---ftp

    ftp ftp指令可以用来登录远程ftp服务器. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora.   1.语法       ftp [ ...

  5. js处理title超长问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. linux 操作只读变量

    由于该操作需要用到 gdb,所以需要先 安装好 gdb 1. 查询是否有gdb: 2. 如果没有,需要先执行 yum install gdb 命令进行安装 3. 定义 只读变量 abc 并打印值: a ...

  7. vue cli3.0 首次加载优化

    项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...

  8. CSS伪类选择器实现三角形

    使用css实现常用的三角效果 项目中三角: .breadcrumb{ height: 40px; line-height: 40px; padding: 0 20px; border-top: 1px ...

  9. JS 中常用的去重

    第一种:indexOf (获取字符串值在字符串中首次出现的位置,若没有这个值,则返回-1) let arr = [15,45,88,45,78,15,55,88]; let arr1 = []; // ...

  10. 2020ACTF pwn writeup

    为了打2021的ACTF,想着把2020年的pwn题做一做吧,发现2020年的pwn题质量还挺高的.反倒是2021年的题目质量不太高,好像是没有专门的pwn师傅出题,可以理解,毕竟办校赛,说白了就是用 ...