Java EE架构设计与开发实践
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.4 任务4 图像、超链接和表格

任务目标及任务描述：一个优秀的网页往往是绚丽缤纷的，图像自然必不可少。想让多个网页相互连接在一起，实现网页和网页的互动，超链接就起到了举足轻重的作用。信息在表格中显示，将带来清晰、明确、简单、大方的效果，表格的作用就得到了体现。该任务的职责就是要解决图像、超链接以及表格方面的问题。

3.4.1 图像和超链接

1.图像标记

如果把图像嵌入到网页中，网页将变得五光十色。能实现这一需求的是<img>标记。<img>标记的主要语法为：

        <img src = 图像文件的地址alt = 文字border = 边框宽度width = 图像宽度height =
        图像高度align=对齐方式>

各个属性说明如下。

❑ src：用来设置图像文件所在的路径。可以是相对路径，也可以是绝对路径。

❑ alt：当鼠标放在图片上时，显示小段提示文字，一般是此图片的标题或主要内容。当图像文件无法在网页中显示时，在图像的位置也会显示alt所设置的文字。

❑ border：图像边框的宽度，单位是像素。在默认情况下图像无边框，即border=0。

❑ width和height：图像的宽度和高度，单位是像素。在默认情况下，如果改变其中一个值，另一个值也会等比例进行调整，除非同时禁止两个属性。

❑ align属性：指定图像和周围文字的对齐方式。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括left、center和right 3种，而相对文字对齐方式则是指图像与一行文字的相对位置。align的取值情况如表3-2所示。

表3-2 align取值

注意：

➢ 不赞成使用align，但是几乎所有的浏览器都支持该属性。

➢ 如果不想使用align和<center> 时该怎么办呢？可以使用HTML/XHTML表格来对齐内容。不过更好的方案是使用样式。例如，margin-left属性可以对图像进行缩进，而float属性可以实现文本包围图像的效果。

2.超链接

所谓超链接（hyperlink），就是当单击某个字或图片时，就可以打开另一个网页或画面。它的作用对网页来说极其重要，可以说是互联网的灵魂，是HTML最强大和最有价值的功能。超链接简称链接（link）。

（1）定义超链接

超链接的语法根据其链接对象的不同而有所变化，但都是基于<a>标记的，主要语法为：

        <a href = 本机上绝对或相对路径的文件名target = 目标>……</a>
        或者：
        <a href = Internet上的带URL的文件名target = 目标>……</a>

其中，href是hypertext reference（超文本引用）的缩写。target用于指定如何打开链接的网页，有以下几个值。

❑ _blank：打开一个新的浏览器窗口显示。

❑ _self：用网页所在的浏览器窗口显示，是默认设置。

❑ _parent：在上一级窗口打开，常用在框架页面中。

❑ _top：在浏览器的整个窗口打开，将会忽略所有的框架结构。

在<a>和</a>之间，是超链接要显示的文字或图片。当用户把鼠标光标放在这些文字或图片上时，光标会变成手的形状，此时单击文字或图片，超链接就会发生作用了。

实例3-3 下面为一个文字、图形的超链接应用，运行结果如图3-4所示。

图3-4 超链接示例

        <html>
          <head>
          <title>HTML、JavaScript简介——实例3-3：超链接演示</title>
          </head>
          <body>
            <p><a href="a.html">一个简单超链接页面</a></p>
            <p><a href="a.html"><img src="3.3.jpg"> </a></p>
            <p><a href = "http://www.sina.com.cn" target = "_blank">用新窗口打开新浪
            </a></p>
            <p> <a href = "http://www.sohu.com">用本窗口打开搜狐</a> </p>
          </body>
        </html>

（2）定义锚点

当创建的网页内容多、页面很长时，还可以在网页内跳转，此时就要定义“锚（anchor）”。有的书上称为“书签”，但作者还是觉得“锚”更形象，因为当船只靠岸后，一般需要扔进水里一个巨大的铁钩，以便钩住水底的石头或沉于淤泥中，这样船只就不容易飘走了，这就是锚。

同样，在一个篇幅巨大的网页中，也可以定义一些锚，以便快速定位。定义锚的主要语法为：

        <a name = 锚名>文字</a>

其中，属性name是不可缺少的，它的值也就是锚名，文字并非是必须的。

定义了锚之后，就可以用下面的语法格式进行跳转了：

        <a href = "#锚名">链接的文字</a>

3.4.2 表格

绘制表格是HTML一项非常重要的功能。表格是网页排版的灵魂。同时由于表格包含的功能比较多，读者需要仔细体会才能掌握。

1.表格的基本语法格式

表格由列和行组成。在HTML中，表格用<table>、</table>表示。一个表格可以分为很多行（row），各行用<tr>、</tr>表示；每行又可以分为很多单元格（cell）或列（column），用<td>、</td>表示。它们是创建表格最常用的标记，需要统一的使用方法，语法为：

        <table>
            <tr>
            <td>单元格内的文字</td>
            <td>单元格内的文字</td>
            …
            <td>单元格内的文字</td>
            </tr>
            …
        </table>

2.<table>标记

<table>标记中的属性很多，用于控制表格的整体显示。常用语法为：

        <table align= bgcolor= border= bordercolor= height= width= cellpadding=n
        cellspacing=n nowrap>
        …
        </table>

各个属性说明如下。

❑ align：表格在上一层容器控件中的对齐方式，有center、left、right共3个值，其中left是默认对齐方式。

❑ bgcolor：设置表格的背景色，默认是上级容器的背景色。

❑ border：设置表格线的宽度，单位是像素，默认值是1。

❑ bordercolor：设置表格线的颜色。如果没包含border属性，或者border属性值是0，则忽略此属性值。

❑ height：设置表格的高度，以像素或页面高度的百分比为单位。但如果表格内容大于设置的高度，则表格会自动扩张，以便容纳所要显示的内容。

❑ width：表格的宽度，以像素或页面宽度的百分比为单位。但如果表格内容大于设置的宽度，则表格会自动扩张，以便容纳所要显示的内容。

❑ cellpadding：设置单元格内部所显示的内容与表格线之间的距离，单位是像素。

❑ cellspacing：设置表格线的“厚度”，单位是像素或百分比。这些属性是<table>标记最常用、最基本的属性。

<table>标记中一些不常用的标记如下。

❑ background：设置定义表格的背景图案。一般选浅颜色的图案。该属性不要与bgcolor同用。

❑ bordercolorlight：设置表格边框向光部分的颜色，只适用于IE。如果忽略border属性或border属性值为0，则此属性不起作用。

❑ bordercolordark：设置表格边框向光部分的颜色，只适用于IE。如果忽略border属性或border属性值为0，则该属性不起作用。使用bordercolorlight或bordercolordark时，bordercolor将会失效。

3.<tr>标记

用<table>标记可以设置整个表格的属性，但如果要设置表格各行的属性，就需要详细了解<tr>标记的各个属性。<tr>标记的常用语法为：

        <td align = 水平对齐方式valign = 垂直对齐方式height = 行高background = 背景
        图案bgcolor = 背景色bordercolor = 边界颜色bordercolordark = 边界背光部分的颜
        色  bordercolorlight =边界向光部分的颜色  colspan = 跨列数  rowspan = 跨行数
        nowrap>
        …
        </td>

可以看出，<tr>的很多属性和<table>的相应属性是一样的。所不同的是<table>的各个属性用于设置整个表格的显示情况，而<tr>属性只用于设置相应行的显示情况。当<tr>属性值的设置和<table>的同名属性值不同时，以<tr>属性值为准。也就是说，低层的属性设置会“屏蔽”高层属性设置。

<tr>标记一些和<table>不同的属性的意义如下。

❑ align：文本在单元格中的水平对齐方式，有center、left、justify、right共4个值，其中left是默认对齐方式，justify是指合理调整单元格中的内容，以恰当显示。

❑ valign：文本在单元格中的垂直对齐方式，有baseline、top、middle、bottom共4个值，默认值是middle，即垂直居中对齐。baseline是指单元格中的内容以基线（baseline）为准垂直对齐，类似于bottom（底端对齐）。

和<table>中的相应属性类似，bordercolorlight和bordercolordark属性是IE浏览器的独有属性，并且它们会屏蔽bordercolor属性，但在其他浏览器中，bordercolorlight和bordercolordark属性不起作用。

4.<td>标记

<td>标记设置的是一行内某一单元格的各项属性，也遵从低层的属性设置会“屏蔽”高层属性设置的原则，具体属性与<tr>相似，不再赘述。

实例3-4 使用HTML语言绘制的表格如图3-5所示。

图3-5 表格示例

    <html>
<head>
<title>HTML、JavaScript简介——实例3-4：绘制表格</title>
</head>
<body bgcolor = "#ffffff">
<table border="2" width="100%" bordercolor="#008000" cellspacing="1">
<tr> <!--第1行-->
<td>  </td>
<td colspan="2">  </td>   <!--第2、3个单元格合并-->
<td colspan="2">  </td>   <!--第4、5个单元格合并-->
</tr>
<tr> <!--第2行-->
<td rowspan="3">  </td>  <!--和下面两行的相应单元格合并-->
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>              <!--第2、3、4、5个单元格-->
</tr>
<tr> <!--第3行-->
<td>  </td>  <!--只有4个单元格，因为第1个已经和第2行第1个合并-->
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
<tr> <!--第4行-->
<td>  </td>  <!--只有4个单元格，因为第1个已经和第2行第1个合并-->
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
<tr> <!--第5行-->
<td rowspan="3">  </td>  <!--和下面两行的相应单元格合并-->
                  <td>  </td>
                  <td>  </td>
                  <td>  </td>
                  <td>  </td>
              </tr>
              <tr> <!--第6行-->
                  <td>  </td>  <!--只有4个单元格，因为第1个已经和第5行第1个合并-->
                  <td>  </td>
                  <td>  </td>
                  <td>  </td>
              </tr>
              <tr> <!--第7行-->
                  <td>  </td>  <!--本应有4个单元格，因为第1个已经和第5行第1个合并-->
                  <td colspan="2" rowspan="2">  </td>
                  <!--但现在只有3个，因为两行两列合并成一个单元格-->
                  <td>  </td>
              </tr>
              <tr> <!--第8行-->
                  <td>  </td>  <!--第1个-->
                  <td>  </td>  <!--第2个-->
                  <td>  </td>  <!--第5个，因为第3、4个已经和上一行3、4个合并-->
              </tr>
            </table>
        </body>
    </html>
上一章目录下一章