pymysq向mysql写数据 为什么本地无法查看_Linux零基础2:写一个网站

与其晃晃悠悠地从各种命令开始学习,不如直接开始使用Linux做一点实用的事情。能够做的最实用的事情,莫过于搭一个网站了。

接下来使用经典的LAMP(Linux+Apache+MySql+PHP)实现一个简单网站的功能。

首先是安装:

sudo apt-get install apache2

上面一条命令就可以安装好apache2服务器。安装好之后,直接在浏览器地址栏中输入Localhost,就可以看到下面的页面:

1b480c50e027cd18440b0e02f8f51ad4.png

这是apache的默认网站的默认主页(index.html)。如果能够正常显示出这个页面,应该是安装成功了。

我们再多看一点apache。apache的配置文件在/etc/apache2下面。

7783bf9da1c078fb174ccd34051c2317.png

进入目录之后,使用ls命令查看:

6110186320eddedc2962fc4a85718e78.png

进入sites-available目录查看:

dd0968a6759c953c677de109f01b4a14.png

查看默认的网站的配置文件:

可以看到有一个DocumentRoot,也即Apache默认网站的根目录,可以通过Localhost查看的网页都在这个目录下。进入该目录可以看到index.html文件,这也是我们之前看到的页面。

需要注意的是,/etc和/var这样的目录,如果要创建文件或者对已有文件进行修改,那么必须使用sudo。后面我们会学习如何修改根目录,以在自己的Home目录下创建网站的根目录,这样就不必每次使用sudo。在不会使用vi的情况下,可以使用gedit命令来打开文件或者编辑。gedit的使用和windows下的记事本很像。

e6cbcff46085fcd60d4f3a74194797dd.png

接下来安装mysql。

sudo apt-get install mysql-server mysql-client

会出现以下的界面,要求输入mysql的root用户的密码,这个需要记住:

1a0bebc1c5d0d9c0cbfde9618404bdf9.png

这一步如果成功,那么可以使用如下命令:

c994c873bbfd9cbd83afbe5de3950c4f.png

接下来安装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();
?>

此时,查看

891f67afa88eb0479fabf3c12c1db743.png

准备好相应的软件之后,开始写网页。首先,学习HTML写静态网页。HTML本身还是比较简单的,跟着w3school学上两个小时,基本上也就会了。一个html页面由head和body两个部分。

9d74d36df125be8f054520cad9d800e4.png

写成代码就是:

<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>

显示效果也还是一样。

接下来看更多的标签。

278b8812c77a34551bddbd8f8581730d.png

上面的页面,网页结构如下:

91459273ccf4c466e7f813d900601702.png

关于标签,对其中内容的控制可以使用标签的属性。属性提供了有关 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 Editor​www.w3school.com.cn
985b61b61ae1d16b7823130690e8954d.png

39a553b13ed75a60c505fce7ca253dd6.png

请大家在本地也实现这样的一个页面。体会一下本地图片和外部网站图片的区别。

接下来比较重要的标签是<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>一起,构成了排版的利器。


根据已有的这些知识,可以自己写写页面,试一试。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值