JavaScript 如何引入到 HTML
网页上那些会动的效果、能交互的按钮，比如点击后弹出的提示、表单提交后的反馈，大多是JavaScript在“干活”。要让JavaScript发挥作用，第一步得把它“放进”HTML文件里，就像给空房间搬家具，得找对摆放的位置。
方法一：把代码直接写在HTML里——嵌入式引入
最基础的方式是把JavaScript代码直接放在HTML的<script>标签里，就像把家电直接搬进房间，不用额外的运输（外部文件）。
举个生活化的例子：你想在朋友的生日网页上，加一句“生日快乐”的弹窗祝福，不用单独写一个文件，直接在HTML里放这段代码就行。代码要放在<script>标签中间，这个标签得写在HTML的<head>（头部）或者<body>（主体）里，不过位置不同，效果会不一样。
比如把代码放在<body>的最后：
`html
<body>
<!-- 网页的文字、图片内容 -->
这是生日页面
<script>
alert('生日快乐呀🎉');
</script>
</body>
`
这样打开网页时，网页内容加载完才会弹祝福，不会出现“文字出来了，弹窗晚一步”的情况。如果写在<head>里，得加个小技巧，不然可能会报错——就像你提前把家电搬进来，但没等房间收拾好就插电，会出问题。
方法二：用外部文件装代码——文件式引入
如果JavaScript代码有几十行，甚至几百行，直接堆在HTML里会让文件变乱，就像房间里堆太多家电，不好收拾。这时候可以把代码单独存成一个.js格式的文件，再在HTML里“叫”这个文件过来，就像把大件家具放在储物间，用的时候再打开门拿。
比如，你把写好的弹窗代码存成一个叫birthday.js的文件，内容是：
`javascript
alert('生日快乐呀🎉');
`
然后在HTML里用<script>标签的src属性，指定这个文件的路径就行：
`html
<body>
这是生日页面
<script src="birthday.js"></script>
</body>
`
这个路径就像快递地址，如果birthday.js和HTML文件在同一个文件夹，直接写文件名就可以；如果在子文件夹，就要写js/birthday.js，就像快递要送到“小区→1号楼→201室”一样。
这种方式的好处是，多个HTML页面可以共用同一个.js文件，比如你有10个生日相关的网页，不用每个都写一遍弹窗代码，改代码只要改.js文件就行，省事儿又好维护。
方法三：常用的特殊写法——延迟加载/异步加载
有时候会遇到特殊情况：比如.js文件特别大，或者要等网页内容加载完再执行代码，这时候可以给<script>加两个属性，就像给家具加个“保护套”或者“延迟安装”的要求。
第一个是defer属性，相当于“延迟到整个HTML加载完再执行代码”。比如你把birthday.js的<script>写在<head>里，加上defer：
`html
<head>
<script src="birthday.js" defer></script>
</head>
`
这样即使放在头部，也不会抢HTML的加载，等所有文字、图片都出来了，再弹祝福，不会打乱网页的显示顺序。
第二个是async属性，适合那种和网页内容无关的独立代码，比如统计访问量的代码。加了async后，代码会和HTML一起加载，但加载完就立刻执行，不用等网页内容。不过它不会按代码的顺序执行，就像你先搬完了储物间的沙发，不管房间里的桌子有没有摆好，先把沙发放好。
最后要提醒的是，不管用哪种方式，<script>标签都不能写错，比如src的路径不能错，否则会找不到代码；嵌入式的代码要放在<script>中间，不能少了闭合标签。选对引入方式，才能让JavaScript和HTML好好配合，做出流畅的网页效果。