使用Html5+CSS3的優點

時間 2019-11-24

原文原文鏈接

一：大多瀏覽器支持，低版本也沒問題
    我看點這方面的資料，是爲了作手機應用網站（有三個方案，這個是備用方案），能夠開發響應式網站，能夠脫離開發平臺進行跨平臺。
    在Html5網頁中引入Modernizr，就能讓IE支持HTML5新元素。
    HTML5樣板文件快速開發（html5boilerplate.com）

二：佈局、標籤省時省力
[html] view plaincopyprint?在CODE上查看代碼片派生到個人代碼片

<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版&&移動版網頁+手遊開發)」課程，能總本質上給你帶來幫助，今後踏入跨平臺的程序後行列！html