1、第3章 HTML基础,HTML超文本标记语言是网页呈现的最基本的形态。所有的动态网页语言最后都要以HTML的形式表现给用户。而PHP又是可以嵌入HTML的一种语言，所以在正式开始学习PHP代码之前，有必要简单了解一下HTML（超文本标记语言）。本章将带领读者初步熟悉一下HTML代码的应用。,3.1 HTML的构成,HTML（Hyper Text Markup Language，超文本标记语言）是表示网页的一种规范。它通过标记符定义了网页的显示内容。在HTML中，通过使用标记符告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按照顺序读取HTML文件，然后根据标记符的内容解释和显示网页中的相应
2、的内容。每个HTML文档称为一个Web页面，HTML文档的本质是一种程序。它由文本、图形、声音等多媒体以及超链接所组成。建立一个HTML文档，实际进行的工作就是编写HTML命令代码。HTML由国际组织W3C（万维网联盟）指定和维护。HTMML3.2是目前支持最好的标准。2002年推出了HTML4.01。HTML4.01的基本标记符与HTML3.2基本一致。本节先来向读者介绍通常一个HTML页的构成。它的三部分内容分别所代表的含义。HTML是结构化的文本标记语言，它的内容都是由各式各样的标记组成的。而所有的标记都包括在一个大的标记“”与“”之间。本节分别为读者作介绍。,3.1.1 HTML网页的
3、构成,本小节先来为读者介绍HTML网页的构成。通常的HTML文档会如以下代码所示： 一个简单的HTML示例 欢迎光临我的主页 这是我第一次做主页，请大家多多支持！ ,3.1.2 网页头部head,标记指定文档的初始信息（即头部信息），如标题、脚本等。任何HTML文档页头部分都应位于网页的主信息之前。起始符号“”和结束符号“”把页头部分的内容封闭起来，即告诉浏览器，文档的头部信息在何处开始，在何处结束。和标记之间包含的文字是关于文件的一些常规信息，并且不会作为文档文字本身的一部分显示出来。Head标记可以包含六种可能的命令：Title描述文档的名称，定义网页标题，将会显示于浏览器的标题栏，但是定
4、义的标题的长度不能超过60。Isindex表明该文档可以文档进行检索。Base显示文档的原始URL。Nextid建立唯一的文档标识。Link显示与其他文档的关系。Meta嵌入任何附加的其他信息。以上六项中只有Title是必需的，其余部分均为可选项。,3.1.3 网页标题title,网页的标记，将表明网页的标题内容。该内容将会显示在浏览器的标题栏部分。从上一小节对HEAD标记的学习中，读者可以了解到：title（题目）标记是HEAD中最为重要的命记。因此，HEAD标记可能包含的六种命令中，只有title是必不可少的。title标记的使用格式如下所示：这里是题目从以上代码可见：title标记由三部
5、分构成：title开始标记（）、题目内容（这里是题目）和title结束标记（）。包含在title开始与结束标记之间的内容将会显示于浏览器的标题栏上。,3.1.4 网页主体body,一个网页的主体是用户在浏览时实际看到的文档正文信息。它可大可小，但是对主体的设置必须正确无误。所有WWW文档的主体部分都是由标记定义的。它有一个起始符号，该符号用于显示信息起始的位置，一个结束，结束符号指出数据终止的位置。在网页的主体内部，可以发现文字、超级链接、标题、表格、图形、图像、地图以及用户实际看到的任何东西。而所有这一切都必须被包含于开始标记与结束标记之间才是可见的。下面的简易代码显示网页内的正文： BOD
6、Y标签的使用 这里是正文 ,3.2 字体font,最初的网页其内容只有文字，即使到了今天，不管网页内容如何丰富多彩，文本依然是构成网页的不可或缺的因素。可以说，字体是构成网页最重要的内容之一。这一小节就来向读者介绍HTML代码中的字体标识符：font。字体font标识符的使用方式如下代码所示：#标记符与关键字face、size、color组合，可指定字体、字号和字体颜色。其中face指定字体，可以用一个face属性同时指定多种字体。浏览器默认使用第一个指定的字体。如果客户机上没有安装该字体，则使用第二个，依次类推。如果所有指定的字体均不存在，则使用系统默认的字体。size指定字体的大小，取值为
7、1到7，分别表示由小到大的字号。color指定文本颜色。该属性所使用与body标记的bgcolor属性相同。,3.3 超链接a,HTML最大的特点就是超链接了。通过超链接，可以使用户在不同的页面之间进行跳转。一个网页中如果没有超链接，就好像一个人不能与外界交流。所以说超链接是网页中最为重要的组成要素之一。标记可以HTML文档内插入超链接，这将使在文档之间的切换变成可能。在浏览器中，超链接默认有下划线，并且显示为蓝色。当鼠标指针指向超链接时，鼠标形状通常会变为手形，并且同时在状态栏显示出超链接指向的目标文件。,3.3.1 超链接的href属性,href是超链接最重要的属性，它指定超链接所指向的目
8、标文件。它的使用样式如下代码所示：#如果想改变更多的超链接样式可以通过CSS来实现，该内容不在本书讨论之列。有兴趣的读者可以查找相关资料学习。下面给出一个在网页中插入超链接标签的实例： 超链接的使用 点这里进入 ,3.3.2 超链接的target属性,超链接还有一个常用属性为target，它指定超链接打开的目标窗口。该属性有四个可用值，分别为：_self（当前窗口）、_top（顶层窗口）、_blank（打开一个新的窗口）、_parent（父窗口）。如果不设置此属性则使用默认值为当前窗口。,3.3.3 锚点超链接,超链接除了可以指向网页、文档、下载文件之外，还可以指向当前页面的某一部分。如一个网
9、页中有很多的章节，每个章节下面又有很多内容。在网页顶部设置一个指向某一个章节的超链接就显得很有必要。这时就要用到锚点超链接。如果要设置这样的链接首先要为需要跳转的位置命名。命名时应该使用A标记符的name属性，通常这样的位置被称为“锚点”。用超链接方式链接A标记符中href属性的链接地址前要加“#”号。,3.3.4 邮件超链接,超链接还有一个作用就是邮件超链接。如果将href的属性值定义为如下代码：发送邮件这种形式，那么就可以获得电子邮件链接的效果。当然，仅通过点击一个超链接，并不能真正的把某个邮件发到指定地址。而是点过这样的超链接之后，将会启动系统的邮件客户端程序（如Outlook），并将指
10、定的邮件地址填到“收件人”栏中。不过这种应用不如前两种广泛。所以这里就不再举例。至此，关于HTML中超链接标识的相关知识就介绍完毕。具体使用中要根据实际情况选用不同类型的超链接。,3.4 图像img,如果在网页上适当的搭配上赏心悦目的图像，就会使整个页面图文并茂，增色不少。好的图像还会增加网页对用户的吸引力。可以说图像也是一个网页中的相当重要的组成部分。本节就来介绍HTML中图像的应用。,3.4.1 建立图像标记,在HTML中使用img标记符可以在网页中加入图像。该标记有两个基本属性：src和alt，它们分别用于设置图像文件的位置和替换文本。src表示要插入的图像的文件名。图像文件的后缀可以是
11、jpg、gif、png或者bmp等多种类型。alt表示对图像的简单的文本说明，用于不能显示图像或者在较长时间显示图像时的显示说明。该属性还有一个作用，当鼠标指针指向图片时，alt属性中的内容将会出现在一个提示框中。,3.4.2 图像的宽与高,使用img标记的width和height属性可以指定图像的宽度和高度。这样可以通知浏览器中应该分配多少空间（以像素为单位）给图像。图像的宽度和高度的值可以是像素也可以是百分比。如果给定的是像素，则图像将显示指定大小。如果给出的是百分比，则图像将以图形预留屏幕给定的宽度和高度的百分比来显示。例如：图像的宽与高,3.4.3 图像的边框,使用img标记的bord
12、er属性可以给图象增加边框效果。该属性的值是像素数。如以下代码将使图像1.jpg有一个像素为1粗细的边框：,3.4.4 图像的对齐方式,在网页中插入的图像默认的对齐方式为左对齐，但有时用户可能需要启中或者右对齐的效果。这时就要使用到图片的对齐方式。本节就来介绍，如何改变图片的对齐方式。1图像在页面中的对齐2图像与周围内容的垂直对齐3图文混排时的图像对齐,3.5 表格table,表格table标签，在网页中也有很广泛的应用。它不仅能用于显示列表内容，更重要的，它可以有效地对网页上的各种各样不同的内容进行排版。这对于网页上特定元素的定位将起到很重要的作用。,3.5.1 表格的基本构成,表格由行和列
13、组成，行列交叉构成了单元格。对于某些表格来说还能还需要用于说明表格内容的表格标题。1table2caption3tr4td5单元格的合并,3.5.2 表格的属性,介绍完表格的构成，下面来学习表格的属性。通常一个表格有背景颜色、背景图片、边框控制、边框宽度、分隔线设定等几种属性，接下来分别为读者做介绍。1背景颜色属性。2背景图片3边框控制4边框宽度5分割线的设定,3.5.3 表格的对齐,与图像的对齐类似，表格也有多种对齐方式。合理使用不同的对齐方式，将会使表格内容按照用户需要进行合理的对齐。本小节为读者介绍表格的对齐方式。1表格中内容的水平对齐方式2表格中内容的垂直对齐方式3表格与表格以外内容的
14、对齐方式,3.5.4 单元格空白的控制,根据实际需要，有时要调整单元格内的数据与表格分隔线之间的距离。要实现这样的效果，可以在table标记中通过cellspacing和cellpadding属性来控制，这两个属性都是以像素作为单位。其中，cellspacing控制表格线的宽度，而cellpadding控制单元格内文字与单元格间分隔线的距离。,3.5.5 表格的嵌套,所谓表格的嵌套是指一个表格可以出现在另一个表格的单元格中。这是一种十分常用的方法。下面的代码实现了表格嵌套的效果：,3.6 表单form,本小节为读者介绍HTML中的表单form。表单是网站与客户之间进行互动的最有效的方式。用户可
15、以通过表单，将内容上交给服务器。而服务器则在后台获取用户提交内容，并进行相关处理。如果没有表单，HTML的互动就成了一句空谈。,3.6.1 表单的属性,表单标记form最常用的属性有三个name属性：指定表单的名称，它的值为字符串；method属性：指定表单数据提交到服务器的方式，它的可用值通常有：post与get两种。关于这两种提交方式的区别，到后面章节讲到互动程序时将详细说明。action属性：该属性指定用于处理表单提交数据的后台程序，即表单要提交到的目标程序。通常指向动态脚本语言创建的页面，如：PHP、ASP、JSP等等。通过这些动态页面来获取表单数据。,3.6.2 表单元素的组成,表单
16、（form）由表单元素构成。常见的表单元素有以下几种：文本框（text）、密码输入框（password）、普通按钮（button）、单选按钮（radio）、复选框（checkbox）、列表框（select）、文本域（textarea）、提交按钮（submit）、重置按钮（reset）、隐藏域（hidden）等。下面就这些表单元素分别向读者做下介绍。1文本框（text）:文本框允许用户输入内容。它常用的属性有：name属性、value属性、size属性等。2密码输入框（password）:密码输入框与文本框类似。不同的是在文本框中，可以输入中文或者其它字符。而密码输入框里面只能输入键盘上所标出的
17、符号，而不能输入中文。此外文本框中所输入的内容都是可见的，而密码输入框中输入的所用信息都将以星号（*）显示，这也是密码输入框最大的特点。之所以这样就是为了保护密码不被别人偷窥到。3普通按钮（button）:按钮用于触发事件，并对事件做出响应。它的使用格式如下代码所示：,3.6.2 表单元素的组成,3普通按钮（button）:按钮用于触发事件，并对事件做出响应。它的使用格式如下代码所示：4单选按钮（radio）:单选按钮用于使用户在一组内容中选出一个选项，它的使用格式如下所示：5复选框（checkbox）:复选框允许用户在一组内容中选出多个选项，它的使用格式如下所示：6列表框（select）:用
18、户可以通过列表框从提供的内容中选取一项（与单选按钮有类似之处）。它的使用格式如下代码所示：男女保密,3.6.2 表单元素的组成,7文本域（textarea）:文本域也可以叫多行文本框，允许用户输入多行的内容（text只能输出一行内容，中间不能有回车换行），它的使用格式如下所示：内容在这里输入8提交按钮（submit）:提交按钮，将会把表单中的信息提交到服务器。它的使用格式像这样：9重置按钮（reset）:重置按钮的使用格式如下所示：10隐藏域（hidden）:隐藏域的使用格式如下所示：,3.7 框架的使用,一般情况下，一个浏览器窗口中只能显示一个网页的内容。如果想要在一个窗口中显示多个网页的内
19、容，或者要把一个网页嵌套在另一个网页中应该怎么办呢？使用frame框架与iframe框架，这可以实现这样的效果。本节来介绍HTML中的框架的使用。,3.7.1 frame框架,使用frame框架，可以把一个浏览器窗口划分为几个不同的部分，每个部分分别显示不同的网页，从而获得一种特殊的效果。另外，通过为超链接指定目标框架，可以为框架之间建立起内容上的联系，以实现页面之间的导航功能。使用框架还有一个好处就是，如果窗口中的公共部分需要修改，只修改公共部分网页即可，而不用修改所有文件。要创建框架结构的网页，首先必须设计一个网页用于指定整个浏览器窗口如何划分，这个网页就是框架集网页。在框架集中不包含可以
20、显示的内容，而只包含如何组织各个框架的信息和框架听初始页面信息。,3.7.2 iframe框架,使用iframe子框架标签，可以实现在一个网页中嵌套进另一个网页的内容。与frame标签不同，iframe标签单独使用，并且可以出现在网页的任意位置。iframe标签也有src与name属性，它们的意义与frame标签一样。src指代框架内加载网页的地址；name指代框架的名称。除以上两个属性之外iframe框架常用的属性还有width与height，分别指代子框架的宽与高，它们都以像素为单位。下面通过一个实例来说明如何使用iframe标签来实现网页嵌套的效果。,3.8 本章小结,本章向读者简单介绍了HTML的相关知识。学习这些知识对进一步学习PHP将起到很大的促进。不过HTML虽然是标记语言，但它的内容也是相当广泛。比如本章介绍的各种标签，只是介绍它们最重要的、经常能使用到的属性。如果想要全面了解HTML知识，则需要查阅专门介绍HTML的学习资料。,
