从留言板开始做网站（一）——准备工作

最新推荐文章于 2024-06-18 22:26:32 发布

义乌小白

最新推荐文章于 2024-06-18 22:26:32 发布

阅读量4.1k

点赞数 11

分类专栏：学习做网站文章标签：留言板 html php 新手教程

本文链接：https://blog.csdn.net/wu1234a/article/details/52735878

版权

学习做网站专栏收录该内容

11 篇文章 6 订阅

订阅专栏

几乎很多大神说，要学会独立制作一个网站，首先从留言板开始，所以，我也听从大神们的教诲，从一个简单的留言板开始，这将是一个非常非常初级的留言板教程，献给同样是小白的你，大神就请多多指教或者直接忽略了吧。

首先，选择一款编程工具，我选的是sublime text3 ，最初我用的是dw，但是看到sublime后，就被他的界面给吸引了，直接把DW给抛弃了，对我来说，DW太过于笨重了，

sublime的口碑还是很不错的，我也建议各位用这款工具，它需要各类插件的辅助，会成为编程的利器：Sublime Text3 插件推荐。其次搭建一个本地的环境，我用的是WampServer。最后，安装好WampServer后，在wamp/www/下新建一个文件夹，命名为：message，前期的准备工作全部完成。

安装好WampServer后，可以一键启动它，当该程序在右下角任务栏上的图标变为绿色时，说明环境启动成功，随便在哪个浏览器的地址栏中，输入localhost，会显示如图所示：

在message的文件夹内新建一个PHP文件，并命名为index.php，这个是我们的首页文件，一般的首页文件都是index或者default命名。这2个名字应该也是默认的首页文件名。我们平时输入的网址例如：www.xxx.com 其实一般就相当于www.xxx.com/index.***或者相当于www.xxx.com/default.***（*号代表后缀名，毕竟网站的程序不一定都是PHP做的）。

在sublime text3 中，按下快捷键：Ctrl+N 新建文件，然后Ctrl+S保存文件，懂一些快捷键是会提高工作效率的。

在index.php中我们键入HTML的DOCTYPE的声明，在早期有多种类型，在这里我们使用时下最流行的HTML5的声明类型：<!DOCTYPE html> ，该标签对大小写不敏感，所以也可以用小写<!doctype html>；然后键入HTML的基本标签，这里也有个小技巧，在sublime中，按个感叹号！再按下Tab键，会自动生成一段基本的HTML格式代码，我这里先一步一步来。

<!DOCTYPE html>
<html lang="zh-cn">

</html>

HTML标签一般都是成对的出现的，包含了所有网页上可见与不可见的内容。html的lang属性，该属性规定了元素内容的语言，我们设定了为"zh-cn"，这是中文的简写，指定lang属性，有利于一些浏览器的网页自动翻译工具或者语音识别的运行。

接下来我们再写入<head>标签：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
    
    </head>
</html>

从名称也可以看出，包含的是头部的内容，这里放的是一些描述文档的各类属性和元信息（meta），以及引用文件脚本，还有一些css和javascript（为了尽量符合W3C标准，并不建议将这些信息直接放在head部分，最好是能通过引用外部的css和javascript文件）。

在<head></head>里面我们先写入两个<meta>内容：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charest="utf-8">
    
    </head>
</html>

第一个<meta>标签是让IE采用其所支持的最新模式，第二个<meta>则是明确声明了字体编码为utf-8。

在下面我们写入<title></title>标签，这个标签是描述该页面的标题，并且会在浏览器的标题栏显示出来，我们可以在地址栏键入localhost/message 看下效果：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charest="utf-8">
        <title>留言板</title>
    
    </head>

</html>

<head>内的<meta>标签是没有结束标签的，它用来提供页面的元信息，并且永远位于<head>标签内。这个标签的内容对于SEO是比较重要的，尽管现在的权重不如以前。为了利于SEO，我们添加关键字和内容描述。

<meta name="keywords" content="留言板，PHP留言板，PHP入门">
<meta name="description" content="学习留言板，开启网站制作的大门">

我们开始搭建留言板的模板内容，这里我们还需要新建一个样式文件：style.css，样式文件是用来规定页面的内容以何种方式呈现给用户浏览，例如：文字的颜色、排版、大小、图片的大小、显示或者隐藏等等，样式文件都以css后缀命名。

我们在message文件夹中新建一个文件夹，命名为style，并在该文件夹下新建样式文件style.css，然后我们在<head>标签内引用它：

<link rel="stylesheet" type="text/css" href="style/style.css" />

可简化为：

<link rel="stylesheet" href="style/style.css">

<head>内的代码现在就变为

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <title>留言板</title>
    <meta name="keywords" content="留言板，PHP留言板，PHP入门">
    <meta name="description" content="学习留言板，开启网站制作的大门">
    <link rel="stylesheet" href="style/style.css">
</head>

在这里额外说一句，HTML和CSS的关系，就是HTML是描述网页的内容，CSS是描述网页的样式，JAVASCRIPT是描述网页的行为，这是前端的三大基本功。完成了网页的头部内容，接下来是网页的主体内容，我们平时所能看到的内容全部都存放在<body></body>标签内，里面的内容我们在下篇详细叙述，而到目前为止，我们的HTML代码如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">
        <title>留言板</title>
        <link rel="stylesheet" href="style/style.css">
    </head>
    <body>
  
    </body>
</html>

建议大家将嵌入的代码都进行缩进，这样比较美观，也容易维护，要了解各标签的详细内容，可以自行百度。

虽然说我的留言板不考虑兼容性，但是因为后面需要用到一些HTML5的语义化标签，所以我们从外部引入一个处理兼容性的文件

<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>

这里是引用了CDN上的资源，建议大家引入一些框架或资源的时候尽量用CDN链接，网页加载这类资源的速度会更快。

这个文件html5.js是处理IE8/IE7/IE6不支持H5新标签的兼容文件，目前一般非IE的话，在windows系统中就是火狐浏览器/谷歌浏览器以及Edge，而这三个目前的版本能很好的支持H5新标签，所以我们要做的就是加入下面这段代码：

<!--[if lt IE 9]>
   <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

它的意思就是，当浏览器小于IE9时，导入html5.js这个文件。这时一段专门为IE写的语法，其他浏览器则会忽略该段代码。

目前全部代码显示如下：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">
        <title>留言板</title>
        <link rel="stylesheet" href="style/style.css">
        <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        <![endif]-->
    </head>
    <body>

    </body>
</html>

义乌小白

关注

11
点赞
踩
21

收藏

觉得还不错? 一键收藏
4
评论
从留言板开始做网站（一）——准备工作

几乎很多大神说，要学会独立制作一个网站，首先从留言板开始，所以，我也听从大神们的教诲，从一个简单的留言板开始，这将是一个非常非常初级的留言板教程，献给同样是小白的你，大神就请多多指教或者直接忽略了吧。首先，选择一款编程工具，我选的是sublime text3 ，最初我用的是dw，但是看到sublime后，就被他的界面给吸引了，直接把DW给抛弃了，对我来说，DW太过于笨重了，sublime的...
复制链接

扫一扫