爲什麼使用Html5+CSS3

時間 2019-11-24

標籤爲什麼使用 html5+css3 html css 欄目 HTML5 简体版

原文原文鏈接

一：大多瀏覽器支持，低版本也沒問題html

我看點這方面的資料，是爲了作手機應用網站（有三個方案，這個是備用方案），能夠開發響應式網站，能夠脫離開發平臺進行跨平臺。html5

在Html5網頁中引入Modernizr，就能讓IE支持HTML5新元素。web

HTML5樣板文件快速開發（html5boilerplate.com）正則表達式

二：佈局、標籤省時省力瀏覽器

<header>
<nav>導航</nav>
</header>

這樣開發者就不用標記標籤的結束位置了，定位時會很方便，也易於搜索引擎進行判斷。app

<header>定義頁面或區段的頭部；ide

<footer>定義頁面或區段的尾部；佈局

<nav>定義頁面或區段的（主）導航區域；post

<section>頁面的邏輯區域或內容組合，好比一個用於「簡介」，另外一個用於「新聞列表」。字體

<article>定義正文或一篇完整的內容，能被直接粘貼到別的地方有獨立意義，好比「博客正文」。

<aside>定義補充或相關內容，側邊欄，廣告欄等。

<a>標籤能夠包含多個標籤

<a href="index.html"><h2>一</h2><img src="home.jpg"></a>

<vedio>、<audio>快速添加視頻、音頻

<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 //針對列表的首尾項

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>
<head>
<style>
a
{
background-color:red;
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）

03.使用透明通道

<style>
body{
background:url(01.jpg) no-repeat;
}
#wrapper{
background-color:hsla(100,100%,100%,0.7);/*HSL是360度色相環*/
width:500px;
height:500px;
}
</style>
</head>
<body>
<div id="wrapper">
透明區域
</div>
</body>

04文字陰影

[html] view plain copy

text-shadow:5px 5px 2px #333; //（正負）右、下、陰影程度、顏色

浮雕效果：

[html] view plain copy

<head>
<style>
#wrapper{
height:500px;
background-color:ActiveBorder;
text-shadow:0px 1px 0px hsla(0,0%,100%,0.75);
font-size:30px;
}
</style>
</head>
<body>
<div id="wrapper">
浮雕效果
</div>
</body>

同理可使用盒陰影box-shadow給照片加陰影
05顏色漸變

[html] view plain copy

background:linear-gradient(90deg,red 0%,blue 50%,#ffffff 100%);

能夠控制線性漸變方向漸變位置等，還有徑向（球狀）漸變
06文字2D變形

代碼參數比較多，在網站 http://www.useragentman.com/matrix/ 進行製做吧

以外還有圖片3D效果，貌似用得還很少。http://webdesignerwall.com/ 這裏有不少很酷的關於這方面的內容，我還特別在裏面找了一篇文章翻譯出來了：http://blog.csdn.net/wowkk/article/details/12572447

最後說下表單的優點，HTML5能夠在不借助jQuery的狀況下，對用戶的輸入行爲進行判斷（某些瀏覽器對HTML5表單支持也不是很好，能夠經過Webshims Lib來解決）。

<head>
<style>
/*僞選擇器*/
.input:required /*若是沒有填入必填項，則邊框變紅色*/
{
border:1px solid #f00;
}
.input:focus:invalid /*若是填入的數據無效時*/
{
}
.input:focus:invalid /*若是填入的數據正確時*/
{
}
</style>
</head>
<body>
<form method="post">
<div>
<label for="userName">請輸入用戶名</label>
<input id="userName" type="text" placeholder="例如:Admin" required aria-required="true" autofocus />
<!--placeholder表示提示輸入
required aria-required="true"表示爲必填項；
autofocus表示自動獲取到光標焦點
pattern屬性能夠填正則表達式，能夠斷定用戶的輸入行爲
-->
<input type="search" value="與text差很少，部分瀏覽器表現比較強悍" />
<input type="submit" value="肯定" />
</div>
</form>
</body>