山地人

课01.认识一张网页

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

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

认识浏览器里的网页

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

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

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

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

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

书写第一张网页

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

<html>
<head>
<title>第一课.第一张网页</title>
</head>
<body>
这是我的第一张网页
</body>
</html>

还不知道什么含义,没有关系,先动手试试,按照上面的代码,在下面的编辑器里着写一写。

编写完毕后,可以按ctrl+s或者点击左下角的运行按钮,你写的HTML会渲染到右侧浏览器中

成对的标签

大部分的HTML标签是成对出现的,所有你会看到<html></html><head></head><title></title>这样一对一对的标签,<html>这种是开始标签,标签的名字放在两个< >中间,结束标签是标签名放在</ >标记中间。

<开始标签></结束标签>

三个标签的解释

  • <html>是每一张网页的最外层的标签,其他标签都写在这个标签内部
  • <head>是头部标签,用来放一些设置浏览器标题,meta标签之类的用户不太能直观看到的标签元素
  • <body>标签用来放置最终会显示到页面上的内容。

良好的书写习惯

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

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

下面是一个新手写的HTML页面结构,请你利用缩进方法帮他调整成更合理的格式。

课堂小结

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

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

课后作业

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

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

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。