疯呐！我居然给一群教师讲网页制作？
我想我大概是疯了，居然在这个面向教师和家长群体的公众号里给大家聊网页制作！🤣
事情的起因就是前几天我分享了我制作网上教学页面的流程：《疫情又来，我这样准备线上教学的，你们呢？》，然后就收到了一些留言：
今天稍微有空，还是给大家安排一期吧！我试试用最直白的话给大家讲讲，看看大家能不能有所收获。
只希望其他伙伴进到这篇文章后，不要以为进错了公众号，我们没有转型！🤣
访问网页的原理
我们每天都在访问网页，其中的原理其实很简单，我们可以简单看作是在网络上有一台电脑，我们用户都在访问这台电脑上的文件。
当然，这中间还有很多复杂的工作，我们不需要深入了解。
所以，如果我们制作好了自己的网页，得想办法把网页放在一台别人都能访问的电脑上，这样其他用户才能访问到我们的网页。
家用的宽带，运营商是不允许你做这样的事情的。 所以，你还得有一台服务器！
专业的服务器需要购买，但我们练手可以用免费的服务器。为了避免广告，请大家自行在网上搜索“免费空间”，找到免费的服务器来练手。
服务器可以理解为互联网中的一台电脑，在网络中要定位到它，就得靠ip地址，但ip地址太长不好记，于是就有了“域名”（也就是大家平时用的网址），使用“域名”指向某一台服务器的ip，我们要想记住和访问服务器就方便多了。比如：baidu.com、qq.com……
我们访问服务器上的网页，通常都是以这样的格式来访问：
域名/文件路径
比如，我之前为大家制作的教师必备导航页，就这样访问：
44886.com/go.htm
44886.com这是一个域名，它指向一台ip地址为82.156.195.xx的服务器，导航页就是这台服务器中一个名字为go.htm文件。
同理，我还可以在这台服务器上放置名字为index.htm、tts.htm、tools-qiciqi.htm等各种各样的文件，浏览器访问到这个文件后，就渲染给用户看。
这就是平时我们上网访问网页的简单原理。当然，这是简化了中间很多复杂的过程的。现在你明白了吗？
网页怎么制作的
接下来，我们就来看看平时我们访问到的网页是怎么制作出来的。当然，同样是简化了很多很多很多之后的。
我们平时在访问网页时，在页面空白处点击鼠标右键-查看源代码，就能看到那个网页的代码了。
看到网页的源代码：
我们今天只能来看看最基础的，否则可能用几十篇文章都写不完，如果你真的感兴趣，也可以系统地看看相关的教程或资料。
网页最基本的格式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网页的标题</title>
</head>
<body>
<p>用户看到的内容</p>
</body>
</html>
把上面的代码，保存在名字为index.html的文件中，双击用浏览器打开，就能看到它在浏览器中是这样的：
上面是最简单的演示，里面奇怪的< >框住的内容就是html标签，< >里面不同的字母代表这个标签的不同作用，比如：
<html>这是一个网页文档<head>给浏览器看的内容<body>给用户看的内容<p>这是一个段落<br>产生一个换行<video>这儿有一个视频<audio>这儿有一段音频……
这样的标签太多太多，就不一一列出来了。
从上面那简单的代码中可以看出：标签分两种，单个出现的和成对出现的。
成对出现的标签通常中间包含了内容。在内容结束后需要用一个加/的同名标签来表示结束，比如： <p>这是一段文字</p>，才能表示一个完整的段落，如果没有后面的</p>，浏览器会认为这个段落还在继续，最终网页显示不正常。
给内容加点花样儿
为什么我们在网上看到的内容是五颜六色、形状各异的呢？
因为，我们还能给标签加一些属性，让它变得与众不同，比如：
<p style="color:#ff0000;">用户看到的内容</p>
还是开始那个简单的代码，给<p>标签加上一个style属性，看英文就能明白大意，style就是风格、样式的意思，里面可以添加颜色、背景、字号大小、边距等很多样式。
从上面例子，你应该知道了：我们可以通过给标签添加属性让标签变得与众不同。
我那导航页顶部彩色的文字，就是用下面这段样式变成渐变色的：
好了，我得适可而止；毕竟我们公众号面向的群体是一群教师和家长。
或许，大家觉得代码里奇奇怪怪的符号和英文看上去让人摸不着头脑；但其实只要你从基础开始，慢慢练习，用不了多久，你就能将这些符号和英文信手拈来。到了后面，真正让你觉得头疼或止步不前的，是想法和创意，而不是技术。
如果你真的对这方面感兴趣，可以看看下面清华大学这本非常火的书，手把手教你入门。
好啦，伙伴们。这些都是工具，工具是为我们服务的；如果工具让我们觉得苦恼，那可以选择其他的途径来解决我们的问题。
- end -
往期精彩推荐：