HTML实战(3)：实现按钮的功能

最新推荐文章于 2024-06-10 20:53:57 发布

xwLink1996

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量534

点赞数 11

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/nianfen/article/details/138969852

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.script控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新建HTML</title>
	</head>
	<script>
		document.write("Hello World!")
	</script>
	<body>
		<h1>我的标题</h1>
		<p>我的段落。</p>
	</body>
</html>

2.按钮绑定功能function

<!DOCTYPE html>
<html>
	<head>
		<title>弹窗示例</title>
		<script>
			function showAlert() {
			  alert('这是一个弹窗！');
			}
		</script>
	</head>
	<body>
		<button onclick="showAlert()">点击这里弹窗</button>
	</body>
</html>

3.script绑定外部文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>新建HTML</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<!-- 轮播图开始 -->
		<div class="box" id="box">
			<!-- 图片 -->
			<ul class="pics" id="pics">
				<li class="current">
					<img src="imeges/banner1.png" alt="">
				</li>
				<li>
					<img src="imeges/banner2.png" alt="">
				</li>
				<li>
					<img src="imeges/banner3.png" alt="">
				</li>
			</ul>
			<!-- 按钮 -->
			<div class="btn" id="btn">
				<a href="javascript:;" class="left-btn" id="left-btn">&lt;</a>
				<a href="javascript:;" class="right-btn" id="right-btn">&gt;</a>
			</div>
			<!-- 小圆点 -->
			<ol class="sub" id="sub">
				<li class="current"></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		<!-- 轮播图结束 -->
		<!-- 引入外部js轮播图代码 -->
		<script src="js/banner.js"></script>
	</body>
</html>

script标签为什么要放在body标签的底部？script标签为什么要放在body标签的底部-帅地玩编程

因为浏览器在渲染html的时候，从上到下依次执行，遇到js文件就会停止当前页面的渲染，转而去下载js文件，如果将script标签放在头部，如果文件又很大的情况下，首屏时间就会延长，影响用户体验。

解决方法：