一.网站开发构件概述
动态网站开发所需要的Web构件
- 客户端浏览器（IE，FF） IE Netscape Mozilla Firefox Safari Opera
- 可扩展的超文本标记语言（XHTML）
- 层叠样式表（CSS）
- 客户端脚本编程语言（JavaScript）
- Web服务器（Apache）
- 服务器端脚本编程语言（PHP） 必须和Apache在同一主机上
- 数据库管理系统（MySQL）
客户端浏览器有：IE Netscape Mozilla Firefox Safari Opera
可扩展的超文本标记语言（XHTML）：HTML（Hypertext Mark-up Language）文档是一个放置了标记（tags）的ASCII文本文件，HTML语言
是通过各种标记来标识文档的结构，以及标识超链接、图片、文字、段落、表格、表单等信息。
层叠样式表（CSS）：HTML是通过标签标识页面内容结构和显示页面的内容；使用HTML标签所标识的内容，需要通过层叠样式表CSS(Cascading Style Sheets)来
布局与美化；样式可定义HTML元素如何被显示，可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
客户端脚本编程语言（JavaScript）：HTML用来在页面中显示数据；CSS用来对页面进行布局与美化；客户端脚本语言则是一种有关因特网浏览器行为的编程，
能够实现用户和浏览器之间的互动性，这样才能有能力传递更多的动态网站内容；开发页面特效
Web服务器：保存并发布网站的服务器软件
服务器端脚本编程语言：协助Web服务器在服务器端完成业务工作的编程语言；是对Web服务器功能的扩展，并外挂在服务器上一起工作
数据库管理系统：网页上的内容几乎都来自数据库；数据库管理系统也是一种软件；它负责存储和管理网站所需的内容数据，包括文字、图片以及声音的数据内容
合作开发过程：
使用数据库去存储网页内容
使用HTML标识文档结构和添加内容
使用CSS对页面进行布局和美化
使用JavaScript完成用户与浏览器交互，实现页面特效
使用Web服务器（Apache）发布到网上
通过浏览器进行显示
二.网站工作原理及LAMP平台介绍
HTTP（Hypertext Transfer Protocol）协议：超文本传输协议是互联网上最为广泛的一种网络协议，所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；HTTP通信通常发生在TCP/IP连接之上，默认端口是80；HTTP只预示着一个可靠的传输
URL（Uniform Resource Locator）:统一资源定位符
协议：http ftp telnet https
主机：www.xsphp.com
端口：80
文件：index.html
附加资源：？id=10&username=zhangsan&email=aaa@bbb.com
操作系统 Web服务器 数据库 后台语言
Linux Apache MySQL PHP LAMP
Unix Tomcat Oracle JSP J2EE
Windows IIS SQL Server ASP ASP.net
Web服务器Apache:一直是世界使用排名第一的Web服务器软件，它可以运行在几乎所有广泛使用的计算机平台上，尤其对Linux的支持相当完美，它和Linux一样都是源代码开发的自由软件，所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。Apache的特点是简单、速度快、性能稳定，并可作为代理服务器来使用。
MySQL是关系型数据库管理系统，是一个开放源代码的软件，MySQL数据库系统使用最常用的结构化查询语言（SQL）进行数据库管理，是一个真正的多用户，多线程的SQL数据库服务器，是客户机/服务器结构软件的模式，由于其源代码的开放性及稳定性，且与网站流行编程语言PHP的完美结合，使很多站点都利用其作为服务器端数据库，获得了广泛应用
PHP（Hypertext Preprocessor）:超文本预处理器，是一种服务器端的，嵌入到HTML中的脚本语言，易于使用且功能强大，是开发Web应用程序的理想工具；PHP是一种目前最流行的服务器Web程序开发语言之一，在融合了现代编程语言的一些最佳特性后，PHP、Apache和MySQL的组合已经成为Web服务器的一种配置标准
LAMP（Linux- Apache-MySQL-PHP）网站架构是目前国际流行的Web框架，该框架包括：Linux操作系统，Apache网络服务器，MySQL数据 库，Perl、PHP或者Python编程语言，所有组成产品均是开源软件，是国际上成熟的架构框架，很多流行的商业应用都是采取这个架构，和 Java/J2EE架构相比，LAMP具有Web资源丰富、轻量、快速开发等特点，微软的.NET架构相比，LAMP具有通用、跨平台、高性能、低价格的 优势，因此LAMP无论是性能、质量还是价格都是企业搭建网站的首选平台
三.HTML和CSS概述及HTML语法
网页制作概述
HTML是Web页面的描述性语言
CSS则是为HTML制定样式的机制
JavaScript是具有交互性Web设计最佳选择 三个都可以独立编写
CSS和JavaScript还有PHP都可以嵌入在HTML中应用；都是文本
HTML基础
文件的后缀名.html或.htm
可以在文件中标识文本、图片、链接、表格等
标记由一对尖括号<>以及字符串组成
CSS基础
是一种用来表现HTML样式的语言；不能独立使用，没有HTML就没有CSS；作用是定义网页的外观和布局（字体、背景、文本、位置、边缘、列表及其他）；也是用浏览器解释的语言
HTML语法
标签（tags）：包含在“<”和“>”之间的部分，例如<p>就是一个标签，标签一般是成对使用的，如<b>和</b>同时使用，其中<b>是开始标签，</b>是结束标签；HTML的标签不区分大小写
元素：是一个整体，对象；元素由标签定义，标签所定义的内容就叫元素，元素包含在开始标签和结束标签之间。
每一种HTML元素，一般都会有一个或数个属性(property)，属性用来设置或表示元素的一些特性、名称或显示效果等。属性放在元素标签中，紧跟标签名称之后，它和标签名称之间有一个或数个空格。元素的每个属性都有一个值，属性的值设定使用“属性="值"”的格式，可以为属性的’值‘加上引号或不加引号。
使用标记来描述元素的；标记中可以嵌套其他标记
HTML文档就是由元素和标记组成的文件
HTML文档注释 <!-- 注释内容 -->; 注释中不能再有注释；在注释掉的标记之后，要保证还是一个结构完好的文档
HTML代码格式：任何回车和空格在源代码中都不起作用； 使用回车或空格进行排版
HTML字符实体：以&开头，一个实体名或是#号和一个实体编码，以分号;结束
< <或< > >或> & & " " ‘ ' 空格
HTML颜色的设置：可以是一个关键字或RGB的数字格式
white black blue gray green red yellow
#FF(0-255) 255*255*255
#FF00BB(rgb) red green blue
四.HTML的主体结构
代码分为三部分编写：
<html> 是网页文件的最外层标记
<head> 头标记 不会显示在浏览器中，包括基本的描述，整个网页的公共属性
<title></title> 主题标记
</head>
<body> 网页文件的主体部分
正文：文字 图片 链接 表单
</body>
</html>
HTML文档头部标记:
<head>头部标记</head>
<title></title> 只能有一个
<base/> 只能有一个
<link> 可以有多个
<meta> 可以有多个
<meta name="值" content="值">
<meta http-equiv="值" content="值">
title标记：定义网页标题，显示在浏览器的标题栏中
公司名称+公司产品 有利于搜索引擎（也是在搜索引擎中显示的标题）
base标记：基底网址标记，用于设定浏览器中文件的绝对路径
网页中的文件只需要写下文件的相对路径即可，这个路径就是base中指定的路径
link标记：设置外部文件的链接标记
用于确定本页面和其他文档之间的关系
meta标记：
<meta name=“值” conten="值">
<meta http-equiv="值" content="值">
name用于在网页中加入一些关于网页描述信息，网页的关键字
http-equiv用于在HTML文档中模拟HTTP协议的响应消息头，例如告诉浏览器是否缓存页面，使用什么样的字符集显示网页内容
name属性可以是：
keywords:网页的关键字 搜索引擎显示
description:网页的描述 搜索引擎收录
robors: index noindex follow nofollow all none
author:网页开发者
copyright：网页版权
http-equiv属性可以是：
content-type:文档类型
refresh：自动刷新 <meta http-equiv="refresh" content="3";url-http://www.baidu.com>3秒后自动转到百度
expires：缓存时间
windows-target：
pragma：
page-enter和page-exit：进入和退出页面的特效，一共23种
<meta http-equiv=“page-enter” content=“revealtrans(transition=5,duration=1.000)”>
<meta http-equiv="page-exit" content="revealtrans(transition=8,duration=1.000)">
body标记：主体标记，放置网页中所有内容 body标记里的属性可以是：
text：文本颜色 bgcolor：背景颜色 background：背景图片
link：链接颜色 alink：鼠标点到链接的颜色 vlink：鼠标放到链接上的颜色
topmargin：顶部距离 leftmargin：左距离 4个通用属性： id name class style
只要是可以用样式控制的就不用HTML本身属性控制
DTD：文档类型定义
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
五.常用标签
文字版面的编辑
格式标签
文本标签
格式标签用于定义网页中文本的布局 缩进 位置 换行 列表等
<br>换行 <p>段落 <center>居中 <pre>保留文字在源代码中的格式
<ul><li>无序列表 <ol><li>有序列表 <hr>水平分隔线
文本标签在网页中，为了着意强调某一部分文字或者为了让文字有所变化
<hn> 标题标签n的范围是1-6，字体大小由大变小 <b> 粗体 <i> 斜体 <u> 下划线
<sub> 下标 <sup>上标
<font face="楷体_GB2312" color="red“ size="5"> 绝对字体大小为5的红色楷体字
<font face="宋体” color=“green" size="+3"> 相对字体大小为+3的绿色宋体字
<tt> 输出打印机文字</tt> <cite> 输出引证、举列的斜体字</cite>
<em>输出强调的斜体字</em> <strong>输出强调的粗体字</strong>
<small>输出小型字体</small> <big>输出大型字体</big>
超链接和锚点
超链接标签：
相对URL： iamges/logo.gif ../css/demo.css ../../js/demo.js ./admin/index.php
绝对URL: c:/appserv/www/image/logo.gif /usr/local/apache/htdocs/www/index.php http://www.lamp.com/web/index.php
<a href="URL">内容</a>
target:_self 链接在本窗体打开 _blank 链接在新窗体打开 _parent _top
锚点标签： <a href="#锚点名称">定位位置</a> <a name="锚点名称">内容</a>
<html>
<head><titile>锚点标签</title></head>
<body>
<a href="#one" >第一段</a><br/> <!--#代表本页面-->
<a href="#two">第二段</a><br/>
<a name="one">
aaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaaa<br/>
</a>
<a href="#"></a>
<a name="two">
bbbbbbbbbbbbbbbbbbbbbb<br/>
bbbbbbbbbbbbbbbbbbbbbb<br/>
</a>
<a href="#"></a>
</body>
</html>
图像和图像地图
图像标签：<img>
src ：指定图片所在的URL border：边框的宽度
alt：鼠标放上有黄色小图标；如果图片不存在，则出现他指定的文字；搜索引擎可以通过它指定的文字搜索该图片
width： height：
<a href="http://localhost/cms/index.php"> <img src="logo.gif" border="0"/><br/>
<a href="http://www.baidu.com" target="_blank"><img src="http://bbs.lampbrother.net/images/no/logo.jpg"><br/>
图像地图：一个图片只能加一个a标签，做一个链接；如果把一幅图片分成多个区域，每个区域指向不同的URL地址（为一个图片加多个链接）
在图像<img>中使用usemap属性去使用地图
<map> 定义热点区域 <area> 指定每个热点区域
shape 指定形状rect(矩形),circle(圆),poly(多边形)
coords 确定形状 矩形指定对角线两个点 圆指定圆心和半径 多边形指定顶点
href 指定链接位置
<body>
<img src="logo.gif" usemap=“#mymap” border="0" /> <!--logo.gif为189*72-->
<map name="mymap">
<area shape="rect" coords="5,5,50,70" href="http://www.php.net" target="_blank">
<area shape=“circle” coords="75,35,30" href="http://www.apache.org" target="_blank">
<area shape="poly" coords="170,0,110,70,180,70" href="www.linux.com" target="_blank">
</map>
</body>
六.HTML中的表格标签
<table></table>
align：left center right 表格内容的左中右 border：边框 width：宽度 height：高度
cellpadding：表格内容距离边框的距离 cellspacing：表格边框的宽度 bordercolor：边框颜色
bordercolorlight： bordercolordark：
caption：定义标题，放在tr标签之前，放在table的内部使用
<caption><h1>我的表格</h1></caption>：定义表格标题
<th></th>：字段标签，和td用法一致，文字是以粗体居中显示
<tr>标签：行标签 align：left center right height bgcolor valign：top middle tottom
<td>标签：列标签 align valign width height collspan：合并列 rowspan：合并行
七.窗口分帧
窗口分帧介绍：把一个浏览器文档窗口分隔成多个窗口，每个窗口都可以显示一个独立的网页文件；每个帧（即页面）都有自己的url
窗口分帧应用：后台首页使用，不利于收索引擎
<frameset>标签：rows、cols可以使用固定值，百分比和*三种
border、(frameborder)
<frame>标签：src、name、scrolling、noresize
<a href="">的target属性：四个内置取值：_blank、_self、_parent、_top
<noframes>标签
<iframe>标签：可以与body共存
注意：分帧不能和body标签及内容体共存
<html>
<head>
<title>后台管理页面</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<frameset rows="80,*" frameboeder="1" border="20">
<frame src="header.html" name="top" noresize>
<frameset cols="180,*">
<frame src="menu.html" name="left" scrolling=”no" noresize>
<frame src=“main.html” name="right" noresize>
</frameset >
<noframes>
你使用的是不带分帧的浏览器，请使用有分帧的浏览器或转向不使用分帧的页面访问
</noframes>
</frameset>
</html>
<center><h3>后台管理页头部</h3></center>
<a href="menu1.html" target="left">第一项</a>||
<a href="menu2.html" target="left">第二项</a>||
<a href="menu3.html" target="left">第三项</a>||
<a href="menu4.html" target="left">第四项</a>||
<center><h3>菜单部分</h3></center>
<a href="">第一页</a><br>
<a href="">第二页</a><br>
<a href="">第三页</a><br>
<a href="">第四页</a><br>
<a href="">第五页</a><br>
iframe的应用
结合CSS使用iframe
8.表单的设计应用
<form></form>标签用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性
action属性用来设置接收和处理浏览器递交的表单内容的服务器程序URL，相对或绝对路径
method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：get或post,get将表单内容附加在URL地址后面，长度不能超过8192个字符，安全性不能保证；
post安全性好，传递字符长度在PHP配置文件中设置
title属性用来设置当网站访问者的鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小符标显示额文本（如表单的名称或描述）
enctype属性指示浏览器使用哪种编码方法将表单数据传送给www服务器，该属性可以有两种取值：application/x-www-form-urlencoded(默认的设置) multipart/form-data(上传文件使用)
表单字段元素（1）
<input type="text"> <input type="submit"> <input type="reset">
属性：size、value、maxlength、readonly、disabled
<input type="checkbox"> <input type="radio">
属性：checked
<input type="text"> <input type="password"> <input type="button"> <input type="hidden">
表单字段元素（2）
<input type="file"> <input type="image">
<select></select> <option></option>
<select>标签的属性：multiple、size、name
<option>标签的属性：value、selected
如何在列表中实现取消选项
<textarea></textarea> 属性：cols、rows
<label>属性：for、accesskey
<html>
<head>
<title>form应用</title>
<meta http-equiv="Content-Type" content="text/html";charset=utf-8>
</head>
<body>
<table align="center" border="1" width="500" cellspacing="0">
<form name="frm" action="e:/www/html/01/login.php" method="post" target="_blank" title="这是表单" enctype="multipart/form-data">
<caption>表单的应用</caption>
<tr><th>帐号</th>
<td><input type="text" name="username" value="username" size="30"></td>
</tr>
<tr><th>密码</th>
<td><input type="password" name="passwd" maxlength="20"></td>
</tr>
<tr>
<th>上传文件</th>
<td><input type="file" name="picture"></td>
</tr>
<tr>
<th>下拉列表</th>
<td> <select name=sf> <option>--请选择--</option>
<option>北京</option>
<option>上海</option>
</td>
</tr>
<tr><td colspan="2" align="center"><input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
<input type="button" value="清空" onclick="document.frm.username.value='' "></td>
</tr>
</from>
</bable>
</body>
</html>