盤點使用Html5+CSS3的優勢

everclub發表於2015-02-11
一:大多瀏覽器支援,低版本也沒問題
    我看點這方面的資料,是為了做手機應用網站(有三個方案,這個是備用方案),可以開發響應式網站,可以脫離開發平臺進行跨平臺。
    在Html5網頁中引入Modernizr,就能讓IE支援HTML5新元素。
    HTML5樣板檔案快速開發(html5boilerplate.com)

二:佈局、標籤省時省力   
[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片

<header>  

    <!--語義相當於<div class="header">-->  

    <nav>導航</nav>  

</header>  

這樣開發者就不用標記標籤的結束位置了,定位時會很方便,也易於搜尋引擎進行判斷。
<header>定義頁面或區段的頭部;
<footer>定義頁面或區段的尾部;
<nav>定義頁面或區段的(主)導航區域;
<section>頁面的邏輯區域或內容組合,比如一個用於“簡介”,另一個用於“新聞列表”。
<article>定義正文或一篇完整的內容,能被直接貼上到別的地方有獨立意義,比如“部落格正文”。
<aside>定義補充或相關內容,側邊欄,廣告欄等。
<a>標籤可以包含多個標籤
[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片
<a href="index.html"><h2>一</h2><img src="home.jpg"></a>  

<vedio>、<audio>快速新增視訊、音訊
[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片

<video src="myVideo.ogg" controls width="640" height="480">這裡提示你沒有使用支援HTML5的瀏覽器</video> //controls播放控制欄;支援ogg和mp4格式;響應式視訊:普通情況可以使用max-width:100% height:auto,如果是外部<iframe>視訊,則使用FitVids的jQuery外掛  

三:離線Web應用
    通過.manifest檔案指定哪些檔案可以離線訪問的

四:更靈活的CSS3
01.可以多欄顯示文字
column-width:12em; //試了幾個瀏覽器好像很多無效的~

02.眾多選擇器
body[id="2^"]{}  //id為"2"開頭的標籤
li:first-child 、 li:last-child  //針對列表的首尾項

[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片

li:nth-child(2n+1)//第“1”個li元素起,每“2”個顏色為紅色          
 
        color: red;  

    }    

<ul>  

    <li>һһһһһ</li>  

    <li>22222222</li>  

    <li>33333333</li>  

</ul>  

p::first-line{color:red;} //第一行文字為紅色

五:更豐富CSS3
傳統CSS實現圓角、陰影等效果,一般要藉助圖片來實現,使用CSS3代替圖片,可以有效減少http請求,取得更快的網頁載入速度。不同瀏覽器對不同的CSS特性可能要使用不同的程式碼,可以使用前處理器SASS或LESS才處理。
01.CSS3輕鬆應用邊框圓角

[html] view plaincopyprint?在CODE上檢視程式碼片派生到我的程式碼片

<html>  

<head>  

    <style>  

        a  

        {  

             
            border-top-left-radius:8px;/*圓角位置和大小*/  

            border-top-right-radius:8px;  

            padding:0.8em;  

        }  

    </style>  

</head>  

<body>  

    <br />  

    <a href="#">圓角</a>  

</body>  

</html>  

02.可以使用@font-face嵌入網頁字型,還可以使用可縮放的ICON(非圖片格式,fico.lensco.be)

 補充:
使用HTML5 Boilerplate來寫HTML5網站,它帶有組織好的資料夾結構和CSS檔案,加入當前編碼的最佳實踐、瀏覽器的bug修復以及js庫。

怎麼樣,優勢明顯,但是如果想真正入門的話,還是建議學一下北風網推出的 “跨平臺開發技術-HTML5+CSS3從入門到精通(配兩實戰專案,兼顧PC版&&移動版網頁+手遊開發)” 課程,能總本質上給你帶來幫助,從此踏入跨平臺的程式後行列!

相關文章