第2章动态网页的基础

第2章WEB程序设计的基础本章学习目标本章主要讲解HTML语言、CSS和xml语言。通过本章学习，读者应该掌握以下内容：HTML语言基本知识CSS2.1HTML语言2.1.1HTML语言的结构HTML（超文本标记语言）是一种描述文档结构的标注语言它使用一些约定的标记对上的各种信息进行标注。HTML的优点是其跨平台性。2.1HTML语言2.1.1HTML语言的结构HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。HTML文件看起来像是加入了许多被称为链接签（tag）的特殊字符串的普通文本文件。2.1HTML语言2.1.1HTML语言的结构从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结束标记。中间叫元素体。每个元素都有名称和许多可选择的属性。2.1HTML语言下面来看一个HTML文件结构实例，HTMLHEADTITLE武汉工业学院/TITLE/HEADBODYbgcolor=yellowP这是一HTML的测试文件/P/BODY/HTMLHTML文件仅由一个HTML元素组成。即文件以HTML开始，以/HTML结尾，文件其余部分都是HTML的元素体。而HTML元素的元素体又由头元素head…/head、体元素body…/body和一些注释组成。头元素和体元素的元素体又由其它的元素、文本及注释组成。2.1HTML语言链接签的格式为：起始链接签属性名＝属性值内容结束链接签例如：BODYbgcolor=yellowP这是一HTML的测试文件/P/BODY2.1HTML语言在HTML中有三个字符具有特殊的意义，即：表示一个标签的开始。表示一个标签的结束。&表示转义序列的开始。每个转义字符都“&”开始，以分号“；”结束。（解决二义性问题）例如：“<”表示“”符号。“ ”表示空格。2.1HTML语言元素名也叫链接签名。需要注意的是：（1）和起始链接签之间不能有空格。（2）元素名称不区分大小写。（3）一个元素可以有多个属性，属性及其属性值不区分大小写，且各个属性用空格分开。2.1HTML语言在头元素中的元素表示的是该HTML文件的一般信息，这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。出现在体元素中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出形式。2.1HTML语言1.TITLE标记TITLE标记用来给网页命名，显示在浏览器的标题栏中。例如，在图2-1中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”。2.1.2构成网页的基本元素2.Hn标记H1…/H1到H6…/H6标题元素有6种，用于表示文章中的各种题目。字体大小H1到H6顺序减小。下面这个例子中分别使用了H1到H6的标题。2.1.2构成网页的基本元素HTMLHEADTITLE这是一个测试网页/TITLE/HEADBODYh1标题测试/h1h2标题测试/h2h3标题测试/h3h4标题测试/h4h5标题测试/h5h6标题测试/h6/BODY/HTML3.预格式化文本标记preHTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用pre…／pre通知浏览器。下面是图2-3和图2-4的HTML源文件。2.1.2构成网页的基本元素HTMLHEADTITLE这是一个测试网页/TITLE/HEADBODYpre!--（图2-4无此标记）--HTML是一种描述文档结构的标注语言，它使用一些约定的标记对各种信息进行标注。/pre!--（图2-4无此标记）--/BODY/HTML4.BR和P标记BR用于强制换行。P表示一个段落的开始。/P一般可不用。5.BIUSTRONGS标记这几个标记都是用来修饰所包含文档的。B标记使文本加粗；I标记使文本倾斜；U标记给文本加下划线；S标记给文本加删除线；STRONG标记使文本字体加重。下面给出一个这几个元素的HTML源文件。2.1.2构成网页的基本元素HTMLHEADTITLE这是一个测试网页/TITLE/HEADBODYSTRONGHTML/STRONG是一种EM描述文档结构/EM的U标注语言/U，B它使用/B一些I约定的标记/I对各种信息进行S标注S。/BODY/HTML6.FONT标记FONT…/FONT用来修改字体和颜色。其中COLOR属性：指定文字颜色，颜色的表示可以用6位十六进制代码，如FONTCOLOR=#00FF00；SIZE属性：指定相对尺寸。2.1.2构成网页的基本元素HTMLHEADTITLE这是一个测试网页/TITLE/HEADBODYfontsize=7color=redHTML是一种/font描述文档结构的标注语言，它使用一些约定的标记对各种信息进行标注。/BODY/HTML如果用户想要设置网页的背景色和文字颜色，可以将BODY标记扩充为：BODYbgcolor=#text=#link=#alink=#vlink=#background=”imageURL”2.1.2构成网页的基本元素表2-1设置背景景色和文字颜色标记说明Bgcolor设置网页背景颜色Text设置网页非可链接文字的颜色Link设置网页可链接文字的颜色Alink设置网页正被点击的可链接文字的颜色Vlink设置网页已经点击的可链接文字的颜色Background设置网页背景图案ImageURL设置网页背景图案的URL地址#代表颜色RGB值（格式为rrggbb）。它是用16进制的红-绿-蓝（red-green-blue，RGB）值来表示。各种常见的颜色的RGB值如表9-2所示。颜色RGB颜色RGB黑色（Black）000000橄榄色（Olive）808000红色（Red）FF0000深表色（Teal）008080绿色（Green）008000灰色（Gray）808080蓝色（Blue）0000FF深蓝色（Navy）000080白色（White）FFFFFF浅绿色（Lime）00FF00黄色（Yellow）FFFF00紫红色（Fuchsia）FF00FF银色（Silver）C0C0C0紫色（Purple）800080浅色（Aqua）00FFFF茶色（Maroon）800000表2-2常见颜色RGB值例如要将网页背景颜色设置为蓝色，bodybgcolor=#0000ff2.1.2构成网页的基本元素超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。超文本链接指针是指把并不连续的两段文字或两个文件联系起来。2.1.3超文本链接指针1.统一资源定位器URL统一资源定位器（UniformResourceLocator）是文件名的扩展。它的构成为：protocol://machine.name[:port]／directory／filename2.1.3超文本链接指针其中：protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：HTTP：超文本传输协议，该资源是HTML文件；FTP：文件传输协议，用ftp访问该资源；MAILTO：采用简单邮件管理传输协议SMTP，提供电子邮件服务。2.1.3超文本链接指针machine.name是存放该资源主机的IP地址，通常以字符形式出现,如。port（端口号）是服务器在其主机所使用的端口号。一般情况下端口号不需要指定，只有当服务器所使用的端口号不是默认的端口号时才指定。directory和filename是该资源的路径和文件名。2.1.3超文本链接指针一个典型的URL为：网络采用传输协议；主机的名字是；但它并没有指出访问的目录和哪个文件，其实这时表示访问的是根目录下的默认主页文件。2.1.3超文本链接指针与单机系统绝对路径、相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。绝对URL、相对URL是相对于最近访问的URL而言。2.1.3超文本链接指针当协议（http://）被省略时，就认为与当前页面的协议相同。当主机域名被省略时，就认是当前主机域名。当目录路径被省略时，就认是当前目录。当文件名被省略时，就认是当前文件。2.1.3超文本链接指针2.建立一个链接（1）链接到其它站点在HTML文件中用链接指针指向一个目标。其基本格式为：ahref=…zzz/a其中zzz可以是文字或图片并显示在网页中，href中的h表示超文本，而ref表示“访问”或“引用”的意思。2.建立一个链接例如：ahref=武汉工业学院/a在这个例子中，充当指针的是“武汉工业学院”。在编写HTML文件时，需要知道目标的URL。那么如何才能得到目标的URL呢？在编写HTML文件时，对能确定关系的一组资源（例如在同一个目录中）应采用相对URL。2.建立一个链接（2）同一个文件中的链接超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。对于同一文件的不同部分，我们怎样来标识呢？2.建立一个链接下面的内容将介绍链接指针元素的另外的一个用途，标识目标。标识一个目标的方法为：ANAME=KKK…….／ANAME属性将放置该标记的地方标记为“KKK”，指针：ahref=#KKK转向下一处/a2.建立一个链接2.1.4在HTML文件中使用图像1.在HTML文件中显示图像在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。在HTML网页中加图像是通过IMG标记实现的.例如：IMGalt=校庆src=images/center1.gif1.在HTML文件中显示图像IMG标记有几个较为重要的属性。其中：SRC属性：指明图形的URL地址；HEIGHT属性：决定图形的高度；WIDTH属性：决定图形的宽度；BORDER属性：决定边框线的宽度，0表示无边框；ALT属性：指明图像显示的备用文本；下面通过一个示例来说明IMG标记的使用。HTMLHEADTITLE测试页/TITLE/HEADBODYIMGalt=校庆src=images/center1.gifIMGsrc=images/center1.gifborder=8IMGsrc=images/center1.gifheight=150width=150/BODY/HTML图2-6HTML文件举例2.在HTML文件中利用图像建立链接如果在链接标记A和/A的中间放置一个IMG标记，这个图像将会成为一个可击点，产生一个链接。例如：AHREF=”default.asp”IMGSRC=”images/center1.gif”ALIGN=LEFT/A