快速建站-系列入门教程——系列入门基础课程之二：HTML、Javascript与CSS
一、快速建站入门教程名词解释
1、HTML：说明白点主是我们浏览器能识别并有以文字、图片、锚（连接）、音频、视频形式呈现给我们看的前端代码。
2、CSS：控制HTML在浏览器显示与布局的控制器（层叠样式表单）。
3、Javascript：简单点说就是让浏览器里的网页对象产生动作的客户端脚本语言。
二、今日重点：HTML常用标签一及其CSS属性
1、DIV：<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 看不懂没关系，关键要晓得它是怎么用的，简单点说，<div></div>标签就是HTML容器，就是在网页里用来放内容的东西。比发我们写一个简单的<div style="border:1px solid red;height:25px;width:150px;"></div>,把这段代码复制到一个新建的文本文档里面，保存之，完了将这个文本文档的后缀名改成.html。双击运行，我们可以看到如下效果：
网页中出现了一个红色边框为1像素，高25像素，宽150像素的块容器了。记得一定要动手输入，自己一人个字母的输入，只有这样才能体验到编程的快乐。如果你觉得简单，那你就错了，真正牛逼的前端开发人员就是用记事本，自己输入代码的，好吧，我们来一个我们在编程中常用到的方法，水平居中，我们怎么将上面的那个div在浏览器里居中呢？写到这里，我不得得先计一下THML文档的一般格式了，这很重要，一定要记住，对于一个学前端开发的人来讲，如果这一点不记住，怎么也成不了高级工程师，请看
<!--注释-->看到这里东东，左边<!--，右边-->任何以这两个东西，开头结尾的块，就是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=gb2312" />
<title>快速建站-系列入门教程（1）</title>
<meta name="keywords" content="快速建站,快速网站建设,网赚建站系统CMS" />
<meta name="description" content="快速建站-系列入门教程（1）" />
<script></script>
<link href="/skin/default/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
第一行：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这是申请HTML文本类型，告诉浏览器你的HTML指定了 HTML 文档遵循的文档类型定义(DTD)。这个很生重，如果不写这个，可能网页就会变形，记得每次网页的第一行为这个就行了，不要去死记，我们用dreamweaver创建一个新的网页地，会自动生成这个一般格式，第一行就是这东东。
第二行和网页最后一行，就是一个标准的封闭的<html></html>标签，<html xmlns="http://www.w3.org/1999/xhtml">这个就是申明一个名称空间，不要去理会太多了。
第三行和第十行，就是一个<head></head>封闭标签，<head> 标签用于定义网页文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。如：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />这是定义页面的编码为gb2312中文编码（编码有iso,gb2312,utf-8等）。<title>快速建站-系列入门教程（1）</title>定将网页的标题，也就是显示在浏览器最左上角的标题。<meta name="keywords" content="快速建站,快速网站建设,网赚建站系统CMS" />用来定义这个网页的关键字，一个页面可以定义多人关键字，他们用英文的,逗号分开。<meta name="description" content="快速建站-系列入门教程（1）" />用来描述这个网页的概述；<script></script>用来编写javascript脚本语言执行特殊的动作。<link href="/skin/default/css/style.css" rel="stylesheet" type="text/css" />用来引入相应的CSS文档，也可以用<style></style>的形式，将样式文件直接写在<style>标签内面。
以上说明，只要记住一点：这只是一个标准的格式，用DW可以直接自动生成，它的每个节点是用来干什么的记住即可。可以根据实际应用去修改里面的值即可。
我们接着来实现上面说的居中效果，看代码：
<!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=gb2312" />
<title>快速建站-系列入门教程（1）</title>
<meta name="keywords" content="快速建站,快速网站建设,网赚建站系统CMS" />
<meta name="description" content="快速建站-系列入门教程（1）" />
<meta name="baidu-site-verification" content="w94oSxWSQNdyp7Lc" />
<link href="/skin/default/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="border:1px solid red;height:25px;width:1004px;margin:50px auto;">fdsfdsf</div>
</body>
</html>
运行上面的页面，即可得到效果：
红色块居中了，呵，就在原来的代码里面加了一个margin:50px auto;即可。margin是边距的意思，就是他相对于自己上面的标签的边距是多少，margin:上边距 右边距 下边距 左边距;如margin:5px 3px 5px 3px;就是说它的上面和下面空5个像素，左边和右边空3个像素。
今天先讲到这里，明天我们接着讲下一个标签。
三、特别注意：
1、任何HTML标签，都要有开头与结尾，为了网页的快速与流畅和SEO效果，千万不要写不封闭的HTML标签，标签正确的书写方法
a、<*> </*> ，其中*代表标签名称，这样的代表标签有<div></div> ,<p></p> ,<span></span>,<ul><li><li></ul>
b、<* ^^^^="$$$" /> ，其中* 代表标签名，^^^^代表标签的属性，$$$代表标签属性值，这样的代表标签有 <img scr="..." /> <br />等。
快速建站-系列入门教程其它文章：