第一行是关于文挡类型声明部分

元素里面包含的信息不会在浏览器的窗口中显示，
文档内容部分
头部信息部分
此栏目显示在浏览器标题栏中
页面主题用来定义页面所要显示的内容
11个常用的html标签
（1）标题标签heading

创建最大的标题

创建第二大的标题
。。。。。。。。。。。。。

创建最小的标题
（2）段落paragraph

（3）换行(单标签)

（4）超链接 http://www.guopengtao.com" target="_blank">超链接
（5）水平线

---

（6）无序列表

（7）有序列表

（8）文本横排
（9）插入图片
（10）表格
创建一个表格
表格中的行
表格中的列
加粗
加粗（与此标签功能一样）
（11）字体的大小和颜色 郭朋涛网页设计!

Css主要有3个选择符：标记选择符、类别选择符、id选择符
1、标记选择符（type selector），以html标签直接命名的选择符，例如：p、h1、dl、body等
实例：

2.类别选择符（class selector），该选择符以 “.”开头，后面的名字可自行定义，最好是字母
.wangye {font-size: 14px;font-weight: bold;color: #FF6600;}

3、id选择符（id selector），该选择符以“#”开头，后面的名字可自行定义，最好是字母 wangye {font-size: 14px;font-weight: bold;color: #FF6600;}

说说类选择符与id选择符的区别：
a）一个前边是点，一个前边是#
b）类选择符可以重复使用，且可以用在任意元素上，使用任意次
c）Html内id属性必须是唯一的，id选择符只能使用一次
d）Id选择符的优先权高于类选择符
对于初学者，建议先从id选择符学起，id选择符会用了，类别选择符基本上就没什么问题了。
通常情况下，两者是结合起来使用的。Id选择符管大块大方向，类别选择符处理小细节。牛逼的网页，一定是两者结合使用的。
先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin) CSS盒子模式都具备这些属性.
所以整个盒模型在页面中所占的总宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界
而css样式中width所定义的宽度仅仅是内容部分的宽度,这是许多朋友容易搞混的地方
这里的边界我们也称之为:外边距、外补丁;填充也叫:内边距、内补。

css网页常用居中代码

• {margin: 0px;padding: 0px;}
  img,a img,a:hover img,a:active img,a:visited img{border:0;}
  a {color: #fff;text-decoration:none;}
  body {margin: 0px;background-color:#fff;background-repeat:no-repeat;background-position:top;}
  /box/
  box {width: 950px;background-color: #FFF;margin-right: auto;margin-left: auto;text-align: center;font-family: Arial, Helvetica, sans-serif,font-size: 12px;}

  最新通用居中代码

• {margin: 0px;padding: 0px;}
  img,a img,a:hover img,a:active img,a:visited img{border:0;}
  a {color: #fff;text-decoration:none;}
  body {margin: 0px;background-repeat: repeat-x;background-position: top;background-color: #fff;font-size: 12px;}
  清除代码:

常用的伪类元素
网页中，我们经常看到一些超链接，当我们鼠标放上去的时候，文字就变成了另一个颜色，放到图片上的时候，也会出现不同效果。
这些效果，通过以下伪类元素实现的。
通过这四个元素的定义，链接就会出现四种状态的变化。
a:link {text-decoration: none;color: #FFF;} / 未访问的链接 /
a:visited {color: #00FF00}/ 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 /
我们只需要将这四行代码，放到css文件中，页面的所有链接就不再是默认的蓝色了。
我们在css控制面板中，任意的调整样式，包括颜色、下划线等。
有人问了，如果我想给导航链接，专门定义一个链接样式怎么操作呢？
这个其实非常简单， 比如我们导航层是：

那么控制导航的链接样式就是这样的： daohang a:link {color: #FFF;} daohang a:visited {color: #00FF00} daohang a:hover {color: #FF00FF} daohang a:active {color: #0000FF}

同样的道理，我们可以定义各个div了。

规范书写
1、选择符的命名
最好为字母，或者字母加数字，不能用汉字
Id选择的命名，必须是唯一的，不能重复
2、标点符号要特别注意，多一个或者少一个，都会出现意想不到的错误。
3、文档的结构化书写：
正确的书写

如下错误的书写：

4、添加注释，如果div太多的话，要适当的添加一些注释:
/-------产品分类---------/
5、css代码优化
边界填充的优化： daohang{

margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;}
则可缩写为：

daohang {

Margin:10px 8px 12px 5px;（按照上、右、下、左的顺序来排列的）
Padding:0px;}
颜色值的缩写：
当RGB三个颜色值数值相同时，可缩写颜色值代码。如：
.menu { color:#ff3333;}
可缩写为:
.menu {color:#f33;}