|
“Be conservative in what you send; be liberal in what you accept. –The Robustness principle” “對于自己輸出要嚴(yán)格; 對于他人的輸入要靈活. –魯棒性原則” 一切從魯棒性原則說起, 把魯棒性原則放在第一位, 是為了: 1. 讓大家?guī)е敯粜栽瓌t的思考來聽這次分享. 2. 魯棒性原則是促成HTML5的設(shè)計(jì)原則主線. 3. 魯棒性的引申義可以上升到為人處世中去. 一. XHTML2 & HTML5之間不得不說的故事 HTML Tag的文檔作為HTML誕生的見證, 但是HTML Tag這份文檔并不是官方的規(guī)范. 真正的官方HTML規(guī)范是從HTML2開始的, HTML2繼承了HTML Tag的成果, 繼往開來, 承前啟后, 而非另立門戶, 從頭開始. 但是小悲劇的是, HTML2的標(biāo)準(zhǔn)出臺的時(shí)候恰好是瀏覽器大戰(zhàn)的年代, 瀏覽器廠商各行其道, 無視標(biāo)準(zhǔn)的存在, 而W3C也在這個(gè)時(shí)期也不停的將一些瀏覽器私有特性轉(zhuǎn)換成標(biāo)準(zhǔn)的一部分. (Cowpaths) 97年 – 99年, 瀏覽器大戰(zhàn)如火如荼, HTML標(biāo)準(zhǔn)也經(jīng)歷了從3.2 – 4.0 – 4.01的版本變遷, 非常的迅猛, 但是到了HTML4.01是, W3C的頭也許是被敲壞了, 認(rèn)為:”好了, HTML就這樣了, HTML4.01是HTML的最后一個(gè)版本了, 我們也用不著HTML工作組了.” 而事實(shí)上W3C并沒有停止開發(fā)這門語言, 只不過他們對HTML失去了興趣, 在HTML4.01后, 他們提出了xHTML1.0,雖然聽起來完全不同,，但是xHTML1.0與HTML4.01其實(shí)都是一樣的,，唯一不同的,，就是xHTML1.0要求使用XML語法,。也就是說我們現(xiàn)在習(xí)以為常的：所有標(biāo)簽必須小寫,，所有屬性必須小寫,，所有屬性值都必須加引號,，所有標(biāo)簽必須閉合… 從規(guī)范本身的內(nèi)容看,實(shí)際是相同的, 不同之處就是編碼風(fēng)格, 因?yàn)閷g覽器來說, 讀取符合HTML4.01,HTML3.2或者xHTML1.0規(guī)范的網(wǎng)頁都沒有問題, 對于瀏覽器來說,都會生成相同的DOM樹,只不過xHTML1.0嚴(yán)格的編碼風(fēng)格讓人們比較偏好. 到了2000年,Web標(biāo)準(zhǔn)項(xiàng)目的活動如火如荼, 開發(fā)人員對那些個(gè)私有特性都忍無可忍, 大家都在罵瀏覽器廠商:”他媽的支持個(gè)標(biāo)準(zhǔn)真有這么難嗎?!”. 正巧那個(gè)時(shí)候CSS有了長足的發(fā)展,而且與xHTML1.0的結(jié)合也很緊密, CSS + xHTML1.0基本上就成了”最佳實(shí)踐”.而xHTML的那種優(yōu)雅的書寫風(fēng)格在專業(yè)人士的帶領(lǐng)下, 成為了業(yè)界最被認(rèn)可接受的風(fēng)格了. 在xHTML1.0之后緊跟著出來的是xHTML1.1,我印象很深刻的是:當(dāng)時(shí)還在用Editplus, 去官網(wǎng)找了個(gè)xHTML1.1的template, 結(jié)果… xHTML1.1和xHTML1.0不僅僅是版本號加了0.1這樣的差異, 1.1居然是要求必須把文檔標(biāo)記成XML? 而當(dāng)時(shí)最先進(jìn)的IE無法處理接收到XML文檔類型的文檔, 這這太崩潰了.而真正使人不想把文檔標(biāo)注成XML的原因是, 如果你在文檔中哪怕是只寫錯(cuò)了一點(diǎn)點(diǎn), 比如&沒有編碼成&那整個(gè)頁面的渲染結(jié)果就是黃屏了,沒戲了,這個(gè)頁面中有一個(gè)錯(cuò)誤,你丫別想看這個(gè)網(wǎng)頁了. “如果解析器渠道錯(cuò)誤,那就停止解析”是的.這就是XML文檔的錯(cuò)誤處理機(jī)制. 依稀記得xHTML2的墳還沒長草, 而促使他死亡的原因就是魯棒性原則.
當(dāng)然并不是說這樣的規(guī)范不好, 恰恰相反, 從理論角度他是個(gè)非常好的規(guī)范, 是個(gè)非常好的格式, 但僅限于理論角度, 問題就是他并不實(shí)際. 可以說魯棒性原則是殺死xHTML2.0的戰(zhàn)略性理論武器. 而且讓他死的非常瞑目. 好吧, 回到當(dāng)初和xHTML2.0并駕齊驅(qū)的HTML5. HTML5并不是直接由W3C制定的,就在大伙認(rèn)為HTML應(yīng)該在HTML4.01時(shí)結(jié)束生命時(shí), 有那么一伙人認(rèn)為”也許HTML應(yīng)該更加長壽一些,只要我們對他稍加擴(kuò)展,只要我們把放在xHTML的時(shí)間和精力拿出一部分,，就可以提升下HTML中的表單,，讓HTML更加接近編程語言，就可以讓他更上一層樓” 于是,，在2004年Opera的伊恩.?？松岢隽艘粋€(gè)擴(kuò)展和改進(jìn)HTML的建議,他建議新任務(wù)和xHTML2并行,但在已有的HTML基礎(chǔ)上開展工作,目標(biāo)是對HTML進(jìn)行擴(kuò)展.W3C的投票結(jié)果是NO,因?yàn)镠TML已死,xHTML2才是未來. 于是,Opera,Apple等瀏覽器廠商以及一些成員說, 那好吧不指望他們了,我們自己也能做好這件事,我們脫離W3C.他們成立了WHATWG.而在接下去的一段時(shí)間內(nèi),WHATWG的工作效率非常高， 并且在短時(shí)間得出了一些成果,， 因?yàn)樗麄兊墓ぷ鹘M成員理由瀏覽器廠商,，因?yàn)樗麄儾粌H可以說加就加，而可以實(shí)現(xiàn),，大家不斷地提出一些好點(diǎn)子并且逐一做到了瀏覽器中,。 反觀W3C的xHTML2沒有什么實(shí)質(zhì)性的進(jìn)展，特別是從實(shí)現(xiàn)的角度來看,，用原地踏步形容都不足為過,。 戲劇性的事情又發(fā)生了， 2006年蒂姆.伯納斯-李寫了一篇博客,說:你們知道嗎?我們錯(cuò)了,我們錯(cuò)在企圖一夜之間就讓web跨入XML時(shí)代,我們的想法太不切實(shí)際了,是的,也許我們應(yīng)該重建HTML工作組了. So,2007年故事就真的這樣發(fā)展了,W3C組建了HTML5工作組, 這個(gè)工作組面臨的第一個(gè)問題是:我們重頭開始做呢,還是在04年成立的那個(gè)啥WHATWG工作組的既有成果上開始工作? 答案顯而易見,他們又一次投票同意了在WHATWG基礎(chǔ)上繼續(xù)工作.ok, W3C和WHATWG有并肩作戰(zhàn)了. 那第二個(gè)問題就成了這兩個(gè)工作組之間的關(guān)系,W3C這個(gè)工作組的主編是由誰來干呢?是不是讓W(xué)HATWG的伊恩?？松?google)來?又一次投票,同意了這個(gè)提案. 這就變成了2個(gè)工作組都有一份自己的規(guī)范,而且看起來基本上一樣,那到底那份是真正的規(guī)范呢?實(shí)際上這兩個(gè)標(biāo)準(zhǔn)還是會分道揚(yáng)鑣,W3C最重要制定一個(gè)具體的規(guī)范,這個(gè)規(guī)范最終會成為一個(gè)working draft,然后就定格了,而WHATWG呢?他們在不斷的迭代,即便是現(xiàn)在HTMl5都不能涵蓋他們的目標(biāo),他們是正在開發(fā)一項(xiàng)簡單的HTML或者web技術(shù). 這兩個(gè)工作組的流程截然相反,因?yàn)樗麄兊睦砟钔耆煌? WHATWG可以說是一種獨(dú)裁的工作機(jī)制,。我剛才說了，伊恩·?？松蔷庉?。他會聽取各方意見，在所有成員各抒己見,，充分陳述自己的觀點(diǎn)之后,，他批準(zhǔn)自己認(rèn)為正確的意見。 W3C是一種民主的工作機(jī)制。所有成員都可以發(fā)表意見,，而且每個(gè)人都有投票表決的權(quán)利,。這個(gè)流程的關(guān)鍵在于投票表決 WHATWG的工作機(jī)制讓人很不舒服,而W3C的工作機(jī)制讓人聽起來很舒服,但實(shí)際情況是WHATWG工作的非常順暢,主要?dú)w功于伊恩·希克森,。他的的確確是一個(gè)非常稱職的編輯,。他在聽取各方意見時(shí)，始終可以做到絲毫不帶個(gè)人感情色彩,。W3C的工作機(jī)制很公平,，而實(shí)際上卻非常容易在某些流程或環(huán)節(jié)上卡殼，造成工作停滯不前,，一件事情要達(dá)成決議往往需要花費(fèi)很長時(shí)間,。 兩個(gè)截然不同的工作組之所以能夠同心同德，主要原因是HTML5的設(shè)計(jì)思想,。因?yàn)樗麄儚囊婚_始就確定了設(shè)計(jì)HTML5所要堅(jiān)持的原則,。結(jié)果，我們不僅看到了一份規(guī)范,，也就是W3C站點(diǎn)上公布的那份文檔,，即HTML5語言規(guī)范，還在W3C站點(diǎn)上看到了另一份文檔,，也就是HTML設(shè)計(jì)原理,。 二.HTML5設(shè)計(jì)原則 設(shè)計(jì)原則, 是一種信念, 一種原則, 一種概念, 是設(shè)計(jì)原則涉及的人群行動的動力. 不管是W3C在制定規(guī)范, 還是通用在制造汽車, 還是我們在編寫軟件, 甚至是大牛們在創(chuàng)造編程語言, 設(shè)計(jì)原則也許就是貫穿整件事情的一條主脈, 任何矛盾與挫折都可以用他去衡量. 例如離我們最近的Alibaba公司的設(shè)計(jì)原則就可以認(rèn)為是: 讓天下沒有難做的生意. 再例如Jquery的設(shè)計(jì)原則是: write less, do more. 說到這里, 我就想起來我們應(yīng)該問問自己: 1.我們的工業(yè)化設(shè)計(jì)原則是什么? 2.我們的框架的設(shè)計(jì)原則是什么? a. avoid needless complexity 避免不必要的復(fù)雜性 舉個(gè)栗子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd">
上面3端代碼片段分別代表著XHTML1, HTML4.01, XHTML1.1的文檔類型申明和字符編碼申明以及引入JavaScript和CSS時(shí)要書寫的內(nèi)容. 好吧, 誰能把這幾段默寫出來? 大概有人會說:”你瘋了嗎? 為什么不用模板生成呢?” 好吧, 讓我們來看一看HTML5的這部分內(nèi)容:
僅此而已。好了,，就連我也能過目不忘了,。我用不著把這幾個(gè)字符記在記事本里了。我得說,，在我第一次看到這個(gè)doctype的時(shí)候——我當(dāng)然以為這是一個(gè)HTML文檔的doctype——被它嚇了一跳：“是不是還少一個(gè)數(shù)字5?。俊蔽倚睦锵耄骸斑@個(gè)doctype想告訴瀏覽器什么呢,？就說這個(gè)文檔是HTML嗎,？難道這是有史以來唯一一個(gè)HTML版本嗎，這件事我得首先搞清楚,，HTML今后永遠(yuǎn)不會再有新版本了嗎,？”好一副唯我獨(dú)尊的架式！我錯(cuò)了,，因?yàn)檫@個(gè)doctype并沒有這個(gè)意思,。為此，必須先搞清楚為什么文檔一開頭就要寫doctype,。它不是寫給瀏覽器看的,。Doctype是寫給驗(yàn)證器看的,。也就是說，我之所以要在文檔一開頭寫那行XHTML 1.0的doctype,，是為了告訴驗(yàn)證器,，讓驗(yàn)證器按照該doctype來驗(yàn)證我的文檔。 瀏覽器反倒無所謂了,。假設(shè)我寫的是HTML 3.2文檔，文檔開頭寫的是HTML 3.2的doctype,。而在文檔中某個(gè)地方,，我使用了HTML 4.01中才出現(xiàn)的一個(gè)元素。瀏覽器會怎么處理這種情況,？它會因?yàn)檫@個(gè)元素出現(xiàn)在比doctype聲明的HTML版本更晚的規(guī)范中,，就不解釋呈現(xiàn)該元素嗎？不會,，當(dāng)然不會,！它照樣會解釋呈現(xiàn)該元素，別忘了伯斯塔爾法則,，別忘了健壯性,。瀏覽器在接收的時(shí)候必須要開放。因此,，它不會檢查任何格式類型,，而驗(yàn)證器會，驗(yàn)證器才關(guān)心格式類型,。這才是存在doctype的真正原因,。 而按照HTML5的另一個(gè)設(shè)計(jì)原理，它必須向前向后兼容,，兼容未來的HTML版本——不管是HTML6,、HTML7，還是其他什么——都要與當(dāng)前的HTML版本,，HTML5,，兼容。因此,，把一個(gè)版本號放在doctype里面沒有多大的意義,，即使對驗(yàn)器證也一樣。 剛才,，我說doctype不是為瀏覽器寫的,，這樣說大多數(shù)情況下沒有問題。在有一種情況下,，你使用的doctype會影響到瀏覽器,，相信在座諸位也都知道,。但在這種情況下，Doctype并非真正用得其所,，而只是為了達(dá)到某種特殊的目的才使用doctype,。當(dāng)初微軟在引入CSS的時(shí)候，走在了標(biāo)準(zhǔn)的前頭,，他們率先在瀏覽器中支持CSS,，也推出了自己的盒模型——后來標(biāo)準(zhǔn)發(fā)布了，但標(biāo)準(zhǔn)中使用了不一樣的盒模型,。他們怎么辦,？他們想支持標(biāo)準(zhǔn)，但也想向后兼容自己過去推出的編碼方式,。他們怎么知道網(wǎng)頁作者想使用標(biāo)準(zhǔn),，還是想使用他們過去的方式？ 于是,，他們想出了一個(gè)非常巧妙的主意,。那就是利用doctype，利用有效的doctype來觸發(fā)標(biāo)準(zhǔn)模式,，而不是兼容模型（quiks mode）,。這個(gè)主意非常巧妙。我們今天也都是這樣在做,，在我們向文檔中加入doctype時(shí),，就相當(dāng)于聲明了“我想使用標(biāo)準(zhǔn)模式”，但這并不是發(fā)明doctype的本意,。這只是為了達(dá)到特殊的目的在利用doctype,。 這是在Internet Explorer中觸發(fā)標(biāo)準(zhǔn)模式的最少字符數(shù)目。我認(rèn)為這也說明了HTML5規(guī)范的本質(zhì)：它不追求理論上的完美,。HTML5所體現(xiàn)的不是“噢,，給作者一個(gè)簡短好記的doctype不好嗎？”,，沒錯(cuò),，簡短好記是很好，但如果這個(gè)好記的doctype無法適應(yīng)現(xiàn)有的瀏覽器,，還不如把它忘了更好,。因此，這個(gè)平衡把握得非常好,，不僅理論上看是個(gè)好主意——簡短好記的doctype,，而且實(shí)踐中同樣也是個(gè)好主意——仍然可以觸發(fā)標(biāo)準(zhǔn)模式。應(yīng)該說,，Doctype是一個(gè)非常典型的例子,。 簡短好記,。我能背下來。 同樣,，這樣寫也是有效的,。它不僅適用于最新版本的瀏覽器，只要是今天還有人在用的瀏覽器都同樣有效,。為什么,？因?yàn)樵谖覀儼堰@些meta元素輸入瀏覽器時(shí)，瀏覽器會這樣解釋它：“元數(shù)據(jù)（meta）點(diǎn)點(diǎn)點(diǎn)點(diǎn)點(diǎn),，字符集（charset）utf-8,。”這就是瀏覽器在解釋那行字符串時(shí)真正看到的內(nèi)容,。它必須看到這些內(nèi)容,，根據(jù)就是伯斯塔爾法則,，對不對,？ 我多次提到魯棒性原則，但總有人不理解,。我們換一種說法,，瀏覽器會想“好，我覺得作者是想要指定一個(gè)字符集……看,，沒錯(cuò),，utf-8?！边@些都是規(guī)范里明文規(guī)定的,。如今，不僅那個(gè)斜杠可以省了,，而且總共只要寫meta charset=”utf-8″就行了,。 關(guān)于省略不必要的復(fù)雜性，或者說避免不必要的復(fù)雜性的例子還有不少,。但關(guān)鍵是既能避免不必要的復(fù)雜性,，還不會妨礙在現(xiàn)有瀏覽器中使用。比如說,，在HTML5中,，如果我使用link元素鏈接到一個(gè)樣式表，我說了rel=”stylesheet”,，然后再說type=”text/css”,，那就是重復(fù)自己了。對瀏覽器而言,，我就是在重復(fù)自己,。瀏覽器用不著同時(shí)看到這兩個(gè)屬性,。瀏覽器只要看到rel=”stylesheet”就夠了，因?yàn)樗梢圆鲁鰜砟阋溄拥氖且粋€(gè)CSS樣式表,。所以就不用再指定type屬性了,。你不是已經(jīng)說了這是一個(gè)樣式表了嘛；不用再說第二次了,。當(dāng)然,，愿意的話，你可以再說,；如果你想包含type屬性,，請便。 同樣地,，如果你使用了script元素,，你說type=”text/javascript”，瀏覽器差不多就知道是怎么回事了,。對Web開發(fā)而言,，你還使用其他的腳本語言嗎？如果你真想用其他腳本語言,，沒人會阻攔你,。但我要奉勸你一句，任何瀏覽器都不會支持你,。 愿意的話,，你可以添加一個(gè)type屬性。不過,，也可以什么都不寫,，瀏覽器自然會假設(shè)你在使用JavaScript。避免-不必要的-復(fù)雜性,。 b. Support existing content 支持已有的內(nèi)容 顯然,，我們都會考慮讓W(xué)eb的未來發(fā)展得更好，但他們則必須考慮過去,。別忘了W3C這個(gè)工作組中有很多人代表的是瀏覽器廠商,，他們肯定是要考慮支持已有內(nèi)容的。 再來看幾段代碼: <img src="foo" alt="bar" /> <p class="foo">Hello World</p> 這幾段代碼有問題嗎? 沒有, 是的, 完全沒有問題! 因?yàn)槲覀冇懻摰闹皇蔷幋a風(fēng)格或者寫作風(fēng)格,，跟哪種語法正確無關(guān). 在JavaScript,，你可以在每條語句末尾加上分號，但不是必需的,，因?yàn)镴avaScript會自動插入分號. 當(dāng)然這并不阻礙我們用XHTML的語法規(guī)范來規(guī)約大家書寫辨識度高的文檔, 當(dāng)然也可以借由lint工具來為我們驗(yàn)證整個(gè)文檔的正確性. 我個(gè)人認(rèn)為,，不僅對團(tuán)隊(duì)來說，就算是你自己寫代碼,，也要堅(jiān)持一種語法風(fēng)格,。從瀏覽器解析的角度講,，不存在哪種語法比另一種更好的問題，但我認(rèn)為,，作為專業(yè)人士,，我們必須能夠自信地講“這就是我的編碼風(fēng)格?！比欢?，我不認(rèn)為語言里應(yīng)該內(nèi)置這種開關(guān)。你可以使用lint工具來統(tǒng)一編碼風(fēng)格?，F(xiàn)在就來說說lint工具,。大家可以登錄htmllint.com，在其中運(yùn)行你的HTML5文檔,，它會幫你檢查屬性值是否加了引號,，元素是否小寫，你還可以通過勾選復(fù)選框來設(shè)置其他檢查項(xiàng),。 c. solve real problems 解決現(xiàn)實(shí)的問題 這看起來有點(diǎn)像再說廢話, 誰不是為了解決問題在做事情的呢? 而這條設(shè)計(jì)原理才是真正要解決今天的人們所面臨的現(xiàn)實(shí)問題,、令人頭疼的問題。 好吧, 繼續(xù)看代碼: <h2>Heading text</h2> 現(xiàn)在我們需要給這兩個(gè)文本都加上一個(gè)鏈接, 那我們的做法會是什么? 給h2和p分別加上一個(gè)a標(biāo)簽,？ 或許,，也有聰明的同學(xué)會用a標(biāo)簽來整個(gè)包住h2和p,，就像： <a href="somewhere"> 這樣寫有錯(cuò)嗎,？沒錯(cuò)吧？只不過是種不太好的習(xí)慣, 并且通不過嚴(yán)格的校驗(yàn). 但是這樣的應(yīng)用場景肯定存在的, 那為什么不能這樣寫呢? 這種寫法其實(shí)早就已經(jīng)存在于瀏覽器中了,，因?yàn)樵缇陀腥诉@樣寫了,，當(dāng)然以前這樣寫是不合乎規(guī)范的。所以,，說HTML5解決現(xiàn)實(shí)的問題,，其本質(zhì)還是“你都這樣寫了很多年了吧？現(xiàn)在我們把標(biāo)準(zhǔn)改了,，允許你這樣寫了,。” d. pave the cowpaths 求真務(wù)實(shí) Cowpath： 把一群牛放在地里,，然后看牛喜歡怎么走,，然后根據(jù)牛群踩過的痕跡來鋪一條給牛走的路。 很有趣的比喻吧, 說的就是把一些既然存在的東西變得更加標(biāo)準(zhǔn)一些. 接上地氣的標(biāo)準(zhǔn)才是能夠被執(zhí)行的標(biāo)準(zhǔn). 舉個(gè)栗子: WHATWG對抽樣對大量網(wǎng)站進(jìn)行了分析, 得出了這樣的一個(gè)結(jié)論: id=”header”, id=”footer”, id=”content”, id=”navigation”, id=”sidebar” 這樣的命名方式非常常見, 那好吧, 那我就給你們一些這樣的標(biāo)簽! <section>,<article>,<aside>,<nav>,<header>,<footer>,<details>,<figure> 看代碼: <body> 變! <body> 怎么樣? 像模像樣了吧? 再看: <div class="item"> 再變! <section class="item"> 雖然在這個(gè)文檔中,，我們用這些新元素來替換的是id,，但在我個(gè)人看來，將它們作為類的替代品更有價(jià)值,。為什么這么說呢,？因?yàn)檫@些元素在一個(gè)頁面中不止可以使用一次,，而是可以使用多次。沒錯(cuò),，你可以為文檔添加一個(gè)頭部（header）,，再添加一個(gè)腳部（footer）；但文檔中的每個(gè)分區(qū)（section）照樣也都可以有一個(gè)頭部和一個(gè)腳部,。而每個(gè)分區(qū)里還可以嵌套另一個(gè)分區(qū),，被嵌套的分區(qū)仍然可以有自己的頭部和腳部，是這樣吧,？ 這四個(gè)新元素：section,、article、aside和nav,，之所以說它們強(qiáng)大,，原因在于它們代表了一種新的內(nèi)容模型，一種HTML中前所未有的內(nèi)容模型——給內(nèi)容分區(qū),。迄今為止,，我們一直都在用div來組織頁面中的內(nèi)容，但與其他類似的元素一樣,，div本身并沒有語義,。但section、article,、aside和nav實(shí)際上是在明確地告訴你——這一塊就像文檔中的另一個(gè)文檔一樣,。位于這些元素中的任何內(nèi)容，都可以擁有自己的概要,、標(biāo)題,，自己的腳部。 其中最為通用的section,，可以說是與內(nèi)容最相關(guān)的一個(gè),。而article則是一種特殊的section。aside呢,，是一種特殊的section,。最后，nav也是一種特殊的section,。 最重要的是它們的語義,；跟位置沒有關(guān)系。 這里,，請注意,，最重要的還不是我用幾個(gè)新元素替換了原來的div加類，而是我把原來的H2換成了H1——震撼吧，我看到有人發(fā)抖了,。我碰到過不少職業(yè)的Web開發(fā)人員,，多年來他們一直認(rèn)為規(guī)范里說一個(gè)文檔中只能有一個(gè)H1。還有一些自詡為萬能的SEO秘訣同樣說要這樣,。很多SEO的技巧其實(shí)是很教條的,。所謂教條，意思就是不相信數(shù)據(jù),。過去,，這種教條表現(xiàn)為“不行，頁面中包含兩個(gè)以上的H1,，你就會死掉的,。”在HTML5中,，只要你建立一個(gè)新的內(nèi)容塊,，不管用section、article,、aside,、nav，還是別的元素,，都可以在其中使用H1,，而不必?fù)?dān)心這個(gè)塊里的標(biāo)題在整個(gè)頁面中應(yīng)該排在什么級別；H2,、H3,，都沒有問題。 這個(gè)變化太厲害了,。想一想吧,，這個(gè)變化對內(nèi)容管理是革命性的,。因?yàn)楝F(xiàn)在,，你可以把每個(gè)內(nèi)容分區(qū)想象一個(gè)獨(dú)立的、能夠從頁面中拿出來的部分,。此時(shí),，根據(jù)上下文不同，這個(gè)獨(dú)立部分中的H1,，在整個(gè)頁面中沒準(zhǔn)會扮演H2或H3的角色——取決于它在文檔中出現(xiàn)的位置,。面對這個(gè)突如其來的變化，也許有人的腦子會暫時(shí)轉(zhuǎn)不過彎來,。不要緊,，但我可以告訴你，我認(rèn)為這才是HTML5中這些新語義標(biāo)記的真正價(jià)值所在。換句話說,，我們現(xiàn)在有了獨(dú)立的元素了,，這些元素中的標(biāo)題級別可以重新定義。 e. degrade gracefully 優(yōu)雅降級 HTML5中設(shè)計(jì)了這么些新玩意： input type="number" 很有趣, 但是瀏覽器不認(rèn)識, 怎么辦呢? 最關(guān)鍵的問題在于瀏覽器在看到這些新type值時(shí)會如何處理?，F(xiàn)有的瀏覽器,，不是將來的瀏覽器，現(xiàn)有的瀏覽器是無法理解這些新type值的,。但在它們看到自己不理解的type值時(shí),，會將type的值解釋為text。 無論你寫的是input type=”foo”還是input type=”bar”,，現(xiàn)有的任何瀏覽器都會說：“嗯,，也許作者的意思是text?！币蚨?，你從現(xiàn)在開始就可以使用這些新值，而且你也可以放心,，那些不理解它們的瀏覽器會把新值看成type=”text”,，而這真是一個(gè)瀏覽器實(shí)踐平穩(wěn)退化原理的好例子。 比如說,，你現(xiàn)在輸入了type=”number”,。假設(shè)你需要一個(gè)輸入數(shù)值的文本框。那么你可以把這個(gè)input的type屬性設(shè)置為number,，然后理解它的瀏覽器就會呈現(xiàn)一個(gè)可愛的小控件,，像帶小箭頭圖標(biāo)的微調(diào)控件之類的。對吧,？而在不理解它的瀏覽器中,，你會看到一個(gè)文本框，一個(gè)你再熟悉不過的文本框,。既然如此,，為什么不能說輸入type=”number”就會得到一個(gè)帶小箭頭圖標(biāo)的微調(diào)控件呢？ 當(dāng)然,，你還可以設(shè)置最小和最大值屬性,，它們同樣可以平穩(wěn)退化。這是問題的關(guān)鍵,。 HTML5還為輸入元素增加了新的屬性,，比如placeholder（占位符）。有人不知道這個(gè)屬性的用處嗎,，沒有吧,？沒錯(cuò),，就是用于在文本框中預(yù)先放一些文本。不對,，不是標(biāo)簽（label）——占位符和標(biāo)簽完全不是一回事,。占位符就是文本框可以接受的示例內(nèi)容，一般顏色是灰色的,。只要你一點(diǎn)擊文本框,，它就消失了。如果你把已經(jīng)輸入的內(nèi)容全部刪除,，然后單擊了文本框外部,，它又會出現(xiàn)。 使用JavaScript編寫一些代碼當(dāng)然也可以實(shí)現(xiàn)這個(gè)功能,，但HTML5只用一個(gè)placeholder屬性就幫我們解決了問題,。 當(dāng)然，對于不支持這個(gè)屬性的瀏覽器,，你還是可以使用JavaScript來實(shí)現(xiàn)占位符功能,。通過JavaScript來測試瀏覽器支不支持該屬性也非常簡單。如果支持,，后退一步,，把路讓開，樂享其成即可,。如果不支持,，可以再讓你的JavaScript來模擬這個(gè)功能。 再來看一個(gè)比較極端的優(yōu)雅降級方案: <video> 很NB吧… f. Priority of constituencies 最終用戶優(yōu)先 事先聲明, 這是條很哲學(xué)的設(shè)計(jì)原則, 沒有代碼可以看. 它的意義就是: 一旦遇到?jīng)_突,，最終用戶優(yōu)先,，其次是作者，其次是實(shí)現(xiàn)者,，其次標(biāo)準(zhǔn)制定者,，最后才是理論上的完滿。 在有人建議了某個(gè)特性,，而HTML5工作組為此爭論不下時(shí),，如果有瀏覽器廠商說“我們不會支持這個(gè)特性，不會在我們的瀏覽器中實(shí)現(xiàn)這個(gè)特性”,，那么這個(gè)特性就不會寫進(jìn)規(guī)范,。因?yàn)榧词故前烟匦詫戇M(jìn)規(guī)范，如果沒有廠商實(shí)現(xiàn),，規(guī)范不過是一紙空文，對不對,？實(shí)現(xiàn)者可以拒絕實(shí)現(xiàn)規(guī)范,。 嗯, 要學(xué)會辯證的去看這些問題, 別鉆牛角尖就好.
<!DOCTYPE html> <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
