与其晃晃悠悠地从各种命令开始学习,不如直接开始使用Linux做一点实用的事情。能够做的最实用的事情,莫过于搭一个网站了。
接下来使用经典的LAMP(Linux+Apache+MySql+PHP)实现一个简单网站的功能。
首先是安装:
sudo apt-get install apache2
上面一条命令就可以安装好apache2服务器。安装好之后,直接在浏览器地址栏中输入Localhost,就可以看到下面的页面:
这是apache的默认网站的默认主页(index.html)。如果能够正常显示出这个页面,应该是安装成功了。
我们再多看一点apache。apache的配置文件在/etc/apache2下面。
进入目录之后,使用ls命令查看:
进入sites-available目录查看:
查看默认的网站的配置文件:
可以看到有一个DocumentRoot,也即Apache默认网站的根目录,可以通过Localhost查看的网页都在这个目录下。进入该目录可以看到index.html文件,这也是我们之前看到的页面。
需要注意的是,/etc和/var这样的目录,如果要创建文件或者对已有文件进行修改,那么必须使用sudo。后面我们会学习如何修改根目录,以在自己的Home目录下创建网站的根目录,这样就不必每次使用sudo。在不会使用vi的情况下,可以使用gedit命令来打开文件或者编辑。gedit的使用和windows下的记事本很像。
接下来安装mysql。
sudo apt-get install mysql-server mysql-client
会出现以下的界面,要求输入mysql的root用户的密码,这个需要记住:
这一步如果成功,那么可以使用如下命令:
接下来安装PHP:
sudo apt-get install php7.0 php7.0-mysql libapache2-mod-php7.0
因为PHP作为后端开发语言,需要有mysql和apache2打交道,所以除了php7.0之外,还需要安装两个插件。
安装成功之后,在/var/www/html的目录下,写一个1.php文件:
<?php
phpinfo();
?>
此时,查看
准备好相应的软件之后,开始写网页。首先,学习HTML写静态网页。HTML本身还是比较简单的,跟着w3school学上两个小时,基本上也就会了。一个html页面由head和body两个部分。
写成代码就是:
<html>
<head> </head>
<body> </body>
</html>
此时页面有了架构,但是还没有内容。添加一点内容:
<html>
<head>
<title>My 1st webpage!</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
HTML的全称,HyperText Markup Language,超文本,就是除了文本之外还可以有其他的内容,如多媒体;Markup就是标记,标记就是一对对的标签(也有单个标签如<img><br>等)。但是HTML的解释器非常地宽容,所以即使写成下面这样
<title>My 1st webpage!</title>
<p>Hello world!</p>
显示效果也还是一样。
接下来看更多的标签。
上面的页面,网页结构如下:
关于标签,对其中内容的控制可以使用标签的属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。
属性有三种类型
- 可选的属性:特定标签才有的属性
- 标准属性:所有标签都有: id, class, title, style, dir, lang
- 事件属性:onclick,ondblclick,onmousedown,onmouseup,onmouseover等
示例:
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息
更常见的是使用style属性:
<h1 style="color:red"><i>hello</i></h1>
<h1 style="background-color:red"><i>hello</i></h1>
<h1 style="background-color:red" onclick="alert
('hello')"><i>hello</i></h1>
还有一些基本的标签如<a>,<img>等。我们可以通过世界上第一个网站来学习<a>。关于img,要知道它可以显示本地的图片,也可以向外部网站发出请求。
可以看一下
W3School TIY Editorwww.w3school.com.cn请大家在本地也实现这样的一个页面。体会一下本地图片和外部网站图片的区别。
接下来比较重要的标签是<table>和<form>。
table是html标签中比较复杂的,包括了行、列、头部等子标签,以及border等属性。在CSS广泛应用之前,table可以用来做排版。
<!DOCTYPE html>
<html>
<body>
<table width="500" border="2">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
<form>就更重要了。<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、fieldset、legend 和 label 元素。
<form action="form_action.asp" method="get">
<p>Name: <input type="text" name="name" /></p>
<p>Password: <input type="password" name="password" /></p>
<input type="submit" value="Submit" />
</form>
表单用于向服务器传输数据。
<form action="http://localhost/welcome.php" method="post">
<input type="text" name="lastname"value="Nixon" size="30" maxlength="50">
<input type="password">
</form>
welcome.php可以这样写。
<html>
<body>
<h1>
Welcome
<?php
echo $_POST["lastname"];
?>
</h1>
<br>
</body>
</html>
接下来补充三个标签。
<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
譬如:
<script type="text/javascript">
document.write("Hello World!")
</script>
<style> 标签用于为 HTML 文档定义样式信息。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
标签<div>。
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
换言之,<div>就是division,把网页中的内容分成小块,而且没有任何的格式,那为什么要引入这个标签呢?id和class又是什么呢?<div>+<css>一起,构成了排版的利器。
根据已有的这些知识,可以自己写写页面,试一试。