分享免费的编程资源和教程

网站首页 > 技术教程 正文

我用记事本做一张网页，vscode的安装并做一张div+css网页

goqiw 2024-11-07 11:05:12 技术教程 29 ℃ 0 评论
  • 本讲我们要做三个实例(后附原码)。
  • 一个是用记事本做一张网页。
  • 一个是用vscode做一张网页。
  • 一个是做一个简单的div+css的网页。

一、在做网页前，我们先了解一下什么是HTML?

  • 它是超文本标记语言，什么是超文本，我自己理解即是文本又超越文本。
  • 记住，HTML不是编程语言，只是一种标志语言，所以学习它比学习编程容易很多。
  • 它唯一的表现特点就是带<>的标签。
  • 浏览器的作用就是把一般人看不懂的HTML翻译成直观看得懂的网页。

二、开始了，新建一个空白的记事本文件，输入我们第一行html标签，记住，所有的标点字母都要是英文输入法下的字母和标点。

三、看见没，标签就是带<>的，这就是标签。

  • 我们再加入两行，虽然是两行，但却只是一个标签，一个是开始，一个是结束。
  • 你会发现带</>的标记是标签的结束符。

四、不得不说，head和body标签是网页里最重要的标签，几乎所有的网页都有这两个标签。

  • head英文里是“头”的意思，body英文里是“身体”的意思。
  • 在网页里，head一般放着一些外链文件，样式，或是网页标题，或是一些编码标识等等，这些后面慢慢理解。
  • body里放的是网页的内容，也就是我们打开网页时看到的内容，几乎都在body标签里。
  • 忘记了，head和body都是装在html里的，所以在<html></html>里面。

五、我们在head里写两个重要的标签。

一个是meta标签，一个是title标签。


  • 你会发现meta标签居然没有标签的结束符</meta>
  • 好吧，这里解释一下，网页里的标签大体有两种，一种是有结束符的，一种是像meta一样没有结束符的，以后就能慢慢了解了。
  • 标签里可以写一些属性，如charset="UTF-8"，所以标签里属性的写法是AAA="BBB"。
  • 如果有人问什么是属性，好吧，现实直观点<猫 名字="小花" 体重="5公重"></猫>

六、差不多了，现在才是真正的网页内容，我们在body标签里写一句话。

七、保存记事本文件，不管是windows操作系统还是mac的OX系统，文件都要保存成utf-8编码，不然网页会是乱码（因为有中文）。

八、还有一步，我们保存出来的文件是记事本文件myweb.txt，我们要把它的扩展名改成myweb.html，然后就可以双击打开了，浏览器会自动运行它的，看一下效果吧。

  • 有些windows系统的朋友如果看不见扩展名，可以百度一下查看扩展名的方法。
  • 来记事本来开发网页，终究是一件很辛苦的事情。
  • 于是世间出了很多的前端开发工具，它们能让我们事倍功半地完成网页开发。
  • 在众多选择中，我就以微软的vscode作为网页开发工具吧。
  • 打开vscode官网https://code.visualstudio.com/

九、我们打开官网，然后下载vscode，合适自己操作系统的vscode，网页会自动检测你的操作系统，我的是mac，所以打开官网的时候，就直接设定for mac了。

十、安装过程就不说了，按提示吧，安装完成后，软件vscode应该是这么一个标志。

十一、我们运行它，新建一个空白文件，然后保存它，我这里把它保存成test1.html，注意文件名要用英文起名，扩展名要.html。

十二、我们看一下它和记事本相比，优势在哪里。

  • 用英文输入一个感叹号，然后按回车(或tab)，直接生成空白网页的标签。
  • 除了多两个meta标签外，和我们刚才用记事本做的网页没什么区别。

十三、我们往网页里写内容吧，写在body标签里“这是我用vscode做的第一张网页”。

  • 看到那个小圆点没，有小圆点的意思是网页还没有保存，我们Ctrl+s保存网页，再运行看效果。
  • 用vscode做网页，我们已经完成了，接下来我们做一个div的例子。

十四、首先，我们先了解一下什么是div?

  • div标签，我喜欢叫它盒子，它主要的作用就是布局网页。
  • 天啊，什么是布局网页，看下图吧，这些绿色的矩形就是盒子，它让网页的各个模块部分都能按求整齐的分布在网页上，这就是布局。
  • 它规划了一个网页的排版，这就是布局。
  • 很久很久以前，网页布局用的是table标签。
  • 然后才发展到了用div。
  • 当然现在H5用的布局方式更细了。
  • H5用<nav> <header> <footer> <article> <section>。
  • 但仍然不能磨灭学习div布局的重要性，因为它们的方法是一样的，名字不一样而已。

十五、我们用vscode创建另一张网页test2.html。

十六、我们在body里面加入div标签，这就是盒子，在盒子里写字吧。

  • vscode中，输入div会有提示，回车后自动键入<div></div>

十七、为什么只有一行字，说好的盒子呢，其实盒子已然存在，只是它没有宽没有高没有背景色，于是你看不见它，但不代表它不存在，我们给它加样式，就能看见它了。

  • 给div加个样式。
  • 让它的宽是200像素，高是100像素，它有着红色的背景。
  • 让它距离网页顶部是50像素，距离网页左边是300像素。
  • 注意我们的style样式标签是写在head里面的。
  • 至于什么是样式，更多疑惑，我们先放着，后面会慢慢解释。

十八、总结。

十九、下一讲主要讲样式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>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表