当前位置：网站首页 > 培训教程 > Html5 > 正文

怎样能给网页文字加上即时提示_html网页制作培训

作者：小甘发布时间：2020-12-23分类：Html5浏览：1241

导读：　　即时提示是Windows应用软件的一种富有人情味的特色设计。当用户不知道一个文字或图片按钮的功能时，只要把鼠标移动到这个按钮，就会出现一个即时提示短语。在制作网页时,同样可以借...

　　即时提示是Windows应用软件的一种富有人情味的特色设计。当用户不知道一个文字或图片按钮的功能时，只要把鼠标移动到这个按钮，就会出现一个即时提示短语。在制作网页时,同样可以借助HTML语言给网络文档加上即时提示功能。

　　我们在开发英语网络教材时，就利用了即时提示功能给每个生词加上中文注释。在本例中，对初三英语课文中的“Christmas is an important festival in Britain and many other parts of the world.”一句中的生词Christmas、festival、Britain分别加上注释功能，当用户将鼠标移动到这些单词上面时，就会在鼠标的旁边显示相应注释。

　　那么，在网页中如何实现这种即时提示功能呢？下面介绍两种实现方法：

　　在鼠标旁边显示即时提示信息

　　这种方法是巧妙地利用HTML语言提供的标题元素<TITLE>...</TITLE>。在新的HTML 4.0规范中，
　　<TITLE>...</TITLE>可以支持几乎所有的元素，在本例中是将它与行内元素<SPAN>...</SPAN>配合使用。<SPAN>...</SPAN>元素是HTML 4.0规范新增加的通用行内容元素，在本例中利用它将要设置提示信息的单词隔离开并分别设置各单词的TITLE属性。

　　实现的源代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>网页即时提示演示 </TITLE>
<!STYLE元素定义顶级元素BODY与行内元素SPAN的样式>
<STYLE>
BODY {cursor:default}
SPAN {background-color:yellow}
</STYLE>
</HEAD>
<BODY>
<H3>Unit 14 Lesson 54</H3>
<P>
<!用行内元素SPAN将各个要设置提示的单词单独括起来并用TITLE元素设置提示信息>
<!本例中要设置提示信息的单词分别为Christmas、festival、Britain>
<SPAN TITLE="Christmas--n.圣诞节">Christmas </SPAN> is an important
<SPAN TITLE="festival--n.&&&&adj.节日(的);喜庆(的)">festival </SPAN>
in <SPAN TITLE="Britain--n.英国;不列颠">Britain </SPAN> and many other
parts of the world.
</P>
</BODY>
</HTML>

怎样能给网页文字加上即时提示_html网页制作培训

相关推荐