我們來一起看看新的html5有什麼新的特性和使用技巧吧。如果你對html5還不是很了解,那麼下面這些內容可以幫你快速高階。
1、新的doctype
還在用下面這個長的根本沒法記住的doctype嗎?
如果是,那麼趕緊使用新的吧。
事實上,html5根本不需要這個東西,這是用來給瀏覽器相容用的,如果瀏覽器不認識乙個doctype,那麼他會使用標準模式來解析。所以,沒什麼好擔心的,儘管用吧。
2、figure元素
image of mars.
this is an image of something interesting.
3、重定義了
以前我還用這個標籤來顯示logo下面的小字,這是個不錯的表示標籤,但是現在,這就是不推薦的做法了。這個標籤被重定義了,用來表示用於列印的小字型了。
4、script和 link標籤都不再有type屬性了
以前的這種寫法都不是必須的了,可以省去type屬性。
5、要不要引號都無所謂了
start the reactor.
html5不是xhtml,沒有那麼嚴格的要求,加不加引號看你自己了。
6、讓你的內容成為可編輯的
新的瀏覽器的contenteditable屬性非常不錯,可以讓你的元素成為可編輯的,這些可以用在一些 todo list之類的應用上,然後呼叫本地儲存。使用這個屬性的元素和他的子元素都會獲得這個特性。
7、email輸入框
我們可以給表單的輸入框賦予email屬性,這樣瀏覽器就能以email的合法格式來檢測輸入框的內容了。我們現在還不能100%的依附這個,因為一些舊的瀏覽器不支援email屬性,他只會把這當成是普通輸入框。要校驗格式還得靠自己。
8、輸入框的預設提示文字
以前,我們要給輸入框寫上提示文字,就得用js來控制,而html5現在支援這個特性了,只要這樣寫就可以了:
當然,現在還不是所有的瀏覽器都支援這個屬性,比如firefox和opera就不行,但是這也不影響什麼。
9、本地儲存
使用本地儲存,我們就可以讓瀏覽器記住我們的輸入,就算是重新整理或者關掉瀏覽器再開啟也無妨。
當然,並不是所有瀏覽器都支援這個特性,支援的有ie8,safari,firefox3.5+,對於那些老版的瀏覽器,應該使用window.localstorage檢驗一下是否支援。
10、語義化的header和footer
以前我們這樣寫:
......
使用了html5之後,就可以這樣寫了:
這裡可以檢視示例。
27、output元素
正如你所想的,output元素就是用來展示一些計算值的。比如你計算當前滑鼠的位置,或者一些數字的和,下面我們就來看看計算兩個數字和的例子:
對這個元素的支援還是有點挫的,上面這段**下,如果瀏覽器不支援output屬性,那麼就會彈出乙個對話方塊告知計算結果。
28、使用range input建立乙個幻燈片
現在只有opera完全支援range input的max,min,step和value屬性,為了快速說明,我們來看乙個例子。
html部分:
css部分:
body
input
input[type=range]:before
input[type=range]:after
output js部分:
(function() , false);
// display chosen value when sliding.
range.addeventlistener("change", function() , false);
})();
[color=blue][b]
**
開發人員必知的28個HTML5新特性及技巧
1 新的doctype 還在用下面這個長的根本沒法記住的doctype嗎?如果是,那麼趕緊使用新的吧。事實上,html5根本不需要這個東西,這是用來給瀏覽器相容用的,如果瀏覽器不認識乙個doctype,那麼他會使用標準模式來解析。所以,沒什麼好擔心的,儘管用吧。2 figure元素 看看下面的這個的...
開發人員必知的28個HTML5新特性及技巧
1 新的doctype 還在用下面這個長的根本沒法記住的doctype嗎?如果是,那麼趕緊使用新的吧。事實上,html5根本不需要這個東西,這是用來給瀏覽器相容用的,如果瀏覽器不認識乙個doctype,那麼他會使用標準模式來解析。所以,沒什麼好擔心的,儘管用吧。2 figure元素 看看下面的這個的...
Android開發人員必知的開發資源
在動手編寫第乙個 android 應用之前,用心讀一讀 android design 章節。尤其是以下的這些文章 那麼讀完了這些以後就能夠開始程式設計了麼?不,最好連以下的東西也一起讀 非常多 android 核心框架的project師。開發人員布道師以及 android 開發專家都會常常到stac...