漫畫(huà)解讀：通過(guò)造車(chē)來(lái)了解軟件開(kāi)發(fā)模式 - IDCF

源：伯樂(lè)在線(xiàn)
作者：伯樂(lè)在線(xiàn) 艾凌風(fēng)

1913 年，美利堅(jiān)工業(yè)之神——亨利福特，發(fā)明了世界上第一條流水線(xiàn)，汽車(chē)工業(yè)從此進(jìn)入了大規(guī)模生產(chǎn)的時(shí)代。豐田公司提出的豐田生產(chǎn)系統(tǒng)（Toyota Production System）又為汽車(chē)工業(yè)帶來(lái)了很多先進(jìn)的生產(chǎn)和管理理念。

先進(jìn)的生產(chǎn)和管理理念是一個(gè)行業(yè)從小作坊走向規(guī)模化的必經(jīng)之路，軟件工業(yè)雖然誕生較晚，但是發(fā)展卻非常迅速，這也同樣得益于軟件工業(yè)開(kāi)發(fā)和管理理念的發(fā)展。這其中就從汽車(chē)工業(yè)吸收了很多成熟的理念。

下面，就讓我們通過(guò)這張出自 Toggle 的漫畫(huà)，來(lái)了解軟件開(kāi)發(fā)模式的變遷史。

總覽

這張圖片從上向下，五個(gè)房間，分別是瀑布模型（waterfall），敏捷開(kāi)發(fā)（agile），看板（KANBAN），SCRUM 和精益軟件開(kāi)發(fā)（lean）。

除了瀑布模型這間小屋和其他小屋有著明顯的界限之外，其他幾種模型就像一個(gè)四合院，有著不可分割的關(guān)系，這也恰好表明，瀑布模式和敏捷開(kāi)發(fā)模式是軟件工業(yè)先后經(jīng)歷的兩個(gè)階段，而 KANBAN，SCRUM 和 LEAN 則是敏捷運(yùn)動(dòng)的產(chǎn)物。

OK，客官里邊請(qǐng)，讓我們進(jìn)第一個(gè)屋子看看。

舊時(shí)代 ——瀑布式軟件開(kāi)發(fā)

所謂瀑布模型，就是說(shuō)，軟件開(kāi)發(fā)是按照一定順序展開(kāi)的（傳統(tǒng)線(xiàn)性生產(chǎn)流程 : Traditional,linear production flow）。就像汽車(chē)生產(chǎn)的流水線(xiàn)一樣，每個(gè)部門(mén)各司其責(zé)，工作按照順序展開(kāi)，交付件單通道線(xiàn)性流動(dòng)。你看這幅圖，總體上就分為：需求 → 設(shè)計(jì) → 制造 → 測(cè)試，四個(gè)階段。

在這個(gè)系統(tǒng)中，客戶(hù)被排除在生產(chǎn)系統(tǒng)之外（圍墻是密閉不透明的），它們只能從需求的接口人那里向系統(tǒng)輸入需求（Client places order）。正因如此，客戶(hù)無(wú)法理解生產(chǎn)所需的費(fèi)用以及為什么交付總是會(huì)延期，因此，也難免會(huì)鬧出下面這樣的笑話(huà)：

客戶(hù)希望你造一輛汽車(chē)，卻只愿意支付一輛自行車(chē)的開(kāi)發(fā)成本。

需求接納后進(jìn)入到設(shè)計(jì)階段：

設(shè)計(jì)定型后，進(jìn)入制造階段：

在線(xiàn)性的生產(chǎn)系統(tǒng)中，或者說(shuō)在瀑布開(kāi)發(fā)模式中，需求和設(shè)計(jì)是不可以進(jìn)行修改的。工人被安排在制造系統(tǒng)中一個(gè)個(gè)工位上，每個(gè)人僅負(fù)責(zé)一個(gè)部件的生產(chǎn)和裝配，就像這位盤(pán)腿坐著的“I know HTML”大哥一樣，HTML 開(kāi)發(fā)者只需要負(fù)責(zé) HTML 的開(kāi)發(fā)而無(wú)需，也不應(yīng)該關(guān)心軟件的其他部分。

喂喂喂，這位老鐵，不上班玩什么球啊？哎，您也別怪他，畢竟交付件（整車(chē)/軟件）還沒(méi)有完成開(kāi)發(fā)，測(cè)試工作自然無(wú)法開(kāi)展，當(dāng)然得等著咯。這也是瀑布模型最大的弊端，下游工作的開(kāi)展嚴(yán)格依賴(lài)于上游交付件的完成情況，這無(wú)疑是一種浪費(fèi)，在爭(zhēng)分奪秒的軟件開(kāi)發(fā)過(guò)程中，你能忍受這種浪費(fèi)嗎？

汽車(chē)完成生產(chǎn)和測(cè)試之后，一次性交付到客戶(hù)手中，完成客戶(hù)的全部需求。

走進(jìn)新時(shí)代——敏捷開(kāi)發(fā)模式

敏捷開(kāi)發(fā)以用戶(hù)的需求進(jìn)化為核心，采用迭代、循序漸進(jìn)的方法進(jìn)行軟件開(kāi)發(fā)。在敏捷開(kāi)發(fā)中，軟件項(xiàng)目在構(gòu)建初期被切分成多個(gè)子項(xiàng)目，各個(gè)子項(xiàng)目的成果都經(jīng)過(guò)測(cè)試，具備可視、可集成和可運(yùn)行使用的特征。換言之，就是把一個(gè)大項(xiàng)目分為多個(gè)相互聯(lián)系，但也可獨(dú)立運(yùn)行的小項(xiàng)目，并分別完成，在此過(guò)程中軟件一直處于可使用狀態(tài)。

有點(diǎn)書(shū)面是吧，其實(shí)很簡(jiǎn)單，敏捷開(kāi)發(fā)的一個(gè)前提假設(shè)是：用戶(hù)不可能在產(chǎn)品開(kāi)發(fā)之前，設(shè)計(jì)之初就完整、明確的提出需求。期望用戶(hù)在開(kāi)發(fā)過(guò)程中不變更需求是不現(xiàn)實(shí)的。用戶(hù)在開(kāi)發(fā)前提出的需求，可能并不是它們最終希望得到的。

在敏捷開(kāi)發(fā)中，客戶(hù)會(huì)參與到軟件開(kāi)發(fā)的整個(gè)流程中。整個(gè)開(kāi)發(fā)過(guò)程不再是一堵不透風(fēng)的墻，透明是關(guān)鍵（TRANSPARENCY IS KEY），但是，隨著越來(lái)越多的用戶(hù)參與進(jìn)來(lái)，越來(lái)越多的問(wèn)題也暴露出來(lái)了，越來(lái)越多不著調(diào)的需求也會(huì)被提出。

敏捷開(kāi)發(fā)的另一個(gè)重要概念就是迭代，所謂迭代，就是不斷對(duì)產(chǎn)品進(jìn)行細(xì)微的、漸進(jìn)式的改進(jìn)（Small incremental changes）。

“先給您上個(gè)小號(hào)的尾翼，用著好我再給您換個(gè)大的~”

在敏捷開(kāi)發(fā)中，生產(chǎn)不再是線(xiàn)性的，開(kāi)發(fā)的同時(shí)還會(huì)進(jìn)行測(cè)試工作，所有人都在同時(shí)工作。尷尬等待的日子一去不復(fù)返咯~

利用敏捷模式開(kāi)發(fā)出的產(chǎn)品，相較于傳統(tǒng)的軟件交付方式，一個(gè)顯著的特點(diǎn)是能夠及時(shí)響應(yīng)客戶(hù)需求的變更，不斷適應(yīng)新的趨勢(shì)。

這不，隔壁老王喜當(dāng)?shù)耍岸ǖ姆ɡ@得有點(diǎn)不穩(wěn)重，寶寶也沒(méi)地方坐。我們的產(chǎn)品經(jīng)理和開(kāi)發(fā)人員快速響應(yīng)，轎跑變商務(wù)也不是什么大問(wèn)題~~ 當(dāng)然，為誰(shuí)辛苦為誰(shuí)忙，客戶(hù)爸爸們一定要買(mǎi)單呀！

什么？您問(wèn)第一稿方案是什么樣的？去翻垃圾桶吧！

一股來(lái)自東方的神秘力量——看板

相信各位也注意到了，相對(duì)于瀑布模式的井井有條，敏捷開(kāi)發(fā)在靈活的同時(shí)，也帶來(lái)了一定程度的混亂。

就在這個(gè)節(jié)骨眼上，還得請(qǐng)這位來(lái)自東方的神秘人物——豐田看板大師（KANBAN SENSEI）給你點(diǎn)撥點(diǎn)撥。

KANBAN，不是漢語(yǔ)拼音，更不是英文縮寫(xiě)，它來(lái)自日語(yǔ)“看板”，カンバン的羅馬拼寫(xiě)：Kanban。它正是豐田生產(chǎn)系統(tǒng)的一個(gè)重要概念：

看板管理，常作“Kanban管理”，是豐田生產(chǎn)模式中的重要概念，指為了達(dá)到及時(shí)生產(chǎn)（JIT）方式控制現(xiàn)場(chǎng)生產(chǎn)流程的工具。及時(shí)生產(chǎn)方式中的拉式（Pull）生產(chǎn)系統(tǒng)可以使信息的流程縮短，并配合定量、固定裝貨容器等方式，而使生產(chǎn)過(guò)程中的物料流動(dòng)順暢。

KANBAN要求把開(kāi)發(fā)中的任務(wù)，以 TODO List 的方式表現(xiàn)出來(lái)：

形式可以是即時(shí)貼，也可以是可視化軟件等等。

在制造業(yè)中，看板也是非常重要的管理方法。也有將其稱(chēng)為目視化管理的。

SCRUM又是什么？

Scrum原始含義是指英式橄欖球次要犯規(guī)時(shí)在犯規(guī)地點(diǎn)對(duì)陣爭(zhēng)球。爭(zhēng)球雙方各有8個(gè)隊(duì)員參與，各方出3名前鋒隊(duì)員，并肩各站成一橫排，面對(duì)面躬身互相頂肩，中間形成一條通道，其他隊(duì)員分別站在后面，后排隊(duì)員用肩頂住前鋒隊(duì)員的臀部，組成3、2、3或3、4、1陣形。然后，由犯規(guī)隊(duì)的對(duì)方隊(duì)員在對(duì)陣一側(cè)1碼外，用雙手低手將球拋入通道，不得有利于本隊(duì)。當(dāng)球拋入通道時(shí)，前排的3對(duì)前鋒隊(duì)員互相抗擠，爭(zhēng)相踢球給本方前衛(wèi)或后衛(wèi)隊(duì)員，前衛(wèi)和后衛(wèi)隊(duì)員必須等候前鋒將球踢回后，方可移動(dòng)。

在敏捷開(kāi)發(fā)領(lǐng)域，SCRUM是一種迭代式增量軟件開(kāi)發(fā)過(guò)程，它包括了一些預(yù)定義的角色：

1）產(chǎn)品負(fù)責(zé)人 Product Owner

產(chǎn)品負(fù)責(zé)人負(fù)責(zé)維護(hù)訂單。

2）Scrum主管 Scrum Master

SCURM Master 對(duì)整個(gè)SCRUM 過(guò)程負(fù)責(zé)，不惜一切代價(jià)（AT ANY COST），保證團(tuán)隊(duì)的工作時(shí)間和計(jì)劃。

3）開(kāi)發(fā)團(tuán)隊(duì) Team

在 SCRUM 過(guò)程中，開(kāi)發(fā)團(tuán)隊(duì)通常會(huì)進(jìn)行沖刺（Sprint），一個(gè)沖刺周期的長(zhǎng)度通常是2-4周。

在這個(gè)沖刺過(guò)程中，開(kāi)發(fā)小組專(zhuān)注于完成一組訂單項(xiàng)的開(kāi)發(fā)。比如：制造一個(gè)發(fā)動(dòng)機(jī)。

對(duì)于KANBAN 和 SCRUM，有人說(shuō) KANBAN vs SCRUM，也有人說(shuō) KANBAN+SCRUM，究竟誰(shuí)是誰(shuí)非，我看只有適合自己團(tuán)隊(duì)的才是最好的，畢竟方法和流程是為業(yè)務(wù)服務(wù)的。就這篇漫畫(huà)來(lái)看，SCRUM + KANBAN 是兩個(gè)避免混亂的好方法。

“來(lái)來(lái)來(lái)，兄弟們，我們來(lái)開(kāi)一個(gè)關(guān)于減少站會(huì)的站會(huì)~~”

精益軟件開(kāi)發(fā)

第二次世界大戰(zhàn)結(jié)束后，豐田公司前社長(zhǎng)豐田英二曾經(jīng)去美國(guó)汽車(chē)城底特律對(duì)福特生產(chǎn)線(xiàn)進(jìn)行了考察，盡管福特高效的大規(guī)模生產(chǎn)線(xiàn)給他造成了很大的沖擊，豐田英二還是非常理智的認(rèn)識(shí)到了當(dāng)時(shí)日本制造業(yè)所面臨的困難。經(jīng)濟(jì)蕭條，資源短缺，小批量差異化的需求使他不能盲目的引進(jìn)這種大規(guī)模的生產(chǎn)方式，隨后豐田公司發(fā)明并實(shí)踐了一系列的管理和生產(chǎn)方法，這些方法在后來(lái)被統(tǒng)稱(chēng)為精益生產(chǎn)和管理方式（lean）。

精益生產(chǎn)的思想，簡(jiǎn)單來(lái)說(shuō)就是Just In Time（JIT），也就是說(shuō)，只在必要的時(shí)候，按照需求的量，僅生產(chǎn)必要的產(chǎn)品，杜絕浪費(fèi)。

Eric Ries曾在《精益創(chuàng)業(yè)實(shí)戰(zhàn)》中提出MVP（minimum viable product）概念，意即“最簡(jiǎn)可行產(chǎn)品”——用最快、最簡(jiǎn)明的方式建立一個(gè)可用的產(chǎn)品原型，這個(gè)原型要表達(dá)出你產(chǎn)品最終想要的效果，然后通過(guò)迭代來(lái)完善細(xì)節(jié)。

精益軟件開(kāi)發(fā)不再像傳統(tǒng)的軟件開(kāi)發(fā)一樣，耗時(shí)幾年才向客戶(hù)交付完整的軟件。取而代之的是，優(yōu)先建立一個(gè)最簡(jiǎn)可用的原型產(chǎn)品投放市場(chǎng)或交付到客戶(hù)手中。

一輛最簡(jiǎn)可用的汽車(chē)是什么樣子的呢？不就是四個(gè)輪子、一個(gè)方向盤(pán)、一個(gè)座椅然后一起裝在底盤(pán)上么。能開(kāi)、能停、能轉(zhuǎn)彎不就是汽車(chē)嘛。讓客戶(hù)先享受到產(chǎn)品帶來(lái)的收益是最重要的。

BUT！！！

你看，這里還有一位失落的大叔。

盡管MPV 的概念聽(tīng)上去是如此的簡(jiǎn)單，可是實(shí)施起來(lái)卻沒(méi)有那么容易。

因?yàn)樵谠O(shè)計(jì)產(chǎn)品原型的過(guò)程中，很多設(shè)計(jì)師是這么做的：把他們認(rèn)為的產(chǎn)品應(yīng)當(dāng)具備的功能羅列出來(lái)，然后一一排除，排定優(yōu)先級(jí)，決定哪個(gè)功能要在最初的版本中出現(xiàn)，而哪個(gè)可以靠后一些。但設(shè)計(jì)師們往往無(wú)法真的只把最必要的功能留在初級(jí)版本中——因?yàn)檎T惑太多。設(shè)計(jì)師們總希望把很cool、很有驚喜的小細(xì)節(jié)帶給用戶(hù)來(lái)博取贊嘆，但從全局來(lái)看，其實(shí)把某些功能刻意強(qiáng)加進(jìn)產(chǎn)品，是會(huì)削弱產(chǎn)品整體流暢性的。Mr Jamie曾在其博客中把這種心理表現(xiàn)稱(chēng)作“藝術(shù)家心結(jié)”。

所有不必的東西（ALL NON-ESSENTIALS ARE THROWN OUT）都不能應(yīng)用到當(dāng)前的最小可用產(chǎn)品。你說(shuō)，藝術(shù)家們得多傷心啊（愁的胡子都長(zhǎng)一臉了）。

此外，盡早交付產(chǎn)品給客戶(hù)或部署到生產(chǎn)環(huán)境，也促進(jìn)了 DevOps，持續(xù)集成（CI），生產(chǎn)環(huán)境測(cè)試（testing in production）等實(shí)踐的發(fā)展。盡早交付產(chǎn)品，盡早從用戶(hù)獲取反饋，不論是好的還是壞的，促使問(wèn)題盡早暴露，盡早修復(fù)，持續(xù)集成，持續(xù)改進(jìn)。

眼尖的童鞋，估計(jì)早就看到了桌子上有一只程序員的好朋友 —— 小黃鴨。你還不知道小黃鴨？那你該看看這篇文章：《小黃鴨調(diào)試法，每個(gè)程序員都要知道的》。

結(jié)束語(yǔ)

實(shí)際工作中的軟件開(kāi)發(fā)和管理模式，往往并不能純粹的歸類(lèi)于以上某種類(lèi)型。即使是相同的開(kāi)發(fā)模型，在不同的團(tuán)隊(duì)中也往往會(huì)根據(jù)實(shí)際情況進(jìn)行變化和改進(jìn)，留言告訴我們你所在的公司是如何進(jìn)行軟件開(kāi)發(fā)的吧~

此外，如果你對(duì)我的解析有不同的看法，或者你在圖中看出了新的內(nèi)涵，也歡迎在評(píng)論中互動(dòng)！

參考

[1] kanban vs scrum vs agile

[2] Scrum vs. 看板，還是Scrum + 看板？

[3] 精益軟件開(kāi)發(fā)

[4] 使用 DevOps 進(jìn)行精益軟件開(kāi)發(fā)

[5] 豐田生產(chǎn)系統(tǒng)

＋“CH050791”后回“IDCF”，可入qun交流~

我們以往看到的頁(yè)面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我將介紹如何使用純HTML打造屬于自己的實(shí)用效果。

1. 折疊手風(fēng)琴

使用Details和Summary標(biāo)簽可以創(chuàng)建沒(méi)有JavaScript代碼的可折疊手風(fēng)琴。

效果：

HTML

<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>

<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>

CSS

* {
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
details {
 border: 1px solid #aaa;
 border-radius: 4px;
 padding: .5em .5em 0;
}
summary {
 font-weight: bold;
 margin: -.5em -.5em 0;
 padding: .5em;
}
details[open] {
 padding: .5em;
}
details[open] summary {
 border-bottom: 1px solid #aaa;
 margin-bottom: .5em;
}

瀏覽器支持：

2. 進(jìn)度條

該Meter和Progress 的元素標(biāo)簽的基礎(chǔ)上，你可以調(diào)整屬性呈現(xiàn)在屏幕上的進(jìn)度條。進(jìn)步有兩個(gè)屬性：max和value校準(zhǔn)進(jìn)度條，而Meter標(biāo)簽提供了更多的定制屬性。

效果：

HTML:

<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
 min="0" max="100"
 low="33" high="66" optimum="80"
 value="50">
 at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>

CSS:

body {
 margin: 50px;
}
label {
 padding-right: 10px;
 font-size: 1rem;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

瀏覽器支持：

3. 更多輸入類(lèi)型

在定義輸入元素時(shí)，您要知道現(xiàn)代瀏覽器已經(jīng)允許您指定足夠多的輸入類(lèi)型了。除了你應(yīng)該已經(jīng)知道text，email，password，number這些類(lèi)型外，還有下面的這些。

date 將顯示本機(jī)日期選擇器
datetime-local 更豐富的日期和時(shí)間選擇器
month 友好的月份選擇器
tel會(huì)讓你輸入一個(gè)電話(huà)號(hào)碼。在移動(dòng)瀏覽器上打開(kāi)它，彈出的鍵盤(pán)將發(fā)生變化，同樣的email也是如此。
search 將輸入文本框設(shè)置為友好的搜索樣式。

效果：

HTML:

<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">

CSS:

input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}

各種新輸入類(lèi)型的MDN文檔非常廣泛且信息量很大。此外，檢查移動(dòng)輸入類(lèi)型以了解用戶(hù)在移動(dòng)瀏覽器上時(shí)這些輸入元素的鍵盤(pán)行為。

4. 視頻和音頻

video和audio元素雖然現(xiàn)在已經(jīng)成為HTML規(guī)范的一部分，但是你一樣會(huì)驚訝于你可以使用video標(biāo)簽在屏幕上渲染出一個(gè)體面的視頻播放器。

<video controls>
 <source src="https://addpipe.com/sample_vid/short.mp4" 
 poster="https://addpipe.com/sample_vid/poster.png">
 Sorry, your browser doesn't support embedded videos.
</video

視頻標(biāo)記中值得注意的一些屬性包括：

poster 下載視頻時(shí)要顯示封面的URL
preload 是否在頁(yè)面加載時(shí)預(yù)加載整個(gè)視頻
autoplay 視頻是否應(yīng)該在頁(yè)面加載后自動(dòng)播放

瀏覽器支持：

5. 校對(duì)文本

當(dāng)你想顯示歷史編輯及校對(duì)的情況時(shí)，blockquote，del和ins元素標(biāo)簽可以派上用場(chǎng)了。

示例：

HTML：

<blockquote>
 There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

CSS：

del {
 text-decoration: line-through;
 background-color: #fbb;
 color: #555;
}
ins {
 text-decoration: none;
 background-color: #d4fcbc;
}
blockquote {
 padding-left: 15px;
 line-height: 30px;
 border-left: 3px solid #d7d7db;
 font-size: 1rem;
 background: #eee;
 width: 200px;
}

6.更統(tǒng)一的引號(hào)

由于中英文引號(hào)的不同，使用<q>標(biāo)記可以讓您很好的解決這個(gè)問(wèn)題，它可使你的內(nèi)容在大多數(shù)瀏覽器上更一致地呈現(xiàn)引號(hào)。

HTML：

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>

CSS：

body {
 margin: 50px;
}
q {
 font-style: italic;
 color: #000000bf;
}

7. 鍵盤(pán)標(biāo)簽

<kbd>標(biāo)簽應(yīng)該是一個(gè)少為人知的冷門(mén)標(biāo)簽，但這個(gè)能使用更好的方式來(lái)說(shuō)明組合鍵的樣式。

HTML：

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>

CSS：

body {
 margin: 50px;
}
kbd {
 display: inline-block;
 margin: 0 .1em;
 padding: .1em .6em;
 font-size: 11px;
 line-height: 1.4;
 color: #242729;
 text-shadow: 0 1px 0 #FFF;
 background-color: #e1e3e5;
 border: 1px solid #adb3b9;
 border-radius: 3px;
 box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 white-space: nowrap;
}

8.使用HTML共享代碼

使用figcaption pre code標(biāo)簽，您可以使用純HTML和CSS呈現(xiàn)出不錯(cuò)的代碼片段。

HTML：

<figure>
 <figcaption>
 Defining a css <code>color</code> property for a class called 'golden'
 </figcaption>
 
 <pre>
 <code>
 .golden {
 color: golden;
 }
 </code>
 </pre>
</figure>

CSS：

pre {
 background-color: #ffbdbd;
}

這篇文章也只是拋磚引玉，也許您也有更多私藏的使用技巧，不妨也貼出來(lái)分享給大家。

另外，如果您不僅僅限于以上的效率，希望有更完整的動(dòng)態(tài)功能。

例如：您希望在您的頁(yè)面中加入Excel功能，可以嘗試葡萄城的 純前端表格控件SpreadJS，再或者您希望為用戶(hù)提供更完備、更高效的前端UI控件，您也不妨可以試試 WijmoJS，相信它們都能為您的應(yīng)用增色不少。

關(guān)于葡萄城
賦能開(kāi)發(fā)者！葡萄城公司成立于 1980 年，是全球領(lǐng)先的集開(kāi)發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國(guó)的分支機(jī)構(gòu)，面向全球市場(chǎng)提供軟件研發(fā)服務(wù)，并為中國(guó)企業(yè)的信息化提供國(guó)際先進(jìn)的開(kāi)發(fā)工具、軟件和研發(fā)咨詢(xún)服務(wù)。葡萄城的控件和軟件產(chǎn)品在國(guó)內(nèi)外屢獲殊榮，在全球被數(shù)十萬(wàn)家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用。

now, learn, comprehend, understand 這些動(dòng)詞都含"懂，知道，明了"之意。

know: 普通用詞，多指通過(guò)學(xué)習(xí)、經(jīng)驗(yàn)或他人傳播而得到知識(shí)，含直接知道的意味。

【英釋】If you know a fact, a piece of information, or an answer, you have it correctly in your mind.

【例句】 I don't know the name of the place.

我不知道那個(gè)地方的名字。

learn: 通常指通過(guò)他人而獲得消息或情況，側(cè)重從不知到知的變化過(guò)程。

【英釋】If you learn of something, you find out about it.

【例句】 It was only after his death that she learned of his affair with Betty.

一直到他死后她才知道他和貝蒂有染。

comprehend : 側(cè)重熟悉了解的過(guò)程。

【英釋】If you cannot comprehend something, you cannot understand it.

【例句】 I just cannot comprehend your attitude.

我就是無(wú)法理解你的態(tài)度。

understand : 指對(duì)事物已有徹底的認(rèn)識(shí)，不僅知其性質(zhì)、含義和細(xì)節(jié)，而且了解其內(nèi)外的關(guān)系。

【英釋】You say that you understand something when you know why or how it happens.

【例句】They are too young to understand what is going on.

他們還太小，不明白發(fā)生了什么事。

來(lái)源：http://www.bobo0528.com/read-35.html

微信公眾號(hào)：詞老大

在線(xiàn)咨詢(xún)

上一篇：360°表單設(shè)計(jì)指南，快速掌握「表單」設(shè)計(jì)知識(shí)點(diǎn)（上
下一篇：利用CSS filter的屬性給img修改顏色

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

漫畫(huà)解讀：通過(guò)造車(chē)來(lái)了解軟件開(kāi)發(fā)模式 - IDCF

1. 折疊手風(fēng)琴

2. 進(jìn)度條

3. 更多輸入類(lèi)型

4. 視頻和音頻

5. 校對(duì)文本

6.更統(tǒng)一的引號(hào)

7. 鍵盤(pán)標(biāo)簽

8.使用HTML共享代碼

您的項(xiàng)目需求