您的位置:首页 > 运维架构 > 网站架构

从留言板开始做网站(一)——准备工作

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

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

sublime的口碑还是很不错的,我也建议各位用这款工具,它需要各类插件的辅助,会成为编程的利器:Sublime Text3 插件推荐。其次搭建一个本地的环境,我用的是WampServer。最后,安装好WampServer后,在wamp/www/下新建一个文件

夹,命名为:message,前期的准备工作全部完成。

在message的文件夹内新建一个PHP文件,并命名为index.php,这个是我们的首页文件,一般的首页文件都是index或者default命名。这2个名字应该也是默认的首页文件名。

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

在index.php中我们键入HTML的DOCTYPE的声明,在早期有多种类型,在这里我们使用时下最流行的HTML5的声明类型:<!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>
从名称也可以看出,包含的是头部的内容,这里放的是一些描述文档的各类属性和元信息,以及引用文件脚本,还有一些css和javascript(为了尽量符合W3C标准,并不建议将

这些信息直接放在head部分,最好是能通过引用外部的css和javascript文件)。

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

<pre name="code" class="html"><!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,将他放入message文件夹下的新文件夹style内,并在<head>标签内引用它,

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

可简化为:

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


<link>标签不是成对出现的,没有结束标签,在<html>的严格模式下(<xhtml>),需要闭合标签/>,非严格模式下,则不用。<link>标签一般用来链接外部的样式表。

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

<pre name="code" class="html"><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>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta
4000
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>
新添加的内容是专门针对IE浏览器的,如果当前使用的IE浏览器版本小于9,那么就会引入这个js文件,因为IE9以下的浏览器是无法识别HTML5的新标签。要了解条件注释的内容可以点这里:HTML条件注释判断IE
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息