一、HTML
HTML（hyper text makeup language）超文本标记语言，稳当的一种类型，类似红头文件，可分为头信息(head)和主体内容(body)，标记语言，不是程序语言，给人画图的感觉。使用标签来描述网页
如何使用html语言实现网页效果
可以使用记事本编辑HTML代码，通过浏览器执行就可以
HTML语法规范
元素：html head title body meta div等
标签：> < 是标签 是闭合的
<html></html>
<title></title>
<img /> 该标签页有闭合，是单标签
meta标签 keywords 提供分类点击标志
meta标签 description 提供基本介绍 搜索引擎在搜索页面时可以取出该内容
meta标签 http-equiv="Content-type" 用来标记页面的解码方式
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
显式告诉浏览器编码格式为utf-8
文件本身编码、内容编码和浏览器识别编码必须相同 浏览器识别编码默认为gbk/gb2312
HTML标签讲解
结构html 样式css 行为javascript
结构在html里体现就是各种标签，我们将需要显示的内容在各种标签中呈现出来
标题标签 h1-h6 字体由大变小
段落标签 <p></p>
换行<br />和水平线<hr /> 标签
列表标签 <ul><li></li><li></li></u;l>无序列表 <ol></ol>有序列表
超链接
<!--html注释内容
超链接内容：-->
内部链接
外部链接
链接到外部网站 <a href=" http://........ ">…</a>
链接到email <a href=“mailto:邮件地址”>…</a>
链接到下载文件 <a href="文件地址">…</a>
引入图片
<img src alt title/>
src:图片路径源地址
alt:显示信息， w3c规定必须得写
titlr;鼠标悬停提示信息
当前目录的图片，相对路径，当前目录可用"./3d.jpg"上级目录"../"上两级目录"../../"上三级目录"../../../" <imgsrc=“3d.jpg” alt=“” title=“”/>
绝对路径，同一服务器上的图片
<imgsrc=“file:///d:/picture/3d.jpg” alt=“” title=“” />
网络上的图片<imgsrc=“http://i3.itc.cn/sdsd/1.jpg” alt=“” title=“” />
图片基本格式
gif：在压缩过程中，图像的像素资料不会被丢失，然而丢失的却是图像的色彩。GIF格式最多只能储存256色，所以通常用来显示简单图形及字体。
jpg：利用一种失真式的图像压缩方式将图像压缩在很小的储存空间中，其压缩比率通常在10:1～40:1之间。这样可以使图像占用较小的空间，所以很适合应用在网页的图像中。JPEG格式的图像主要压缩的是高频信息，对色彩的信息保留较好，因此也普遍应用于需要连续色调的图像中。有损压缩
png：PNG能够提供长度比GIF小30％的无损压缩图像文件。它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。要求背景透明可用
上标<sup>和下标<sub>标签
容器标签 div span （无语意标签）
div：容器标签，可将其他标签放入容器中，通过控制div，间接控制内容的位置、颜色、大小等样式
每个div需要占据一行，大容器 大容器里可嵌套小容器 可以把<div></div>中的内容视为一个独立的对象，用于以后学习的CSS的控制
span：多个span会共享一行，小容器 该标签可以包含于<div>标签中，成为它的子元素，而反过来则不成立，即<span>标签不能包含<div>标签。
<div><spam></span></div>
符号实体
引入多媒体
<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"width="400" height="300">
<paramname="autoStart"value="false" />
<paramname="URL" value="di.wmv" />
<embedautostart="0"src="di.wmv"type="video/x-ms-wmv" width="400"height="300" controls="ImageWindow"console="cons">
</embed>
</object>
HTML发展历史
现在使用的版本为XHTML1.0
二、CSS
css（cascading style sheet）层叠样式表，w3c要求在编写前端静态页面时，结构（HTML）、样式/外观（css）、行为（javascript）要分离。我们通过css改变网站的颜色、宽、高、位置、大小、等外观样式。
html标签达到样式效果 <b></b>内容加粗体 <i></i> 加字体斜体效果，在w3c中不建议使用
如何使用CSS
获得一个对象，并对对象的相应属性赋予相应的样式
第一步：获得一个对象
<html>
<h2>作诗一首</h2>
<a href=”http://www.baidu.com”>去百度</a>
</html>
第二个：为对象赋予什么属性
例如：颜色、宽度、高度、字体大小等等
第三个：给这个对象的属性赋予什么值
例如颜色：红色、绿色
宽度：100px 200px
CSS引入的4种方式
1.内部样式引入
2.行内样式引入
3.外部样式
4.样式嵌套
CSS获取对象的方式、选择器
css选择器使用，获得css样式对象过程就是选择的过程
1、通过id来获得——id选择器（唯一标识选择器）
2、标签选择器 div p h1 span
3、类别选择器 属性class
我们的html文档里边有许多标签，当某些标签的样式是一致的，就可以使用类别选择器进行样式赋予
4、派生选择器
选择器 选择器 选择器
5、分组选择器
选择器，选择器，选择器，
我们可以挑选我们需要的元素对象进行样式赋予
6、通用选择器* 可以将html文档中全部标签都获得，效率低
7、伪类选择器
超链接a 默认样式:link、访问后样式:visited:、鼠标滑过样式;hover、鼠标按下样式:active
顺序固定；LVHA
注意：超链接a的属性href一定要完整，不要使用#简单的标志。有些浏览器不能识别简单,例如：href=”#”
选择器优先级
行内>id>类别>派生>分组>标签>通用
DTD（document type defined） 文档类型定义
我们使用xhtml1.0版本编写html代码，使用DTD告知浏览器当前html文档的版本，这样浏览器按照DTD的声明版本来解释html代码
XHTML1.0规范
标签必须闭合
标签大小写有区分
属性值必须使用引号
有根节点元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
strict：严格按照XHTML1.0规范
transitional：既有html4.0 不严格
frameset：
html5定义类型
背景及宽高设置
宽高设置：width height
背景设置：
颜色 background-color 在css设置颜色有三种方法：1、英文字母 2、使用6位16进制数表示颜色 #23AD65 3、使用rgb格式 rgb(0-255,0-255,0-255)
图片 background-imag
图片的repeat，平铺 background-repeat：repeat-x -y no-repeat 决定图片平铺选项 对于多图片网站，可将大图片裁成小图片，通过平铺显示为大图片
图片的位置 background-position x位置 left center right 具体像素值 y位置 top center buttom 具体像素值
背景图片的附着 background-attachment：fixed/scroll
可用统一的一个符合样式来设置 background:颜色 图片 平铺 附着 位置
字体样式设置：文字颜色color、大小font-size、高度line-height、字体、倾斜、
下划线等 text-decoration: underline overline line-through blink
font-style:italic;/*normal italic obliqueZ 文字倾斜 */
font-weight:bold;/*文字粗体*/
text-align:left;/*文字对齐方式left center right*/
text-indent:20px;/*文本缩进像素*/
字体设置：文字在网页中显示，不需要多种花样，两个基本字体：有衬线serif（美观，内容正文，Times New Roman）和无衬线sans serif（标题，字号较大，内容较少，Arial）
混合字体中，默认黑体可同时包含中英文 分布对中英文设置字体类型，先设置英文字体，再设置中文
字体备份，设置两个字体类型，第一个没有，可用第二个
选择正确字体
无序列表样式设置
list-style:none list-style-image l ist-style-position list-style-type
div+css布局
div，是一个无语义容器标签，将一般性内容放入div中，通过控制div来间接控制网站内容的样式，可类比为，摩天大楼的钢筋混凝土的结构
css，层叠样式表，设置容器内容的外观和位置 可类比为摩天大楼的装修工作
将DIV和CSS分开 优势：
页面布局发展的3个阶段：table网页设计 table+css网页设计（内容和样式混合） （table布局，css指定外观） DIV+CSS（div放内容，css指定样式）
DIV布局
盒子：内容、内边距、边框、外边距
一个盒子实际占据的宽度和高度由内容+内边距+边框+外边距组成，即 内容 width+padding+border+margin
盒子模型边框border分析
border-style:dotted;/*边框样式solid dotted dashed double*/
border-width:2px;/*边框厚度 thin thick*/
border-color:red;/*边框颜色*/
边框的四边还可以分别设置
border-top/left/right/bottom-style
复合属性设置border边框样式
border:宽度 样式 颜色
盒子模型margin外边距分析
margin-top:20px;
margin-bottom:20px;
margin-left:20px;
margin-right:40px;
复合属性设置：margin:top right buttom left
居中效果：margin:auto;/*盒子居中效果，以父级盒子的大小为准*/
盒子内边距padding分析
我们在设置边框和内边距时，内容大小并不改变，只是改变盒子的大小；内边距颜色为盒子背景颜色
padding： top right bottom left
样式初始化
对于一些html标签，浏览器分配了默认的样式，如
body：左外边距、上外边距
h1-h6:：字体大小、上下外边距等样式
超链接：文字有蓝色和下划线样式
段落p：上下外边距
我们不需要标签默认样式，通过css来去默认，并进行样式初始化
浮动效果float
只要div实现浮动效果，就可在一行展示多个div
float:left
三、PHP
四、MySQL
五、办公留言系统网站开发实例
如何通过php程序操作MySQL数据库，利用PHP语言实现数据的增、删、改、查
php程序实现数据的增加-留言添加
MySQL_connect(主机名，用户名，密码)
mysql_select_db(库名，连接句柄)
mysql_query('set names utf8')设置字符集
拼写具体sql语句（insert）
将sql语句发送到数据库执行 mysql_query(sql语句)
判断是否执行成功
mysql_query() 将sql语句发送到数据库执行
返回值：
针对增。删。改 返回布尔值
针对查 语句 返回资源结果集
mysql_fetch_assoc() 从资源结果集中获取具体的信息结果，信息结果以数组形式返回，每次只获得一条结果
展示留言板
查询内容出现？号乱码
执行set names gbk;
