如何做一个网站?
预计时间: 4分钟
有不少对Web开发技术感兴趣的人,不知道如何做一个网站。
这里列举出建设一个网站可能用到的知识和学习路径仅供参考。
如果你是初学者,建议按照从前到后的顺序阅读。
准备学习环境
MDN 在 安装基础软件 中提到了一些可供选择的软件列表,这里推荐安装如下
Chrome 浏览器
Visual Studio Code 简称 VSCode
VSCode 插件: Live Server
目标1:制作一个网页
理解 HTML CSS Javascript 三者之间的关系
网页技术用途说明
HTML定义网页内容呈现文字、图片、视频等内容
CSS定义网页外观网页版面布局与网页元素外观
Javascript定义网页行为动态控制网页元素行为
HTML参考资料
MDN 学习 HTML :指南与教程
HTML关注点:
HTML标记
HTML语义化
HTML表单和校验
HTML基本的SEO
CSS参考资料
MDN CSS
CSS关注点
选择元素
布局
响应式
Javascript参考资料
MDN JavaScript
现代 JavaScript 教程
Javascript关注点
基本语法
Document Object Model (DOM)
Fetch API
目标2:发布一个网页
让网民可以在互联网上看到你刚刚制作的那个网页,需要先执行如下几个步骤
购买域名
购买域名证书,或者申请免费域名证书
购买云服务器,或者轻量应用服务器
解析域名
网站备案
完成以上步骤后,需要在 Linux 服务器上安装 Apache 或 Nginx,并将网页上传到服务器。
目标3:静态网站
学习一个CSS框架,如
Bootstrap
Bulma
将网站内的页面分类,一般分为首页、列表页、详情页、专题页......
为每类页面制作一个页面,做为模板,渲染不同的内容。
目标4:动态网站
粗略地说,一个服务器可以提供静态或者动态的内容。静态意味着保持原样地提供。静态的网站是最容易建立的,所以我们建议你制作一个静态的网站作为你的第一个网站。
动态意味着服务器会处理内容甚至实时地从一个数据库中产生它。这个解决方案提供了更多的灵活性,但是技术堆栈变得更难去处理,让建立网站更惊人地复杂。
有许多现成的可免费商用的系统如博客或内容管理系统可用来制作动态网站,自己开发的话要学习服务器端编程相关技术。
网站功能
图片
评论
搜索
统计
扩展知识
HTTP
超文本传输协议(HTTP)
浏览器的工作原理
浏览器的工作原理
How browsers work
效率工具
https://docs.emmet.io/cheat-sheet/
最后更新时间为2022年04月23日
参考资源 →