1. 静态页面实现效果
上图是我们需要实现的静态页面效果，那么完成这样的静态页面需要哪些前置的条件呢？
（1）首先、我们需要创建一个网页。
（2）其次、我们需要了解网页的构成。
2. 如何创建一个网页
以vscode为例。
- 打开存放网页的目录，没有可以自己创建一个目录，再用vscode打开
- 右键点击【新建文件】，然后输入index.html，回车。
- 编写代码
<!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>
<p>Hello Word</p>
</body>
</html>
- 在浏览器中看效果 （1）第一种方式 windows上打开用于存放index.html的文件夹，然后右键文件，选择打开方式，使用浏览器打开。默认，其实双击文件也同样可以打开。
（2）利用插件打开 首先，需要安装Live Sever插件，安装完成后，在vscode中，直接右键文件，点击Open with Live Server。然后就可以再浏览器中看到我们创建的网页了。
5. 分析上面的代码
<!DOCTYPE html>是用来声明这是一个HTML5的文档。<html>是HTML的根元素，一个网页的根元素。<head>定义文档的元数据。我的理解就是给这个网页定义自己的属性。<title>定义网页的标题。<body>定义网页的内容。<p>定义一个段落。 无论是<html>还是<body>都可以称之为HTML的标签或者HTML的元素。p标签中间的东西称为元素的内容或者标签的内容。
观察上面不难发现HTML标签都是由尖括号和关键词组成的，比如<关键词></关键词>。
3. 网页世界的”三剑客“
构建网页的“三剑客”分别是HTML、CSS以及JavaScript。那么他们“三剑客”分别是做什么的呢？
HTML主要是用来构建网页的结构。CSS则是负责用来美化这些结构的，也就是用于构建网页的样式，而JavaScript主要是用控制网页的行为的。如果想要了解其他的内容可以去菜鸟教程看看。
4. 给新建的网页加点料
<!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>
<style>
p {
font-size: 80px;
color: red;
}
</style>
</head>
<body>
<p id="hello">Hello Word</p>
<script>
document.getElementById('hello').onclick = function () {
alert('hello word');
}
</script>
</body>
</html>
尝试点击一下Hello Word试试。
为什么在我们添加一点点代码后页面就表现成与之前不一样了呢？我们一点一点的去看我们新增的内容。
首先我们看一下style里面的东西。
<style>
p {
font-size: 80px;
color: red;
}
</style>
style看字面意思就是样式，关于样式，我们上面也说过css用来构建网页的样式的，所以style里面其实放的就是CSS。而CSS的编写规则大概如下面所示。
选择器 {
属性: 属性值;
}
再对应的看上面我们写的CSS去看。仔细一看会发现，这个选择器p与我们的p元素是相同的，那么像这种以标签名作为选择器的叫做标签选择器。再去看这个font-size，font是字体的意思，size则是大小的意思，连在一起就是字体大小。（PS：大家在学习CSS的时候可以通过他的因为意思来看这个属性的意思）。后面的80px就是字体的大小值。那么这个px是什么呢？px是单位，是一个像素单位。color是颜色，这里指的其实是字体的颜色。
然后我们再看下这个p标签。
相比上面的p标签这次多了个id的东西，这个叫标签的属性，这个id是用来给标签加唯一标识，就如同我们的身份证号，所以在一个网页中id是不能重复的。那么除了id这个属性，标签还有哪些属性呢？除了id，还有class、style、title等属性。在HTML中，元素的属性书写规则就是属性="属性值"。所以上面，我们就是给p元素的id属性设为hello。
最后看下我们再看下script标签中的内容。
script是脚本的意思，未来我们编写JS代码就是在这个标签当中编写。document.getElementById('hello')就是通过p标签上面的id来获取到这个p标签。.onclick就是给这个p标签加上点击事件。
