置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

用戶:商火/課室

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

本頁面主要用於與晨翊策同學的代碼知識交流,也為後來人提供參考。如有修改建議或疑惑,請前往本頁面討論頁提出,並以--~~~~署名。

課程名稱 Wiki語言進階教程 課程狀態 開課中 課時 待定
面向人群 有一定Wiki語言知識和編輯基礎,想進一步學習頁面的製作和設計和高級功能的使用,開拓視野的編輯者
先修要求 熟練掌握Wiki網站的使用,熟記常用Wiki標記語言和常用模板,已有一定編輯基礎(有效編輯次數>50)
課程內容
序言
第一講 Wiki與HTML
  • 從Wiki到HTML
  • 標籤與屬性
  • ID和類
  • CSS初步
  • 通用標籤與方盒模型(略讀)
  • 特殊標籤(本節暫時跳過)
  • HTML表格(略讀)
  • HTML在Wiki
第二講 Wiki表格
  • 從Excel說起:單元格
  • wikitable類與最簡單的Wiki表格
  • 帶標題的表格、給表格添加樣式
  • 複雜表格
第三講 簡單Wiki邏輯語言
  • 再說模板
  • 參數的傳入和調用
  • 另一類「模板」:解析器函數
  • 簡易邏輯:if和ifeq
  • 系統變量與狀態開關
  • 數學與邏輯運算(略讀)
  • loop插件(略讀)
第四講 實用編輯技巧
結語
參考閱讀 W3school

序言

我相信,當你決定認真學習本頁面以下內容時,應該已經有了一定的編輯基礎,對自己充滿信心,對Wiki的魅力感到興趣十足,想要進一步深入到Wiki——這門奇妙的、跨世代的標記語言中去。我很高興看到這樣的你。曾經的我也是這樣子的,想要提升自己的編輯水平,但當時網絡上很難找到系統的Wiki語言的進階教程,一路走來也是磕磕絆絆。今天和晨聊天,他說想學習進一步的Wiki語言使用;在那一瞬間,我瞥見了過去的記憶。於是我決定做這樣一件我一直想做的事情:寫一套系統詳盡的,而又符合萌百本土情況的Wiki語言進階教程。如有任何問題,可在每小節末尾提問或討論;如對本人編寫的內容有指正或者補充,請各位不吝指教。

本教程主要涉及三個方面的內容:HTML(含CSS),旨在講解Wiki語言的底層基礎,使編輯者對版面和格式的控制更加豐富化、多樣化;Wiki表格,讓編輯學會使用Wiki強大的表格功能;Wiki邏輯語言,講解Wiki語言中較複雜的邏輯部分,用於構建較簡單的模板。在教程的最後會介紹一些較為實用的技巧(主要用於VC區的編輯)。

由於筆者本人的業務範圍限制,本教程可能會或多或少地偏向VC區的編輯需求與經驗,還請理解。

—— 商火 2018.9.14 北京

2018.11.22 修正:可能出現不允許外來用戶編輯用戶頁面的限制,故一切提問或者建議請移步討論頁。

第一講 Wiki與HTML

從Wiki到HTML


即使你不是計算機專業,甚至沒有接觸過編程,你應該也聽說過一些大名鼎鼎的計算機語言:C/C++,或者高級一點的JAVA、Python等等。但如果你有所接觸,會發現雖然都叫「語言」,但他們和Wiki語言大相逕庭。這是因為與這些程序性語言不同,Wiki本質上是一種標記性語言,它其實是HTML(HyperText Markup Language,超文本標記語言)的一個高度簡化的變種[1]

也許這是你第一次聽說HTML,但我相信在之前的編輯中你其實已經不知不覺地使用了大量的HTML代碼。如用於強制換行的<br />,用於大段文字排版的<poem></poem>,和書寫喜聞樂見內容的<del></del>,等等。這些就是HTML裏面很基礎的東西,統稱為標籤。更普遍一點,你在網絡上瀏覽的99%的頁面,無論多麼簡潔抑或花哨,其實都是一個個HTML文檔,你使用的「瀏覽器」,本質上就是解讀這些文檔的解釋器。

事實上,一個Wiki文檔,一般就是由Wiki語言和HTML混寫而成的,只不過一般不做區分,統一划分到Wiki語言中去。但當你訪問一個詞條時,你訪問的其實還是一個HTML文檔。Wiki系統在後台把Wiki源碼轉化為普通HTML文檔,才能被你的瀏覽器讀取。理論上,你可以用純粹的HTML撰寫每一個詞條,但一來是給自己找罪受,二來出於安全考慮,有些HTML的功能被Wiki系統禁用了,只能通過Wiki語言間接調用。這些我們在本講最後一節會提到。

標籤與屬性


之前提到了,作為一種標記性語言,HTML最基礎的不是變量、運算符和表達式,而是標籤(label/tag)。要從根本上去理解標籤這個東西:一般的文本只是文本本身,而標籤則是告訴「讀者」(這個讀者可以是人類,也可以是瀏覽器),這一段文本/這個部分是什麼,以及它應該如何被表示(對於瀏覽器而言)。

讓我們從Wiki出發去理解這個理念:我們都知道'''这是Wiki语言中粗体的标记方式''',但是從語義學的角度:這個標記被理解為,中間被標記的文字,是一段「粗體文字」。在這個定義中,我們會發現,它只是指明了被標記文本的類型——「粗體文字」,但並沒有指明,「粗體文字」是什麼樣子的。在一般的瀏覽器中,這個被默認定義為筆畫粗細度(font-weigh)為800個單位的文字(普通字體是400個單位),但這是不一定的;事實上,甚至可以對「粗體文字」這個標籤進行重新定義,更改它的外觀。

以上這一段對於初學者可能過於艱深,他們可能尚不能很好地理解「標籤」這個事物的本質。沒關係,因為這裏只是一個預先的提醒。許多初學者容易在之後陷進一個誤區,即把標籤的表現形式當成標籤的內在屬性和作用,這是片面的,應儘量避免。等到進一步的學習結束後,自然會明白這段話的含義。

與Wiki語言中形形色色的標記不同,HTML中的標籤具有統一的格式。一般來說,HTML的標籤是成對出現的,分別是<標籤名>形式的開始標籤(start tag)和</標籤名>形式的結束標籤(end tag),或者叫開放標籤和閉合標籤。從一個開始標籤到其對應結束標籤的所有文本(含標籤本身)叫做一個元素(element),元素除開標籤剩下的文本叫做這個元素的內容(content)。一般來說,標籤和內容組成了一個元素,元素之間的相互組合嵌套構成了一整個HTML文檔。

元素的嵌套是指,一個元素(或幾個元素的並列)可以作為另一個元素的內容,如:

<body>              //元素body开始标签
    <h1>            //元素h1开始标签     /*
        标题文本    //元素h1内容         * 元素body内容
    </h1>           //元素h1结束标签     */
</body>             //元素body结束标签

這種情況下,外層的元素稱為內層元素的父元素;反過來,內層元素是外層元素的一個子元素。這是因為當把元素的嵌套並列關係繪成一張圖時,呈現出一種樹狀結構。HTML文檔的這個結構被稱為HTML DOM 樹。這裏了解一下就可以了。

註:下面這種寫法是不規範的,雖然很多瀏覽器能理解:

<body> 
    <h1> 
        标题文本
    </body>
</h1>

有少數標籤是單獨出現的,它們本身就是一個元素,具有空內容。這種標籤相當於在開始標籤處就被關閉了。如強制換行的<br />,和分割線<hr />。

在規範的HTML中,所有元素都應該被正確關閉。就算是單獨出現的<br />,也應該像這樣關閉,而不是採用不規範的<br>寫法。類似地,雖然瀏覽器對標籤名大小寫不敏感,但標準的HTML規範推薦使用全小寫標籤。

附常用HTML標籤一覽(含萌百使用的插件)
名稱 描述 在Wiki中
a 定義錨/連結 內部連結:[[]]
外部連結:自動識別或用[]標記
b 定義粗體文本 '''文本''',但无法处理多行文本
big 定義加大字體 相同
blockquote 定義長引用文本 一般用更加美觀的{{Cquote}}模板
br 定義強制換行 相同
center 定義居中元素 相同
code 顯示原始碼(內聯元素) 相同
del 定義刪除線文本 相同(也有「-文本-」的寫法,萌百已棄用)
div 定義文檔的節(塊級元素) 非必需
h1 h2 ... h6 定義各級標題 =標題= to ======標題======,但使用位置受限
hr 定義分割線 ----
i 定義斜體文本 ''文本'',但无法处理多行文本
img 插入圖像 內部圖像:[[File:文件名|其他参数]]
外部圖像:{{Outer_image}}
li 定義列表項 位於開頭的*或#,對應無序列表與有序列表
p 定義段落 文章部分兩次換行
poem 無定義 插件,取消換行合併,用於大段文本排版
pre 顯示為原始碼(塊級元素) 相同
ruby 定義注音文本 一般用{{Ruby}}模板
small 定義縮小字號 相同
span 定義文檔的節(內聯元素) 非必需
sub/sup 定義上/下標 相同
table(以及th、tr等) 描述表格 詳見第二講Wiki表格

通過將各種HTML元素合理地進行嵌套組合,我們可以寫出一個條理清晰,層次分明的HTMl文檔。但顯然,沒有讀者會願意在像Word文檔一樣單調的網頁上花費時間;同時,僅僅靠單純的HTML標籤並不能向文本提供足夠的附加信息。為了使頁面內容更加美觀豐富,同時增強HTML的信息附加能力,HTML為標籤增加了屬性(attribute)。

屬性是寫在開始標籤中,形如「屬性名="值"」的鍵-值結構體。一個標籤可以擁有任意多個屬性,彼此之間以空格分隔。屬性用於對元素的分類、外觀、內容、特性等進行補充說明;在一些特殊的元素中,如果不添加必要的屬性進行說明,該元素甚至是無意義的。

有一類屬性是幾乎所有元素共有,即可以賦予幾乎任何一種元素的,這種屬性稱為全局屬性。常見的全局屬性有id、class、style和title等,這些我們會在接下來的章節中進行詳細說明。而有的標籤擁有一系列專有屬性,它們僅在這類標籤中有意義。還有一類特殊的屬性,稱為事件屬性,用於控制文檔的動態效果,這裏涉及瀏覽器腳本等,故不在我們的討論範圍內。

標籤、屬性和內容,組成了HTML文檔的基本單位——元素;而元素間的相互嵌套組合,則構成了HTML文檔。本講接下來的內容,都是在其基礎上展開的。

ID和類


本節我們將會了解兩種使用最廣泛的,也是最重要的全局屬性:ID(id)和(class)。兩者在某種意義上是相近的:都是全局屬性;都是用於給元素標註類別;都能被CSS選擇器選擇(見下節);都擁有完全由用戶自定義的值。所以我們放在一起講。

ID的特點在於其特稱性,在於給元素一個獨一無二的名字。就好比用戶的用戶名,一個用戶只能有一個用戶名,而在整個平台上,叫這個用戶名的用戶也只能有一個(至少在萌百是這樣的)。也就是說,一個元素和它的ID是一一對應的,一個元素只允許有一個ID,而一個ID在整個HTML文檔中只能出現一次。如果使用了兩次或以上,不僅在文檔邏輯上是混亂的,也可能引起衝突或達不到預期的結果。

類則是一種較寬鬆的屬性。它的意義在於將某些元素標記為同一類。一個類中可以有任意多個元素,一個元素也可以屬於任意多個類(一般寫在同一個類屬性的值中,彼此之間用空格間隔)。

示例:

<div id="sample-id-1" class="sample-class-1">
    <li class="sample-class-2">我是sample-class-2类li元素</li>
    <li class="sample-class-2" id="sample-id-2">我也是sample-class-2类li元素,但我有一个ID叫“sample-id-2”</li>
    <li class="sample-class-3">我和你们都不一样,我是sample-class-3类li元素</li>
    <li class="sample-class-2 sample-class-3">我既是sample-class-2类li元素,也是sample-class-3类li元素</li>
</div>

需要注意的是,ID和類均不會繼承。即父元素(見上一節元素的嵌套部分)擁有某個ID或類,不意味着其子元素也擁有相同的ID和類。

ID和類為文檔提供了更加嚴謹清晰的邏輯結構。它們真正發揮巨大作用是在CSS和DOM中,使得文檔變得簡潔而易於操控。在更加嚴謹規範的HTML(即XHTML中),每一個元素都必須擁有ID或者類中的至少一個。當你查看一些大網站(如bilibili)的原始碼時,會發現它們幾乎摒棄了其他所有的屬性,只留下了ID和類(與此同時它們摒棄了大量用於描述元素外觀的標籤),把剩下的工作交給了CSS和JavaScript。這是一種先進的理念,即還原HTML的本質功能:描述文檔邏輯結構。

當然在Wiki,這種要求是沒有必要的。詞條內容部分只是一段不完整的HTML,普通用戶也不能控制全局CSS和JavaScript腳本。一般來說,我們不需要考慮ID,更具有實用意義的是類。

CSS初步


CSS(Cascading Style Sheets,層疊樣式表)是Web的一個重要組成部分。它的意義在於為HTML元素設置表觀樣式。

一般來說,有四種CSS——或者說,四重CSS,這也是名稱中「層疊」一詞的由來。它們分別是:

  • 瀏覽器缺省樣式
  • 外部樣式表
  • 內部樣式表
  • 內聯樣式

在Wiki,由於權限的原因,一般編輯者能夠控制的只有內聯樣式。但因為這四重樣式是向上覆蓋的,即後面的樣式設置會覆蓋前面的樣式設置,所以這並不影響我們對頁面內容的操控。所以我們將着重講解內聯樣式。

內聯樣式是作為全局屬性style的值,寫在每一個被操控的元素開始標籤內的,它由一連串CSS屬性及其相應的值,以「CSS屬性名:值」的形式連接而成,CSS屬性之間以半角分號間隔。所以在這裏,CSS屬性,是屬性里的「屬性」。 示例:

<div style="font-size:20px; color:red; text-shadow: 0 0 8px yellow;">示例</div>

效果是這樣的:

示例

CSS屬性與HTML屬性有相似的地方,它們都可以控制元素的表現形式,但在這一點上CSS比HTML強大了太多。使用CSS控制元素表觀已經成為了絕對的主流,許多舊的HTML標籤和屬性都被摒棄,以CSS代替。例如bgcolor屬性,就可以用CSS屬性background代替,而且使用後者時,還可以用漸變色、圖片作背景,功能強大了許多。

CSS屬性數量很多,絕大部分可以參考W3school CSS手冊。利用常見的一些CSS屬性,可以輕鬆地解決詞條的字體設置和對齊排版等工作。由於這裏只是一個簡單的入門教程,不作詳細介紹,讀者可自行查詢上述手冊,掌握字體、背景、邊框、文本屬性的基礎內容即可。如需進一步了解,可以選讀下一節HTML元素的方盒模型,從而對HTML、CSS等有更深入的認識。

通用標籤與方盒模型(略讀)


本節我們將了解HTML元素的通用模型與排版原則,屬於比較內層的東西,大概了解一下即可,除非要進行比較複雜的設計,否則在實際生產中應用不多。


第一個內容是塊級元素內聯元素div元素和span元素。

大部分元素都可以被分為塊級元素(block level element)和內聯元素(inline element)。用通俗的語言描述的話,塊級元素是文章里的一個自然段,內聯元素是某一段里的一個字或者一句話。對於前者,瀏覽器會在其前後強制換行,而內聯元素則不作處理。它們的排版方式很像打字:當你不主動輸入換行符時,只要頁面寬度允許,字(內聯元素)會一個接一個地由左向右排列。當頁面寬度不足時,將會自動換行。這種換行和強制換行不同,它是根據頁面寬度自適應的,某個位置換行與否是不確定的。但當你輸入換行符時,這一行就強制結束了,新的一段在新的一行重新開始。比如說Vocaloid中文殿堂曲頁面使用的{{China_Temple_Song}}原型就具有內聯元素的特徵,在手機上看,一行只能顯示兩首曲目,而在一般的顯示器上為三首,在寬屏顯示器上甚至是四首。而塊級元素,如標題元素,則會獨佔一行(不考慮其他定位效果)。

它們的另一個差別在於,塊級元素可以設置width和height屬性,而一般內聯元素無效。此外,塊級元素可以包含塊級元素或者內聯元素,但是內聯元素不能包含塊級元素。

常見的塊級元素有h1...6、p、table、li等,內聯元素則是img、b、a等(這點Wiki編輯者應該體驗很深,就是有的時候你不空一行,它也給你換行了;但有的時候你如果不空一行,它就當成是連續的內容。這也和一些模板的設計有關)。不過大多數元素都可以通過設置display屬性進行兩種元素的轉化。

然後我們就可以開始說div標籤和span標籤了。這兩個標籤與其他標籤不一樣,它們是沒有實際意義的,因為它們是一種幾乎沒有預設樣式的標籤,唯一的預設是,div元素被認為是一個塊級元素,span元素被認為是一個內聯元素,除此之外不會對內容的樣式作出任何改變。你在文本中作如下使用 文本1<span>文本2</span>文本3 不會對文本有任何外觀上的改變。這種設計是很不尋常的,因為大部分的標籤,都會對內容的顯示樣式作出控制,比如說 h1 預設下就會把文本顯示為加大加粗的標題樣式。

那這種標籤的存在意義是什麼?正如我之前提到的,有些標籤在不定義屬性的情況下,是無意義的,這種標籤也與此類似。我們不僅可以通過設置style屬性來控制整個元素和內容的外觀,還可以設置id和class屬性來將元素命名、分類,便於樣式表或者瀏覽器腳本的動態控制。

事實上,div代表一個空白的塊級元素,span代表一個空白的內聯元素,它們是類似於通用模板的存在。通過對style的控制,div和span幾乎可以模擬其他任何一個元素的表現形式;換句話說,其他的元素,只不過是在div或span的基礎上,添加了若干屬性或樣式後再封裝起來而已。因此在許多現代大型網站上,我們會發現前端工程師在設計網頁主體(body)的部分時,已經摒棄了絕大多數的標籤,廣泛使用div和span體系,只輔以諸如a標籤(顯示超連結)和img標籤(顯示圖片)等很少的幾個不方便替代的標籤。


第二個內容是方盒模型(box model),雖然官方翻譯是框模型,但我認為直接用英文原義更好。方盒模型是CSS處理HTML元素整體外觀顯示時使用的一種模型。這裏涉及四個概念:

http://www.w3school.com.cn/i/ct_boxmodel.gif
圖片來自W3School
  • element(元素)
  • padding(內邊距)
  • border(邊框)
  • margin(外邊距)

關係如右圖所示。你可以這樣理解:整個元素是一幅裝潢好的畫,最中間是元素的主體內容,相當於畫紙,你想呈現的內容都在上面;padding是指這張畫的襯底,襯底可能會比畫作要更大一點,四周突出來沒有被畫紙覆蓋的部分就成了內邊距;border就是畫框,畫框可以很細或者很粗,甚至你可以不要畫框;margin則是畫作外面的防護玻璃罩,一般是透明的你看不見,但佔據了實際的空間。這種理解方式可能是官方最終翻譯為框模型的原因之一:padding、border和margin是三層框,框住了元素。而原義「方盒模型」則是從另一個角度去解釋:element、padding、border和margin是幾個大小不等的盒子,逐個嵌套起來成為整個元素。

通常的瀏覽器是這樣處理方盒模型的:

  1. 當你設置width/height時,你只設置了元素主體的寬/高度,而整個元素的完整寬/高度 = width/height + 2*padding + 2*border + 2*margin,當然這只是上下左右對稱的情況。
  2. 在CSS2中,background會同時作用於padding、element,好比畫框裏的襯底。在隨後的修正版2.1中,background還會延伸至邊框區的背景,「邊框繪製在『元素的背景之上』」。這意味着使用間斷的邊框(虛線框或者點狀框)時會發生改變。目前瀏覽器一般都支持CSS2.1版本。
  3. margin默認是透明的,如果有元素出現在它的下方(在使用特殊定位模式時有可能發生),將不會遮擋。另外,外邊距在豎直方向上會發生合併。

更多關於方盒模型的解釋見W3School CSS框模型

於是我們明白,在一般的文檔流中(即不使用特殊的定位模式),網頁排版就是在往牆上掛畫(方盒/框模型)。有時我們橫着排過去(內聯元素),有時我們掛一幅畫就換下一行(塊級元素)。當然,有的畫本身也是一面牆。

特殊標籤(本節暫時跳過)


本着實用性原則,本節介紹一部分生產生活中常用的特殊標籤(含萌百安裝的插件)的使用方法。本節將不定期更新。

references 腳註

references是萌百安裝的一個Wiki插件,含兩種標籤:<ref>和<references>。作用是實現類似於章節腳註的功能。大體上,ref是用於插入註釋文本,references是將註釋文本匯總在一起。

  • 基礎知識:在被註釋文本後插入ref元素,這些註釋文本會按順序集中在<references />處。若無references則會集中在頁面最底部。
  • 進階知識:
    • 分段註釋:<references />只會收集在其之前的ref,故可以在頁面中插入多個<references>達到順序性的分段註釋。
    • 合併註釋:如果多段文本共用一個註釋(如多個引用為同一個出處),可以在第一次使用該註釋時,給ref添加name屬性(不能使用純數字),在以後需要使用同一註釋時,只需要用插入一個擁有相同name屬性的ref空標籤即可。例:
文本1<ref name="wenben">引用自xxx</ref>
文本2<ref name="wenben" />
    • 分組註釋:此功能用於自由組合文章中的多處註釋,使其分開顯示。(不好意思這一段太瑣碎,鴿了......)

HTML表格(略讀)


本節簡單介紹一下HTML表格,不過不需要太了解,因為在Wiki有新的一套表格語義符號,更為簡潔且易讀寫。本節是在具體講Wiki表格之前,簡要介紹一下底層原理作為鋪墊。

HTML表格是由一系列標籤實現的。比較基礎的包括:

  • <table>:table即「表格」,是表格的頂級標籤,聲明其內容以表格的形式呈現。通過聲明border屬性(注意是屬性,不是CSS屬性)來控制整個表格的邊框,值為0(默認值)表示無邊框,1,2...表示越來越寬的邊框。
  • <tr>:tr是table row的縮寫,聲明表格的行。HTML表格是一行行編排的,tr標籤內的元素是在同一橫行上的單元格。
  • <td>:td是table data的縮寫,聲明單個格子。其內容即格子裏的文本。
  • <th>:th是table head的縮寫,可以視作一種特殊的td——表頭,常被賦予與普通格子不同的樣式。

可以在table/tr/th/td處設置style來控制整個表格/整行/單個表頭或方格的樣式。

一個簡單的表格:

表頭1 表頭2
內容11 內容12
內容21 內容22
<table border="1">
      <tr>
          <th>表头1</th>
          <th>表头2</th>
      </tr>                  //第一行结束
      <tr>
          <td>内容11</td>
          <td>内容12</td>
      </tr>                  //第二行结束
      <tr>
          <td>内容21</td>
          <td>内容22</td>
      </tr>                  //第三行结束
</table>

關於表格還有一些有趣而實用的性質,但略為複雜而且可能令人困惑,所以這些我們留到第二講,在一個相對簡化的環境下介紹。


你知道嗎?

在互聯網的早期,很長一段時間裏,HTML表格曾經統治了網頁排版,即便是為了取代它的CSS標準出現很久以後。當時網絡上的幾乎所有網頁都是用表格編排的,美工把預想圖給設計師,設計師用層層嵌套的表格把網頁劃分成一個個大大小小的格子,把文字、圖片和別的東西填進它們應該在的地方。當時的網頁都是靜態的,沒有太複雜的需求,而且表格式排版確實直觀而簡單,故很快就成為了行業慣例,甚至最後發展到了,專門有人編寫了一種程序,能夠直接把美工給出的概念圖變成表格式的HTML代碼。

但隨着時代的發展,這種方法的弊端暴露出來了。比如說,這種方式會令代碼臃腫不堪,混亂而難以閱讀的標籤代碼充斥了整個文件。再比如說,當你想更改網頁內容時,你可能需要更改大量代碼,甚至需要重新製作一個新的網頁,這非常不利於網站的更新和維護。其他還有語義學等方面的問題,更不用說動態頁面的實現。總之,進入新千年後,在新銳設計師的倡導下,各大公司逐漸放棄了表格式排版,DIV+CSS的排版模式開始成為主流標準,表格終於回歸到本職工作:數據和信息的直觀表示。

你可能沒有注意到,事實上在萌百,表格負責了大部分的信息匯總工作。{{Navbox}}和{{Infobox}}是萌百和類維基網站最具代表性的模板,前者衍生出無數的大家族模板;後者衍生出無數的信息介紹模板,就連高度變形的{{Vocaloid_Songbox}}也是由後者衍生出來。而這兩個模板都是用表格實現排版的,而它們的用途也確實近似於表格。

HTML在Wiki


以上介紹的HTML知識雖然已經有所側重並大大簡化,但仍然是通用的HTML語言。但是當我們回到Wiki,會發現事情有一點不太一樣。出於安全性的考慮,Wiki上的HTML使用是有限制的。比如說,Wiki上禁用了部分的HTML標籤和功能,或者要求通過Wiki語言的形式轉述。比如說,<a>元素,用於聲明錨/連結的重要元素就是如此,編輯者只能通過標準的內/外部連結的格式生成連結。更多被禁用的HTML標籤參見Help:HTML——不過一般確實不會用到這些。除此之外,Wiki可能還禁用了部分功能,包括在元素背景插入圖片等。

同時,雖然HTML很強大,但實際生產中一般還是要避免濫用。許多樣式已經有現成的封裝好的模板,可以直接調用。這是為了簡化頁面,提高可讀性和降低編輯門檻,畢竟Wiki的初衷是提供一種簡單易學的網頁語言。但不可否認的是,合理使用HTML可以做出很多奇妙的效果。

同時,本講中介紹的HTML知識僅是非常簡化的部分,事實上並不足以撰寫一個完整的HTML文檔,但應該足夠應對日常的編輯需求。如需更完整的HTML教程,請參閱W3School

第二講 Wiki表格

從Excel說起:單元格


此前我們曾就HTML表格進行了非常表層的說明,本講正式介紹在Wiki語言系統下的表格撰寫。為了方便理解,我們從一個大部分人都比較熟悉的軟件開始——Excel。

打開一個Excel或者類似軟件的文件,你會注意到它們最突出也最典型的特徵:文檔是由一個個格子整齊排列出來的。這些格子,叫單元格。希望大家記住我們在這裏的定義,因為當我們以後談論一些複雜表格的時候,還是要回到這樣的一個個小格子上面。

每個單元格都可以標記一個行號和列號,按照習慣是從上到下,從左到右的。一組行號和列號唯一確定了某個單元格,所以我們以後用有序對<a, b>來代表第a行第b列的單元格。

因為表格在外觀上要求對齊,所以在同一行的單元格有着相同的高度(height),同一列的單元格有着相同的寬度(width)。所以每一個單元格,其高度和寬度,是由所處的行的行高和所處列的列寬決定的。

在實際應用中,情況變得複雜起來,為了更好地表現數據的組織形式,人們需要進行單元格合併,表現上就是把它們之間的隔線擦除,並且數據可以自由地填充在剩下的整片空白處。這樣的合併有橫向的,即被合併的單元格在同一行且連續;也有縱向的,被合併的單元格在同一列且連續。關於複雜表格和單元格合併我們將會在後續章節深入介紹。


wikitable類與最簡單的Wiki表格

Wiki表格本質上是HTML表格,在不添加樣式的時候是沒有邊框也沒有底色的,這樣對於初學者不直觀,所以我們以後的表格都將帶有Wiki系統自帶的wikitable類。

Wiki表格的結構和HTML表格是一樣的。撰寫一個最簡單的表格,首先你要用"{|"和"|}"來聲明一個表格的代碼域,正如<table>;用"|-"來聲明每一行,正如<tr>;用"||"來在同一行內分隔單元格(這點有點不同)。別忘了在表格的抬頭裏加上wikitable類。例:

11 12 13
21 22 23
31 32 33
{| class="wikitable" // 表格抬头
|-                   // 声明第一行
| 11 || 12 || 13     // 第一行有三个单元格
|-                   // 声明第二行 etc.
| 21 || 22 || 23
|-
| 31 || 32 || 33
|}                   // 表格闭合

也可以這樣寫:

{| class="wikitable" // 表格抬头
|-                   // 声明第一行
| 11 
| 12 
| 13                 // 第一行有三个单元格
|-                   // 声明第二行 etc.
| 21 
| 22 
| 23
|-
| 31 
| 32 
| 33
|}                   // 表格闭合

這兩種寫法是可以混用的。

註釋

  1. 當然為了更加適合共筆類站點建設,Wiki語言增添了模板特性與配套的邏輯語言,這是一般的文本標記語言所不具備的。