第一章 CSS和文档（CSS权威指南第三版）

第一章主要了解，整个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>