第一章主要了解，整个HTML文件里面，这个结构是怎么样排列的。
这一章主要内容：
- 如何引入外部css文件？
- 如何引入外部js文件？
- 如何内嵌css样式？
- CSS注释是什么？
1，2
这两行是主要的代码！ 负责引入外部的css文件和js代码语句， 当然可以引入多个js文件和css文件。
<link rel="stylesheet" type="text/css" media="screen" href="css/first.css">
<script src="js/first.js"></script>
3.1
内嵌css样式
<p style= "color: gray;">
4.1
css注释
/*我是css的注释*/
//题外话
//检查代码报错
The value of attribute [ http-equiv ] must be in double quotes.(attr-value-double-quotes)
我一键生成的代码是带有单引号的，插件检查默认的规则是双引号的
vscode插件设置问题，这边我懒得设置，不影响正常代码运行
//这是vscode一键生成的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- 这个我自己加的 -->
<p>这是我第一个网页</p>
</body>
</html>
文件结构.png
全部结合在一起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>My First page</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!--引入外部链接-->
<link rel="stylesheet" type="text/css" media="screen" href="css/first.css">
<script src="js/first.js"></script>
</head>
<body>
<p >这是我第一个网页</p>
<!-- 内嵌样式-->
<p style="color: brown;">这是我第一个网页</p>
<p style="color: brown;/*我是css的注释*/">这是我第一个网页</p>
</body>
</html>
