仓酷云

标题: 来看看：为网页内容增加布局和语义的hAtom微格局 [打印本页]
作者: 再现理想    时间: 2015-1-15 23:25
标题: 来看看：为网页内容增加布局和语义的hAtom微格局
Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
网页制造poluoluo文章简介：我们此次来会商hAtom微格局，这个微格局用来为网页内容增加布局和语义从而使得网页内容大概部分内容能够被播送（syndication），好比博客日记大概旧事文章等。
往返顾一下我们之前会商过的微格局：rel-系列，XFN，hCard和hCalendar。
基于链接干系的微格局:利用rel属性
为网页增加hCard微格局
十分酷的微格局：XFN标准
我们此次来会商hAtom微格局，这个微格局用来为网页内容增加布局和语义从而使得网页内容大概部分内容能够被播送（syndication），好比博客日记大概旧事文章等。
汗青：Atom

hAtom微格局是创建在AtomXML同步格局基本之上的。跟之前hCard和hCalendar分歧，hCard和hCalendar都和传统数据格局有着1:1的对应干系，可是hAtom同Atom之间却没有这类间接的对应干系。Atom是一个很不乱的模子，可以为内容播送供应十分多的功效。而hAtom仅仅是供应必需的元素，因而更像是Atom的子集。由此说来，hAtom具有的属性和子属性也都是基于Atom原本的术语而来的。
微内容（其实不必要）播送

只管hAtom基于Atom，hAtom自己并非一个播送格局。hAtom的作者和编纂──DavidJanes──注释说：
“…hAtomwasneverintendedtobea“syndicationformat”nortocompetewithAtomorRSS.It’ssimplydesignedtodescribethemicrocontentonwebpages,suchasblogposts.WeusedAtombecauseitprovidesawell-definednomenclaturefordescribingsuchelements.”（译：hAtom历来都不是为了作为“播送格局”存在，更不是为了同Atom大概RSS之间合作。他就是用来形貌网页中的为内容，好比博客日记。我们利用Atom是由于他供应了很好的术语能够形貌如许的元素。）
以是，hAtom不是专门为了那些必要播送的网页内容的。不外，为了这篇文章的目标，我会在博客日记的基本上会商，而博客日记一般是必要撑持播送的网页内容。
基本常识

在会商hAtom细节之前，让我们来看一下基本的划定规矩（同hCard和hCalendar相似）：

仍是，对一切微格局合用：包括他们的标志元素是甚么不主要（固然应当是无效而且具有语义的）。Class的值（属性或子属性）决意了hAtom微格局。
Profile

假如您选择利用hAtom，一样应当在网页的<head>代码中加上他的Profile申明：
<headprofile=”http://purl.org/uF/hAtom/0.1/”>
对hCard和hCalendar，我提过利用组合Profile，能够掩盖一切非提案微格局：
<headprofile="http://purl.org/uF/2008/03/“>
不外，hAtom是提案标准，他的Profile没有涵盖在组合Profile内里，以是，仍是必要明白的指明他。假如您还援用组合Profile，能够复杂的增加hAtomProfile（W3C同意多个profile值，利用空格离隔便可）：
<headprofile="http://purl.org/uF/2008/03/http://purl.org/uF/hAtom/0.1/“>
示例：单一日记

背景信息差未几了，如今我们来看实践的hAtom，上面的hAtom信息是形貌我的博客日记全文的：
根属性：hfeed

hAtom的根属性是hfeed，他能够包括一个大概更多条目（在下面例子上，条目就是博客日记）。这个根属性是可选的。假如没有明白包括根属性，默许假定他已存在于页面中了，下面的例子中就没有包括根属性。假如需要的话，页面中能够包括多个hfeed。
需要属性：hentry

每一个条目必需包括在hentry属性中。如之条件过的，能够使用一个或多个hentry属性。下面例子中，只要一个hentry是由于这个完成是使用在显现博客某一日记全文的页面中。我会在文章前面会商怎样利用多个条目。
hentry属性包含了条目标一切信息。
需要子属性：entry-title

entry-title是必须的子属性之一，用来申明条目标标题。在下面例子中，我为<h3>使用了entry-title属性，由于作为标题，把他放在“头条”布局中是具有必定语义信息的。
需要子属性：author

author是另外一条必须的子属性，用来申明条目标作者。依据标准说米功效，包括在author子属性中的内容必需利用标志上hCard的<address>元素。
注重：不要显现作者名字

可是，也另有良多实践操纵的例子中，公布者其实不在乎枚举出作者名字，包含我的博客。hAtom的标准默许了这类情形并同意能够不在hentry属性中包括作者信息，不外是在当页面自己已包含了hCard的信息，并含有指定class="author"子属性的<address>元素。这个计划也在hAtom的FAQ中作懂得释。
由于我在我一切页面的页脚中都包含了hCard完成，以是，我没有在hAtom信息中包括author子属性，如许做是无效的。关于那些多作者合作的博客，假如他们不但愿显现作者名字，今朝还没有无效的计划。author必需呈现在hentry属性中。我能够设想利用CSS计划来作废显现（display:none）大概也是能够承受的。
注重：address和hCard

下面的会商触及到别的一个成绩：完成hCard时利用<address>。
在第三部分会商中已经提到过，为hCard利用<address>元素只要在hCard是文档具有者时才无效。hCard的FAQ中也激烈倡议不要在hCard不是文档具有者时分利用<address>。因而，假如hAtom的条目由不是文档具有者创作的话，<address>不是符合的语义元素。
这个成绩今朝还在会商中。今朝的倡议是作废<address>的限定。
需要子属性：updated

updated子属性也是必须的，他标明条目最初被修正和更新的日期/工夫。这里也有必要注重的事变：假如updated子属性没有被界说，子属性published将会用来标明日记更新的日期/工夫。在下面的例子中，您会注重到我并没有包括updated子属性，不外利用了published。
可选子属性：published

published是可选的子属性，基础上同updated的语义是分歧的，都是标明条目标更新工夫。尽有的区分在于，published更偏向于形貌条目第一次公布的工夫，而updated能够是公布的工夫大概是条目厥后更新的工夫。假如同时包括published和updated来形貌条目标日期工夫信息也是无效的：
<abbrclass="publishedupdated”title=”2008-08-28T13:14:37-07:00&Prime;>Aug28,2008</abbr>
在我的例子中，仅仅利用published就切合我的目标了，以是我选择只利用他。
日期工夫计划形式

关于updated和published，hAtom保举利用的工夫和日期格局跟我们之前会商的日期工夫计划形式不异：
<abbrclass=”published”title=”2008-08-28T13:14:37-07:00&Prime;>Aug28,2008</abbr>
该形式界说容器元素为<abbr>，在title属性中指定呆板可读的日期/工夫信息，而在内容中指定人类可读的日期/工夫信息。并且，在title中包括的工夫日期信息应当遵守ISO8601格局请求。
可选子属性：entry-summary

entry-summary是可选的子属性。他申明条目标择要信息。这个子属性能够在hentry中屡次利用。在我的博客中，我没无为文章天生如许的择要，以是我没有供应这个子属性的完成。
可选子属性：entry-content

entry-content是另外一个可选的子属性，用来讲明条目标全文内容。在下面的例子中，一切的文章内容都被包括在<divclass="entry-content">元素中。一样，能够在hentry中利用屡次entry-content属性。
可选：rel-bookmark

hAtom还界说了一个rel属性值来申明条目标永世链接：bookmark。在第一部分中，我们会商了良多基于rel-的微格局，用来标明链接（<a>）和文档之间的干系。rel-bookmark也是用来形貌链接干系的，不外不克不及作为微格局独自利用。必需作为hAtom的属性存在，形貌文档内容的永世链接。
利用hAtom，您能够复杂的在条目标永世链接上增加rel="bookmark"：
<ahref="http://www.ablognotlimited.com/articles/web-accessibility-is-important/"rel=”bookmark”>WebAccessibilityIsImportant</a>
您大概会注重到，在我的例子中没有供应永世链接。这是由于我一般遵守一条划定规矩：不在页面中供应本文链接（Nielsen’s#10oftheTenMostViolatedHomepageDesignGuidelines）。并且由于rel-bookmark是可选的，以是我的完成是无效的。假如hentry没有指明永世链接，那末就会缺省以为本页链接为条目永世链接。假如hentry中界说了id属性，该值会被拼接到URL前面来为条目界说独一值。
组合微格局来界说分类

之前我们在第一部分中会商过rel-tag微格局。他用来增加到链接（<a>）)申明网页──大概网页的部分内容──是关于甚么内容的。基础来讲，经由过程标签来构造/分类已在博客中普遍利用。hAtom能够充实发扬rel-tag的感化，只必要在hfeed和hentry中做出完成：

在后面的例子中，我在hentry中利用了rel-tag链接：
<pclass="category"><ahref="http://www.ablognotlimited.com/articles/category/commentaries/”rel=”tag”>Commentaries</a></p>
<dd><ahref="http://www.ablognotlimited.com/articles/tag/web+design/”rel=”tag”>webdesign</a></dd>
注重就是rel-tag标准中请求链接目标地点（href）中必需包含“标签”的值作为URL的最初一段，这被计划为“标签空间”。
例子：多日记

下面已会商了hAtom的年夜部分细节，应当给出一个例子申明怎样使用在多日记的页面中。在我的博客上，在首页中增加了hAtom信息，用来形貌我比来的三篇日记：
在这个例子中，我利用了多个hentry实例，每个用来形貌一篇日记。而且，我为每篇日记都指定了永世链接，由于他们并没有指向以后页面。除上出两个分歧以外，hAtom基础上跟我之前的例子是一样的。
大概的完成

除我下面的两个例子，另有良多能够完成hAtom的页面：

我正在思索在存档和搜刮了局页面中完成hAtom（还包含批评页面，由于那边必要hCard完成）。
提案形态

在这个系列中说起的微格局中，hAtom是最难的一个。我团体以为这是由于这个微格局仍是一个提案形态的标准。不外，我碰到的完成坚苦还都是很小的，不外也有点小挫败：

以是，从团体角度，我以为究竟他还处于提案形态，还必要被修正和会商。但我其实不以为就不往完成hAtom，最最少也能够先熟习熟习他。只需注重他还在提案形态就能够了。
工具和资本

固然后面提过如今撑持hAtom的工具和资本还很少，我们仍是能够枚举一些：

更多实践操纵

只管hAtom是提案标准，可是仍是有良多服务供应撑持：

另有更多实践的hAtom撑持。
优点

(X)HTML播送

我想hAtom最酷的一个优点就是他为XHTML播送带来的潜力。在工具和资本列表中，我提到了几个转换器，他们使用XSLT把带有hAtom的XHTML转换为XML，从而供应Atom大概RSS的源。这意味着不必要再为了播送往天生大概保护独自的Atom大概RSS的XML文件。复杂的使用hAtom和这些转换器就能够完成播送XML的主动天生。
本人尝尝吧。必要做的仅仅是在包括hAtom信息的URL后面拼接这些转换器（http://transformr.co.uk/hatom/）：
<ahref="http://transformr.co.uk/hatom/http://www.ablognotlimited.com/“>AtomfeedforABlogNotLimited</a>
发生的链接会主动天生Atom格局的XML：
来看看：为网页内容增加布局和语义的hAtom微格局
登录/注册后可看大图

我还没无为我的站点完成这个转换，由于我利用自界说的RSS源。不外这些转换器相对在我的实行列表中。
语义

您不会以为我忘了这点吧？
借助于已有的尺度（XHTML元素和属性），微格局为收集内容增加布局和语义。语义可以同时匡助人类和呆板来处置、搜刮和了解互联网。微格局勉励您利用互联网尺度……标志内容的尺度化办法，使用class信息，还包含开辟的准确流程。
语义很棒。尺度很棒。微格局很棒。
译注：Syndication翻译为“播送”不晓得符合分歧适，之前一向提RSS，可是还真历来没想过大概查过怎样翻译符合。
</p>
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
作者: 若天明    时间: 2015-1-17 22:39
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
作者: 第二个灵魂    时间: 2015-1-26 23:24
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
作者: 愤怒的大鸟    时间: 2015-2-11 08:28
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
作者: 活着的死人    时间: 2015-3-11 05:09
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
作者: 变相怪杰    时间: 2015-3-17 23:10
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
作者: 小魔女    时间: 2015-3-25 11:21
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2