大家都要求网页设计师将样式从页面结构中分离出来. 这通常意味着转移到" />

当前位置：首页 >> 互联网 >> 2006年11月14日

"Times New Roman", Times, serif; align="center">什么语义网络？——让你数据更加有用

推荐者：草根帮主 (积分 142071) | 原作者：

把样式从你文档结构及语义中分离出来

　　长久以来, 大家都要求网页设计师将样式从页面结构中分离出来. 这通常意味着转移到css, 并且使用标记语言这些比样式本身更具有结构性技术. 比如说：使用而不使用这样标签. 使用外部 css样式表来控制此文档表现形式, 而不再继续使用表格或者其他html标记.

　　但我们现在思考更进一步了. 传统技术仅仅只能辨识数据结构, 而语义网络正在尝试读懂网页所提供数据. 我们目标 , 你电脑将会知道你正在读这份文档一篇"文章”, 它作者 "Jennifer Kyrnin”, 发行商 "About”, 谈论主题 "语义网络”.

　　这些信息就一个页面语义. 并且这些信息能够帮助计算机去获取并使用数据, 而不仅仅简单给用户呈现出来.

什么页面文档结构

　　页面文档结构就一个页面骨架. 它决定了数据怎么归放在一起 . 要构建一个好页面结构, 你应该做到以下几点：

用DOCTYPE来定义你文档类型

* 包含一个根元素（一般）
* 包含这些标签 <br>* 使用<body>或<frameset>这样标签 <br> <br>　　当你拥有一个结构规划良好文档时,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 它应该像一棵树一样,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 一级一级地展现出它内容. 这将会让设计css样式表变得十分简单,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 你只要在这棵结构树中找到想呈现特殊样式元素,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 直接加标签就行了. 你能在JavaScript中直接操作某些特别树节点. 最后,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 一个好页面结构应呈现出流程化,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />简洁且便于维护等特点. <br> <br>怎么去书写一个"语义 ”页面 <br> <br>　　就目前环境来看,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 我们不可能列出一张单词表来定义互联网上所有数据类型. 但只要留意一下,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 还可以写出"可读性”强文档 . <br> <br>* 使用HTML标签来描述内容类型 <br>* 标题应该被定义标题,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 并且放在相应结构层次里. <h1> 整个页面最重要标题,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 而<h6>当然就不那么重要了. <br>* 段落标记<p>应该用来表示段落,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 而不拿来增加两个元素间间距. <br>* 所有需要排列元素都应该用列表来表示,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 当然包括导航内容. 这意味着,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 一旦你有* 什么需要排列东西,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 他们都应该在以下标签之内：<ul><ol><dl>. <br>* 那些主要用来定义样式标签应该舍弃. 如<b><i><font>. <br> <br>　　当你完成了以上这些事项,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 你会发现利用css和JavaScript来控制此文档多么轻松一件事. <br> <br>让我们看得更远一点 <br> <br>　　实际上,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 目前已经有很多关于语义网络规范了. 发展得最好 RDF,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> FOAF（RDF 衍生物）,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 以及OWL. 这些规范都在努力将数据转换 "计算机可读式”. <br> <br>原文：What is the Semantic Web? <br> <br>翻译：hidecloud</div>[ 关键词：<a href=http://www.huimanxiang.com/Tags_%C9%E8%BC%C6.htm title='设计'><font color=black>设计</font></a>　<a href=http://www.huimanxiang.com/Tags_%D3%EF%D2%E5.htm title='语义'><font color=black>语义</font></a>　<a href=http://www.hidecloud.com/article.asp?id=204 target=_blank>原文/来源链接</a> ]<br><center> </center><div align=center><a href=javascript:is_Hit(1817);><img src=http://www.huimanxiang.com/images/is_hit_button.gif border=0></a><br><table width=100% border=0><tr><td width=50% style="font-size:16px;"><table border=0 width='100%' bgcolor=#E1E1E1><tr><td bgcolor=#F6F6F6 align=left style='font-size:14px;'>>> <a href=http://www.huimanxiang.com/relation_1817.htm >相关文章</a></td></tr><tr><td bgcolor=#FFFFFF height=100 valign=top align=left><DIV class='list12px aBlue'>·<a href=http://www.huimanxiang.com/content/V118916.htm title=线框图设计实例讲解 target=_blank>线框图设计实例讲解(8顶)</a><br>·<a href=http://www.huimanxiang.com/content/V118838.htm title=可用性竞品分析 target=_blank>可用性竞品分析(9顶)</a><br>·<a href=http://www.huimanxiang.com/content/V118798.htm title=iPhone网页与软件界面设计欣赏与最佳实践 target=_blank>iPhone网页与软件界面设计欣赏与最佳实践(8顶)</a><br>·<a href=http://www.huimanxiang.com/content/V118789.htm title=网站设计简洁之道（优势和方法） target=_blank>网站设计简洁之道（优势和方法）(14顶)</a><br>·<a href=http://www.huimanxiang.com/content/V118585.htm title=设计师不能不知道 10个沟通秘诀 target=_blank>设计师不能不知道 10个沟通秘诀(8顶)</a><br></div></td></tr></table></td> <td style="font-size:16px;"><table border=0 width='100%' bgcolor=#E1E1E1><tr><td bgcolor=#F6F6F6 align=left style='font-size:14px;'><img src=http://www.huimanxiang.com/images/rar.gif width=30> <a href=http://download.huimanxiang.com/ title=IT资料下载>相关资料下载</a></td></tr><tr><td bgcolor=#FFFFFF height=100 valign=top align=left><DIV class='list12px aBlue'>·<a href=http://download.huimanxiang.com/download.asp?id=1024 title=腾讯内部 UI设计软件UIDesigner(提供下载) target=_blank>腾讯内部 UI设计软件UIDesigner(提供下载) </a><br>·<a href=http://download.huimanxiang.com/download.asp?id=148 title=《DON’T MAKE ME THINK》 target=_blank>《DON’T MAKE ME THINK》 </a><br>·<a href=http://download.huimanxiang.com/download.asp?id=1023 title=交互设计和信息架构图示表 target=_blank>交互设计和信息架构图示表 </a><br>·<a href=http://download.huimanxiang.com/download.asp?id=274 title=MMORPG人机交互研究 target=_blank>MMORPG人机交互研究 </a><br>·<a href=http://download.huimanxiang.com/download.asp?id=443 title=设计模式迷你手册 target=_blank>设计模式迷你手册 </a><br></div></td></tr></table></td> </tr></table><table width=98% border=0 cellpadding=0 cellspacing=0><tr> <td height=30 align=center bgcolor=#F5F5F3 style=font-size:9pt;>[<a href=http://www.huimanxiang.com/storeIt.asp?Src_ID=1817>收藏至站内网摘</a>]　[<span class=pub><a href="javascript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(del = window.open('http://del.icio.us/login/?url=' + escape(d.location.href) + '&title=' + escape(d.title),<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 'del',<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />'scrollbars=no,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />width=475,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />height=575,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />left=75,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />top=20,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />status=no,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />resizable=yes'));del.focus();">Del.icio.us收藏</a></span>]　[<span class=pub><a href="javascript:u=location.href;t=document.title;c = %22%22 + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);var url=%22http://cang.baidu.com/do/add?it=%22+encodeURIComponent(t)+%22&iu=%22+encodeURIComponent(u)+%22&dc=%22+encodeURIComponent(c)+%22&fr=ien#nw=1%22;window.open(url,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />%22_blank%22,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />%22scrollbars=no,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />width=600,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />height=450,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />left=75,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />top=20,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />status=no,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />resizable=yes%22); void 0">百度搜藏</a></span>]　[<a href=http://www.zhuaxia.com/add_channel.php?url=http://feed.huimanxiang.com>抓虾订阅</a>]　[<a href=http://www.xianguo.com/subscribe.php?url=http://feed.huimanxiang.com>鲜果订阅</a>]</td></tr></table> </div><div class=extra></div></div></div><div class=comment><table width=98% height=1 border=0 align=center cellpadding=0 cellspacing=0><tr><td background=../../../images/dot.jpg></td></tr></table><table width=98% border=0 align=center cellpadding=0 cellspacing=5><tr><td width=48 valign=top><table width=0 border=0 cellpadding=0 cellspacing=1 bgcolor=#e1e1e1><tr><td bgcolor=#FFFFFF><img src=http://www.huimanxiang.com/Upload/caogen.gif width=50 height=50/></td></tr></table></td><td align=left valign=top><b>1楼楼长：</b><a href=http://www.huimanxiang.com/mySpace.asp?User_ID=35043>评论员</a> (抢沙发奖牌<img src=http://www.huimanxiang.com/images/shafa.gif>)在2009-9-14 8:03:29评价道：</span><br />顶一个呀.1872064<div align=right><a href=http://www.huimanxiang.com/ target=_blank>[个人签名]</a><span class=green>评论员</span></div></td></tr></table><table width=98% height=1 border=0 align=center cellpadding=0 cellspacing=0><tr><td background=http://www.huimanxiang.com/images/dot.jpg></td></tr></table><table width=85% border=0 align=center cellpadding=0 cellspacing=0><form action=../View.asp method=post name=Rev id="Rev"onsubmit="return frm_onsubmit(this);"><tr><td valign=top><textarea name=Rev_Content cols=60 rows=8 id=Rev_Content style=background-image:url(../images/edit_bg.gif);font-size:14px;line-height:28px;margin-top:5px;height:150px;></textarea><input type=hidden name=Src_ID value=1817 /><input type=hidden name=action value=AddRev /><div id=divRev>验证码： <input name=codes type=text id=codes size=4 maxlength=4 /><B>20ju</B></div><input type=submit name=Submit value=发表评论 style="font-size:16px;height:30px;width:120px;"/></td></tr><tr> <td valign=top>1,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" />请不要在评论中发广告,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /> 如需增加外链请<a href=http://www.huimanxiang.com/register.asp target=_blank>注册成个人会员</a>试用个人签名与自助广告. </td></tr> <tr> <td valign=top>2,<img src="dot.gif" width="1" height="1" /><img src="dot.gif" width="1" height="1" /><span style="font-size:9pt;"><a href="javascript:void();" onclick="copyToClipBoard()">把《什么语义网络？——让你数据更加有用》推荐给您好友</a></span></td> </tr> </form> </table><table width=98% height=1 border=0 align=center cellpadding=0 cellspacing=0><tr><td background=../../../images/dot.jpg></td></tr></table><table width=100% border=0><tr><td width=100% align=center></td></tr></table></div><div></div></div> </div> <div class=sidebar> <div align=center> <span style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #e9feda; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 5px; HEIGHT: 16px;"><a href=http://www.huimanxiang.com/login.asp> </a></span><br><br> <DIV class=search><form action=http://www.huimanxiang.com/search.asp target=_blank><div> </form></div> <br> <br> </DIV> </div> </div> </div> <div class=footer> <div align=center> <br /> <span class=green>　<br /> 手机访问 <b> </b></span> © 2006-2010 huimanxiang.com 京ICP备06001725号<br /> </div> </td></tr></table><script src="http://www.google-analytics.com/urchin.js"type="text/javascript"></script><script type="text/javascript">_uacct="UA-103793-4";urchinTracker();</script></div> </body></html>