新手学习，web编程入门（四）——编程之路中的苦与乐才刚开始品尝

本文链接：https://blog.csdn.net/redvesper/article/details/50545085

在之前的三篇里，所谈论的都是学习web编程入门的必修课题而已，如果坚持走这条路，请尊重自己的选择，不要后悔！

web编程的前提：第一需要全面了解html标签。第二需要全面了解css。第三全面了解javascript脚本。第四才是后台代码程序的编写。

先讨论下存放目录。

/根目录（web)

/web/index.html

/web/css/index.css

/web/js/index.js

/web/images/图片文件

一、第一个web页面

使用编辑工具 Dreamweaver,创建一个静态页面（index.html）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> 
<body>
</body>
</html>

与HTML5 比较下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> 
<body>
</body>
</html>

二、第一个css文件

dreamweaver 或者其他的工具新建css样式文件，保存为index.css

   @charset "utf-8";
   body{margin:0px; padding:0px; color:#535353;font-size:14px; font-family:黑体,宋体,Arial;}
   *{margin:0 auto; padding:0; font-family:黑体;}
   /*
        a标签定义的顺序  link、visited、hover、active 
   */
   a:link { color: #000; text-decoration: none;}
   a:visited { text-decoration: none; color: #000;}
   a:hover { text-decoration: none; color: #FF0000;}
   a:active { text-decoration: none; color: #666;} 

   .clear{clear:both;}
   ul{ list-style-type:none; padding:0px;}
   ul li{ float:left; display:block; width:auto;} 
   img{border:0px;} 
   dl{ height:auto;}
   dl,dt,dd{display:block; float:left;}

三、第一个js脚本文件

dreamweaver 或者其他的工具新建 js脚本文件，保存为index.js

如果使用第三方库，请引用。基本上用jquery,2008年之前都是自己手写，现在都忘光了。

$(function(){
 
  alert("前端脚本弹窗");

});

四、如何引用css,js文件

在index.html文件的head标签中引用。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="Stylesheet" href="/css/index.css" /> 
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<title>首页</title>
</head> 
<body>
布局内容
</body>
</html>

五、后台代码的编写

初学者可以在index.html页面中编写后端代码，根据选择编程语言不同，改动文件后缀。

如果懂得分离，可以将index.html做为模板使用，这个就不在基础范围内讲解。

最后：

如果需要了解学习html、css、js请看

web页面化工作的前期基础学习系列

web客户端编程没太多时间写，只写了基础学习