【正文】 號牢牢拽在懷里。顧名思意，就是允許用戶編輯元素內(nèi)容包含的任意文本，包括子元素。 ul contenteditable=true li悼念遇難香港同胞 /li li深圳特區(qū) 30 周年 /li li伊春空難 /li /ul 或者，根據(jù)前面所學(xué)到的一些技巧，我們可以把它寫成： ul contenteditable=true 您可以狠狠地點擊這里： HTML5 內(nèi)容可編輯 demo 七、 Email 輸入 (Inputs) 如果我們給表單輸入框應(yīng)用名為” ”的 type 屬性，我們可以命令瀏覽器只允許符合有效的電子郵件地址結(jié)構(gòu)的字符串。 form action= method=get label for=郵箱 :/labelinput id= name= type= / button type=submit確定 /button /form 您可以狠狠地點擊這里： HTML5 郵箱內(nèi)置驗證 demo //zxx:經(jīng)我小測了 下，貌似僅在 Chrome 瀏覽器下有效果 (xp 系統(tǒng) )，當(dāng)輸入內(nèi)容不是合法郵箱格式，點擊“確定”按鈕是沒有反應(yīng)的；當(dāng)輸入為合法郵箱，點擊“確定”按鈕才會提交刷新頁面。 還應(yīng)當(dāng)指出，當(dāng)談到哪些元素和屬性支持和不支持時，當(dāng)前所有的瀏覽器都有點靠不住的。而且，它不支持占位符屬性，這個我們將會在后面學(xué)到。如下圖所示： 這些表單控件里面顯示的些提示性的文字就是占位符。當(dāng)然，你需要設(shè)定一個初始的默認的 value 值，然后根據(jù)輸入內(nèi)容進行判斷，從而決定文本框值的改變與否。 label for=郵箱 :/label input id= type= placeholder= size=26 / 根據(jù)我的測試，目前僅 webkit 核心的瀏覽器支持 placeholders 屬性，像是 Chrome5， Safari4，結(jié)果如下所示： 您可以狠狠地點擊這里： HTML5 占位符 Demo 九、本地存儲 (Local Storage) 多虧了本地存儲 (非正式的 HTML5，本著方便歸納的目的 )，我們可以讓高級瀏覽器記住我們的編輯后的內(nèi)容，即使瀏覽器被關(guān)掉或是頁面刷新。建議全屏觀看，以看清其中的 HTML 與 JavaScript 代碼 //zxx:根據(jù)視頻內(nèi)容，我自己做了個 demo，關(guān)于本地存儲的。請注意，為了彌補舊的瀏覽器將無法識別本地存儲，你應(yīng)該先測試，以確定 是否存在?，F(xiàn)在，通過 HTML5，我們可以使用 header和 footer元素。 盡量不要混淆” header”和” footer”這些元素。因此，將博客底部的，例如，元信息放在 footer 元素內(nèi)部是說得通的。 十一、更多 HTML5 表單特征 (More HTML5 Form Features ) 通過下面視頻學(xué)習(xí)更多有用的 HTML5 表單特征： //zxx:TouTuBe 視頻，需要翻墻 十二、 IE 和 HTML5(Inter Explorer and HTML5) 不幸的是，討厭的 IE 瀏覽器需要動點小手術(shù)才能理解新的 HTML5 元素。 } 不幸的是， IE 仍舊忽略這些樣式，因為它不知道這些標簽從哪里來的，好比是 header元素。 (footer)。 (hgroup)。 (menu)。為了更簡單將此應(yīng)用到每個新的應(yīng)用過程中，雷米夏普 (Remy Sharp)創(chuàng)建了一個腳本，通常稱為 HTML5 shiv。 ![if IE] script src= ![endif] 十三、文檔某一部分的信息 (hgroup) 想象一下，在我的網(wǎng) 站的標題，我有我的站點的名稱，隨后立即由一個副標題。此外，一個 h2 標記的使用提出了更多的問題，在層次結(jié)構(gòu)上，當(dāng)涉及到其他網(wǎng)頁上顯示的標題時。 header hgroup h1 Recall Fan Page /h1 h2 Only for people who want the memory of a lifetime. /h2 /hgroup /header 十四、必要的屬性 (Required Attribute ) 表單允許新的必要屬性，用來指定是否需要特殊的 input。 input type=text name=someInput required 或者，使用更結(jié)構(gòu)化的方法： input type=text name=someInput required=required 兩種方法都行。下面是一個簡單的例子，我們還將添加占位符屬性，因為沒有理由不這樣做。 //zxx:貌似僅在Chrome 瀏覽器下有點小效果 十五、 Autofocus 屬性 同樣， HTML5 的解決方案消除了對 JavaScript 的需要。 input type=text name=someInput placeholder=zhangxinxu required autofocus 有趣的是，雖然我個人更傾向于喜歡 XHTML 的方法（用引號，等等），寫作“ autofocus=autofocus”讓人感到有點怪。 十六、 Audio 支持 我們無需再依賴第三方插件區(qū)渲染音頻。就目前，只有最近期的的瀏覽器提供 HTML5 音頻支持。 audio autoplay=autoplay controls=controls source src= / source src= / a href=Download this file./a /audio Mozilla 和 WebKit 的還沒有完全相處，當(dāng)涉及到音頻格式， Firefox 會希望看到一個 .ogg文件，而 WebKit 的瀏覽器支持 .mp3 擴展。 當(dāng) Safari 加載頁面時，它不會承認 .ogg 格式，會跳過它并移動到的 MP3 版本，因此。 十七、 Video 支持 與 audio元素很類似，在新的瀏覽器中也存在 Video！事實上，就在最近， YouTube 宣告了新的 HTML5 視頻嵌入，當(dāng)然，是為支持此功能瀏覽器。雖然 Safari 和 Inter Explorer9 可以預(yù)期支持 格式的視頻（其中 Flash 播放器可以播放）， Firefox 和 Opera 是堅持開源 Theora 和 Vorbis 格式。 video controls preload source src= type=video/ogg。vorbis, theora39。 39。, 39。節(jié)省一些帶寬，還是你自己聲明下吧。在資源元素的下面，我們可以提供一個下載鏈接 ，或嵌入視頻的 Flash 版本代替。 controls 和 preload 屬性就會在下面提及。 十八、視頻預(yù)載 (Preload Videos) 預(yù)載屬性不完全是你想的那個樣子，雖然，你應(yīng)該先決定是否要在瀏覽器預(yù)裝的視頻。如果訪問者訪問一個專門展示了一個視頻的頁面，你一定要預(yù)載的視頻，節(jié)約參觀者等待的一部分時間。我更喜歡后者的解決方案，它少了一點多余的東西。為了渲染出播放控制條，我們必須在 video 元素內(nèi)指定 controls 屬性。 二十、正則表達式 你發(fā)現(xiàn)自己多久匆匆編寫一些正則表達式驗證一個特定的文本 。 form action= method=get label for=username姓名 :/label input id=username name=username type=text placeholder=410 個英文字母 pattern=[AZaz]{4,10} required=required autofocus / button type=submit提 交/button /form 如果你熟悉正則表達式，那么應(yīng)該清楚 [AZaz]{4,10}表示接受 410 位不區(qū)分大小寫的英文字母。如下圖所示。 如果您對正則表達式概念模糊了，可以參見這里。恩，不錯的觀點，事實上我們是有幾種方法的，這里我們討論 2 個。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用 pattern 的屬性，我們可以添加一小段 JavaScript 到我們的頁面上： alert( 39。 in (39。) )。 jQuery 庫了利用這種伎倆。如果是，瀏覽器則支持此功能。 script if (!39。 in (39。) ) { // do client/server side validation } /script 謹記此方法依賴于 JavaScript。此標簽包裹的字符串應(yīng)該與用戶當(dāng)前的行動相關(guān)聯(lián)。 h3 搜索結(jié)果 /h3 p 我很喜歡《零秒出手》里面那個拉小提琴的女孩，原來她叫做 mark北川景子/mark?，F(xiàn)在我們可以使用 header, article, section, 和footer，還有機會使用 div?嗎？當(dāng)然可以。 例如，如果你發(fā)現(xiàn)你需要包裹一段代碼塊在對內(nèi)容定位處理的包裝單元內(nèi)。 二十四、什么可以開始立即使用 一直談?wù)摰浆F(xiàn)在的 HTML5 要到 2022 年才能全部完成，許多人完全忽視它，這是個巨大的錯誤。在今天的視頻快速展示的技巧中，我將告訴你一些可用的選項。 二十五、哪些不是 HTML5(What is Not HTML5) 那些僅憑自己的假設(shè)形象將 JavaScript 變少的過渡被全部歸為 HTML5 的人是可以理解的，嘿，甚至蘋果無意中推動這一想法。不過，對于我們來說，盡管它可能只是語義，重要的是要準確理解什么不是 HTML5。 CSS3:不是 HTML5，它是? CSS。 Client Storage(客戶端存儲 ):非 HTML5，雖說有一點切合，但被排除在規(guī)范之外，原因在于，擔(dān)憂其作為一個整體，會變得過于復(fù)雜。 Web Sockets:不是 HTML5，同樣的，有著自己的一套準則。事實上，不少這些分支規(guī)范的管理著還是同一人。然而，以前，我們可能會這樣： h1 id=someId customAttribute=value 小樣，膽兒挺肥的呢 /h1 ?校驗器會小題大做！但是現(xiàn)在，只要我們以” data”為前綴定義我們的自定義屬性，盜版屬性立馬變成正牌的了。 HTML 片段 div id=myDiv datacustomattr=My Value 巴拉巴拉， lady 嘎嘎 /div 檢索自定義屬性的價值 var theDiv = (39。)。datacustomattr39。 alert(attr)。 position: relative。 } .data_custom:hover:after { content: attr(datahoverresponse)。 position: