几乎很多大神说,要学会独立制作一个网站,首先从留言板开始,所以,我也听从大神们的教诲,从一个简单的留言板开始,这将是一个非常非常初级的留言板教程,献给同样是小白的你,大神就请多多指教或者直接忽略了吧。
首先,选择一款编程工具,我选的是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">
<link>标签不是成对出现的,没有结束标签,在<html>的严格模式下(<xhtml>),需要闭合标签/>,非严格模式下,则不用。<link>标签一般用来链接外部的样式表,href就是链接地址。
<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>