第8讲 HTML与PHP基础

Download Report

Transcript 第8讲 HTML与PHP基础 

第8讲 HTML与PHP基础
静态网页 vs. 动态网页
概述
为了在世界范围内发布信息，需要一种
能够被普遍理解的语言，一种能为所有
的计算机作为信息发布用的母语，这就
是万维网使用的超文本标记语言
（Hypertext Markup Language，HTML)。
HTML句法结构
HTML句法结构
Google首页的部分源代码
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
另外还有HTML文档主体部分的声明。
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()>
<center>
HTML句法结构
一个HTML文档是普通的ASCII文本文件，它包含两类
内容：普通的文本、代码或标记。
标记(Tag)是用一对尖括号“<>”括起来的文本串，例
如第一行的<html>。标记通常具有如下结构：
<tagneme attribute1=value1 attribute2=value2…>
在标记定义中，“tagname”是标记名，定义标记的类
型；而“attributes”为属性，一般标记即可以不定义属
性，也可以定义若干个属性
属性给出了这个元素的附加信息。
HTML句法结构
在Google主页文档第二行的<head>标记
中，head是标记名，没有相关属性。
在文档主体<body>定义中，定义了若干
属性，属性值为“bgcolor=#ffffff
text=#000000 link=#0000cc
vlink=551a8b alink=#ff0000
onLoad=sf()”。
HTML句法结构
需要注意，虽然标记和属性名称与字母
大小写无关，但是属性值却往往对大小
写敏感。
例如，可以在超链中定义相关的文件名，
尽管在Windows系统中，href=a1和
href=A1可以指向同一文件，但在UNIX
系统中，却是指向不同的文件。

重要提示：在网页设计须统一命名方案
HTML句法结构
标记和文本结合起来形成元素(Element)。
每个元素代表文档中的一个对象，比如
文件头、段落或图片。一个元素可具有
一个或一对标记，通常具有一些相关的
属性。
元素有两种类型：容器（container）元
素和单个元素（空元素）。
HTML句法结构
容器元素包含文本内容，代表一个文本段、它由文本
主体（或其他元素）组成，文本主体在开头和结尾处
用一对标记来确定边界（结尾的标记用标记名前加“/”
来表示，并不带任何属性）。
例如，<title>和</title >标记把这两个标记之间的文本定义成
一个文档标题。
而单个元素是由不影响任何文本的单个标记组成的，
它会在文档中插入一些对象。例如<img src=…>标记
就是一个可以在文档中插入图像的单个元素。
HTML文档结构和常用元素
这三个元素一起构成完整的HTML文档结构模
板，所有的HTML文档都应该遵循这个模板：
<HTML>
<HEAD>
Header element
</HEAD>
<BODY>
body of Document
</BODY>
</HTML>
HTML文档结构和常用元素
<HEAD>容器元素中包含的最为常用的
元素有：

<TITLE>text</TITLE>：这个元素是文档的
抬头，类似书籍的页眉。在浏览器中，标题
通常与文本页分开显示（例如，在窗口的标
题栏中）。
抬头（TITLE）在用户保存网页时一般
都作为文件名，所以命名应该注意。
HTML文档结构和常用元素
<BODY>容器元素中包含以下几个常用元素：



<H#>text</H#>：标题把括起来的文本作为标题。
从标记<H1>、<H2>直到<H6>，可以有六个层次
的标题（较小的数字标记较重要的标题）。标题通
常用较大的字型编排，并且在该标题的上下各有一
个空行。
<P>：段落标识文本主体中两个段落之间的间隔。
<IMG SRC=“URL”>：图像标记把图像插入到文档
中，图像可以在SRC属性中给出的URL处找到。
HTML文档结构和常用元素
<IMG src="URL" alt="text"
align=TOP/MIDDLE/BOTTOM ISMAP>



把图像插入到文档中，图像可以在src属性指定
的URL处找到。最常见的图像格式是GIF。
如果浏览器不支持插入图像（例如，Lynx浏览
器），将显示在可选的alt属性中给出的文本。
如果没有给出alt属性值，在图形所在的位置上
可能会出现[IMAGE]的字样。
可选的align属性指出文本的当前行与图像在垂
直方向上怎样对齐（通常是BOTTOM，但这随
浏览器的不同而不同）。
HTML文档结构和常用元素
ISMAP属性用于建交互式的图形。如果
使用<A “href=http://URL1”><IMG
src=“URL2” ismap></A>语法，则这图
像上成为一个可击点，产生一个链接到
URL1处。
例如：
<A “href=http://www.xjtu.edu.cn”><IMG
src=“xjtu_logo.gif” ismap></A>
HTML文档结构和常用元素
<UL><LI>text<LI>text</UL>：该结构提供了一
个无序的条目列表；每个条目以<LI>标记开始。通常
在显示出的各条目项前置一个实心的圆点。
<A HREF=URL>text</A>：超文本标记，也称为超
链接。文本用某种特殊方式来显示（用颜色、下划线或
其它类似方法）；当点击屏幕上的超文本链接时，
Web服务器将检索“HREF” 属性中的“URL”给出的
文档，并将结果返回给用户浏览器。
<HR>：放置一个横穿浏览器窗口的水平线，通常水平
线的上下各有一个空行。
<BR>：在文本中强制换行，以便后继文本都放在下一
行。
HTML标准单位
长度单位



可以用来定义水平线、表格边框、图像等对象的长、
宽、高等一系列属性，同时也能用来定义这些对象
在网页上的位置等属性。
长度的表示有两种方式：绝对长度和相对长度。
它们的单位分别为像素（pixel）和百分比（％），
像素代表屏幕上的各个显像点，而相对长度则描述
了对象在浏览器窗口的所占的比例。
HTML标准单位
一般在网页设计中较少使用绝对长度，
因为浏览器窗口可随时调整大小，如果
水平线设置为绝对长度很容易造成不协
调，而使用相对长度来描述则对象会随
浏览器窗口大小变化而变化。
<HR WIDTH="400">
<HR WIDTH="50%">
<!--绝对长度-->
<!--相对长度-->
HTML标准单位
颜色单位也是描述网页表现形式中应用
很频繁的一种数据类型。在设计网页的
过程中，需要能定义字体、页面背景、
表格背景甚至超链接的颜色，通过利用
颜色数据来定义这些对象的颜色属性。
HTML标准单位
颜色单位有三种表达的方式：
十六进制的颜色代码
<font color=#FF0000>Red Characters</font>

十进制颜色码
<font color=rgb(0,0,255) > Blue </font>

颜色名码
<font color="green">Green Characters
</font>

HTML标准单位
统一资源定位器(URL)[1]路径是一种
因特网资源地址的表示法。该数据里中
可以包括链接所需协议、链接主机的域
名或IP地址、链接主机的通讯端口
（port）号、主机文件的发布路径和文
件名称等。
[1] 由W3C对HTML 4.0的定义中，URL的描述为
“Universal Resource Identifier（URI）”。
HTML标准单位
在HTML中，URL路径又分为两种形式：
绝对路径和相对路径。

绝对路径是将主机地址和主机上资源发布
目录的路径和资源名称进行完整的描述。
如:
<a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm">
<a href="file:///c:/xitami/webpages/default.htm">
HTML标准单位

相对路径则是相对于当前的网页所在目录
或站点根目录的路径。如:
<IMG SRC="Snowwhite.jpg">
<!--图像文件"Snowwhite.jpg"与当前显示的网页在同一
目录下；-->
<IMG SRC="../image/Leaves.jpg">
<!--图像文件"Leaves.jpg "在与当前显示网页所在目录同
层次的另一子目录image下；-->
HTML基本元素的使用
表单（form）
HTML的表单特性是给予万维网真正力量、完成
生动的交互式应用的因素之一。
HTML表单仅仅是这种特性的一半。一旦用户填完
表单，就把表格提交给一个特殊的程序或脚本，由
这个程序或脚本取出信息，并用这个表格做一些有
用的事（如把用户数据传递给数据库）。
可以把表单看成因特网上通用的一种视窗
（window）对话框，用于接受用户数据。
表单(续)
表单元素
<FORM method ="[GET|POST] action
="URL">form body</FORM>
<FORM>元素括起整个表单，并给出一
些基本定义。表单仅占用HTML文档的部分空
间；实际上，一个HTML文档可以包含几个独
立的、完成不同功能的表单。method指定了
信息传递给HTTP服务器的方法；action给出
与处理提交信息的脚本相关的URL（如
“scriptname.asp”，“scriptname.php”）。
表单(续)
表单输入元素
<INPUT name="text" type="string" size=##
value="text" CHECKED>




<INPUT >用来把不同的字段放在表单里，以便用户输入信
息。
name属性指定该字段在某个表单中的唯一名称；
可选的value属性给出该标记的默认值。
在提交表单时，向Web服务器呈上以一组用“？”开头并用
“&”号分开的一组“名字＝值”形式的信息，如
http://…/Scriptname?name=me&address=here&
time＝now
表单输入元素(续)
type属性给出所使用<INPUT>标记的样式，
“string”可以是：







CHECKBOX（复选框）。
RADIO（单选按钮）
TEXT（单行的文本输入栏）。
IMAGE（图像放在表单里）
SUBMIT（提交按钮）
RESET(清除按钮)
HIDDEN（在表单中保留不供显示的内容）
表单输入元素(续)
另外：


SIZE属性用于设置文本字段的窗口大小（以
字符数为计量单位）。
CHECKED属性与CHECKBOX和RADIO类型一
起使用，用于表示按钮在默认状态时是否被
选中。
表单(续)
选项选择元素（类似Windows中的组合框）
<SELECT name="text" multiple>
<OPTION value="text" selected>content1
<OPTION value="text" >content2
</SELECT>


在选项选择元素中，所有可选项目由<OPTION>元素逐条
列出；通常用下拉式菜单显示。
跟在每个<OPTION>标记后面的text在下拉框中显示；如果
没有给出value属性（可选属性）；当用户选择到某选项时
则随表单呈上相应的text文本。multiple属性允许选择多于
一个的选项；selected属性指定默认的选择。
选项选择元素(续)
选项选择举例：
<SELECT name=“code" multiple>
<OPTION value=“010" selected>Beijing
<OPTION value=“029" >Xi’an
</SELECT>
表单输入元素(续)
多行文本输入
<TEXTAREA name="text" rows=##
cols=##>text</TEXTAREA>
类似于<INPUT TYPE="text">标记，但允
许多行文本输入。name属性与<INPUT>的类
似，用行和列属性的数值定义文本输入区域
的大小。元素中text的值将作为默认内容显
示在文本区域中。
HTML基本元素的使用
实体


HTML文档中出现的很多字符不可能通过输入直
接放入HTML文档中，这些字符包括对HTML有
特殊意义的字符，如，“<”和“>”字符，以及
许多键盘上找不到的国际字符和印刷字符。
可以用实体（Entities）把这些字符放在文档中，
实体是若干个文本片段，它们一起表示单个字符。
其一般语法包括一个“&”号、一个表示字符的名
字及一个分号。
实体（续）
保留字符

保留字符是HTML中用于其它目的的普通
字符，如果按原样输入则会引起混乱。
实体
&lt;
&gt；
&amp;
&quote;
&nbsp;
显示形式
小于号（<）
大于号（>）
与号（&）
备注
引号（"）
（通常不用）
不换行空白
见下页
保留字符（续）
在浏览器中浏览HTML文档时，浏览器根据单
词之间的留白来自动换行，并且HTML不支持
两个及两个以上的空格。
因此HTML语言提供了一个不换行空格的标记
“＆nbsp；”，这样如果需要某几个单词之间
不出现换行的话，就可以在这些单词之间使用
这个换行标记“＆nbsp；”来替代空格，并且
也可以利用这个标记来建立两个或两个以上的
空格效果。
实体（续）
国际字符
国际字符指多数除英语外的欧洲语言中使用
的字符，其名字参照ISO拉丁字符集。
实体
显示形式
&Aacute; 带重音的大写A
备注
（Á）
&ocirc;
带升降调的小写o
（ô）
&AElig;
连字大写AE
（Æ）
&ccedil;
带变音符的小写c
（ç）
Table元素
表格元素是网页是应用最为广泛的元素
之一。
表格元素在网页中以表格形式组织和显
示数据
大量使用在网页布局设计上。在
“Google” 貌似简单的网页上，居然也用
了三个表格来布局。
Table元素（续）
Table元素（续）
<TABLE>标记的一般形式是：
<TABLE WIDTH="?" BGCOLOR="?"
BACKGROUND="?" BORDER="?"
CELLSPACING="?" CELLPADDING="?">
<TR>
…
<TD> …</TD>
…
</TR>
</TABLE>
表格中的TD元素（续）

在<TD>标记的属性中：
 Width
 Height
 Align
 Valign
 RowSpan
 ColSpan
单元格宽度
单元格高度
单元格水平对齐方式
单元格垂直对齐方式
单元格的行跨度
单元格的列跨度
PHP基础(一个简单的动态网页)
<html>
<head>
<title>The First Greeting from PHP </title>
</head>
<body>
<?
echo "hello,$name\n";
?>
</body>
</html>
PHP基础(一个简单的动态网页)
打开浏览器，在地址栏中输入：
http://127.0.0.1/greeting.php?name=Cheng

本课程所含的实验或例子假设在本地主机上的Web
服务器阿Apache上运行。Apache的网页发布目录在
d:\xampp\htdocs
PHP与 “纯”HTML网页的不同
PHP网页需要经过Apache的PHP模块处理才能
显示;
PHP网页的程序参数（或变量）至少可以从
URL地址栏输入；网页的输出可以随程序参数
（或变量）值变化而变化。
在本例在http://127.0.0.1/greeting.php网址之
后附带了“?name=Cheng” 。
等号“=” 左边为“参数”， “=”右侧为参数
值
当需要输入的参数多于一项时，参数之间要用
“&”号隔开
HTML表单与PHP处理程序
在浏览器的URL地址栏输入网页的名称和
相关参数，而这种用户数据的输入方式
显然是很不方便的。尤其不适合普通浏
览器用户的使用。
在HTML中，一般浏览器用户是通过表单
完成网上的数据输入的。
HTML表单与PHP处理程序
HTML表单与PHP处理程序
HTML表单与PHP处理程序
一个简单的HTML表单
<HTML>
<!--文件名：form.htm -->
<BODY BgColor=#FFFFFF>
<FORM Action="echo.php" Method="GET">
姓名:<INPUT Type="Text" Name="Name" Size=20><P>
兴趣:<INPUT Type="Text" Name="Love" Size=20><P>
<INPUT Type=Submit Value="传 送">
</FORM>
</BODY>
</HTML>
HTML表单与PHP处理程序
对简单表单的PHP程序处理
<HTML>
<!--文件名：echo.php -->
<HEAD><TITLE>Welcome!</TITLE></HEAD>
<BODY BgColor="#FFFFFF">
<Center><H2>
<?
echo "$Name 欢迎您,您的兴趣爱好是 $Love";
?>!
<HR></H2></Center>
</BODY>
</HTML>
HTML表单与PHP处理程序
注意：


含有表单的文件往往是一个“纯”HTML文
件，比如上例的表单文档就是一个有“.htm”
后缀的文件。
HTML表单是一个容器元素，即有开始
<FORM>和结束</FORM>标记，在
<FORM>中至少包含两个属性：“ACTION”
和“METHOD”。
HTML表单的ACTION
<FORM ACTION=URL>
ACTION属性的值表示该表单的处理方法，也就是
表单提交后需要执行的CGI程序名(包括路径)
由于本课程的CGI程序用PHP编写，因此，一般
ACTION属性中填写的就是对应的PHP程序或动态
网页的名称。
<FORM Action="echo.php" Method="GET">
表示在用户提交表单后，由Web服务器上的
echo.php程序来处理用户所提交的数据(该文档与
form.htm在同一目录中)。
HTML表单的METHOD
<FORM ACTION=URL
METHOD="POST|GET|…">
METHOD说明本表单向服务器发送输入
信息时的使用方式
一般有两种选择：POST和GET，默认的
方式是GET。
HTML表单的METHOD
使用GET时，HTTP的客户端将表单上用户的输
入信息作为字符串附加在ACTION所设定的URL
后面，中间用“?”和“&”隔开，然后把整个字
符串传送到服务器端
PHP程序会用$QUERY_STRING内置变量获取
表单所传入的信息。
但由于系统内置变量的长度限制了输入字符串
的长度，因此，用GET方式所能传送的数据长
度受到限制(一般为2k字节)
HTML表单的METHOD
而使用POST方法时，HTTP会将表单的输
入信息进行包装后发送，而不是附加在
Action所设定的URL之后发送，CGI程序
中可以用$CONTENT_LENGTH内置变量
来确定传入数据的长度，并通过标准输
入（stdin）将内容读出。
使用POST方法,用户数据的长度没有限制
PHP函数
PHP函数库是一种通过CGI接口执行的网络
应用指令集
CGI程序实际上与Shell程序类似，而PHP强
大的功能很大一部分源于它丰富的函数库
在PHP 4.0中，这些函数可以分为100余类，
共计一千多个，而且还在不断的扩展之中
用户可以把PHP函数看成动态网页的重要构
件，只要使用得当，使用函数进行程序设
计可以收到事半功倍的效果
PHP函数
PHP函数
常用PHP函数分类
普通程序设计语言共有的函数




数学/数组函数
字符串处理函数
时间日期函数
文件函数
数据库专用函数（Informix ,MySQL, Oracle 8 ,
PostgreSQL，Unified ODBC ）
环境函数（PHP Options&Information， Session
handling，COM support functions for Windows ）
常用PHP函数分类
网络协议程序函数（FTP ，HTTP，IMAP,
POP3 , NNTP , Mail ）
面向专用服务器的函数（Apache-specific
Functions , ）
Shell 指令调用函数(POSIX functions,
Program Execution )
小结
本章的主要内容是描述静态和动态网页
的特点
静态网页的重点在句法结构、标准单位、
表格等
动态网页的重点放在工作原理、表单处
理、函数