猫史档案馆

嘻嘻嘻嘻哈哈哈哈嘻嘻嘻嘻哈哈哈哈

1.打开编译器

截图：

没有。。。额。。。加载不出开，算了，就那样，呵呵呵

2.喵

下载：插件，商店在左边的第5个按钮

我们输入：Chinese

下载它，然后重启软件就OK了！

嘻嘻嘻！

下载2个插件

第一个：open in browser

第二个：View In Browser

3.建一个文件夹，在桌面

然后再编译器里打卡它，就OK了！

4.初始代码，emm.

再再文件夹里，新建一个文件格式入：名称.html

这样就好了！

先输入一个！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

然后按回车键就生成了代码，很方便！

代码如上：

5.内容讲解；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    这里写CSS
</head>
<body>
    这里写H喵L
</body>
</html>

注意，一个标签的前后要带"<" ">"

6.输入一行文字

我们直接再Body里写就可以了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     你好HELLOW!
</body>
</html>

代码如上：

这样就好了！

我们可以点击鼠标的右键，选则倒数第2个方框里的第一行文字，把他点一下就OK了！

（前提：要下载前面我说的2个插件！！！）

7.颜色化

在CSS区，输入一个标签，CSS要在这个标签里用！

这样就好了。

接着我们要写CSS了！

代码：div{

color:blue;

}

解：color是颜色的意思，所以我们要这样用！

html部分：

在body里输入

div这个标签是来引用样式的，不可以掉！

整体代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div{
             color: blue;
         }
    </style>    
</head>
<body>
    <div>
    133
    </div>
</body>
</html>

如上：

写出的效果，可以

点右键，找到Open,点击第一个就可以了！

886886886！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

猫史档案馆

H T M L教程第2章——简单的输出与，颜色

回复