1. 标签 <script>
在深入学习HTML之前，我们先简单了解一下一个超赞的东西 ——JavaScript语言。
JavaScript 是一种强大的编程语言，用于创建动态和交互式的网页。它可以响应用户的操作，更改网页内容，与服务器交互，以及通过多种方式提高用户与网站的交互体验。
我们现在不会深入学习JavaScript，但有时候我会在示例中加入它，所以先来了解一下如何在HTML文档中嵌入JavaScript。
标签 <script> 用于在HTML文档中嵌入JavaScript代码。
CSS+HTML+JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript简介</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<script>
// 你的JavaScript代码在这里
alert('你好，世界！');
</script>
</body>
</html>
在这个例子中，使用了 标签 <script> 来嵌入一个简单的JavaScript代码，它会显示一个弹窗，内容是“你好，世界！”。
2. 引入外部脚本
有时候，把JavaScript代码放在单独的文件中会更好。这能改进代码的组织性并提高复用性。要引入JavaScript文件，也使用标签 <script>，并借助属性 src 指定JavaScript文件的名称。
引入外部JavaScript文件示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript简介</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
</body>
</html>
这个html文件让浏览器加载一个名为script.js的JavaScript文件，它可以包含与上例相同的代码：
JavaScript
//script.js:
// 你的JavaScript代码在这里
alert('你好，世界！');
defer属性用来告诉浏览器等到整个HTML文档加载和显示完毕后再执行脚本。
3. 内联代码
还记得我们在style属性中直接写css代码的例子吗？
HTML
<p style="color:red"> 红色</p>
同样地，我们也可以直接写JavaScript代码。
比如我们想让一个元素在点击时改变颜色为蓝色，就可以用以下代码：
HTML
<p style="color:red" onclick="this.style.color = 'blue';">红色</p>
用绿色标出的代码会在用户点击
元素时执行。很简单，对吧？
-
onclick: 一个HTML属性，指定在点击该元素时执行的函数。 this: 代表被点击的元素本身。-
style.color: 修改元素文本颜色的CSS属性。
GO TO FULL VERSION