电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使图像文本具有语义并且可搜索（5） [打印本页]

作者: look_w 时间: 2018-8-5 13:29 标题: 使图像文本具有语义并且可搜索（5）

显示所需的图像为了进行实践，您需要两个空的 div。当然，如果您已经有了需要显示的图像，并且准备好一个 div，就可以很轻松地显示图像了。仅需在 CSS 中使用 background: url属性。展示了最后向 CSS 添加的内容，它向放置图像文本的两个 div添加了背景图像。
清单 6. 使用背景图像显示图像文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

@charset "UTF-8";
/* Main CSS Stylesheet for Tom Doerr Guitars */

body {
background-color: #5D1008;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 150px;
margin-left: 75px;
}

#splash {
height: 343px;
width: 514px;
background: url(../images/splash_guitar.gif) no-repeat bottom left;
}

#title {
position: absolute;
top: 80px;
left: 275px;
height: 93px;
width: 475px;
background: url(../images/title.gif) no-repeat top left;
}
#title span {
display: none;
}
#slogan {
position: absolute;
top: 260px;
left: 375px;
height: 94px;
width: 399px;
background: url(../images/slogan.gif) no-repeat top left;
}
#slogan span {
display: none;
}

再次上传页面，您将看到巨大的区别，见。
图 4. 现在出现了图像文本

不要使用实际的 img 标记最后需要注意的一点：相对于在 XHTML 中实际放置一个 img标记而言，您可能更喜欢在 div中使用背景图像。首先，XHTML 正确映射到显示的页面中。有一个带有文本（标题和标语）的部分（用 div表示）。其次，每个部分都有一个条目：文本。该文本是 XHTML 中的实际文本和在浏览器中呈现的（图像）文本。最后，如果在 XHTML 中添加了 img，则需要进一步定位图像和 div。简而言之，使用带有实际文本的 div会更加简单和准确，然后可以为 div添加一个背景图像。
结束语撰写关于语义 Web 的文章比想象中要难得多。您需要创建内容，并使用 XHTML 来组织该内容。不仅要求内容的精确性，还要求它是完整的。换句话说，内容需要完整地表示一个页面。因此，图像需要一些基于内容的表示。如果没有完整的内容，Google 和其他搜索引擎将忽略页面，或者只是部分地索引页面。
但是，您还必须创建有吸引力的显示。即使是在包含大量信息的站点上，纯粹的文本也略为逊色。在处理前面定义的内容和结构的同时，您还需要通过 CSS 使页面美观实用。如果一个页面没有准确完整的内容，它再漂亮也是不实用的。但是如果没有恰当的显示，准确完整的内容就很难得到我们的赏识。
因此，需要同时构建结构、内容和显示这 3 个层。将每个层放置在其他层的上面，并让某些层对于某些类型的设备是可见的。您可以使内容对于搜索引擎和屏幕阅读器是可见的，同时又对观看者隐藏了这些内容。通过这些步骤，您就可以得到一个美观并且具有准确文本的 Web 页面。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)