JS三种书写位置
<!DOCTYPE html>
<html lang="en">
<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>JS三种书写位置</title>
<style></style>
<!-- 2.内嵌式的JS -->
<!-- <script>
alert('沙漠骆驼');
</script> -->
<!-- 3.引入外部JS文件 -->
<script src="my.js"></script>
</head>
<body>
<!-- JS有三种书写位置:行内、内嵌和外部 -->
<!-- 1.行内式的JS 直接写到元素的内部-->
<!-- 鼠标单击按钮,弹出秋香姐三个字 -->
<!-- <input type="button" value="唐伯虎" οnclick="alert('秋香姐')"> -->
<h4>1.行内式JS</h4>
<ul>
<li>可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如onclick。</li>
<li>注意单双引号的使用:在HTML中我们推荐使用双引号,JS中推荐使用单引号</li>
<li>可读性差,在HTML中编写JS大量代码时,不方便阅读</li>
<li>引号易错,引号多层嵌套匹配时,非常容易弄混</li>
<li>特殊情况下使用</li>
</ul>
<h4>2.内嵌JS</h4>
<ul>
<li>可以将多行JS代码写到script标签中</li>
<li>内嵌JS是学习时常用的方式</li>
</ul>
<h4>外部JS文件</h4>
<!-- 引入JS文件写法 -->
<!-- <script src="my.js"></script> -->
<ul>
<li>利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观又方便文件级别的复用</li>
<li>引用外部JS文件的script标签中间不可以写代码</li>
<li>适合于JS代码量比较大的情况</li>
</ul>
</body>
</html>
my.js文件
alert('如果我是DJ,你会爱我吗?');
效果展示