HTML加入JavaScript

本文介绍了在HTML中添加JavaScript的三种方法:1) 使用内部script标签在head或body中插入代码;2) 链接外部JavaScript文件,通常放在head或body底部;3) 使用行内脚本,虽然不推荐,但在特定事件控制上有时会用到。通过实例展示了每种方法的使用,并提到了浏览器加载和执行JavaScript的顺序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 三种添加JavaScript方法

1 在head或body标签中添加script标签,在两个script标签之间填写代码

2 添加外部JavaScript文件,在head或body标签添加JS链接外部样式表

3 使用行内脚本(不推荐)

  • 举例

1 添加script标签

1.1 在head标签内添加script标签

	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
		
		<script>
			alert("Yo, welcome to my website!");
		</script>
		<!...网页加载时弹出对话框...>
		
	</head>

注意:在点击确定前,浏览器没有渲染网页内容;

1.2 在body标签内添加script标签

	<body>
		<!...省略其他代码...>
		
		<script>
			alert("Yo, welcome to my website!");
		</script>
	</body>


注意:背景网页已加载完毕,因为浏览器在本网页末尾的body标签遇到该脚本,浏览器在处理JS前就已完成网页加载;

习惯上将JS脚本添加在body标签底部,但不是每次都奏效 ;


2 添加外部脚本文件


在index.html文件中,

	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
		
		<script src="scripts/main.js"></script>
		
	</head>

注意:也可将script标签添加在body标签中,显示效果与第一种方法相同;

将JS与script链接;将CSS与link链接;

在main.js文件中,

alert("Yo Wencheng, welcome to my website!");


3 添加行内脚本

在导航部分a标签内添加行内文本,当点击该链接时,先弹出警报,点击确定后再跳转到该链接;

<li><a onclick="alert('Yo Wencheng, welcome to my website!');" href="http://www.163.com" target="_blank">Link to Netease Web</a></li>

注意:需要将提示信息的双引号改成单引号,以免对onclick属性的双引号造成干扰;

对于行内脚本,适用于控制网页上的指定事件;






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值