📄 0303-0303.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0071)http://162.105.170.55/ASPs/GetLearningArticleTemp.asp?section=0303-0303 -->
<HTML><HEAD><TITLE>XML中国论坛 - 初学进阶 - 3.3.3.3 巧用命名空间丰富表现效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TABLE {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"
}
.pt9 {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"
}
.pt10 {
FONT-WEIGHT: 700; FONT-SIZE: 10pt; LINE-HEIGHT: 18pt; FONT-FAMILY: "宋体"
}
.TempOutline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; COLOR: #666666; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.TempOutline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; COLOR: #666666; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage0 {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage111 {
FONT-SIZE: 9pt; MARGIN-LEFT: 51pt; TEXT-INDENT: -64pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
</STYLE>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0
onload=""><!-- 以下为主体内容 -->
<div align="center">
<center>
<TABLE width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<TBODY>
<TR vAlign=top>
<TD width=37 rowSpan=2></TD>
<TD vAlign=center><IMG height=33
src="image/title_learner.gif" width=226></TD>
<TD width=25 rowSpan=2></TD>
</TR>
<TR vAlign=top>
<TD ><!-- 正文内容 -->
<DIV class=pt10><B>3.3.3.3 巧用命名空间丰富表现效果</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>命名空间不仅仅可以是用户自定义的DTD，也可以是一些已经成为标准的置标语言，其中包括大名鼎鼎的HTML，还有我们后面要详细介绍的SVG、SMIL、MathML等等。</P>
<P>利用命名空间将众多用户自定义的DTD或行业DTD融合在一起，可以达到资源的最大程度的综合利用；而利用命名空间将若干已经被W3C镀过金身的置标语言集于大成，则可以极大地丰富页面表现效果，丰富人机交互效果，使浏览器拥有更强的表现力。可以想象，如果我们要表现一批数据，所写的文件既能引入HTML中的表格为它们列表，又能使用SVG中的矢量图形为它们画条形图和饼图，甚至还能利用SMIL为它们设计多媒体表现效果，那该多好！</P>
<P>下面举一个有趣的例子。在HTML文件中我们经常使用脚本语言来丰富交互效果，在XML文件中，我们就可以通过引入HTML的命名空间，达到相同的效果。下面的这个例子中，我们为同样的天气预报数据设计了列表显示和表格显示两种显示方法，在使用按钮"Change
Appearance"后，调用Javascript脚本程序，将显示方式由一种切换为另一种。</P>
<P>forecast.xml源文件：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml version="1.0"?><BR><?xml-stylesheet
type="text/css" href="block.css" ?><BR><?xml-stylesheet
type="text/css" href="table.css" ?><BR><BR><demo
xmlns:html="http://www.w3.org/TR/REC-html40"><BR><html:script
type="text/javascript" src="toggle.js" /><BR><html:input
type="button" value="Change Appearance" onclick=
"toggleStyleSheet()" /><BR> <date>Dec 1st,
1999</date><BR> <cities><BR>
<city><BR>
<name>Beijing</name><BR>
<weather>Snow</weather><BR>
<wind-power>4</wind-power><BR>
<temperature><BR>
<lowest>-7</lowest><BR>
<highest>2</highest><BR>
</temperature><BR>
</city><BR>
<city><BR>
<name>Shanghai</name><BR>
<weather>Sunny</weather><BR>
<wind-power>2</wind-power><BR>
<temperature><BR>
<lowest>2</lowest><BR>
<highest>12</highest><BR>
</temperature><BR> </city><BR>
</cities><BR></demo></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>toggle.js源文件：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">function toggleStyleSheet() {<BR> if
(enabled) {<BR> document.styleSheets[1].disabled =
true;<BR> } else {<BR>
document.styleSheets[1].disabled = false;<BR> }<BR>
enabled = !enabled;<BR>}
<P>function initiateToggle() {<BR>
setTimeout(toggleStyleSheet, 0);<BR>}</P>
<P>var enabled =
true;<BR>initiateToggle();</P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>block.css源文件：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">date<BR>{<BR> font-size:
15pt;<BR> font-weight:bold;<BR>
color:blue;<BR> display:
block;<BR> margin-bottom:
5pt;<BR>}<BR>name<BR>{<BR>
font-weight:bold;<BR>
display:block;<BR> margin-top:
5pt;<BR> margin-left: 8pt;<BR>}<BR>weather,
wind-power, temperature<BR>{<BR>
display:block;<BR> margin-left:
20pt;<BR>}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>table.css源文件：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">date<BR>{<BR> font-size:
15pt;<BR> font-weight:bold;<BR>
color:blue;<BR> display:
block;<BR> margin-bottom:
5pt;<BR>}<BR>cities<BR>{<BR> display:
table;<BR> margin-top:
12pt;<BR>}<BR>city<BR>{<BR> display:
table-row;<BR>}<BR>name, weather, wind-power,
temperature<BR>{<BR>
display:table-cell;<BR>}<BR>name<BR>{<BR>
font-weight:bold;<BR>}</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>当使用列表方式显示这些数据时，显示效果如下：</P>
<P align=center><IMG height=330 src="image/result.jpg"
width=244></P>
<P>IE不支持CSS描述的表格显示效果。不过如果你使用的是Netscape，就可以大饱眼福了。</P></DIV>
<P></P>
<P></P></TD></TR></TBODY></TABLE>
</center>
</div>
<P></P>
<P>
<P></P></BODY></HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -