1、第8讲 HTML与PHP根底,静态网页 vs.动态网页,中医免费资料:/zyy123/down,第一页,共五十九页。,概 述,为了在世界范围内发布信息,需要一种能够被普遍理解的语言,一种能为所有的计算机作为信息发布用的母语,这就是万维网使用的超文本标记语言Hypertext Markup Language,HTML)。,第二页,共五十九页。,HTML句法结构,第三页,共五十九页。,HTML句法结构,Google首页的局部源代码Google.另外还有HTML文档主体局部的声明。,第四页,共五十九页。,HTML句法结构,一个HTML文档是普通的ASCII文本文件,它包含两类内容:普通的文本、代码或
2、标记。标记(Tag)是用一对尖括号“括起来的文本串,例如第一行的。标记通常具有如下结构:在标记定义中,“tagname是标记名,定义标记的类型;而“attributes为属性,一般标记即可以不定义属性,也可以定义假设干个属性属性给出了这个元素的附加信息。,第五页,共五十九页。,HTML句法结构,在Google主页文档第二行的标记中,head是标记名,没有相关属性。在文档主体定义中,定义了假设干属性,属性值为“bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()。,第六页,共五十九页。,H
3、TML句法结构,需要注意,虽然标记和属性名称与字母大小写无关,但是属性值却往往对大小写敏感。例如,可以在超链中定义相关的文件名,尽管在Windows系统中,href=a1和href=A1可以指向同一文件,但在UNIX系统中,却是指向不同的文件。重要提示:在网页设计须统一命名方案,第七页,共五十九页。,HTML句法结构,标记和文本结合起来形成元素(Element)。每个元素代表文档中的一个对象,比方文件头、段落或图片。一个元素可具有一个或一对标记,通常具有一些相关的属性。元素有两种类型:容器container元素和单个元素空元素。,第八页,共五十九页。,HTML句法结构,容器元素包含文本内容,代
4、表一个文本段、它由文本主体或其他元素组成,文本主体在开头和结尾处用一对标记来确定边界结尾的标记用标记名前加“/来表示,并不带任何属性。例如,和标记把这两个标记之间的文本定义成一个文档标题。而单个元素是由不影响任何文本的单个标记组成的,它会在文档中插入一些对象。例如标记就是一个可以在文档中插入图像的单个元素。,第九页,共五十九页。,HTML文档结构和常用元素,这三个元素一起构成完整的HTML文档结构模板,所有的HTML文档都应该遵循这个模板:Header element body of Document,第十页,共五十九页。,HTML文档结构和常用元素,容器元素中包含的最为常用的元素有:text
5、:这个元素是文档的抬头,类似书籍的页眉。在浏览器中,标题通常与文本页分开显示例如,在窗口的标题栏中。抬头TITLE在用户保存网页时一般都作为文件名,所以命名应该注意。,第十一页,共五十九页。,HTML文档结构和常用元素,容器元素中包含以下几个常用元素:text:标题把括起来的文本作为标题。从标记、直到,可以有六个层次的标题较小的数字标记较重要的标题。标题通常用较大的字型编排,并且在该标题的上下各有一个空行。:段落标识文本主体中两个段落之间的间隔。:图像标记把图像插入到文档中,图像可以在SRC属性中给出的URL处找到。,第十二页,共五十九页。,HTML文档结构和常用元素,把图像插入到文档中,图像
6、可以在src属性指定的URL处找到。最常见的图像格式是GIF。如果浏览器不支持插入图像例如,Lynx浏览器,将显示在可选的alt属性中给出的文本。如果没有给出alt属性值,在图形所在的位置上可能会出现IMAGE的字样。可选的align属性指出文本的当前行与图像在垂直方向上怎样对齐通常是BOTTOM,但这随浏览器的不同而不同。,第十三页,共五十九页。,HTML文档结构和常用元素,ISMAP属性用于建交互式的图形。如果使用语法,那么这图像上成为一个可击点,产生一个链接到URL1处。例如:,第十四页,共五十九页。,texttext:该结构提供了一个无序的条目列表;每个条目以标记开始。通常在显示出的各
7、条目项前置一个实心的圆点。text:超文本标记,也称为超链接。文本用某种特殊方式来显示用颜色、下划线或其它类似方法;当点击屏幕上的超文本链接时,Web效劳器将检索“HREF 属性中的“URL给出的文档,并将结果返回给用户浏览器。:放置一个横穿浏览器窗口的水平线,通常水平线的上下各有一个空行。:在文本中强制换行,以便后继文本都放在下一行。,HTML文档结构和常用元素,第十五页,共五十九页。,HTML标准单位,长度单位可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性,同时也能用来定义这些对象在网页上的位置等属性。长度的表示有两种方式:绝对长度和相对长度。它们的单位分别为像素pixe
8、l和百分比,像素代表屏幕上的各个显像点,而相对长度那么描述了对象在浏览器窗口的所占的比例。,第十六页,共五十九页。,HTML标准单位,一般在网页设计中较少使用绝对长度,因为浏览器窗口可随时调整大小,如果水平线设置为绝对长度很容易造成不协调,而使用相对长度来描述那么对象会随浏览器窗口大小变化而变化。,第十七页,共五十九页。,HTML标准单位,颜色单位也是描述网页表现形式中应用很频繁的一种数据类型。在设计网页的过程中,需要能定义字体、页面背景、表格背景甚至超链接的颜色,通过利用颜色数据来定义这些对象的颜色属性。,第十八页,共五十九页。,HTML标准单位,颜色单位有三种表达的方式:十六进制的颜色代码
9、 Red Characters 十进制颜色码 Blue 颜色名码Green Characters,第十九页,共五十九页。,HTML标准单位,统一资源定位器(URL)1路径是一种因特网资源地址的表示法。该数据里中可以包括链接所需协议、链接主机的域名或IP地址、链接主机的通讯端口port号、主机文件的发布路径和文件名称等。1 由W3C对HTML 4.0的定义中,URL的描述为“Universal Resource IdentifierURI。,第二十页,共五十九页。,HTML标准单位,在HTML中,URL路径又分为两种形式:绝对路径和相对路径。绝对路径是将主机地址和主机上资源发布目录的路径和资源名
10、称进行完整的描述。如:,第二十一页,共五十九页。,HTML标准单位,相对路径那么是相对于当前的网页所在目录或站点根目录的路径。如:,第二十二页,共五十九页。,HTML根本元素的使用,表单form HTML的表单特性是给予万维网真正力量、完成生动的交互式应用的因素之一。HTML表单仅仅是这种特性的一半。一旦用户填完表单,就把表格提交给一个特殊的程序或脚本,由这个程序或脚本取出信息,并用这个表格做一些有用的事如把用户数据传递给数据库。可以把表单看成因特网上通用的一种视窗window对话框,用于接受用户数据。,第二十三页,共五十九页。,第二十四页,共五十九页。,表单(续),表单元素form body
11、 元素括起整个表单,并给出一些根本定义。表单仅占用HTML文档的局部空间;实际上,一个HTML文档可以包含几个独立的、完成不同功能的表单。method指定了信息传递给HTTP效劳器的方法;action给出与处理提交信息的脚本相关的URL如“scriptname.asp,“scriptname.php。,第二十五页,共五十九页。,表单(续),表单输入元素 用来把不同的字段放在表单里,以便用户输入信息。name属性指定该字段在某个表单中的唯一名称;可选的value属性给出该标记的默认值。在提交表单时,向Web效劳器呈上以一组用“?开头并用“&号分开的一组“名字值形式的信息,如:/Scriptnam
12、e?name=me&address=here&timenow,第二十六页,共五十九页。,表单输入元素(续),type属性给出所使用标记的样式,“string可以是:CHECKBOX复选框。RADIO单项选择按钮TEXT单行的文本输入栏。IMAGE图像放在表单里SUBMIT提交按钮RESET(去除按钮)HIDDEN在表单中保存不供显示的内容,第二十七页,共五十九页。,表单输入元素(续),另外:SIZE属性用于设置文本字段的窗口大小以字符数为计量单位。CHECKED属性与CHECKBOX和RADIO类型一起使用,用于表示按钮在默认状态时是否被选中。,第二十八页,共五十九页。,表单(续),选项选择元
13、素类似Windows中的组合框 content1 content2 在选项选择元素中,所有可选工程由元素逐条列出;通常用下拉式菜单显示。跟在每个标记后面的text在下拉框中显示;如果没有给出value属性可选属性;当用户选择到某选项时那么随表单呈上相应的text文本。multiple属性允许选择多于一个的选项;selected属性指定默认的选择。,第二十九页,共五十九页。,选项选择元素(续),选项选择举例:Beijing Xian,第三十页,共五十九页。,表单输入元素(续),多行文本输入text 类似于标记,但允许多行文本输入。name属性与的类似,用行和列属性的数值定义文本输入区域的大小。元
14、素中text的值将作为默认内容显示在文本区域中。,第三十一页,共五十九页。,HTML根本元素的使用,实体HTML文档中出现的很多字符不可能通过输入直接放入HTML文档中,这些字符包括对HTML有特殊意义的字符,如,“字符,以及许多键盘上找不到的国际字符和印刷字符。可以用实体Entities把这些字符放在文档中,实体是假设干个文本片段,它们一起表示单个字符。其一般语法包括一个“&号、一个表示字符的名字及一个分号。,第三十二页,共五十九页。,实体续,保存字符保存字符是HTML中用于其它目的的普通字符,如果按原样输入那么会引起混乱。,第三十三页,共五十九页。,保存字符续,在浏览器中浏览HTML文档时
15、,浏览器根据单词之间的留白来自动换行,并且HTML不支持两个及两个以上的空格。因此HTML语言提供了一个不换行空格的标记“nbsp;,这样如果需要某几个单词之间不出现换行的话,就可以在这些单词之间使用这个换行标记“nbsp;来替代空格,并且也可以利用这个标记来建立两个或两个以上的空格效果。,第三十四页,共五十九页。,实体续,国际字符 国际字符指多数除英语外的欧洲语言中使用的字符,其名字参照ISO拉丁字符集。,第三十五页,共五十九页。,Table元素,表格元素是网页是应用最为广泛的元素之一。表格元素在网页中以表格形式组织和显示数据大量使用在网页布局设计上。在“Google 貌似简单的网页上,居然
16、也用了三个表格来布局。,第三十六页,共五十九页。,Table元素续,第三十七页,共五十九页。,Table元素续,标记的一般形式是:,第三十八页,共五十九页。,表格中的TD元素续,在标记的属性中:Width单元格宽度Height单元格高度Align单元格水平对齐方式Valign单元格垂直对齐方式RowSpan单元格的行跨度ColSpan单元格的列跨度,第三十九页,共五十九页。,PHP根底(一个简单的动态网页),The First Greeting from PHP,第四十页,共五十九页。,PHP根底(一个简单的动态网页),翻开浏览器,在地址栏中输入::/127.0.0.1/greeting.php?name=Cheng本课程所含的实验或例子假设在本地主机上的Web效劳器阿Apache上运行。Apache的网页发布目录在d:xampphtdocs,第四十一页,共五十九页。,PHP与“纯HTML网页的不同,PHP网页需要经过Apache的PHP模块处理才能显示;PHP网页的程序参数或变量至少可以从URL地址栏输入;网页的输出可以随程序参数或变量值变化而变化。在本例在:/127.0.0.1/g