本文致力于使得较有经验的程序员能够在一天之内了解网站搭建制作的基本知识,尽快制作出可以展示用的demo。
具体地,笔者为了完成大作业,需要搭建一个搜索引擎的网站,仅仅作为展示的demo,并不对原创性和运行性能有过多要求,所以目标是尽快制作出差不多的网站用于展示。笔者对网站相关知识的学习,也只有不到一周的时间,文中描述如有疏漏,欢迎各路大神指教。
框架概览
网站搭建通常分为两个部分:服务器搭建(服务器端)+网页制作(客户端)。网页制作部分主要包括网页内容、样式设计;服务器部分负责监听端口,根据请求与本地内容生成相应的响应。网站框架示意图如下图所示:
一种简单的情景是:客户端通过访问特定IP以及端口发送HTML请求,监听该IP端口的服务器(这里使用NodeJS搭建)会接收并解析出HTML请求,然后根据请求的指定路径生成相应的HTML文件,通过HTTP协议返回到客户端,客户端的服务器再根据收到的HTML文件显示或者再次发送请求(依据HTML, CSS, javascript语法)。使用HTML5+CSS+javascript+NodeJS的客户端服务器端通信流程的简易示例图如下:
笔者选用了NodeJS搭建服务器端是因为其同样基于javascript语言,脚本式的语言极易上手,同时异步并发的特性天然支持网站服务器搭建,借助于众多成熟的包可以轻松愉快的搭建出性能不弱的网站服务器。其运行在服务器端,通过监听反馈对用户的需求做出响应。
前端网页制作依赖于HTML, CSS, javascript三大模块,其特性被绝大多数浏览器支持,也是网页制作的标准工具。根据W3C的建议,HTML5负责网页内容(例如包括什么模块、模块的相对位置、文章内容等等),CSS负责样式设计(例如字体大小、模块之间的间距、按钮大小颜色等等),JavaScript负责网页的动态相应部分(即根据用户的操作实时做出响应,例如修改网页内容和样式等等)。网页部分运行在客户端,通过浏览器分析展示给用户。
注意到通过JavaScript,一些无需加密且不依赖于服务器端数据的动态响应,可以在客户端实现即时响应。所以若仅需要静态网页,或者简易的动态效果,并不需要实现服务器的部分;通过拷贝文件,浏览器访问本地网页就可以进行简单的展示。(笔者因为展示的是搜索引擎,需要与本地的数据库、文本文件等做交互,仍然需要服务器端的搭建。)
网页制作
关于HTML和CSS的语法,网上有许多入门教程。笔者大概刷了一下W3C在edx上开的入门课的第一章简介(1个半小时左右),感觉已经足以应付之后的工作。课程链接如下:
https://courses.edx.org/courses/course-v1:W3Cx+HTML5.0x+3T2017/course/
笔者觉得比较重要知识的checklist如下:
1. HTML中tag的使用方式,常用tag如