//zxx:如下爲翻譯全文,本着語言生動和本土化之原則,內容有編輯javascript
注意:每週有那麼幾回,此列表會更新一些新的竅門,最終,本文會成爲超級有用的資源。
//zxx:醜話說在前頭,我可沒功夫更新,因此,即便到您女兒出嫁那天,本文仍是28項內容css
前端的發展如此之迅猛,一不留神,大俠你可能就會被遠遠地甩在後面了。若是你不想被HTML5的改變/更新攪得不知所措的話,能夠把本文的內容做爲必須瞭解的熱身課程。html
仍在使用麻煩的,不可能記得住的XHTML文檔類型?前端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
若是是,爲何還在用呢?使用新的HTML5文檔類型代替吧。你會活得更久的——正如Douglas Quaid說的html5
<!DOCTYPE html>
我就琢磨着,爲了HTML5搞個這廝代碼,您可能會對這段代碼究竟靠不靠譜表示懷疑。不用擔憂,現在這是可行的,只有老的瀏覽器須要一個特定的 doctype(文檔類型)。瀏覽器若是不知道doctype,就會很簡單的以標準模式對包含的標籤進行渲染。因此,妹妹你大膽的向前衝,把當心謹慎都拋 到九霄雲外,去擁抱新的HTML5文檔類型吧。java
看看下面給圖片添加的標示:react
<img src="path/to/image" alt="About image" /><p>Image of Mars. </p>
文字裹在p標籤裏,與img標籤各行其道,很難讓人聯想到這就是標題。HTML5經過採用<figure>
元素對此進行了改正。當合<figcaption>
元素組合使用時,咱們就能夠語義化地聯想到這就是圖片相對應的標題web
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
還在不久前,<small>
元素被用來建立靠近logo且相關的副標題。這是個頗有用的表現元素,可是,如今,這種用法可能就不正確了。<small>
元素已經被從新定義了,指小字,於是更具可用性。試想下你網站底部的版權狀態,根據對此元素新的HTML5定義,<small>
能夠正確地包裹這些信息。ajax
small元素專指「小字」。正則表達式
您可能如今仍在給link和script標籤增長type屬性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
這已是老黃花菜,非必需品了。這意味着,這些標籤都各自指向樣式表和腳本。所以,咱們能夠把type屬性一塊兒幹掉。
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
<p class=myClass id=someId> Start the reactor.
對此取捨你還得本身拿主意。若是你更傾向於結構化的文檔,就算天塌下來,也要把引號緊緊拽在懷裏。
最新的瀏覽器有個很讚的新屬性能夠應用到元素上,叫作contenteditable
。顧名思意,就是容許用戶編輯元素內容包含的任意文本,包括子元素。相似的用途還有不少,像是簡單的待辦事項清單應用程序,可大大利用其本地存儲的優點。
<ul contenteditable="true"> <li>悼念遇難香港同胞 </li> <li>深圳特區30週年</li> <li>伊春空難</li> </ul>
或者,根據前面所學到的一些技巧,咱們能夠把它寫成:
<ul contenteditable=true>
您能夠狠狠地點擊這裏:HTML5內容可編輯demo
若是咱們給表單輸入框應用名爲」email」的type屬性,咱們能夠命令瀏覽器只容許符合有效的電子郵件地址結構的字符串。沒錯,內置表單驗證即 將到來,因爲一些顯而易見的緣由,咱們還不能100%依賴內置驗證,較舊的瀏覽器不認識這個」email」型,它們會簡單地退回到普通文本框。
<form action="" method="get"> <label for="email">郵箱:</label><input id="email" name="email" type="email" /> <button type="submit">肯定</button> </form>
您能夠狠狠地點擊這裏:HTML5郵箱內置驗證demo
//zxx:經我小測了下,貌似僅在Chrome瀏覽器下有效果(xp系統),當輸入內容不是合法郵箱格式,點擊「肯定」按鈕是沒有反應的;當輸入爲合法郵箱,點擊「肯定」按鈕纔會提交刷新頁面。
還應當指出,當談到哪些元素和屬性支持和不支持時,當前全部的瀏覽器都有點靠不住的。例如,Opera彷佛支持電子郵件驗證,但僅在name屬性被指定的時候。並且,它不支持佔位符屬性,這個咱們將會在後面學到。底線是不依賴於這種形式的驗證…但你仍然可使用它!
Placeholders什麼意思呢,就是文本框/文本域空間默認會有個文字提示,得到焦點時,此提示文字消失;失去焦點時若是內容爲空,提示文字又出現。以下圖所示:
這些表單控件裏面顯示的些提示性的文字就是佔位符。按照以往的作法,咱們須要使用一點JavaScript代碼實現佔位符效果,例如我以前的「文本框/域文字提示自動顯示隱藏jQuery小插件」一文所展現的。固然,你須要設定一個初始的默認的value值,而後根據輸入內容進行判斷,從而決定文本框值的改變與否。若是您使用佔位符(placeholders)屬性,一切就輕鬆了。
<label for="email">郵箱:</label> <input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
根據個人測試,目前僅webkit核心的瀏覽器支持placeholders屬性,像是Chrome5,Safari4,結果以下所示:
您能夠狠狠地點擊這裏:HTML5佔位符Demo
//zxx:根據視頻內容,我本身作了個demo,關於本地存儲的。
您能夠狠狠地點擊這裏:HTML5本地存儲Demo
IE8瀏覽器已經支持了本地存儲,以下截圖所示:
儘管顯然不支持全部的瀏覽器,咱們能夠在Internet Explorer8時,Safari 4和Firefox 3.5下期待此工做方式。請注意,爲了彌補舊的瀏覽器將沒法識別本地存儲,你應該先測試,以肯定window.localStorage是否存在。
那些過往的日子:
<div id="header"> ... </div> <div id="footer"> ... </div>
div嘛,很天然的,沒有語義化的結構——即便在應用了id後。如今,經過HTML5,咱們可使用<header>和<footer>元素。以上的代碼能夠替換成:
<header> ... </header> <footer> ... </footer>
它徹底適合您有多個頁眉和頁腳的項目。
儘可能不要混淆」header」和」footer」這些元素。他們只是指他們的容器。所以,將博客底部的,例如,元信息放在footer元素內部是說得通的。這一樣也適用於header。
經過下面視頻學習更多有用的HTML5表單特徵:
不幸的是,討厭的IE瀏覽器須要動點小手術才能理解新的HTML5元素。
全部元素,默認的,都有個inline的display
爲了確保全部新的HTML5元素能以block水平的元素正確地渲染,有必要對其作以下定義:
header, footer, article, section, nav, menu, hgroup { display: block; }
不幸的是,IE仍舊忽略這些樣式,由於它不知道這些標籤從哪裏來的,比如是header元素。幸運的是,有一個簡單的解決辦法:
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu");
奇怪的是,這段代碼彷佛觸發IE瀏覽器。爲了更簡單將此應用到每一個新的應用過程當中,雷米夏普(Remy Sharp)建立了一個腳本,一般稱爲HTML5 shiv。該腳本一樣修復了些顯示問題。
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>
表單容許新的必要屬性,用來指定是否須要特殊的input。這取決於你的代碼偏好,你能夠如下面兩種方式之一申明此屬性。
<input type="text" name="someInput" required>
或者,使用更結構化的方法:
<input type="text" name="someInput" required="required">
兩種方法都行。有了這個代碼,而且瀏覽器支持此屬性,若是「someInput」文本框是空白,則表單不會被提交。下面是一個簡單的例子,咱們還將添加佔位符屬性,由於沒有理由不這樣作。
<form action="" method="get"> <label for="name">姓名:</label> <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" /> <button type="submit">提交</button> </form>
您能夠狠狠地點擊這裏:HTML5必要屬性Demo
若是input裏面內容是空白,則表單提交的時候,文本框會高亮顯示。//zxx:貌似僅在Chrome瀏覽器下有點小效果
一樣,HTML5的解決方案消除了對JavaScript的須要。若是一個特定的輸入應該是「選擇」,或有重點的,默認狀況下,咱們如今能夠利用自動獲取焦點屬性。
<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>
有趣的是,雖然我我的更傾向於喜歡XHTML的方法(用引號,等等),寫做「autofocus=autofocus」讓人感到有點怪。所以,咱們將堅持使用單一關鍵字的方法。
咱們無需再依賴第三方插件區渲染音頻。HTML5提供了<audio>
元素,嗯,至少,最終,咱們將沒必要擔憂這些插件。就目前,只有最近期的的瀏覽器提供HTML5音頻支持。在這個時候,它仍然是一個很好的作法提供一些向後兼容的形式。
<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio>
Mozilla和WebKit的尚未徹底相處,當涉及到音頻格式, Firefox會但願看到一個.ogg文件,而WebKit的瀏覽器支持.mp3擴展。這意味着,至少在如今,你應該建立兩個版本的音頻。
當Safari加載頁面時,它不會認可.ogg格式,會跳過它並移動到的MP3版本,所以。請注意IE,每往常同樣,不支持這些格式,Opera 10和以及如下版本只能使用.wav文件。
與<audio>
元素很相似,在新的瀏覽器中也存在Video!事實上,就在最近,YouTube宣告了新的HTML5視頻嵌入, 固然,是爲支持此功能瀏覽器。由於HTML5的規範沒有指定特定的視頻編解碼器,它留給了瀏覽器來決定。雖然Safari和Internet Explorer9能夠預期支持H.264格式的視頻(其中Flash播放器能夠播放),Firefox和Opera是堅持開源Theora 和Vorbis格式。所以,當顯示HTML5的視頻,您必須提供這兩種格式。
<video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video>
還有一個值得注意的一些事情:
預載屬性不徹底是你想的那個樣子,雖然,你應該先決定是否要在瀏覽器預裝的視頻。是否有必要?或許吧。若是訪問者訪問一個專門展現了一個視頻的頁 面,你必定要預載的視頻,節約參觀者等待的一部分時間。影片能夠經過設置 preload=」preload」或是簡單地添加preload進行預載。我更喜歡後者的解決方案,它少了一點多餘的東西。
<video preload>
若是你使用過上面的每個提到的技術點,你可能已經注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。爲了渲染出播放控制條,咱們必須在video元素內指定controls屬性。
<video preload controls>
請注意,不一樣瀏覽器渲染出來的進度條的模樣都是不同的。
你發現本身多久匆匆編寫一些正則表達式驗證一個特定的文本。多虧了新的pattern屬性,咱們能夠在標籤處直接插入一個正則表達式。
<form action="" method="get"> <label for="username">姓名:</label> <input id="username" name="username" type="text" placeholder="4-10個英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus /> <button type="submit">提交</button> </form>
若是你熟悉正則表達式,那麼應該清楚[A-Za-z]{4,10}
表示接受4-10位不區分大小寫的英文字母。若是瀏覽器支持pattern屬性,則提交表單時,若是文本框中的內容不符合其正則表達式,文本框會高亮顯示。以下圖所示。
您能夠狠狠地點擊這裏:HTML5正則表達式Demo
//zxx:我本身小測了下,貌似目前只在Chrome下有效(win系統)
注意到,咱們已經開始組合使用這些很棒的屬性。
若是您對正則表達式概念模糊了,能夠參見這裏。
若是咱們沒有方法檢測瀏覽器是否支持這些屬性,這些就不能稱之爲好的屬性。恩,不錯的觀點,事實上咱們是有幾種方法的,這裏咱們討論2個。第一個是利用優秀的Modernizr庫,或者,咱們能夠建立和分析這些元素,以肯定瀏覽器的能力。例如,在咱們前面的例子,若是咱們要肯定瀏覽器是否能使用pattern的屬性,咱們能夠添加一小段JavaScript到咱們的頁面上:
alert( 'pattern' in document.createElement('input') ); // boolean
事實上,這是一種肯定瀏覽器兼容的經常使用方法。jQuery庫了利用這種伎倆。在上面,咱們建立了一個新的input元素,並肯定了裏面的pattern屬性瀏覽器是否定得。若是是,瀏覽器則支持此功能。不然,固然就不支持了。
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation }
</script>
謹記此方法依賴於JavaScript。
試想<mark>
元素做爲高亮。此標籤包裹的字符串應該與用戶當前的行動相關聯。例如,我在一些博客上搜索「北川景子」,我就可使用一些JavaScript將當前的每一個結果字符串用mark標籤包裹。
<h3> 搜索結果 </h3> <p> 我很喜歡《零秒出手》裏面那個拉小提琴的女孩,原來她叫作 <mark>北川景子</mark>。 </p>
咱們有些人開始質問到底什麼時候該使用div。如今咱們可使用header, article, section, 和footer,還有機會使用div…嗎?固然能夠。
div應該用在沒有更好的元素的時候。
例如,若是你發現你須要包裹一段代碼塊在對內容定位處理的包裝單元內。不過若是你是包裹一個博客文章,或者,多是,底部的連接列表,則需考慮分別使用<article>和<nav>元素,由於其更具語義。
二十4、什麼能夠開始當即使用
一直談論到如今的HTML5要到2022年才能所有完成,許多人徹底忽視它,這是個巨大的錯誤。事實上,有少許的HTML5的功能,咱們能夠在咱們全部的項目中使用!更簡單,更乾淨的代碼老是一件好事。在今天的視頻快速展現的技巧中,我將告訴你一些可用的選項。
那些僅憑本身的假設形象將JavaScript變少的過渡被所有歸爲HTML5的人是能夠理解的,嘿,甚至蘋果無心中推進這一想法。對於非開發人 員,誰管這個呢,它是一個簡單的方法適用於現代網頁標準。不過,對於咱們來講,儘管它可能只是語義,重要的是要準確理解什麼不是HTML5。
無論你需求有多大的區別,全部這些技術能夠歸爲現代網絡堆棧。事實上,很多這些分支規範的管理着仍是同一人。
咱們如今能夠很正式地讓全部的HTML元素支持自定義屬性。然而,之前,咱們可能會這樣:
<h1 id=someId customAttribute=value> 小樣,膽兒挺肥的呢 </h1>
…校驗器會小題大作!可是如今,只要咱們以」data」爲前綴定義咱們的自定義屬性,盜版屬性立馬變成正牌的了。若是你發現你曾經把一個重要的數據附加在諸如class的屬性上,可能爲了JavaScript之用,那麼,本屬性將大有幫助啊。
HTML片斷
<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉,lady 嘎嘎 </div>
檢索自定義屬性的價值
var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value
此屬性還能夠用在CSS中,例以下面這個有些傻里傻氣的CSS文字改變的例子:
CSS代碼: .data_custom { display:inline-block; position: relative; } .data_custom:hover { color: transparent; } .data_custom:hover:after { content: attr(data-hover-response); color: black; position: absolute; left: 0; }
HTML代碼: <a class="data_custom" data-hover-response="我說過不要碰我!" href="#">不要碰我,雅蠛蝶~~</a>
若是你的瀏覽器支持after僞類,以及content的attr屬性,則能夠看到相似下面的效果(IE8不同):
要查看上圖所示的效果,您能夠狠狠地點擊這裏:CSS與HTML5自定義屬性demo
還有,content屬性實際上是一個很是強大的屬性,因爲低版本的IE不支持,因此此屬性還沒有流行,關於content內容生成技術,能夠參見我以前的「CSS content內容生成技術以及應用」這篇文章。
正如你可能預料到的,output元素被用來顯示部分計算,例如,若是你想顯示一個鼠標的位置,或者是一系列數字的總和座標,這個數據應被插入到output元素中。
舉個簡單的例子,當提交按鈕被按下,咱們用JavaScript將兩個數字相加值插入到空的output中。
<form action="" method="get"> <p> 10 + 5 = <output name="sum"></output> </p> <button type="submit">計算</button> </form> (function() { var f = document.forms[0]; if ( typeof f['sum'] !== 'undefined' ) { f.addEventListener('submit', function(e) { f['sum'].value = 15; e.preventDefault(); }, false); } else { alert('你的瀏覽器還沒有準備好!'); } })();
本身測試了下,貌似如今只有在Opera瀏覽器下有上佳的效果:
若是您如今使用的是較新版本的Opera瀏覽器,您能夠狠狠地點擊這裏:HTML5結果輸出框demo
此元素也能夠接受一個屬性,它反映了輸出相關元素的名稱,相似label工做原理。
HTML5引進了range
類型的input。
<input type="range">
最值得注意的是,它能夠接收 min, max, step, 和value 屬性,等等。雖然如今彷佛只有Opera瀏覽器充分支持這種輸入類型,可是當咱們能夠實際使用時,這將是美妙無比的!
參見下面的快速演示:
第一步:標籤
<form method="post"> <h4>音量控制</h4> <input type="range" name="range" min="0" max="10" step="1" value="" /> <output name="result"> </output> </form>
input { font-size: 14px; font-weight: bold; } input[type=range]:before { content: attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;} output { display: block; font-size: 5.5em; font-weight: bold; }
(function() { var f = document.forms[0], range = f['range'], result = f['result'], cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; // 檢測瀏覽器是不是足夠酷 // 識別range input. var o = document.createElement('input'); o.type = 'range'; if ( o.type === 'text' ) alert('很差意思,你的瀏覽器還不夠酷,試試最新的Opera瀏覽器吧。'); // 設置初始值 // 不管是否本地存儲了,都設置值爲5 range.value = cachedRangeValue; result.value = cachedRangeValue; // 當用戶選擇了個值,更新本地存儲 range.addEventListener("mouseup", function() { alert("你選擇的值是:" + range.value + ". 我如今正在用本地存儲保存此值。在現代瀏覽器上刷新並檢測。"); localStorage ? (localStorage.rangeValue = range.value) : alert("數據保存到了數據庫或是其餘什麼地方。"); }, false); // 滑動時顯示選擇的值 range.addEventListener("change", function() { result.value = range.value; }, false); })();
您能夠狠狠地點擊這裏:HTML5 range input炫酷效果demo
個人電腦是xp系統,默認主題,在滑塊鬆開後Opera下的效果以下圖所示,酷吧:
感謝您的閱讀!咱們已經討論了不少,但可能只是觸及到HTML5的皮毛,全當拋磚引玉,但願能對您的學習有所幫助!
//zxx:以上是翻譯/編輯的所有內容,內容已經夠多了,我就很少說什麼了。
原創文章,轉載請註明來自 張鑫旭-鑫空間-鑫生活[ http://www.zhangxinxu.com]