零基础如何学建站(基础篇)

Haopeng Yu大约 8 分钟

咳咳，学做网站要学什么语言？HTML+CSS+JavaScript+BootStrap+jQuery+Aapache+MySQL+PHP，有没有被吓到。我最初就被这一大长串的名字吓到了，也是拖拖拉拉的学了好久，直到最近逼自己一口气看完之后才发现，其实没有这么可怕......

网站怎么做？
建站要学什么语言？
怎么样继续学习?

我学建站学了好久，真的，基本都是学学就半途而废了。也就这次趁着给实验室建站偶然间发现了技巧，终于把基础的看完了=-= 所以来和大家讲讲我是怎么从零基础开始学的，其实门槛没有那么高。

网站怎么做？

一般的教程直接就开始说你先去申请个域名，再租个服务器...

Buddy，这是一个不太费钱但是很费事的事情，很多人看到这个就放弃了

哦，或者像我曾经......

租了半年服务器;
2个月拍照备案填表等审核;
用WordPress无脑建了个博客好开心;
3天之后被攻击，插了一大堆广告只能恢复备份(当时不知道怎么查);
最后被攻击的无语了，就格式化全盘放弃了=-=;

其实初学者就想在本地建立一个网站，就这么简单，先试试先弄了一大堆，结果没怎么学基础只能各种不会各种被虐

所以我推荐大家现在本地localhost建立一个测试网站意思就是就算不联网你在浏览器输入localhost就能出现你做的网站......

一键配置环境WAMP

似乎windows可以直接配置网站环境，用IIS 10.0，详见:

使用PHP Manager for IIS搭建win10系统 IIS 10.0+PHP+MySQL环境open in new window

我在这里说的是一个更简单的方法，就是WAMP Windows+Aapache+MySQL+PHP一键安完，傻瓜式操作，完美~

WAMP官方网站为：http://www.wampserver.com 但是国内下载的超级慢（科学上网的朋友忽略我这句话）所以我上传到百度云大家可以下载： wampserver3.1.3_x64open in new window, 密码：8eax

安装方法就是一直next就好了，重启之后启动WAMP。具体安装策略可以参考：

PHP开发环境搭建与部署(wampserver+MySQL)open in new window

右下角如果出现W的图标为绿色为正常，如果不是：

右键那个标志，Tools，检测80端口，如果被占用，用任务管理器干掉占用的应用或者直接把那个应用卸载了。
重新再装一遍WAMP（亲测有效）

安装过程可能会提示缺少某个DLL，那个是你需要安装Microsoft的编译环境就好了！某管家或者某卫士会自动修复这个。

所以现在，我们的服务器环境就搭建好啦，你可以在任意浏览器输入localhost，就可以看到WAMP的一个页面哦。

你需要一个模板

在WAMP安装结束后，在安装目录会有一个文件夹叫“www”，这个文件夹里面的内容就是你网站页面的内容。

也就是，你做好的网页全部复制到这个文件夹里，你就可以从浏览器访问啦。

所以现在的你只需要一个网页模板。

打开百度，搜索网站模板，或者搜H5网站模板，你就可以看到好多炫酷的免费的模板。

随便选一个好看的，下载下来，解压缩，把解压缩的所有文件放到刚才提到的www文件夹中

你再输入localhost试试？

有木有觉得很神奇，这个申请的网页是出现在你自己的电脑上的（很像离线网页是吧）

现在，一个网站就建好了！

建站要学什么语言？

记得我开头打的那一大串语言吗......

** HTML+CSS+PHP+JavaScript+BootStrap+jQuery **

首先先更正一下大家对于那一串编程语言的认识。

大家学过C语言，python，perl或者什么，知道都是从定义变量，条件语句和循环语句，定义数组哈希，写子函数，操作文件等等这样的学习路线进行的。

然而上面并不是每一种语言都是这样的，只有PHP和JavaScript是这样的。

那问题来了，其他都是些啥？

HTML

这里的HTML我更想叫它为HTML标签，也就是“超文本标记语言”。

<head>
  <!--
  这里是文档的头部 ... ...
  ...
  -->
</head>

<body>
  <!--
  -这里是文档的主体 ... ...
  ...
  -->
  <h2>2级标题</h2>
  <h3>3级标题</h3>
  <button type="button">添加一个按钮</button>
  <img src="a.jpg"  alt="显示一个图片" />
</body>

是的，你不能只用HTML去做一个网页，它只是定义了网页的很多部分。

在HTML眼里，网页就是很多矩形的组合，你只需要写好哪些矩形在哪个位置，里面需要填什么东西就是了。

那火爆的HTML5是什么的？感觉写着好多比如HTML5游戏啊，H5炫酷网页什么的。

其实，它也是HTML语言的最新版本，多了很多很有用的标签就是了。

以下HTML5 中的一些有趣的新特性(引用自极客学院)：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

那些你看的炫酷网页，炫酷游戏是HTML5的新特性结合CSS3或者JavaScript做成的。

介绍完毕，问题来了，怎了来学这个呢？

有各种免费教学视频，极客学院，MOOC，云课堂甚至B站=-=

我觉得最快的是W3Cschool的文字教程和实践，对我来说最快最有效。

W3C的HTML教学文档open in new window

主要是，现在大多视频废话太多，2倍速又把人听的心累；

这个文档还可以自己实践，直接在这里编写运行，调试代码，尝试。

P.S.，W3Cschool还有一个编程实践，闯关式的学语言，超级爽。

CSS

我觉得，嗯，CSS更像是一个HTML标签=-=

它更不是一个语言，叫做“层叠样式表”

大概就是能给html的元素加各种样式的，比如设置大小，增加边框，改变颜色=-=

<style>
	<!--改变颜色-->
	h1 {
		color: red; 

	}
	<!--定义一个类,描述一组元素的样式-->
	. red-text{
		color: red;
		text-align:center;
	}
	<!--定义一个id，和类差不多-->
	# blue-text{
		color: blue;
	}
</style>

<h2 class="red-text">我一个居中的红色H2标题</h2>

<p id="blue-text">我是一个蓝色的段落，我是一个蓝色的段落，我是一个蓝色的段落，我是一个蓝色的段落。</p>

有木有觉得简单了-0-。

一样，具体教程看W3Cschool的CSS教程open in new window

JavaScript和jQuery

学过之后才知道，JavaScript和Java并没有什么关系=-=

<script>
	<!--这里面写你的JS脚本和jQuery脚本-->
	var t="Hello world";
	console.log("Hello World");
</script>

这个和上面的标记语言和样式语言不同，这个就是大家传统认知的语言，有变量，有数组，有if和for语句等等。

那么jQuery呢？引用W3Cschool的几句话：

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。

我现在对于jQuery的理解是，用选择器选择网页中的元素，之后加入动画效果（淡入淡出摇摆等）。

Bootstrap

网上说这是一个前端框架，我觉得这是一个网页元素响应式排版工具=-=

因为用户的屏幕大小是不同的，或者要么用手机，用平板，用各种分辨率的电脑等等。

如果你的网页所有元素固定位置，难免会造成排版混乱。所以对于不同屏幕都能自动排版整齐（比如文字居中，按钮等距排列，图片自适应缩放等），这就叫响应式，这就需要用到BootStrap。

比如一排有2个按钮，无论屏幕多长都让它们两个自适应长度，8：4的排列：

<div class="row">
	<div class="col-xs-8">
		<button class="btn btn-block btn-primary">Button1</button>
	</div>
	<div class="col-xs-4">
		<button class="btn btn-block btn-info">Button2</button>
	</div>
</div>