• 德媒:英将设“孤独大臣” 帮助900万人走出孤独寂寞 2018-01-30
  • 台湾柑仔店亮相福建漳州 怀旧物品吸引眼球 2018-01-30
  • 省价格协会召开《福建物价》期刊发展座谈会 2018-01-30
  • *北 京 赛 车 开 奖 社 区* 2018-01-30
  • 88岁老人自制红嘴鸥“窝窝头”坚持喂食30多年(组图) 2018-01-30
  • 夫子庙35家臭豆腐店取缔过半 未来更有“秦淮味儿” 2018-01-30
  • 正确把握2018年宏观政策取向 2018-01-30
  • 特稿:“人类的浩劫:1937南京大屠杀”图片展巡展第二站在邢台现代职业学校举行(组图)——中红网 2018-01-30


  • 北京天津上海重庆辽宁江苏浙江安徽福建广东江西山东湖南湖北四川陕西海南吉林山西广西云南新疆青海甘肃西藏河北贵州河南内蒙宁夏黑龙江

    当前位置: 小品大全 > IT教育 > 网页设计 >

    Semantics:Html/Xhtml是否真正符合标准



    时间:2010-09-25 17:04来源: 教育网作者:好学网 点击:[打印本页] [收藏本页]字体: [ ]

    ------分隔线----------------------------

    小品大全 www.waddlr.com 本文摘要:Semantics:Html/Xhtml是否真正符合标准,Semantics可翻译为语义的(学),它是Html/Xhtml是否真正符合标准的重要一环。...

    原文:

    Semantics可翻译为语义的(学),它是Html/Xhtml是否真正符合标准的重要一环。Jorux在这和大家讨论一些自己的观点,如有不妥之处,还请各位学友指正。在西方,为什么这么多人如此重视网页的Semantics,也许你会说,西方比较守规矩,重视标准,但我想说的是,在这些表象的背后有着一只无形的手控制着。

    在此,举个导航条的例子来说明我的观点。大家应该看见过很多诸如下类的导航结构:

    首页 | 关于 | 博客 | 留言 | 相册

    它们有着共同的特点,都有分割条|将各个条目分开。要实现以上效果的导航栏,其Html/Xhtml有很多种写法,在此仅具几个比较典型的例子:

    例1:

    <p><a href=home>首页</a> | <a href=about>关于</a> | <a href=blog>博客</a> | <a href=message>留言</a> | <a href=album>相册</a></p>

    例2:

    <ul>
    <li><a href=home>首页</a></li>
    <li>|</li>
    <li><a href=about>关于</a></li>
    <li>|</li>
    <li><a href=blog>博客</a></li>
    <li>|</li>
    <li><a href=message>留言</a></li>
    <li>|</li>
    <li><a href=album>相册</a></li>
    </ul>

    例3:

    <ul>
    <li><a href=home>首页</a> | </li>
    <li><a href=about>关于</a> | </li>
    <li><a href=blog>博客</a> | </li>
    <li><a href=message>留言</a> | </li>
    <li><a href=album>相册</a></li>
    </ul>

    例4:

    <ul>
    <li><a href=home>首页</a></li>
    <li><a href=about>关于</a></li>
    <li><a href=blog>博客</a></li>
    <li><a href=message>留言</a></li>
    <li><a href=album>相册</a></li>
    </ul>

    以上为说明Semantics而举的四个导航条Html/Xhtml例子.
    例1使用了段落p作为导航条的语义元素标识(相对于结构元素,诸如div等)。很显然它犯了很典型的错误,错误的把原本是条目(list)的导航栏看成了段落。
    例2,3,4都使用了ul/li作为导航栏的语义元素标识,它们的区别进在于分割条|的位置,以及是否在Html/Xhtml中出现。
    由于CSS的存在,利用其控制表象的能力,可以将以上四个例子的外表变得一模一样,而不被肉眼察觉。但是这只是表象,随着搜索引擎的互联网地位提升,以及XML的使用频率和重要性增加,它们作为Robot,只读Html/Xhml/XML源代码,而不读CSS,也就是说它们更在乎你的网页的实际含义,而不是你的网页好看与否。也就是说让你的网页符合语义规范,就是让这些Robot更好的读懂你的网页,提高你的网站在搜索结果中的排名,获得更大的利益,这只无形的手决定了西方对Semantics的重视,甚至超过网页是否通过W3C的检测的重要性。

    我个人认为的Semantics的含义就是:
    将CSS去除,你的网页表现依然规范,易懂。

    这条法则,能让你的肉眼和Robot的逻辑达到某种程度的统一。利用以上理论,在例1中犯的错误,就比较容易理解,条目中的关键词比段落中的关键词,更具价值。一个原本是条目的内容为什么还要使用段落?!

    那么例2,3,4中,分隔条怎么会如此重要。

    例2,3之中只是位置的区别,现在不用任何CSS来控制表象,那么其Html/Xhtml表现的区别是显而易见的,读者可以试试。在例2中,分割条会单独占据四个li,原本五个li变为了九个。打个比方,一个五个人的公司现在变为了九个人的,大家的股份被稀释了一半,每个股东的重要性当然会被削弱。更要命的是有四个股东居然是一模一样的。Robot可能会认为那四个股东(|)更为重要,而降低了其他股东(关键词)的重要性。在例3中,使分隔条成为原来股东的秘书,自然不会影响关键词的重要性。
    从表象考虑,也是例3优于例2的表现,例2中分隔条单独占据一行,让人费解。

    那么例4中,没有使用分隔条,其在语义学上更优。分隔条的表现,可以在CSS中用图片背景轻松实现,而且像这种类型的单色分隔条,用gif格式的话,只有几个字节,不影响下载速度。

    以上是Jorux在跟西方人交流中,结合用户反馈,得到的一些心得体会。大家如有不同观点或是问题,尽管拍砖。

    希望以此引起各位大陆朋友的重视,重视使用h1/h2/p/ul/li/blockquote/table等语义元素的使用和规范,不要滥用div等结构元素,Robot是不太亲近此类元素的。比方说,严格意义上说单个网页,只允许出现一次h1,就是你的网页title,h1在Robot中的地位仅次于<title></title>。

    注:已经忘了上次更新是什么时候了,如此更新速度,已经让我几乎想放弃。原以为,这种半死状态的网站,会逐渐被遗忘,但是Feed的订阅量却在攀升,这让我怀疑Feedburner的计数器是不是出了故障。 (责任编辑:haoxuee)



    TAG标签:

    赞一个
    (0)
    0%
    嘘一下
    (0)
    0%

    ------分隔线----------------------------
    好学网(小品大全 www.waddlr.com)声明:
    ①由于各方面情况的调整与变化,好学网所提供的资讯仅供参考,并不意味本网赞同其观点或证实其内容的真实性。
    ②好学网注明来源为其他媒体的稿件均为转载稿,免费转载出于非商业性学习目的,版权归原作者所有。有问题电邮:[email protected]