1. 前端页面在进行编写时需要使用三门计算机语言。
  3.     HTML ----- 结构层
  5.     CSS  ----- 表现层
  7.     Js   ----- 行为层(鼠标行为、键盘行为)
  9. 为方便编写、修改需要三层分离。

1.行内样式表**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
        <!-- 引入方式：

      1.行内样式表：

        使用方法：给HTML标签加入style属性，属性值为css的声明。

        使用频率：低。做不到表现层与结构层相分离。

        使用用途：配合Js使用，Js原生在取样式值时只取行内样式表。
    -->

        <h1 style='color:red;‘>测试文字</h1>
</body>
</html>

2.内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color: pink;
        }
    </style>
</head>

<body>
        <!-- 引入方式：

      2.内部样式表：

        使用方法：在head双标签中输入style双标签，用选择器{声明;}的方式进行编写。

        使用频率：低。做不到表现层与结构层相分离。

        使用用途：特定的页面写特定的样式。建议将内部样式表写在外联样式表之下。
    -->
</body>
</html>

3.外联样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
        <!-- 引入方式：

      3.外联样式表：

        使用方法：
                        a.创建css文件，进行编写后保存。

                        b.在head双标签中输入link标签，在href中关联css文件。

        使用频率：高。可以将表现层与结构层相分离。

        使用用途：前端页面的编写需要三层分离。
    -->
</body>
</html>