第6章HTML与PHP基础课件

第章与基础《计算机网络基于因特网的信息服务平台》（第版）第章与基础《计算机网络基于因特网的信息服务平台》（第版）1文档结构网页制作工具基本元素表格（）表单（）程序基础学习目的文档结构学习目的2为了在世界范围内发布信息，一种能为所有的计算机作为信息发布用的母语这就是万维网使用的超文本标记语言（，)。概述为了在世界范围内发布信息，一种能为所有的计算机作为信息发布用3网页图例网页图例4<><><""";"><><>...<>另外还有文档主体部分的声明。<()><>首页的部分源代码首页的部分源代码5一个文档是普通的文本文件，它包含两类内容：普通的文本、代码或标记。标记()是用一对尖括号“<>”括起来的文本串，例如第一行的<>。标记通常具有如下结构：<…>在标记定义中，“”是标记名，定义标记的类型而“”为属性，标记的属性是一种选项，属性给出了这个元素的附加信息标记和属性一个文档是普通的文本文件，它包含两类内容：普通的文本、代码或6在主页文档第二行的<>标记中，是标记名，没有相关属性在文档主体<>定义中，定义了若干属性，属性值为：“()”标记和属性举例在主页文档第二行的<>标记中，是标记名，没有相关属性标记和属7需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感例如，在超链中访问的文件名，尽管在系统中，和可以指向同一文件，但在系统中，却是指向不同的文件重要提示：在网页设计须统一命名方案标记、属性名和属性值的大小写需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往8标记和文本结合起来形成元素()。每个元素代表文档中的一个对象比如文档头、段落或图片一个元素可具有一个或一对标记，通常具有一些相关的属性元素有两种类型：容器（）元素和单个元素（空元素）元素、容器、空元素标记和文本结合起来形成元素()。每个元素代表文档中的一个对象9容器元素包含文本内容表达一个文本段、它由文本主体或其他元素组成文本主体在开头和结尾处用一对标记来确定边界（尾标记在标记名前加“”）例如，<>和<>把这两个标记之间的文本定义成一个文档标题而空元素是不影响任何文本的单个标记，在文档中插入对象来修饰网页例如<…>在文档中插入图像容器和空元素的区别容器元素包含文本内容容器和空元素的区别10三个元素构成文档的基本结构：<><>

<><>

<><>文档结构三个元素构成文档的基本结构：文档结构11<>容器元素中最为常用元素：<><>：这个元素是文档的抬头，类似书里的页眉在浏览器中，会在视窗口标题栏上抬头（）在用户保存网页时一般都作为文件名，所以命名应该注意常用元素：<><>容器元素中最为常用元素：常用元素：<>12<><>：标题标记，把标记中的文本作为标题从标记<>、<>直到<>，可以有六个层次的标题（较小的数字标记较重要的标题）标题通常用较大的字型编排，并且在该标题的上下各有一个空行<>：段落标记在两个段落之间插入空行<“”>：图像标记，把图像插入到文档中，图像可以在属性中给出的处找到<>中常用元素（一）<><>：标题标记，把标记中的文本作为标题<>中常用元素（一13<><><><>：该结构提供了一个无序的条目列表；每个条目以<>标记开始。通常在显示出的各条目项前置一个实心的圆点。<><>：超文本标记，也称为超链接。文本用某种特殊方式来显示（用颜色、下划线或其它类似方法）；当点击屏幕上的超文本链接时，服务器将检索“”属性中的“”给出的文档，并将结果返回给用户浏览器。<>：放置一个横穿浏览器窗口的水平线，通常水平线的上下各有一个空行。<>：在文本中强制换行，以便后继文本都放在下一行。<>中常用元素（二）<><><><>：该结构提供了一个无序的条目列表；每个条目以14第6章HTML与PHP基础课件15定义水平线、表格边框、图像等对象的长、宽、高等一系列属性长度的表示有两种方式：绝对长度和相对长度。它们的单位分别为像素（）和百分比（％）像素代表屏幕上的各个显像点，而相对长度则描述了对象在浏览器窗口的所占的比例标准单位长度定义水平线、表格边框、图像等对象的长、宽、高等一系列属性标准16使用绝对长度，网页中的对象不会随浏览器的视窗变化<""> <绝对长度>而使用相对长度来描述则对象会随浏览器窗口大小变化而变化。<""> <相对长度>标准单位长度应用使用绝对长度，网页中的对象不会随浏览器的视窗变化标准单位长度17定义字体、页面背景、表格背景、超链接相关的颜色颜色单位有三种表达的方式：十六进制的颜色代码<><>十进制颜色码<()><>颜色名码<""><>标准单位颜色定义字体、页面背景、表格背景、超链接相关的颜色标准单位颜色18统一资源定位器()是一种因特网资源地址的表示法在中，路径又分为两种形式：绝对路径和相对路径绝对路径是将主机地址、资源目录和资源名称进行完整的描述<"">标准单位统一资源定位器()是一种因特网资源地址的表示法标准单位19相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:<""><图像文件""与当前显示的网页在同一目录下；><""> <图像文件""在与当前显示网页所在目录同层次的另一子目录下；>标准单位–（续）相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:20在和下，目录的分隔符是不同的：:\\\

在访问中，表达方式相同：：特别提示在和下，目录的分隔符是不同的：：特别提示21的表单是交互式应用的重要因素表单仅做这种交互性工作的一半：一旦用户填完表单，就把表格提交给一个特殊的程序或脚本这个程序或脚本取出表单提供的信息，并做一些有用的事（如把用户数据传递给数据库）可以把表单看成因特网上通用的一种视窗（）对话框，用于接受用户数据表单（）的表单是交互式应用的重要因素表单（）22表单元素基本格式<"[]""><><>元素括起整个表单，并给出一些基本定义指定了信息传递给服务器的方法给出与处理提交信息的脚本相关的（如“”，“”）表单元素表单元素基本格式表单元素23表单<>元素基本格式<""""""><>把不同的字段布署在表单里，让用户输入信息属性指定该字段在某个表单中的唯一名称；可选的属性给出该标记的默认值属性标记的样式，“”可以是：（复选框）。（单选按钮）（单行的文本输入栏）。（图像放在表单里）（提交按钮）(清除按钮)（在表单中保留不供显示的内容）表单<>元素表单<>元素基本格式表单<>元素24另外：属性用于设置文本字段的窗口大小（以字符数为计量单位）属性与和类型一起使用，用于表示按钮在默认状态时是否被选中表单<>元素(续)另外：表单<>元素(续)25选项选择元素（类似中的组合框）<""><""><""><>在选项选择元素中，所有可选项目由<>元素逐条列出；通常用下拉式菜单显示跟在每个<>标记后面的在下拉框中显示；表单<>元素选项选择元素（类似中的组合框）表单<>元素26选项选择：<“"><“"><“">’<>表单<>元素举例选项选择：表单<>元素举例27多行文本输入<""><>类似于<“”>标记，但允许多行文本输入属性与<>的类似，用行和列属性的数值定义文本输入区域的大小元素中的值将作为默认内容显示在文本区域中表单<>元素多行文本输入表单<>元素28很多字符不能直接放入文档中，如，“<”和“>”字符，以及许多国际字符和印刷字符可以用实体（）把这些字符进行替换实体是一种文本串，它们一起表示单个字符。一般包括一个“”号、一个表示字符的名字及一个分号，基本元素实体很多字符不能直接放入文档中，如，“<”和“>”字符，以及许多29保留字符是中用于其它目的的普通字符，如果按原样输入则会引起混乱实体之一：保留字符实体显示形式备注;小于号（<）；大于号（>）;与号（）;引号（"）（通常不用）;不换行空格见下页

保留字符是中用于其它目的的普通字符，如果按原样输入则会引起混30在浏览器中浏览文档时，浏览器根据单词之间的空格来自动换行，并且不支持两个及两个以上的连续空格的显示因此语言提供了不换行空格的标记＆；这样如果需要某两个单词（也可能是表单中的<>元素）之间不出现换行的话，用这个标记来替代空格，并且也可以利用这个标记来建立两个或两个以上的空格效果不换行空格的用途在浏览器中浏览文档时，浏览器根据单词之间的空格来自动换行，并31不换行空格的应用举例不换行空格的应用举例32实体之一：国际字符国际字符指多数除英语外的欧洲语言中使用的字符，其名字参照拉丁字符集实体显示形式备注;带重音的大写（Á）;带升降调的小写（ô）;连字大写（Æ）;带变音符的小写（ç）实体之一：国际字符国际字符指多数除英语外的欧洲语言中使用的字33元素表格元素在网页中以表格形式组织和显示数据使用在网页布局设计上。在“”貌似简单的网页上，居然也用了三个表格来布局元素表格元素在网页中以表格形式组织和显示数据34<"?""?""?""?""?""?"><>…<>…<>…<><><>标记一般形式<"?""?""?""?""?""?"><>标记35在<>标记的属性中： 单元格宽度 单元格高度 单元格水平对齐方式 单元格垂直对齐方式 单元格的行跨度 单元格的列跨度表格中的元素在<>标记的属性中：表格中的元素36客户端：活动文档（），例如,等，程序下载到浏览器执行服务器：动态文档（），程序在服务器上执行，结果下载到浏览器本节以ＰＨＰ为例，说明动态文档的基本概念动态网页概述客户端：活动文档（），例如,等，程序下载到浏览器执行37公共网关接口（）体现了作为网络应用程序的一种公共的通道在通道的一侧，扮演了内容表达的角色，展示网页，收集信息在另一侧，不同的程序或进程对来自通道的信息进行解读，做出响应在服务器端，都可以解读来自浏览器的信息，并进行处理、响应公共网关接口（）公共网关接口（）公共网关接口（）38一张服务器状态信息的快照一张服务器状态信息的快照39<><><><><><><?",$\";?><><>一个简单的动态网页<>一个简单的动态网页40打开浏览器，在地址栏中输入：本节所含的实验或例子假设在本地主机上的服务器阿上运行。的网页发布目录在:\\一个简单的动态网页的执行结果打开浏览器，在地址栏中输入：一个简单的动态网页的执行结果41网页需要经过的模块处理才能显示;网页的程序参数（或变量）至少可以从地址栏输入；网页的输出可以随程序参数（或变量）值变化而变化在上例在网址之后附带了“”。等号“”左边为“参数”，“”右侧为参数值当需要输入的参数多于一项时，参数之间要用“”号隔开与“纯”网页的不同网页需要经过的模块处理才能显示;与“纯”网页的不同42在浏览器的地址栏输入网页的名称和相关参数，而这种用户数据的输入方式显然是很不方便的。尤其不适合普通浏览器用户的使用在中，一般浏览器用户是通过表单完成网上的数据输入的表单的引入在浏览器的地址栏输入网页的名称和相关参数，而这种用户数据的输43一个简单的表单实例图一个简单的表单实例图44表单数据发送后的实例图表单数据发送后的实例图45一个简单的表单<> <文件名：><><"""">姓名:<""""><>兴趣:<""""><><"传送"><><><>表单源码一个简单的表单表单源码46对简单表单的程序处理<> <文件名：><><>!<><><""><><><?"$欢迎您,您的兴趣爱好是$";?>!<><><><><>表单与处理程序对简单表单的程序处理表单与处理程序47含有表单的文件往往是一个“纯”文件，比如上例的表单文档就是一个有“”后缀的文件表单是一个容器元素，即有开始<>和结束<>标记，在<>中至少包含两个属性：“”和“”表单的性质含有表单的文件往往是一个“纯”文件，比如上例的表单文档就是一48<>属性的值表示该表单的处理方法，也就是表单提交后需要执行的程序名(包括路径)由于本节属性中填写的就是对应的程序名称<"""">表示在用户提交表单后，由服务器上的程序来处理用户所提交的数据表单的属性<>表单的属性49<"…">说明本表单向服务器发送输入信息时的使用方式一般有两种选择：和，默认的方式是使用时，浏览器将表单上的输入信息用字符串附加在所设定的后面，中间用“?”和“”隔开，然后传送到服务器端由于系统内置变量的长度限制，用方式所能传送的数据一般为字节以下而使用方法时，会将表单的输入信息进行包装后发送，用户数据的长度没有限制表单的<"…">表单的50函数库是一种通过接口执行的网络应用指令集在中，这些函数可以分为余类，共计一千多个，而且还在不断的扩展之中用户可以把函数看成动态网页的重要构件，只要使用得当，使用函数进行程序设计可以收到事半功倍的效果函数函数库是一种通过接口执行的网络应用指令集函数51函数()函数()52普通程序设计语言共有的函数数学数组函数字符串处理函数时间日期函数文件函数数据库专用函数（,,，）环境函数（，，）常用函数分类普通程序设计语言共有的函数常用函数分类53本章的主要内容是描述静态和动态网页的特点静态网页的重点在句法结构、标准单位、表格等动态网页的重点放在工作原理、表单处理、函数本章小结本章的主要内容是描述静态和动态网页的特点本章小结54第章与基础《计算机网络基于因特网的信息服务平台》（第版）第章与基础《计算机网络基于因特网的信息服务平台》（第版）55文档结构网页制作工具基本元素表格（）表单（）程序基础学习目的文档结构学习目的56为了在世界范围内发布信息，一种能为所有的计算机作为信息发布用的母语这就是万维网使用的超文本标记语言（，)。概述为了在世界范围内发布信息，一种能为所有的计算机作为信息发布用57网页图例网页图例58<><><""";"><><>...<>另外还有文档主体部分的声明。<()><>首页的部分源代码首页的部分源代码59一个文档是普通的文本文件，它包含两类内容：普通的文本、代码或标记。标记()是用一对尖括号“<>”括起来的文本串，例如第一行的<>。标记通常具有如下结构：<…>在标记定义中，“”是标记名，定义标记的类型而“”为属性，标记的属性是一种选项，属性给出了这个元素的附加信息标记和属性一个文档是普通的文本文件，它包含两类内容：普通的文本、代码或60在主页文档第二行的<>标记中，是标记名，没有相关属性在文档主体<>定义中，定义了若干属性，属性值为：“()”标记和属性举例在主页文档第二行的<>标记中，是标记名，没有相关属性标记和属61需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往往对大小写敏感例如，在超链中访问的文件名，尽管在系统中，和可以指向同一文件，但在系统中，却是指向不同的文件重要提示：在网页设计须统一命名方案标记、属性名和属性值的大小写需要注意，虽然标记和属性名称与字母大小写无关，但是属性值却往62标记和文本结合起来形成元素()。每个元素代表文档中的一个对象比如文档头、段落或图片一个元素可具有一个或一对标记，通常具有一些相关的属性元素有两种类型：容器（）元素和单个元素（空元素）元素、容器、空元素标记和文本结合起来形成元素()。每个元素代表文档中的一个对象63容器元素包含文本内容表达一个文本段、它由文本主体或其他元素组成文本主体在开头和结尾处用一对标记来确定边界（尾标记在标记名前加“”）例如，<>和<>把这两个标记之间的文本定义成一个文档标题而空元素是不影响任何文本的单个标记，在文档中插入对象来修饰网页例如<…>在文档中插入图像容器和空元素的区别容器元素包含文本内容容器和空元素的区别64三个元素构成文档的基本结构：<><>

<><>

<><>文档结构三个元素构成文档的基本结构：文档结构65<>容器元素中最为常用元素：<><>：这个元素是文档的抬头，类似书里的页眉在浏览器中，会在视窗口标题栏上抬头（）在用户保存网页时一般都作为文件名，所以命名应该注意常用元素：<><>容器元素中最为常用元素：常用元素：<>66<><>：标题标记，把标记中的文本作为标题从标记<>、<>直到<>，可以有六个层次的标题（较小的数字标记较重要的标题）标题通常用较大的字型编排，并且在该标题的上下各有一个空行<>：段落标记在两个段落之间插入空行<“”>：图像标记，把图像插入到文档中，图像可以在属性中给出的处找到<>中常用元素（一）<><>：标题标记，把标记中的文本作为标题<>中常用元素（一67<><><><>：该结构提供了一个无序的条目列表；每个条目以<>标记开始。通常在显示出的各条目项前置一个实心的圆点。<><>：超文本标记，也称为超链接。文本用某种特殊方式来显示（用颜色、下划线或其它类似方法）；当点击屏幕上的超文本链接时，服务器将检索“”属性中的“”给出的文档，并将结果返回给用户浏览器。<>：放置一个横穿浏览器窗口的水平线，通常水平线的上下各有一个空行。<>：在文本中强制换行，以便后继文本都放在下一行。<>中常用元素（二）<><><><>：该结构提供了一个无序的条目列表；每个条目以68第6章HTML与PHP基础课件69定义水平线、表格边框、图像等对象的长、宽、高等一系列属性长度的表示有两种方式：绝对长度和相对长度。它们的单位分别为像素（）和百分比（％）像素代表屏幕上的各个显像点，而相对长度则描述了对象在浏览器窗口的所占的比例标准单位长度定义水平线、表格边框、图像等对象的长、宽、高等一系列属性标准70使用绝对长度，网页中的对象不会随浏览器的视窗变化<""> <绝对长度>而使用相对长度来描述则对象会随浏览器窗口大小变化而变化。<""> <相对长度>标准单位长度应用使用绝对长度，网页中的对象不会随浏览器的视窗变化标准单位长度71定义字体、页面背景、表格背景、超链接相关的颜色颜色单位有三种表达的方式：十六进制的颜色代码<><>十进制颜色码<()><>颜色名码<""><>标准单位颜色定义字体、页面背景、表格背景、超链接相关的颜色标准单位颜色72统一资源定位器()是一种因特网资源地址的表示法在中，路径又分为两种形式：绝对路径和相对路径绝对路径是将主机地址、资源目录和资源名称进行完整的描述<"">标准单位统一资源定位器()是一种因特网资源地址的表示法标准单位73相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:<""><图像文件""与当前显示的网页在同一目录下；><""> <图像文件""在与当前显示网页所在目录同层次的另一子目录下；>标准单位–（续）相对路径则是相对于当前的网页所在目录或站点根目录的路径。如:74在和下，目录的分隔符是不同的：:\\\

在访问中，表达方式相同：：特别提示在和下，目录的分隔符是不同的：：特别提示75的表单是交互式应用的重要因素表单仅做这种交互性工作的一半：一旦用户填完表单，就把表格提交给一个特殊的程序或脚本这个程序或脚本取出表单提供的信息，并做一些有用的事（如把用户数据传递给数据库）可以把表单看成因特网上通用的一种视窗（）对话框，用于接受用户数据表单（）的表单是交互式应用的重要因素表单（）76表单元素基本格式<"[]""><><>元素括起整个表单，并给出一些基本定义指定了信息传递给服务器的方法给出与处理提交信息的脚本相关的（如“”，“”）表单元素表单元素基本格式表单元素77表单<>元素基本格式<""""""><>把不同的字段布署在表单里，让用户输入信息属性指定该字段在某个表单中的唯一名称；可选的属性给出该标记的默认值属性标记的样式，“”可以是：（复选框）。（单选按钮）（单行的文本输入栏）。（图像放在表单里）（提交按钮）(清除按钮)（在表单中保留不供显示的内容）表单<>元素表单<>元素基本格式表单<>元素78另外：属性用于设置文本字段的窗口大小（以字符数为计量单位）属性与和类型一起使用，用于表示按钮在默认状态时是否被选中表单<>元素(续)另外：表单<>元素(续)79选项选择元素（类似中的组合框）<""><""><""><>在选项选择元素中，所有可选项目由<>元素逐条列出；通常用下拉式菜单显示跟在每个<>标记后面的在下拉框中显示；表单<>元素选项选择元素（类似中的组合框）表单<>元素80选项选择：<“"><“"><“">’<>表单<>元素举例选项选择：表单<>元素举例81多行文本输入<""><>类似于<“”>标记，但允许多行文本输入属性与<>的类似，用行和列属性的数值定义文本输入区域的大小元素中的值将作为默认内容显示在文本区域中表单<>元素多行文本输入表单<>元素82很多字符不能直接放入文档中，如，“<”和“>”字符，以及许多国际字符和印刷字符可以用实体（）把这些字符进行替换实体是一种文本串，它们一起表示单个字符。一般包括一个“”号、一个表示字符的名字及一个分号，基本元素实体很多字符不能直接放入文档中，如，“<”和“>”字符，以及许多83保留字符是中用于其它目的的普通字符，如果按原样输入则会引起混乱实体之一：保留字符实体显示形式备注;小于号（<）；大于号（>）;与号（）;引号（"）（通常不用）;不换行空格见下页

保留字符是中用于其它目的的普通字符，如果按原样输入则会引起混84在浏览器中浏览文档时，浏览器根据单词之间的空格来自动换行，并且不支持两个及两个以上的连续空格的显示因此语言提供了不换行空格的标记＆；这样如果需要某两个单词（也可能是表单中的<>元素）之间不出现换行的话，用这个标记来替代空格，并且也可以利用这个标记来建立两个或两个以上的空格效果不换行空格的用途在浏览器中浏览文档时，浏览器根据单词之间的空格来自动换行，并85不换行空格的应用举例不换行空格的应用举例86实体之一：国际字符国际字符指多数除英语外的欧洲语言中使用的字符，其名字参照拉丁字符集实体显示形式备注;带重音的大写（Á）;带升降调的小写（ô）;连字大写（Æ）;带变音符的小写（ç）实体之一：国际字符国际字符指多数除英语外的欧洲语言中使用的字87元素表格元素在网页中以表格形式组织和显示数据使用在网页布局设计上。在“”貌似简单的网页上，居然也用了三个表格来布局元素表格元素在网页中以表格形式组织和显示数据88<"?""?""?""?""?""?"><>…<>…<>…<><><>标记一般形式<"?""?""?""?""?""?"><>标记89在<>标记的属性中： 单元格宽度 单元格高度 单元格水平对齐方式 单元格垂直对齐方式 单元格的行跨度 单元格的列跨度表格中的元素在<>标记的属性中：表格中的元素90客户端：活动文档（），例如,等，程序下载到浏览器执行服务器：动态文档（），程序在服务器上执行，结果下载到浏览器本节以ＰＨＰ为例，说明动态文档的基本概念动态网页概述客户端：活动文档（），例如,等，程序下载到浏览器执行91公共网关接口（）体现了作为网络应用程序的一种公共的通道在通道的一侧，扮演了内容表达的角色，展示网页，收集信息在另一侧，不同的程序或进程对来自通道的信息进行解读，做出响应在服务器端，都可以解读来自浏览器的信息，并进行处理、响应公共网关接口（）公共网关接口（）公共网关接口（）92一张服务器状态信息的快照一张服务器状态信息的快照93<><><><><><><?",$\";?><><>一个简单的动态网页<>一个简单的动态网页94打开浏览器，在地址栏中输入：本节所含的实验或例子假设在本地主机上的服务器阿上运行。的网页发布目录在:\\一个简单的动态网页的执行结果打开浏览器，在地址栏中输入：一个简单的动态网页的执行结果95网页需要经过的模块处理才能显示;网页的程序参数（或变量）至少可以从地址栏输入；网页的输出可以随程序参数（或变量）值变化而变化在上例在网址之后附带了“”。等号“”左边为“参数”，“”右侧为参数值当需要输入的参数多于一项时，参数之间要用“”号隔开与“纯”网页的不同网页需要经过的模块处理才能显示;与“纯”网页的不同9