在HTML中使用JavaScript元素
<script>元素
元素属性
| 属性 | 使用状态 | 描述 |
|---|---|---|
| charset | 可选、少用 | 字符集 |
| defer | 可选、少用 | 表示脚本可以延迟至文档完全被解析后实行，部分浏览器不支持 |
| language | 废弃 | 编写代码使用的语言 |
| src | 可选 | 包含要执行代码的外部文件 |
| type | 可选 | type属性是必须写的属性吗? |
使用方式
页面嵌入JavaScript代码
<script>
alert('alllert!');
</script>
外部JavaScript文件
使用外部JavaScript文件时，标签内不应写代码，写了会被忽略
<script src="example.js"></script>
元素位置
放在<head>元素内
问题：放在<head>元素内，会使得JavaScript代码加载完后，才开始加载页面，造成用户等待
解决方式：
- 放在
<body>元素底部
<!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>Document</title>
</head>
<body>
<!-- 文本 -->
<script src="example.js"></script>
</body>
</html>
- 延迟脚本
脚本延迟到整个页面都被加载完后再执行
<script defer="defer"></script>
<noscript>元素
使用情况：
- 浏览器不支持脚本
- 浏览器支持脚本，但是脚本被禁用
此时<script>元素中代码不被执行，而执行<noscript>元素中代码