当前位置：首页>科技>vscode编写css我用记事本做一张网页
发布时间：2026-07-21阅读(1)
一、在做网页前，我们先了解一下什么是HTML?
二、开始了，新建一个空白的记事本文件，输入我们第一行html标签，记住，所有的标点字母都要是英文输入法下的字母和标点。
三、看见没，标签就是带<>的，这就是标签。
四、不得不说，head和body标签是网页里最重要的标签，几乎所有的网页都有这两个标签。
五、我们在head里写两个重要的标签。
一个是meta标签，一个是title标签。
六、差不多了，现在才是真正的网页内容，我们在body标签里写一句话。
七、保存记事本文件，不管是windows操作系统还是mac的OX系统，文件都要保存成utf-8编码，不然网页会是乱码（因为有中文）。
八、还有一步，我们保存出来的文件是记事本文件myweb.txt，我们要把它的扩展名改成myweb.html，然后就可以双击打开了，浏览器会自动运行它的，看一下效果吧。
九、我们打开官网，然后下载vscode，合适自己操作系统的vscode，网页会自动检测你的操作系统，我的是mac，所以打开官网的时候，就直接设定for mac了。
十、安装过程就不说了，按提示吧，安装完成后，软件vscode应该是这么一个标志。
十一、我们运行它，新建一个空白文件，然后保存它，我这里把它保存成test1.html，注意文件名要用英文起名，扩展名要.html。
十二、我们看一下它和记事本相比，优势在哪里。
十三、我们往网页里写内容吧，写在body标签里“这是我用vscode做的第一张网页”。
十四、首先，我们先了解一下什么是div?
十五、我们用vscode创建另一张网页test2.html。
十六、我们在body里面加入div标签，这就是盒子，在盒子里写字吧。
十七、为什么只有一行字，说好的盒子呢，其实盒子已然存在，只是它没有宽没有高没有背景色，于是你看不见它，但不代表它不存在，我们给它加样式，就能看见它了。
十八、总结。
十九、下一讲主要讲样式CSS和DIV的故事，实例讲解，让大家对标签和样式有更多了解。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 200px; height: 100px; margin-top: 50px; margin-left: 80px; background: red; } </style></head><body> <div>这是我的第一个盒子</div></body></html>
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
