盤點使用Html5+CSS3的優勢
一:大多瀏覽器支援,低版本也沒問題
我看點這方面的資料,是為了做手機應用網站(有三個方案,這個是備用方案),可以開發響應式網站,可以脫離開發平臺進行跨平臺。
在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版&&移動版網頁+手遊開發)” 課程,能總本質上給你帶來幫助,從此踏入跨平臺的程式後行列!
我看點這方面的資料,是為了做手機應用網站(有三個方案,這個是備用方案),可以開發響應式網站,可以脫離開發平臺進行跨平臺。
在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版&&移動版網頁+手遊開發)” 課程,能總本質上給你帶來幫助,從此踏入跨平臺的程式後行列!
相關文章
- 《HTML5+CSS3入門經典》——1.2 HTML5的優勢HTMLCSSS3
- 高匿代理的三點優勢
- JSON的特點和優勢JSON
- iOS notification的優勢及缺點iOS
- 盤點:光通訊的五個發展趨勢
- 使用代理進SEO的優勢
- 企業網盤替換FTP的3大優勢FTP
- 投影沙盤的應用都具備哪些優勢
- Fish Shell 的使用特性和優勢
- 使用 Laravel 服務容器的優勢Laravel
- 數字沙盤的應用都具備哪些優勢
- 盤點:QuickTime Player 鍵盤快捷鍵和手勢大全UI
- 2019年中AI趨勢盤點AI
- div+css特點與優勢CSS
- 區塊鏈點對點交易系統的優勢有哪些?區塊鏈
- 2019盤點 | 人工智慧熱門趨勢也來盤一盤人工智慧
- 沉浸式投影的應用特點及優勢
- 大資料分析的優勢有哪些特點大資料
- 反射記憶體卡的優勢與特點反射記憶體
- 淺析每日使用代理IP的優勢
- 使用線上教育SaaS系統的優勢
- 旅行社使用代理IP的優勢
- 盤點:網際網路大廠端午禮盒的優缺點
- 【盤點】Linux相比其他作業系統的5個優點!Linux作業系統
- 盤點使用代理的諸多用途
- 企業使用物件儲存有什麼優勢?這5點要知道!物件
- Spring 的優秀工具類盤點第 1 部分Spring
- 使用css框架的優缺點CSS框架
- 一、掃碼點餐小程式的開發優勢
- 服裝ERP系統的優勢與缺點
- 租用雲伺服器有哪些優勢?重點關注這5種優勢!伺服器
- 如何使用Python的類? 優勢有哪些?Python
- 使用代理進行抓取的四個優勢
- Go的優勢Go
- Docker的優勢Docker
- WebSocket有什麼優勢?有哪些特點?Web
- 企業雲盤的檔案管理優勢體現在什麼地方
- 城市規劃沙盤的製作都具備哪些應用優勢