HTML5 與 CSS3 新特性

原創 奔跑的前端er 2020-02-20 17:08

H5的新特性：

① 語義特性

HTML5賦予網頁更好的意義和結構。

HTML5 提供了定義頁面不同部分的新語義元素：

<article><aside><details><figcaption><figure><footer><header><main><mark><nav>
<section>:定義大塊的內容，如文章區塊或者某個重要表單。區塊可以有他們自己的標題、導航及頁腳。
<summary>
<time>可以快速把日期和時間按照自己選定的格式呈現。若設置了datetime屬性，那麼<time>元素內容就可以是任何想用的文本，如果沒有設置datetime屬性，<time>元素的日期和時間就必須採用有效的格式。
< title>簡短、描述性、唯一（提升搜索引擎排名）。
搜索引擎會將title作爲判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。
<hn><header><nav>
html5規範不推薦對輔助性頁腳鏈接使用nav，除非頁腳再次顯示頂級全局導航、或者包含招聘信息等重要鏈接。
<main><article><section><aside><footer><small>
<strong><em><mark><b><figure><figcaption><cite>
<blockquoto><q><time><abbr>
abbr[title]{ border-bottom:1px dotted #000; }
<dfn>定義術語元素，與定義必須緊挨着，可以在描述列表dl元素中使用。
<del>移除的內容。
<ins>添加的內容。少有的既可以包圍塊級，又可以包圍短語內容的元素。
<code>標記代碼。包含示例代碼或者文件名 （< &lt;  > &gt;）
<pre>預格式化文本。保留文本固有的換行和空格。
<meter><progress>

② 本地存儲特性

基於HTML5開發的網頁APP擁有更短的啓動時間，更快的聯網速度，這些全得益於HTML5 APP Cache，以及本地存儲功能。
HTML5離線存儲包含 應用程序緩存，本地存儲，索引數據庫，文件接口。

③ 設備訪問特性

從Geolocation功能的API文檔公開以來，HTML5爲網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

④ 連接特性

更有效的連接工作效率，使得基於頁面的實時聊天，更快速的網頁遊戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能。

⑤ 網頁多媒體特性

支持網頁端的audio、video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。

⑥ 三維、圖形及特效特性

基於SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚歎於在瀏覽器中，所呈現的驚人視覺效果。

⑦ 性能與集成特性

沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術，解決以前的跨域等問題，幫助您的Web應用和網站在多樣化的環境中更快速的工作。

CSS3 新特性

CSS3 是 CSS 的升級版本，這套新標準提供了更加豐富且實用的規範，如：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄佈局等等。

CSS 選擇器

tbody: nth-child(even), nth-child(odd)
: not(.textinput)：這裏即表示所有 class 不是“textinput”的節點。
div:first-child：這裏表示所有 div 節點下面的第一個直接子節點。

        :nth-last-child(n)
        :nth-of-type(n)
        :nth-last-of-type(n)
        :last-child
        :first-of-type
        :only-child
        :only-of-type
        :empty
        :checked
        :enabled
        :disabled
        ::selection
        :not(s)

@font-face 特性

font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

@font-face { 
font-family: BorderWeb; 
src:url(BORDERW0.eot); 
} 
@font-face { 
font-family: Runic; 
src:url(RUNICMT0.eot); 
} 
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

word-wrap & text-overflow 樣式

<div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
</div>
text-overflow:clip
text-overflow:ellipsis

文字渲染

div { 
-webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; 
-webkit-text-stroke-width: 2.75px; 
}

CSS3 的多列布局

.multi_column_style{ 
-webkit-column-count: 3; 
-webkit-column-rule: 1px solid #bbb; 
-webkit-column-gap: 2em; 
} 

<div class="multi_column_style"> 
................. 
................. 
</div>

column-count：表示佈局幾列。
column-rule：表示列與列之間的間隔條的樣式
column-gap：表示列於列之間的間隔

邊框和顏色

color: hsla( 112, 72%, 33%, 0.68);

對於 border，CSS3 提供了圓角的支持：

border-radius: 15px;

CSS3 的漸變效果

左上（0% 0%）到右上（0% 100%）即從左到右水平漸變：

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

複雜線性漸變

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
       color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

徑向漸變

backgroud: 
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

CSS3 的陰影（shadow）和反射（reflect）效果

陰影

.class1{ 
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
} 

.class2{ 
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
}

反射

.classReflect{ 
-webkit-box-reflect: below 10px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
     to(rgba(255, 255, 255, 0.51))); 
}

CSS3 的背景效果

首先：”background clip”，該屬確定背景畫區，有以下幾種可能的屬性：
background-clip: border-box; 背景從 border 開始顯示 ;
background-clip: padding-box; 背景從 padding 開始顯示 ;
background-clip: content-box; 背景顯 content 區域開始顯示 ;
background-clip: no-clip; 默認屬性，等同於 border-box;
通常情況，我們的背景都是覆蓋整個元素的，現在 CSS3 讓您可以設置是否一定要這樣做。這裏您可以設定背景顏色或圖片的覆蓋範圍。
其次：”background origin”，用於確定背景的位置，它通常與 background-position 聯合使用，您可以從 border、padding、content 來計算 background-position（就像 background-clip）。
background-origin: border-box; 從 border. 開始計算 background-position;
background-origin: padding-box; 從 padding. 開始計算 background-position;
background-origin: content-box; 從 content. 開始計算 background-position;
還有，”background size”，常用來調整背景圖片的大小，注意別和 clip 弄混，這個主要用於設定圖片本身。有以下可能的屬性：
background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
background-size: cover; 擴展元素以填補元素（維持像素長寬比）
background-size: 100px 100px; 縮小圖片至指定的大小 .
background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸 .
最後，”background break”屬性，CSS3 中，元素可以被分成幾個獨立的盒子（如使內聯元素 span 跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示。
background-break: continuous; 默認值。忽略盒之間的距離（也就是像元 素沒有分成多個盒子，依然是一個整體一 樣）
background-break: bounding-box; 把盒之間的距離計算在內；
background-break: each-box; 爲每個盒子單獨重繪背景。
這種屬性讓您可以設定複雜元素的背景屬性。
最爲重要的一點，CSS3 中支持多背景圖片，參考如下代碼：

div { 
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x; 
}

CSS3 的 transitions, transforms 和 animation

transition-property：用於指定過渡的性質，比如 transition-property:background 就是指 backgound 參與這個過渡
transition-duration：用於指定這個過渡的持續時間
transition-delay：用於制定延遲過渡的時間
transition-timing-function：用於指定過渡類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

<div id="transDiv" class="transStart"> transition </div> 

.transStart { 
   background-color: white; 
   -webkit-transition: background-color 0.3s linear; 
   -moz-transition: background-color 0.3s linear; 
   -o-transition: background-color 0.3s linear; 
   transition: background-color 0.3s linear; 
} 
.transEnd { 
   background-color: red; 
}
.skew { 
-webkit-transform: skew(50deg); 
} 

.scale { 
-webkit-transform: scale(2, 0.5); 
} 

.rotate { 
-webkit-transform: rotate(30deg); 
} 

.translate { 
-webkit-transform: translate(50px, 50px); 
} 

.all_in_one_transform { 
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); 
}
@-webkit-keyframes anim1 { 
   0% { 
       Opacity: 0; 
       font-size: 12px; 
   } 
   100% { 
       Opacity: 1; 
       font-size: 24px; 
   } 
} 
.anim1Div { 
   -webkit-animation-name: anim1 ; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 4; 
   -webkit-animation-direction: alternate; 
   -webkit-animation-timing-function: ease-in-out; 
}

僞元素和僞類的區別

CSS 僞類用於向某些選擇器添加特殊的效果。
CSS 僞元素用於將特殊的效果添加到某些選擇器。

僞類種類：

僞類 作用
:active 將樣式添加到被激活的元素
:focus 將樣式添加到被選中的元素
:hover 當鼠標懸浮在元素上方時，向元素添加樣式
:link 將特殊的樣式添加到未被訪問過的鏈接
:visited 將特殊的樣式添加到被訪問過的鏈接
:first-child 將特殊的樣式添加到元素的第一個子元素
:lang 允許創作者定義指定的元素中使用的語言

僞元素種類：

僞元素 作用
:first-letter 將特殊的樣式添加到文本的首字母
:first-line 將特殊樣式添加到文本的首行
:before 在某元素之前插入某些內容
:after 在某元素之後插入某些內容

僞類的效果可以通過添加一個實際的類來達到，而僞元素的效果則需要通過添加一個實際的元素才能達到，這也是爲什麼他們一個稱爲僞類，一個稱爲僞元素的原因。

奔跑的前端er
發佈了95 篇原創文章 · 獲贊 22 · 訪問量 11萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

CSS居中及佈局

CSS中的居中可分爲水平居中和垂直居中。水平居中分爲行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分爲定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。 水平居中 使用inline-block和text-aligh實

奔跑的前端er 2020-07-05 21:38:46

等高佈局

奔跑的前端er 2020-02-20 17:08:35

CSS居中及佈局

CSS中的居中可分爲水平居中和垂直居中。水平居中分爲行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分爲定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。 水平居中 使用inline-block和text-aligh實

奔跑的前端er 2020-07-05 21:38:46

等高佈局

奔跑的前端er 2020-02-20 17:08:35

CSS多列

奔跑的前端er 2018-09-03 04:17:22

sticky-footer實現方式

奔跑的前端er 2018-09-03 04:17:22

CSS動畫

奔跑的前端er 2018-09-03 04:17:22

定寬+流動佈局

奔跑的前端er 2018-09-03 04:17:17