我想我大概是疯了，居然在这个面向教师和家长群体的公众号里给大家聊网页制作！

事情的起因就是前几天我分享了我制作网上教学页面的流程：《》，然后就收到了一些留言：

今天稍微有空，还是给大家安排一期吧！我试试用最直白的话给大家讲讲，看看大家能不能有所收获。

只希望其他伙伴进到这篇文章后，不要以为进错了公众号，我们没有转型！

访问网页的原理

我们每天都在访问网页，其中的原理其实很简单，我们可以简单看作是在网络上有一台电脑，我们用户都在访问这台电脑上的文件。

当然，这中间还有很多复杂的工作，我们不需要深入了解。

所以，如果我们制作好了自己的网页，得想办法把网页放在一台别人都能访问的电脑上，这样其他用户才能访问到我们的网页。

家用的宽带，运营商是不允许你做这样的事情的。所以，你还得有一台服务器！

专业的服务器需要购买，但我们练手可以用免费的服务器。为了避免广告，请大家自行在网上搜索“免费空间”，找到免费的服务器来练手。

服务器可以理解为互联网中的一台电脑，在网络中要定位到它，就得靠ip地址，但ip地址太长不好记网站制作，于是就有了“域名”（也就是大家平时用的网址），使用“域名”指向某一台服务器的ip，我们要想记住和访问服务器就方便多了。比如：、……

我们访问服务器上的网页，通常都是以这样的格式来访问：

域名/文件路径

比如，我之前为大家制作的教师必备导航页，就这样访问：

44886.com/go.htm

这是一个域名，它指向一台ip地址为82.156.195.xx的服务器，导航页就是这台服务器中一个名字为go.htm文件。

同理，我还可以在这台服务器上放置名字为index.htm、tts.htm、tools-.htm等各种各样的文件，浏览器访问到这个文件后，就渲染给用户看。

这就是平时我们上网访问网页的简单原理。当然，这是简化了中间很多复杂的过程的。现在你明白了吗？

网页怎么制作的

接下来，我们就来看看平时我们访问到的网页是怎么制作出来的。当然，同样是简化了很多很多很多之后的。

我们平时在访问网页时，在页面空白处点击鼠标右键-查看源代码网站制作，就能看到那个网页的代码了。

看到网页的源代码：

我们今天只能来看看最基础的，否则可能用几十篇文章都写不完，如果你真的感兴趣，也可以系统地看看相关的教程或资料。

网页最基本的格式

"zh">

    "UTF-8">
    


    
用户看到的内容
    

把上面的代码，保存在名字为index.html的文件中，双击用浏览器打开，就能看到它在浏览器中是这样的：

上面是最简单的演示，里面奇怪的< >框住的内容就是html标签，< >里面不同的字母代表这个标签的不同作用，比如：

这样的标签太多太多，就不一一列出来了。

从上面那简单的代码中可以看出：标签分两种，单个出现的和成对出现的。

成对出现的标签通常中间包含了内容。在内容结束后需要用一个加/的同名标签来表示结束，比如：

这是一段文字

，才能表示一个完整的段落，如果没有后面的

，浏览器会认为这个段落还在继续，最终网页显示不正常。

给内容加点花样儿

为什么我们在网上看到的内容是五颜六色、形状各异的呢？

因为，我们还能给标签加一些属性，让它变得与众不同，比如：

"color:#ff0000;">用户看到的内容

还是开始那个简单的代码，给

标签加上一个style属性，看英文就能明白大意，style就是风格、样式的意思，里面可以添加颜色、背景、字号大小、边距等很多样式。

从上面例子，你应该知道了：我们可以通过给标签添加属性让标签变得与众不同。

我那导航页顶部彩色的文字，就是用下面这段样式变成渐变色的：

好了，我得适可而止；毕竟我们公众号面向的群体是一群教师和家长。

或许，大家觉得代码里奇奇怪怪的符号和英文看上去让人摸不着头脑；但其实只要你从基础开始，慢慢练习，用不了多久，你就能将这些符号和英文信手拈来。到了后面，真正让你觉得头疼或止步不前的，是想法和创意，而不是技术。

如果你真的对这方面感兴趣，可以看看下面清华大学这本非常火的书，手把手教你入门。

好啦，伙伴们。这些都是工具，工具是为我们服务的；如果工具让我们觉得苦恼，那可以选择其他的途径来解决我们的问题。

- end -