使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
查看本章节
查看作业目录
需求说明：
- 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
- 前 2 种方式点击超链接后进入到百度首页，最后一种方式点击超链接后打印出字符串：“跳转成功”
实现思路：
- 创建站点，新建HTML页面，在 HTML 页面的 <body>标签中编写 JavaScript 脚本，在脚本中输出超链接
- 在站点内创建一个 js 文件夹，在 js 文件夹内创建 JavaScript 文件，在 JavaScript 文件内编写脚本，在脚本中输出超链接
- HTML 页面中添加 <script> 标签，将 <script> 标签的 src 属性设置为步骤（2）中 JavaScript脚本文件的地址即可
- 在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 页面上打印出“点击我进入到百度首页”的超链接的更多相关文章
- 几种方式实现Javaweb页面跳转
背景: 自己经手的一个java项目要实现带参页面跳转和页面跳转,完成任务后,总结一下自己知道了的几种方式. 实现: 首先我们有两大种方式来实现页面跳转:1.JS(javascript):2 ...
- springmvc和servlet在上传和下载文件（保持文件夹和存储数据库Blob两种方式）
参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- word HTML文件与Markdwon互相转换的几种方式
Tip:word文件与Markdwon转换往往是可逆的.无论使用哪种方式,要想完美转换,必须要预先处理掉markdown与word不兼容的格式,如word文件对象,带边框的代码块等等 方法一:借助pa ...
- vue-router 路由传参的几种方式，刷新页面参数丢失
常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...
- 模块化Javascript代码的两种方式
1.将模块整体放在函数里 function buildMonthNameModule() { var names = ["January ", "February&quo ...
- CefSharp获取页面Html代码的两种方式
CefSharp在NuGet的简介是“The CefSharp Chromium-based browser component”,机翻的意思就是“基于Cefsharp Chromium的浏览器组件” ...
- 如何将class文件打包成jar 这里提供两种方式！
原地址:http://blog.163.com/09zzy@126/blog/static/711976652011101001530/ 如何将class文件打包成jar文件,这是一个很严肃的问题,当 ...
- Git设置文件或目录忽略跟踪的三种方式
1. 共享的忽略设置方式 本地仓库根目录,创建.gitignore文件,并编辑正则匹配需要忽略的文件或目录. .gitignore文件需要上传到仓库,同时会影响到他人,共享忽略设置 注意: .giti ...
随机推荐
- 如何设置eclipse下查看java源码
windows--preferences--java--installed jres --选中jre6--点击右边的edit--选中jre6/lib/rt.jar --点击右边的 source att ...
- spring注解-web
以往进行web项目开发都需要在web.xml配置servlet.filter.listener,在Servlet3.0可以通过注解的方式配置它们(注意:必须用tomcat7以上版本) @WebServ ...
- Oracle 学习PL/SQL
先上一张实用的图:用于转义字符的. SQL> select chr(42) ||'is what?' from dual; CHR(42)||---------*is what? 想转义哪个就转 ...
- 【Linux】【Services】【SaaS】Docker+kubernetes（12. 部署prometheus/grafana/Influxdb实现监控）
1.简介 1.1. 官方网站: promethos:https://prometheus.io/ grafana:https://grafana.com/ 1.2. 架构图 2. 环境 2.1. 机器 ...
- Mybatis中 SIMPLE、REUSE、BATCH的区别
Executor分成两大类,一类是CacheExecutor,另一类是普通Executor. 普通类又分为: ExecutorType.SIMPLE: 这个执行器类型不做特殊的事情.它为每个语句的执行 ...
- SpringMVC中@RestController和@Controller的区别
在使用SpringMVC时,对于Controller中的注解@RestController和@Controller需要我们区分清楚 @RestController注解相当于@ResponseBody和 ...
- Redis哨兵日常维护
目录 一.日常操作 指定一个从做新主 添加一个从节点 添加一个Setinel节点 一.日常操作 指定一个从做新主 有时候需要将当前主节点机器下线,并指定一个高一些性能的从节点接替 将其它从节点的sla ...
- 关于thinkPHP中的自动加载和手动导入
首先先讲自动加载: 前提:你的第三方类库要满足(1)符合命名规范和后缀的类库(2)使用命名空间,命名空间和路径一致的类库 (1)在ThinkPHP目录下的library目录下的每一个子目录都是一个根命 ...
- LuoguB2106 矩阵转置 题解
Content 给定一个 \(n\times m\) 的矩阵 \(A\),求其转置 \(A^\text T\). 数据范围:\(1\leqslant n,m\leqslant 100\). Solut ...
- shell 文件读取批量处理
cat ./redis-keys.txt | while read myline do echo ${myline} /usr/local/bin/redis-cli -h 000.00.00.000 ...