查看本章节

查看作业目录

需求说明：

  • 使用 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中的代码

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>

使用 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. 容器之分类与各种测试（三）——list部分用法

    list是一个双向链表 例程 #include<stdexcept> #include<memory.h> #include<string> #include< ...

  2. iOS11&IPhoneX适配

    1.在iOS 11中,会默认开启获取的一个估算值来获取一个大体的空间大小,导致不能正常显示,可以选择关闭.目前尝试在delegate中处理不能很好的解决,不过可以直接设置: Swift if #ava ...

  3. OC-私有方法，构造方法，类的本质及启动过程

    总结 标号 主题 内容 一 OC的私有方法 私有变量/私有方法 二 @property 概念/基本使用/寻找方法的过程/查找顺序 三 @synthesize @synthesize概念/基本使用/注意 ...

  4. FastDFS分布式文件系统及源码解析

    记录一次本人学习FastDFS-分布式文件系统的学习过程,希望能帮助到有需要的人. 首选得对此技术有个大概的了解,可以参考 https://www.cnblogs.com/centos2017/p/7 ...

  5. 【Services】【Web】【Nginx】静态下载页面的安装与配置

    1. 拓扑 F5有自动探活机制,如果一台机器宕机,请求会转发到另外一台,省去了IPVS漂移的麻烦 F5使用轮询算法,向两台服务器转发请求,实现了负载均衡 2. 版本: 2.1 服务器版本:RHEL7. ...

  6. 爬虫之正则表达式re模块

    为什么要学正则表达式 实际上爬虫一共就四个主要步骤: 明确目标 (要知道你准备在哪个范围或者网站去搜索) 爬 (将所有的网站的内容全部爬下来) 取 (去掉对我们没用处的数据) 处理数据(按照我们想要的 ...

  7. 「Python实用秘技01」复杂zip文件的解压

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的新系列文章「Python实用秘技」的第1 ...

  8. 如何优雅正确地通过interrupt方法中断线程

    为什么废弃Thread的stop函数? 简单来说就是stop方法中断线程太过暴力随意,且会是否线程持有的锁,会导致线程安全问题.还有可能导致存在需要被释放的资源得不到释放,引发内存泄露.所以用stop ...

  9. 对于React各种状态管理器的解读

    首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. reac ...

  10. 【kafka学习笔记】kafka的基本概念

    在了解了背景知识后,我们来整体看一下kafka的基本概念,这里不做深入讲解,只是初步了解一下. kafka的消息架构 注意这里不是设计的架构,只是为了方便理解,脑补的三层架构.从代码的实现来看,kaf ...