疯呐!我居然给一群教师讲网页制作?

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

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


事情的起因就是前几天我分享了我制作网上教学页面的流程:《疫情又来,我这样准备线上教学的,你们呢?》,然后就收到了一些留言:



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


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


访问网页的原理


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



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


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


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


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


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


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


域名/文件路径


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


44886.com/go.htm


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


同理,我还可以在这台服务器上放置名字为index.htmtts.htmtools-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 -

相关文章
|
JSON 缓存 运维
Dataphin数据服务API开启IP白名单调用鉴权
Dataphin数据服务API提供便捷的API开发及运维、应用调用权限管理等功能,为数据业务化提供了坚实的支撑。在应用调用API的时候,Dataphin可支持通过AcessKey方式的调用鉴权。而在企业内部网络中,也可以使用IP白名单方式简化调用。本文将为您介绍如何开启IP白名单的调用鉴权。
394 0
|
数据采集 Python
python并发编程:使用多线程,Python爬虫被加速10倍
python并发编程:使用多线程,Python爬虫被加速10倍
202 1
python并发编程:使用多线程,Python爬虫被加速10倍
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
238 0
|
2月前
|
数据采集 监控 调度
干货分享“用 多线程 爬取数据”:单线程 + 协程的效率反超 3 倍,这才是 Python 异步的正确打开方式
在 Python 爬虫中,多线程因 GIL 和切换开销效率低下,而协程通过用户态调度实现高并发,大幅提升爬取效率。本文详解协程原理、实战对比多线程性能,并提供最佳实践,助你掌握异步爬虫核心技术。
|
2月前
|
存储 人工智能 搜索推荐
Tablestore OpenMemory MCP : 跨会话、跨模型的智能记忆解决方案
本文介绍了Mem0的原理与应用场景,并基于Mem0构建了Tablestore OpenMemory MCP服务,实现个性化旅行规划助理。Mem0是一种为大型语言模型设计的智能记忆层,通过向量数据库持续学习用户交互信息,实现跨会话的个性化记忆管理。该服务提供多种MCP工具,便于集成到各类AI应用中。最后演示了个性化旅行规划应用,并介绍了服务的运行与配置方式。
257 0
|
消息中间件 存储 开发工具
消息队列 MQ产品使用合集之C++如何使用Paho MQTT库进行连接、发布和订阅消息
消息队列(MQ)是一种用于异步通信和解耦的应用程序间消息传递的服务,广泛应用于分布式系统中。针对不同的MQ产品,如阿里云的RocketMQ、RabbitMQ等,它们在实现上述场景时可能会有不同的特性和优势,比如RocketMQ强调高吞吐量、低延迟和高可用性,适合大规模分布式系统;而RabbitMQ则以其灵活的路由规则和丰富的协议支持受到青睐。下面是一些常见的消息队列MQ产品的使用场景合集,这些场景涵盖了多种行业和业务需求。
|
10月前
|
缓存 安全 数据安全/隐私保护
「小邓观点」分享几种常见的账户锁定原因
下期小邓将与大家分享账户锁定的解决方案。如果您有账户锁定方面的困扰,敬请期待!
483 4
|
小程序 开发工具 开发者
解决微信开发者工具不能使用云开发的资源
解决微信开发者工具不能使用云开发的资源
|
Java 关系型数据库 MySQL
规则引擎 ice
规则引擎 ice
254 0