新聞中心
經(jīng)歷了12年之久,萬維網(wǎng)的核心語言(HTML或超文本標記語言)終于迎來了HTML5主要修訂版本。雖然萬眾期待的版本仍處于測試階段并且沒有宣布正式推出的日期,HTML5的網(wǎng)頁設(shè)計師和程序員已經(jīng)就有關(guān)最新功能展開了熱烈討論。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、科爾沁右翼前網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為科爾沁右翼前等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
根據(jù)W3C,HTML5新特性的目的是在改善嵌入諸如視頻的多媒體支持,提供更好的用戶體驗和更簡單的編程。雖然HTML4中已經(jīng)取得了巨大成功,(甚至被認為最成功的標記格式已經(jīng)發(fā)布)在互聯(lián)網(wǎng)世界的每個人都耐心等待,瀏覽器更新時得到最新的HTML版本。隨著時間推移,人們都很納悶,還等什么呢?事實上HTML5已經(jīng)被很多瀏覽器支持,比如Safari, Chrome, FireFox, Opera,以及其他主流瀏覽器。即使是IE9也準備好了支持新的HTML5。HTML5的好處是,它是向后兼容的,因而,如果你樂于更新你的網(wǎng)站,現(xiàn)在你就可以。只是有幾個瀏覽器不完全兼容HTML5。
升級到HTML5是相當容易的,因為它與HTML4兼容。事實上,我們沒有理由摒棄HTML4的所有,因為HTML5只是一個簡單的增加一堆新而酷的功能添加到HTML4核心語言。升級(如果你是這樣認為)到HTML5是非常簡單的。你所需要做的的是修改你的DOCTYPE。這種新的更新有助于讓事情變得簡單,而在HTML4中有你可以使用不同的文檔類型,使得這一點更加棘手。你現(xiàn)在就可以更新你所有的網(wǎng)站,它們不會崩潰,因為所有HTML4的標簽在HTML5還是100%支持的。
HTML5的表單定義了十幾個新的輸入類型和特性,這些新增元素可以讓程序員可以過個好日子。
輸入框占位符
我覺得這是HTML5新特性中我最愛的。所有開發(fā)人員都使用JavaScript和jQuery做輸入框占位符,而在HTML5中,開發(fā)人員可以非常容易的顯示一個占位符。什么是占位符?占位符就是出現(xiàn)在輸入框的提示文本,當你點擊輸入欄位,它就自動消失。你可以把用戶應(yīng)該輸入的文本樣例在文本框提示出來。一個例子,如果你有一個電話號碼輸入框,你可以設(shè)置占位符(XXX)XXX - XXXX,點擊它們時就會消失。我相信你已經(jīng)看過很多。
支持情況如下(本人開發(fā)過Android,是支持的——譯者注)
IE FF Safari Chrome Opera iphone Android
- 3.7+ 4+ 4+ 11+ 4+ -
自動焦點事件
目前HTML4要做到自動焦點的方式是使用JavaScript把焦點放在一個表單的第一個輸入字段。HTML5只要加載一個網(wǎng)頁,網(wǎng)頁自動將焦點移到特定的輸入框,和JavaScript一樣。區(qū)別是什么?由于現(xiàn)在只是一個HTML標記,用戶可以很容易地在他們的瀏覽器禁用此屬性。并非所有瀏覽器都支持 自動對焦功能,但瀏覽器不只是簡單地忽略該屬性。如果你想所有瀏覽器都行得通,只需添加新的HTML5自動對焦屬性,然后檢測瀏覽器是否支持自動對焦。如果可以就不必使用自動對焦的腳本,如果沒有的話,就要添加自動對焦的腳本。
支持情況
FF IE Safari Chrome Opera iphone Android
- 4+ 4+ 3+ 10+ - -
HTML新定義13個輸入類型
電子郵件
我要說的第一個輸入框是電子郵件地址。那些不支持新類型的舊版瀏覽器也只是把它們看作一個文本框,99%的用戶不會注意到這個變化,直到他們提交表單(此時會有表單驗證)。iPhone的用戶應(yīng)該知道在那些郵件地址的輸入框,當輸入@和a的時候會出現(xiàn)一個簡單容易的鍵盤。如果你用過iPhone,你懂的。
網(wǎng)址
再說說網(wǎng)址輸入框。如果需要輸入網(wǎng)址,期望輸入的就像http://www.mazingtech.com?,F(xiàn)在在網(wǎng)址類型輸入框會出現(xiàn)像iPhone里面一樣的一個可變化的虛擬鍵盤用戶可以很方便輸入斜線和.com。同樣的,在提交表單之前用戶對這些毫不知情。
數(shù)字
在過去要得到匹配的數(shù)字,你不得不使用jquery這樣的腳本來幫助驗證輸入。HTML5增加了數(shù)字類型。還增加了一些額外的屬性(可選):
Min:指定輸入框可接受的最小輸入數(shù)字。Max:你猜對了,就是允許輸入的最大數(shù)字。Step:屬性輸入域合法的間隔,默認是1.
如上圖,只允許輸入數(shù)字(大多數(shù)情況下不會注意到這些,直到提交的時候提示錯誤),只有0,2,4合法(6不合法因為step是10,合法的是0,10,20...——譯者注)。
Numbers as a Slider 數(shù)字滑動條
我覺得這個真酷。HTML5允許你使用一個新的類型叫range,輸入框變成一個滑動條。你的網(wǎng)站表單可以使用滑動條了,這很酷吧。它的屬性標記和數(shù)字類型一樣,只是把類型設(shè)置type='number'改成type='range'。
日歷表
迄今為止最好的新增元素,名為date和datetime的日期選擇器類型(還有其他額外的date/time類型,如時間,星期,月份,以及本地日歷)。很多JavaScript框架如jQuery UI和YIU已經(jīng)具備了這些控件,但增加一個日歷選擇器還是挺煩人的。HTML5定義一個新的本地日期選擇器,不必包括使用頁面上的腳本。截至目前,Opera是一個唯一完全支持此功能的,對于其他瀏覽器,你可以做一個備用腳本以備該瀏覽器不支持。不過,最終,所有的瀏覽器都會更新的。
搜索
HTML5增加了搜索輸入框類型。這沒什么,但對一些用戶來說是很好的變化。它可以簡單的把輸入框自動圓邊,當你開始輸入時,它右邊會有一個小X。目前并不是所有的瀏覽器支持。
顏色
HTML5還定義類型的顏色,它可以讓你選擇一種顏色,返回hexademical值。Opera11是唯一支持這種類型的瀏覽器。不過應(yīng)該不會有很多人使用這個類型,所以不支持也不是什么大問題。
表單驗證
上面我們談到有關(guān)這些新的輸入類型,如電子郵件,日期,數(shù)量等HTML5新元素中,最令人興奮的新特性莫過于表單驗證。大多數(shù)開發(fā)人員都做了表單驗證,無論是客戶端或服務(wù)器端(我們兩個都做?。?。也許HTML5的表單驗證器可能無法取代你的服務(wù)器端驗證,但它肯定能最終取代你的客戶端驗證。JavaScript驗證的問題是,用戶很容易繞過它,可以很容易繞過它只需禁用JavaScript?,F(xiàn)在HTML5,你不用有此擔心。下面是Chrome12的一個例子。所有的瀏覽器和操作系統(tǒng)對于錯誤有不同的顯示方式,不過這是一個例子,讓你看清錯誤可能發(fā)生的樣子。
所有的錯誤都是HTML5原生提示的,并沒有使用JavaScript。
IE FF Safari Chrome Opera Iphone Andriod
- 4+ 5+ 10+ 9+ - -
必需字段
HTML5的表單驗證并不僅僅局限于驗證字段的類型,它還允許調(diào)用一個新的額外的標記,required。這個新屬性允許開發(fā)人員驗證輸入框是否填寫,無需使用JavaScript。
每個開發(fā)人員都知道這些更新對縮短開發(fā)周期和增強的用戶體驗都是至關(guān)重要。一旦所有的瀏覽器接受了HTML5,新一代的網(wǎng)站將超過任何人的期望。
那么你有了它。你可以HTML5中找到一個快速入門指南。如果你可以理解這篇文章的任何東西,請記住,HTML5不是什么可怕的麻煩。它將大大有助于開發(fā)者,而只要你有準備所有HTML4網(wǎng)站已經(jīng)可以升級了!
當前文章:全新改進的HTML5表單創(chuàng)建
分享鏈接:http://www.dlmjj.cn/article/cdeiidg.html


咨詢
建站咨詢
