新手上路 01:建立一个主页

147 阅读5分钟

从这一篇开始,将使用vscode。

建立一个主页

在vscode中安装好相应的插件后,在左侧资源管理器中,选择【新建文件】,并通过修改尾缀格式来定义文件格式。

可以【新建文件夹】来管理多个网页项目或多个格式的配套文件。

微信图片编辑_20230329220058.jpg

另外请注意:
尽量不要【新建工作区】,因为建立多个工作区,将导致无法同时使用live server查看效果。live server一次只能预览一个工作区中的文件,如果切换到其他工作区,需要先停止原先工作区的live server,再运行新的工作区的live server。

所有新建的文件和文件夹,都会出现在电脑相对路径上。可以理解为不是用window自带的文件管理器的窗口打开了文件,而是用vscode打开了文件管理器。

我们需要先建立的,是【HTML】格式的主页文件,只需要新建文件后,起一个英文名再加上【.html】的尾缀就可以了。建立完成后,将在右侧打开文件。

开始编写你的主页

首先的首先,我们需要在右侧,切换到英文输入法,并打【】+【回车】。将会一下子出现非常多的东西。

微信图片编辑_20230329220913.jpg

在这个里面,包含了一个html页面具有的最大的基础框架,未来所有的网页界面都将通过这里面的内容,或加入链接引用其他文件补充来实现。
我们来认识一下这写了些什么:

  • 第一行!doctype,就是document type文件类型,后跟html表明文件类型。
  • 第二行出现的【html】到【/html】结束,包裹的是所有html的内容,并且在<>中说明了html语言为英语。
  • 第三行出现【head】开始,到【/head】结束,包裹的是所有在head中的内容。
  • 同理,【body】到【/body】中包括的是所有body的内容。

接下来详细解说一下html,head和body的内容都是什么。

  • html的内容实际上是包含了css和js的。之所以将他们并称为前端的三板斧并不是说他们是并列关系,而是在html的基础上发展出来的另外两个重要功能,与html各司其职,形成了前端界面的三板斧。css和js离不开html的基础框架,而html中包含了css和js。
  • head虽然叫head但是并不会真的显示在网页上,它是一层不可见的内容。它就好像一个网页的大脑,当你看到网页的时候,并不会看到它的大脑在想什么。在head中,将主要编写css样式。
  • body是html页面元素框架的定义部分。所有的页面元素将在这里被划分成多个包裹或并行的结构关系,并被定义为标签和类。然后再经过head中的css内容改变样式。当然,在这里也实际上也是可以写入css样式的,但因css样式类型过多,将会让body变得非常冗余,通常不会写在这里。
  • 在body中还可以写入js文件,这个我们之后再说。

这里我们可以简单了解一下为什么会有这种包含关系。在网页诞生之初,最早出现的是由简单的文字和图片组成的网页,这样的网页主要用于浏览信息。用户在浏览的时候并不能对页面进行操作,也没有多种样式来区分页面信息。这样的页面就是由最早期的html构成的。
随着计算机的发展,我们在网页上看到的内容不再是单一的超文本和图片。网页催生出了多样化的界面形态,信息层级也变得复杂了。css的发展作用于此,它帮助人们将网页上的文字和文字的信息权重区分开来,将图片和图片整理对齐。这实际上加快了人们浏览信息的速度,也进一步的推动了互联网信息的膨胀。
在这之后,当互联网行业高速发展之后,如何能够将信息更好地传达给用户并不是网页唯一的功能了,“冲浪”这一个行为本身变得有意义了起来。也就是说,互联网网页浏览,“冲浪”为这个行为从“传递/获取信息”变成了“如何高效获取”又变成了“如何有意义的获取”。这一层意义通过交互形式的多样化来实现:交互的形式多样了,人们浏览信息的行为改变了,浏览的行为就变得具有了意义。这就是通过js实现的交互形式跃进。
(以上内容没有任何参考文献,全凭作者自行感受和理解)

回到刚才的网页上。
总结回顾一下:在head中我们将写入页面元素的css央样式,在body中写入页面元素的定义和页面整体框架,且在未来会写入js的内容。

head的内容

head中所有以meta开头的内容都是网页的元信息,没有意外暂时不需要修改。
除了元信息之外。有一个非常重要的,且可以我们修改的内容,就是:【title】。 这个title就是我们在打开网页时,浏览器上方显示的网页名。

微信截图_20230329225623.png

当然,起你想起的就可以啦。
下一篇我们将开始学习干货了!