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