1. 网页制作概述：
1、制作网页的常用技术：
（1）HTML：HTML，Hypertext Markup Language，超文本至标语言；文本类，解释执行的至标语言；是Internet上用于编写静态页面的主要语言，是网页制作的基础。
（2）CSS：CSS，Cascading Style Sheets，级联样式表；用于增强网页样式并允许将样式信息与网页内容分离的一种至标语言；是一种专门有关网页样式描述的文件，不关心网页的内容，网页的“外衣”，通过操纵编辑来改变其内容来灵活改变网页的外观布局。
（3）CGI：CGI，Common Gateway Interface，公共网关接口；是HTTP服务器与其他机器上的程序进行“交谈”的一种工具，其程序必修运行在网络服务器上，CGI程序使网页具有交互能力。
（4）JavaScript：JavaScript是由Netscape公司开发，目前流行的网络脚本语言。用于开发动态的页面，功能强大。可以直接应用与HTML文档，在客户端执行以获得动态交互式效果，还可以运行于服务器端，代替传统的CGI程序。
（5）Java Applet：使用Java语言编写的一些小应用程序，它们可以直接嵌入网页，产生特殊的效果。
（6）VBScript：也是一种脚本语言，是ASP（Active Server Pages，活动服务器页）默认使用的语言；由微软开发的一种通用脚本语言，只能被IE浏览器支持。
（7）JScript：最早的形式是Netscape的JavaScript，然后在此基础上出现了ECMA（European Computer Manufactures Association）-262 。现在JavaScript和JScript就是ＥＣＭＡ－262 标准由不同公司实现的版本。
（8）ASP：提供了一种服务器端脚本编写环境和服务器执行端执行指令的环境，是附加特性扩展了标准的HTML文件。ASP页面可以使用脚本语言（默认是VBScript）；使用它可以创建和运行动态、交互的Web服务器应用程序。
（9）PHP：PHP，Hypertext Preprocessor，超文本预处理语言；是一种内嵌在HTML页面内的脚本语言，静态的HTML标记和PHP程序一起组成了动态Web页面。
（10）JSP：Java Server Pages，Java服务器页；一种动态网页技术标准，是由SUN公司倡导并在许多公司参与下共同建立的一种动态网页技术标准。
（11）CFML：Cold Fusion Markup Language，冷聚变置标语言；稳定、可靠的Web应用服务平台。
（12）XML：Extensible Markup Language，可扩展的置标语言；是W3C组织发布的标准，它是一个精简的SGML（标准通用置标语言）。
（13）ASP.NET：是Microsoft.NET的一部分，是ASP的新版本，还提供了一个统一的Web开发模型。
（14）Web数据库：通过SQL命令对后台数据库进行各种操作。
常用的后台数据库有：
1）Microsoft SQL Server：需要Windows操作系统的支持，适合不太大的系统。
2）Oracle：可以跨平台进行，适合较复杂的大型系统。
3）Microsoft Access：需要Windows操作系统，一般小型的，简单的系统。
2、网页制作的常用工具：
（1）网页设计“三剑客”：Macromedia Dreamweaver系列、Firework系列、Flash系列的组合。（Dreamweaver用于设计站点和页面；Firework用于处理静态图片或简单的动态图片；Flash用于制作动画。）
（2）Microsoft FrontPage 2003、Photo Express系列、Adobe Photoshop系列的组合。（FrontPage系列用于各种特殊效果的静态图片处理。）
（3）Microsoft InterDew（Web应用程序开发平台）。这是微软的一个综合开发环境，在此平台上可以进行项目管理、站点管理、页面设计、网络编程、调试等。
2. HTML 概述：
1、HTML语言简介：
HTML语言是一种简易的文件交换标准，有别于物理的文件结构，旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。
HTML是纯文本类型语言，使用HTML编写的网页文件也是标准的纯文本文件，可以直接被浏览器解释执行，无须编译。
2、HTML基本标记及HTML文档框架：
HTML标记的一般形式：
开始标记——要描述的内容——/结束标记
HTML文档都是以 html 标记开始，并且以相匹配的 /html 标记结束。
HTML文档主要分为两个部分：头部（Head）和主体（Body）。
标记对 head 和 /head 之间的内容不会在浏览器页面中显示，为头部部；其内容是关于此文档的相关信息，如文档的标题，也是 title 和 /title 之间的文本。
body 和/body 标记之间包含的内容将出现在Web页面上，为网页的主体部分；这部分内容可能要在浏览器的窗口中显示，属于文档“流”。
在此标记之间可包含 ｐ和 /p，h 和 /h ，br 和 /hr 等标记，它描述的是正文信息，如标题、段落、列表和表格。
除了文档等头部和主体外，典型的HTML文档还包含注释。
这些注释是文档作者写给自己和其他人看的，起到说明的作用；尽管出现在文档中，但是它们不会被解释，也不能被显示，不以任何方式改变标记和文档的功能。
注释形式： ！- - 【被注释的内容】- -
3、HTML标记类型：
HTML的标记从功能上大致分为三类：
（1）结构性的标记：标记布置文档的结构。（如：段落标记 ｐ和标题标记 head 就是结构性标记）
（2）样式性的标记：其描述对应内容被显示时应采用的样式。（相当多的HTML标记用于样式化的显示，如：粗体标记 b 属于样式性标记；一般情况下，不鼓励使用样式性标记）
（3）描述性的标记：用来描述元素的性质，如：title标记。
4、HTML的编辑和运行：
根据HTML语法所写出来的文件称为HTML文件，其文件的扩展名为 .html 或 .htm 。
HTML文件时纯文本文件，可以使用任何一个文本编辑器（记事本或写字板）进行编辑，然后通过浏览器来解释执行。
HTML文件时运行在Web浏览器上的；在使用浏览器运行HTML文件时，可以在地址栏输入文件的地址即URL后打开，或直接用IE浏览器打开。
浏览器打开之后的结果显示如下：
3. HTML 的常用标记及其属性：
1、HTML的文本格式标记及其属性：
HTML的文本标记是有关文本输出的格式的标记，如文本输出的字体、是否斜体、是否加下划线等。
（1）pre - /pre：标记用来对文本进行预处理操作。
（2）b - /b、i - /i、u - /u：b——表示加粗；i——表示斜体；u——表示下划线。
（3）tt - /tt、cite - /cite、em - /em、strong - /strong：tt——输出打字机风格字体；cite——输出引用方式等字体，通常斜体；em——输出强调的文本（斜体加粗）；strong——输出加重了的文本（通常也是斜体加粗）。
（4）blockquote - /blackquote：标记对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。
（5）font - /font：可以对输出文本的字体大小、颜色进行修改。size属性用来改变字体的大小，可取值为-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值可以是十六进制RGB颜色码或HTML语言给定的颜色常量名：
auque black blue fuchsia grey green lime maroon navy olive purple red teal silver white yellow
2、图像标记及其属性：
使用 img 标记并对其src属性赋值将图像添加到页面中。
注意图形文件所在的路径：当HTML文件与图像文件（文件名假设logo.gif）在同一个目录下，则代码为img src=“logo.gif” 当图像文件放在HTML文档所在目录的一个子目录（假设子目录名images）下，则代码为 img src=“images/logo.gif” ； 当图像文件放在HTML文档所在目录的父目录（假设父目录名home）中，则代码为 img src=“ . . /home、logo.gif” 。
强调一下：src属性在 img 标记中是必须赋值的！是标记中不可缺少的一部分。
3、超链接标记及其属性：
超链接——创建超链接的HTML标记对是 a - /a；其格式为：a href =“ ” ······ /a 。
超链接标记的属性href是不能缺少的，标记对之间加入需要链接的文本或者图像（链接图像时加入 img src=“ ” 标记）。
href的值可以是URL形式，即网址或相对路径；也可以说mailto，即发送E-mail形式。
（1）超链接是URL：
语法为：a href=“URL” ····· /a；例如：a href=“http：//www.jxust.cn/” 江西理工大学主页 /a 。
（2）超链接是电子邮件：
语法为：a href=“mailto：E-mail” ···· /a；例如：a href=“mailto：100694086@qq.com” 我的QQ邮箱 /a 。
在HTML文档中创建锚记的语法格式如下：
a name = “ ” ···· /a
上面的语法标记要配合 a href = “ ” ··· /a 来使用才有效果。
上门的语法标记是用来在HTML中创建一个锚记（Mark），属性name必不可少，它的值就是网页中的锚记名。
用法：
1）先在需要锚记的地方使用 a name =“ ”···· /a 的语法标记，创建出标记名。
2）使用 a href =“ #标记名” 点击此处将使浏览器跳到“标记名”处 /a ；就能完成锚记
注意：若使用href赋值的是标记名，必须在标记名的前面加一个#！
4、列表标记：
列表是一系列的条目，这些条目通常占一行，而且它们前面往往有一个符号（字母或数字）——有序列表。
如果建立列表的时候没有使用符号，则这样的列表称为：无序列表。
（1）用dl····/dl 、dt···/dt、dd···/dd 定义列表：
dl····/dl 用来创建一个普通的列表。
dt···/dt 用来创建列表中的上层项目。
dd···/dd 用来创建列表中的最下层项目。
dt···/dt 和 dd···/dd 都必须放在 dl····/dl 这个标记对之间。
（2）用ul···/ul、li···/li 创建无序列表：
ul···/ul标记对用来创建一个无序列表。
列表的段头符号为disk（实心圆）、circle（空心圆）、square（实心方框）三种。
用属性type指定要显示的段头符号，默认为实心圆。例如：ul type=“disk”表示创建的是带有实心圆段头符号的无序列表。
li···/li标记对只能在ul···/ul标记对之间使用，此标记用来创建列表的一个列表项，且创建的是无序列表的表项。
（3）用ol···/ol、li···/li 创建有序列表：
ol···/ol标记对用来创建一个有序列表。
列表的段头符号为数字、大小写英文字母、大小写罗马字母。
用属性type指定要显示的段头符号，默认为数字。例如：ol type=“a” 表示创建的是小写英文字母为段头符号的有序列表。
li···/li标记对只能在ol···/ol标记对之间使用，此标记用来创建列表的一个列表项，且创建的是有序列表的表项。
4. 表格：
表格是网页中显示数据的一种非常有用的方法；表格标记对于制作网页是很重要的，当前很多网页都是使用多重表格来布局的。
1、table····/table 标记：
上述标记是用来创建一个表格，它的属性如下图：
2、caption····/caption 标记：
上述标记对是可选的。如果table··/table标记对包含它，它必须是table···/table标记对的第一个标记。
caption···/caption标记对作用是说明表格的标题。
3、th···/th、tr···/tr、td···/td 标记：
th···/th 标记对用来设置表格头，通常是黑体居中文字。
tr···/tr 标记对用来创建表格中的首行。此标记对只能放在table···/table标记对之间使用，而且在此标记对之间加入文本将是无用的，在tr···/tr标记对之间只能紧跟td···/td标记对才有效。
td···/td 标记对用来创建表格一行中的数据单元格，此标记对也只有放在tr···/tr标记对之间才有效，要显示的文本也只有放在td···/td标记中才有效。
一般情况下，表格每行中单元格数目相同，每列中的单元格数目也相同；要使一个单元格跨多行或多列，可使用colspan和rowspan属性。
4、thead···/thead、tbody···/tbody、tfoot···/tfoot 标记：
上述标记对将表格进一步分为列标题部分、主体部分和页脚部分。
5、表格的嵌套：
td 元素可以包含任何其他表示性元素，也可以为另一个表格，这就允许利用表格进行页面的显示和布局。
6、表格内的文本处理：
valign属性——控制单元格内文本的垂直对齐。
align属性——控制单元格内文本的水平对齐。
（1）valign语法：
valign=“【value】”，其中value可取的值为 top、middle、bottom和baseline。
（2）align语法：
align=“【value】”，其中value可取的值为left、right 、center和justify。
5. 框架：
框架可以用来向浏览器窗口中装载多个HTML文件；每个HTML文件占据一个框架，而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架。
1、frameset···/framset 标记：
上述标记对放在框架的主文档的body···/body标记对的外边，也可以嵌套在其他框架文档中。
此标记对用来定义主文档中的有几个框架并且各个框架是如何排列的；此标记对主要有rows 和cols两个属性。
2、frame···/frame 标记：
上述标记对放在frameset···/frameset标记对之间。
上述标记对用来定义一个具体的框架。
frame标记具有src和name两个属性，都必须赋值。
src是此框架的源HTML文件名（包含相对路或网址），浏览器将会在此框架中显示src指定的HTML文件。
name是此框架的名字，这个名字用来供超链接标记的框架名。
frame标记还有scrolling和noresize属性；scrolling用来指定是否显示滚动条，取值可以是yes、no或auto；noresize属性直接加入标记中即可使用，无须赋值，作用为禁止用户调整框架的大小；还有bordercolor、、frameborder、marginheight（指定框架上下边界与框架内容之间空白区的高度、marginwidth（同上是左右空白区宽度）等属性。
3、noframes···/noframes 标记：
上述标记对也是放在frameset··/frameset标记对之间。
作用是在不支持框架的浏览器中显示文本或图像信息。
此标记对之间要先紧跟body···/body标记对，然后才能使用其他标记。
框架实例：
6. 表单：
表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互功能。
1、form···/form 标记：
用form···/form标记定义一个表单，主要是用好form标记的属性，其主要属性如下：
（1）action属性：
action属性用来指定提交表单时接收表单数据的URL，语法为：
form action=“myURL” 同样也可以更改为邮箱地址。
（2）method属性：
method属性是要用来定义处理程序从表单中获得信息的方式，可取值为GET和POST的其中一个。
GET方式是处理程序从当前HTML文档中获得数据，但是这种方式传送的数据量是有限的。
POST方式与GET方式相反，它是当前的HTML文档把数据传送给处理程序，传输数据量相对较大。
（3）name属性：
表单的name属性用于定义表单的名称，JavaScript可以通过此名字访问它，否则，需要通过数字访问它。
（4）target属性：
若使用了框架，target属性用来告知浏览器在哪个框架中打开服务器产生的应答。
2、input标记：
input标记用来定义一个用户输入区，用户可以在其中输入信息。
3、select···/select、option标记：
select···/select标记对用来创建一个下拉列表框或可以复制的列表框。
次标记对用在form···/form标记对之间。
select 具有multiple（使列表框可多选）、name（列表框的名字）和size（列表的高度，默认是1）属性。
option标记用来指定列表框中的一个选项，它放在select···/select标记对之间。
option标记具有selected（指定默认的选项）和value（给option指定的选项赋值）两个属性。
4、textarea····/textarea 标记：
上述标记对用来创建一个可以输入多行的文本框。
此标记对用在form····/form标记对之间。
它具有name（名字）、cols（列数）和rows（行数）属性。
表单实例：
7. 层叠样式表CSS和DIV标记：
1、CSS简介：
采用CSS技术，可以有效的对网页页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。
三个优点：
一组样式可以调用在多个对象上。
语法易学易懂。
丰富的样式效果。
（并非所有的浏览器都支持CSS样式，事先要进行测试）
2、CSS与HTML：
CSS与HTML的组织方式大致有4种：
（1）嵌入式：
（2）链接式：
适用于网页的内容比较丰富、样式比较复杂时。
（3）引入式：
这种方式不常用，做法是：在HTML文件的 head····/head标记对之间加入说明性的代码：
@import url（Testcss.css）
3、DIV标记：
DIV标记用来为HTML文档内大块的内容提供结构和背景。
DIV的起始标记和结束标记之间的所有内容构成这个块。
其格式为：div id=“div-name”style=“属性1：属性1值；属性2：属性2值·······属性n：属性n值；” 块内内容 /div 。
属性：
（1）基本属性：width、height、left、top、background-color。
（2）定位属性：position属性值可以为absolute——块的位置固定不动或relative——位置随内容的实际情况进行浮动。
（3）显示属性：display属性值可以为block——显示或者none——隐藏。
（4）优先属性：z-index属性值为一个整数（正负均可）。可以理解我z轴的坐标。
（5）透明属性：opacity属性值为0.3时是浏览器Firefox专用；其属性值为30等价于filter；alpha——IE浏览器专用。
