课01.认识一张网页

项目下载地址:前往GitHub

01.认识一张网页——大纲

认识浏览器里的网页

我们天天用浏览器上网,我们打开百度和淘宝。你看到的浏览器里的内容,就是我们今天要说的网页。

网页要让用户正常访问到,需要浏览器来帮我们把我们程序员写的内容变成用户能看到的图片和文字。

整个过程我们称之为渲染。也就是浏览器渲染了一张网页。

下面是整个过程的步骤分解图

01.认识一张网页——浏览器

安装开发工具

用欲善其事,必先利其器。

磨刀不误砍柴工。

开始书写我们的第一张网页之前,我们先准备下我们的开发工具。编写网页,其实就是编写一个普通的文本文件,按理,任何一款文本编辑器软件都可以。当然,一款好的编辑器,会帮你进行代码着色,让你编码体验更加舒服。这里就推荐大家使用现在程序员都比较喜欢的轻量级的开发工具——Visual Studio Code,简称VSCode。

没有安装的同学 点击这里,下载安装 ,然后跟着上面的视频教程安装下。

书写第一张网页

下面是我们写的一个基本的网页结构

<html>
  <head>
    <title>第一课.第一张网页</title>
  </head>
  <body>
    这是我的第一张网页
  </body>
</html>
1
2
3
4
5
6
7
8

结构解析

  • 大部分的HTML标签是成对出现的,所有你会看到<html></html><head></head><title></title>这样一对一对的标签,<html>这种是开始标签,标签的名字放在两个< >中间,结束标签是标签名放在</ >标记中间。
  • <html>是每一张网页的最外层的标签,其他标签都写在这个标签内部
  • <head>是头部标签,用来放一些设置浏览器标题,meta标签之类的用户不太能直观看到的标签元素
  • <body>标签用来放置最终会显示到页面上的内容。

需要注意的是,我们在书写网页的时候,要注意缩进。至于怎么缩进的,你可以看我在视频里的演示。至于为什么要用缩进,是为了让你和你的小伙伴阅读网页源代码的时候,能够更加容易。毕竟我们的代码写出来,后面可能不只是我们自己阅读维护,所以为了你,和将来一起合作的小伙伴。你从现在开始也要养成良好的代码缩进的习惯。

这个不光是在写HTML页面的时候有这样的要求,后面你学JavaScript,学其他编程语言,也要有这样的习惯和意识。好的习惯从现在开始就养成起来吧,这只会让你将来受益更多。

课堂小结

这节课,我们主要学习了一下几个知识点

  • 浏览器渲染一张网页的基本过程。
  • 书写网页前的准备工作,安装开发工具。
  • 书写第一张网页,认知一个网页的基本结构。

课后作业

学完本节课,你可以在课后,做一些小练习。

运用今天学到的内容,试着编写一张网页。