块型与内联型

这里介绍HTML的块型元素与内联型元素的不同之处。因为很重要,至少需要理解一点。这里不仅需要Wiki的语法,主题设计、插件开发也是必须的。
首先,根据标签的含义,可以制作出不仅能轻松阅读,在搜索引擎中也能轻松命中的站点。

什么是块型?

块型相当于文章中的段落和框架。p标签和div标签很著名。p标签是paragraph(段落)的简称,div是division(划分)的简称,如h1、 h2、 h3这样的h标签是headline(标题)的简称。此外,表格标签、ul(Unordered List)、ol(Ordered List)和dl(Defention List)之类的列表标签也是块型。

文章的块型考虑

首先,考虑下文章的录入。用Wiki输入以下文本。

 吾輩(わがはい)は猫である。名前はまだ無い。
 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)には一度も出会(でく)わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙(けむり)を吹く。どうも咽(む)せぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
 この書生の掌の裏(うち)でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗(むやみ)に眼が廻る。胸が悪くなる。到底(とうてい)助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

以下是正确的例子。


吾輩(わがはい)は猫である。名前はまだ無い。
どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)には一度も出会(でく)わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙(けむり)を吹く。どうも咽(む)せぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
この書生の掌の裏(うち)でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗(むやみ)に眼が廻る。胸が悪くなる。到底(とうてい)助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

像下面这样是错误的例子。


吾輩(わがはい)は猫である。名前はまだ無い。
どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)猫にもだいぶ逢(あ)ったがこんな片輪(かたわ)には一度も出会(でく)わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙(けむり)を吹く。どうも咽(む)せぽくて実に弱った。これが人間の飲む煙草(たばこ)というものである事はようやくこの頃知った。
この書生の掌の裏(うち)でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗(むやみ)に眼が廻る。胸が悪くなる。到底(とうてい)助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。

两者之间的差别是换行符。前者的段落是分开的。而后者使用<br>换行。为何用<br>换行不太合适?这是因为文章中间也可能会使用换行。但是,段落被当成文章对待了。换句话说,后者例子,在段落与段落相连时,全篇显示起来完全一样。
因为HTML理解起来很难,让我用稿纸来举例。用稿纸写文章时在段落的一开始,会习惯性的空两个字。后者的文章,就好比无视了空两个字的习惯。
PukiWiki可以两次换行来划分文章的段落。一开始,请记住这点来使用Wiki。

那么,什么是内联型?

内联型是文章的一部分(如词汇)。

吾輩(わがはい)は猫である。名前はまだ無い。

在这个文章中,作者想用ruby将称作「吾輩」的部分上标。在Wiki表示的话,写成

&ruby(わがはい){吾輩};は、猫である。名前はまだない。

显示的文本会变成下面这样。

吾輩(わがはい)は、猫である。名前はまだない。

反映文章中每一个词汇就是内联型这样就可以很容易理解。

设计实战

主题设计的块型考虑

#ref(): ERROR: The style ref(filename,pagename) is ambiguous and become obsolete. Please try ref(pagename/filename)

左图是PukiWiki Adv.的主题结构。
通过主题改变Navigation或ToolBar的位置,原则上,header位置在页面上方,Footer位置在页面下方,MenuBar或SideBar放在Body的左右两侧。
是否注意到了这样和堆积木完全一样?也就是说,这些积木被称作块型。
这个例子,可以组成完整的3列结构,实际使用时2列就已经足够了。

但是,不使用table标签生成列很难。下述网站讲解只用CSS实现多列且有源代码,试着参考下如何?如果考虑到搜索引擎优化,一般来说文本出现在页面顶部非常有效。根据table标签设计成菜单在左侧时,菜单部分会比文本先出现,这样就会存在影响SEO的问题。

参考

插件的区块型考虑

好了,插件也有块型和内联型。一般以#开始的插件为块型,以&开始的为内联型。最简单的区别方法是,内联型插件可以用方括号[]调用链接,块型无法调用链接。(ref插件是特例)

○
[[&color(red){Red};>红]]
[[&ref(banner.png,nolink);>http://example.com/]]
×
[[#code(plain){这是文本};>文本]]
[[#flash(banner.swf,width=200,height=40);>http://example.com/]]

请基于这个理念进行插件设计。另外,img标签输出时有例外,尽管img标签是块型,外侧可以包含有内联元素的a标签。
此外,object标签或者iframe也可以成为块型或内联型。在这种情况下,如果你想输出块类型,请使用div等标签。
另外,Adv.因为HTML5的前提,请避免轻易使用div标签。如果要附加导航用的插件应该使用<nav>,如果想对一段文字输出说明文的话,可以使用<figure>与<figcaption>标签。