2. 程式人生 > >HTML5和CSS3 新特性總結

HTML5和CSS3 新特性總結

阿新 • • 發佈：2018-12-22

HTML5

1.HTML5 新元素

HTML5提供了新的元素來建立更好的頁面結構：

標籤

描述

定義頁面的側邊欄內容。

<bdi>

允許您設定一段文字，使其脫離其父元素的文字方向設定。

定義命令按鈕，比如單選按鈕、複選框或按鈕

用於描述文件或文件某個部分的細節

標籤包含 details 元素的標題

規定獨立的流內容（影象、圖表、照片、程式碼等等）。

定義 section 或 document 的頁尾。

定義帶有記號的文字。

定義度量衡。僅用於已知最大和最小值的度量。

<nav>

定義導航連結的部分。

定義 ruby 註釋（中文註音或字元）。

<rt>

定義字元（中文註音或字元）的解釋或發音。

<rp>

在 ruby 註釋中使用，定義不支援 ruby 元素的瀏覽器所顯示的內容。

定義文件中的節（section、區段）。

<wbr>

規定在文字中的何處適合新增換行符。

2.HTML5 Canvas

HTML5 <canvas> 元素用於圖形的繪製，通過指令碼 (通常是JavaScript)來完成.

<canvas> 標籤只是圖形容器，您必須使用指令碼來繪製圖形。

  1. <canvas>簡單例項如下:
  2. <canvasid="myCanvas"width="200"height="100"></canvas>

使用 JavaScript 來繪製圖像

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

  1. <script>
  2. var c=document.getElementById("myCanvas");
  3. var ctx=c.getContext("2d");
  4. ctx.fillStyle="#FF0000";
  5. ctx.fillRect(0,0,150,75);
  6. </script> 

3.HTML5 拖放

拖放是一種常見的特性，即抓取物件以後拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

設定元素為可拖放

首先，為了使元素可拖動，把 draggable 屬性設定為 true ：

  1. <imgdraggable="true">

拖動什麼 - ondragstart 和 setData()

放到何處 - ondragover

進行放置 - ondrop

4.HTML5 地理定位

HTML5 Geolocation API 用於獲得使用者的地理位置。

鑑於該特性可能侵犯使用者的隱私，除非使用者同意，否則使用者位置資訊是不可用的。

  1. <script>
  2. var x=document.getElementById("demo");
  3. function getLocation()
  4. {
  5. if(navigator.geolocation)
  6. {
  7. navigator.geolocation.getCurrentPosition(showPosition);
  8. }
  9. else{x.innerHTML="該瀏覽器不支援獲取地理位置。";}
  10. }
  11. function showPosition(position)
  12. {
  13. x.innerHTML="Latitude: "+ position.coords.latitude +
  14. "<br>Longitude: "+ position.coords.longitude;
  15. }
  16. </script>

5.HTML5  Audio(音訊)、Video(視訊)

HTML5 規定了在網頁上嵌入音訊元素的標準，即使用 <audio> 元素。

  1. <audiocontrols>
  2. <sourcesrc="horse.ogg"type="audio/ogg">
  3. <sourcesrc="horse.mp3"type="audio/mpeg">
  4. 您的瀏覽器不支援 audio 元素。
  5. </audio>

HTML5 規定了一種通過 video 元素來包含視訊的標準方法。

  1. <videowidth="320"height="240"controls>
  2. <sourcesrc="movie.mp4"type="video/mp4">
  3. <sourcesrc="movie.ogg"type="video/ogg">
  4. 您的瀏覽器不支援Video標籤。
  5. </video>

6.HTML5 Input 型別

HTML5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。

  • color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
  1. <inputtype="range"name="points"min="1"max="10">
  2. Search Google: <inputtype="search"name="googlesearch">
  3. 電話號碼: <inputtype="tel"name="usrtel">

7.HTML5 表單元素

HTML5 有以下新的表單元素:

標籤 描述
<input>標籤定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
><keygen> 標籤規定用於表單的金鑰對生成器欄位。
<output> 標籤定義不同型別的輸出，比如指令碼的輸出。

<datalist> 元素規定輸入域的選項列表。

<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

使用 <input> 元素的列表屬性與 <datalist> 元素繫結.

  1. <inputlist="browsers">
  2. <datalistid="browsers">
  3. <optionvalue="Internet Explorer">
  4. <optionvalue="Firefox">
  5. <optionvalue="Chrome">
  6. <optionvalue="Opera">
  7. <optionvalue="Safari">
  8. </datalist>

8.HTML5 表單屬性

HTML5 的 <form> 和 <input>標籤添加了幾個新屬性.

<form>新屬性：

  • autocomplete、novalidate

<input>新屬性：

  • autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

9.HTML5 語義元素

HTML5提供了新的語義元素來明確一個Web頁面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

10.HTML5 Web 儲存

 Web Storage DOM API 為Web應用提供了一個能夠替代cookie的Javascript解決方案

  • sessionStorage—客戶端資料儲存，只能維持在當前會話範圍內。

             sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後，資料會被刪除。

  • localStorage—客戶端資料儲存，能維持在多個會話範圍內。

             localStorage 物件儲存的資料沒有時間限制。第二天、第二週或下一年之後，資料依然可用。

對於大量複雜資料結構，一般使用IndexDB

11.HTML5 離線Web應用（應用程式快取）

HTML5 引入了應用程式快取，這意味著 web 應用可進行快取，並可在沒有因特網連線時進行訪問。

應用程式快取為應用帶來三個優勢：

  1. 離線瀏覽 - 使用者可在應用離線時使用它們
  2. 速度 - 已快取資源載入得更快
  3. 減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。

HTML5 Cache Manifest 例項

下面的例子展示了帶有 cache manifest 的 HTML 文件（供離線瀏覽）：

  1. <!DOCTYPE HTML>
  2. <htmlmanifest="demo.appcache">
  3. <body>
  4. The content of the document......
  5. </body>
  6. </html>

Manifest 檔案

manifest 檔案是簡單的文字檔案，它告知瀏覽器被快取的內容（以及不快取的內容）。

manifest 檔案可分為三個部分：

  • CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取
  • NETWORK - 在此標題下列出的檔案需要與伺服器的連線，且不會被快取
  • FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面
    1. CACHE MANIFEST
    2. # 2012-02-21 v1.0.0
    3. /theme.css
    4. /logo.gif
    5. /main.js
    6. NETWORK:
    7. login.php
    8. FALLBACK:
    9. /html/ /offline.html

12.HTML5 Web Workers

當在 HTML 頁面中執行指令碼時，頁面的狀態是不可響應的，直到指令碼已完成。

web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行。（相當於實現多執行緒併發）

13.HTML5 SSE

Server-Sent 事件指的是網頁自動獲取來自伺服器的更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過伺服器傳送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

EventSource 物件用於接收伺服器傳送事件通知：

  1. var source=newEventSource("demo_sse.php");
  2. source.onmessage=function(event)
  3. {
  4. document.getElementById("result").innerHTML+=event.data +"<br>";
  5. };

為了讓上面的例子可以執行，您還需要能夠傳送資料更新的伺服器（比如 PHP 和 ASP）。

  1. <?php
  2. header('Content-Type: text/event-stream');
  3. header('Cache-Control: no-cache');
  4. $time = date('r');
  5. echo "data: The server time is: {$time}nn";
  6. flush();
  7. ?>

14.HTML5 WebSocket

 WebSocket是HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以通過 TCP 連線直接交換資料。當你獲取 Web Socket 連線後，你可以通過 send() 方法來向伺服器傳送資料，並通過 onmessage 事件來接收伺服器返回的資料。以下 API 用於建立 WebSocket 物件。

CSS3

CSS3選擇器

選擇器 示例 示例說明 CSS
.intro 選擇所有class="intro"的元素 1
#id #firstname 選擇所有id="firstname"的元素 1
* * 選擇所有元素 2
p 選擇所有<p>元素 1
div,p 選擇所有<div>元素和<p>元素 1
div p 選擇<div>元素內的所有<p>元素 1
div>p 選擇所有父級是 <div> 元素的 <p> 元素 2
div+p 選擇所有緊接著<div>元素之後的<p>元素 2
[target] 選擇所有帶有target屬性元素 2
[target=-blank] 選擇所有使用target="-blank"的元素 2
[title~=flower] 選擇標題屬性包含單詞"flower"的所有元素 2
[lang|=en] 選擇一個lang屬性的起始值="EN"的所有元素 2
:link a:link 選擇所有未訪問連結 1
a:visited 選擇所有訪問過的連結 1
a:active 選擇活動連結 1
a:hover 選擇滑鼠在連結上面時 1
input:focus 選擇具有焦點的輸入元素 2
p:first-letter 選擇每一個<P>元素的第一個字母 1
p:first-line 選擇每一個<P>元素的第一行 1
p:first-child 指定只有當<p>元素是其父級的第一個子級的樣式。 2
p:before 在每個<p>元素之前插入內容 2
p:after 在每個<p>元素之後插入內容 2
p:lang(it) 選擇一個lang屬性的起始值="it"的所有<p>元素 2
a[src^="https"] 選擇每一個src屬性的值以"https"開頭的元素 3
a[src$=".pdf"] 選擇每一個src屬性的值以".pdf"結尾的元素 3
a[src*="44lan"] 選擇每一個src屬性的值包含子字串"44lan"的元素 3
p:first-of-type 選擇每個p元素是其父級的第一個p元素 3
p:last-of-type 選擇每個p元素是其父級的最後一個p元素 3
p:only-of-type 選擇每個p元素是其父級的唯一p元素 3
p:only-child 選擇每個p元素是其父級的唯一子元素 3
p:nth-child(2) 選擇每個p元素是其父級的第二個子元素 3
p:nth-last-child(2) 選擇每個p元素的是其父級的第二個子元素，從最後一個子項計數 3
p:nth-of-type(2) 選擇每個p元素是其父級的第二個p元素 3
p:nth-last-of-type(2) 選擇每個p元素的是其父級的第二個p元素，從最後一個子項計數 3
p:last-child 選擇每個p元素是其父級的最後一個子級。 3
:root :root 選擇文件的根元素 3
p:empty 選擇每個沒有任何子級的p元素（包括文字節點） 3
#news:target 選擇當前活動的#news元素（包含該錨名稱的點選的URL） 3
input:enabled 選擇每一個已啟用的輸入元素 3
input:disabled 選擇每一個禁用的輸入元素 3
input:checked 選擇每個選中的輸入元素 3
::selection 匹配元素中被使用者選中或處於高亮狀態的部分 3
:out-of-range 匹配值在指定區間之外的input元素 3
:in-range 匹配值在指定區間之內的input元素 3
:read-write 用於匹配可讀及可寫的元素 3
:read-only 用於匹配設定 "readonly"（只讀） 屬性的元素 3
:optional 用於匹配可選的輸入元素 3
:required 用於匹配設定了 "required" 屬性的元素 3
:valid 用於匹配輸入值為合法的元素 3
:invalid 用於匹配輸入值為非法的元素

CSS3 邊框（Borders）

用CSS3，你可以建立圓角邊框，新增陰影框，並作為邊界的形象而不使用設計程式

屬性 說明 CSS
一個用於設定所有四個邊框- *-半徑屬性的速記屬性 3
  1. div
  2. {
  3. border:2px solid;
  4. border-radius:25px;
  5. box-shadow:10px10px5px#888888;
  6. border-image:url(border.png)3030 round;
  7. }

CSS3 背景

CSS3中包含幾個新的背景屬性，提供更大背景元素控制。

  1. div
  2. {
  3. background:url(img_flwr.gif);
  4. background-repeat:no-repeat;
  5. background-size:100%100%;
  6. background-origin:content-box;
  7. }

多背景

  1. body
  2. {
  3. background-image:url(img_flwr.gif),url(img_tree.gif);
  4. }

CSS3 漸變

CSS3 定義了兩種型別的漸變（gradients）：

  • 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
    1. background: linear-gradient(direction, color-stop1, color-stop2,...);
  • 徑向漸變（Radial Gradients）- 由它們的中心定義
    1. background: radial-gradient(center, shape size, start-color,...,last-color);

CSS3 文字效果

屬性 描述 CSS
text-align-last 設定如何對齊最後一行或緊挨著強制換行符之前的行。 3
text-emphasis 向元素的文字應用重點標記以及重點標記的前景色。 3
規定當 text-align 設定為 "justify" 時所使用的對齊方法。 3
規定非中日韓文字的換行規則。 3
允許對長的不可分割的單詞進行分割並換行到下一行。 3

CSS3 字型

以前CSS3的版本，網頁設計師不得不使用使用者計算機上已經安裝的字型。使用CSS3，網頁設計師可以使用他/她喜歡的任何字型。當你發現您要使用的字型檔案時，只需簡單的將字型檔案包含在網站中，它會自動下載給需要的使用者。您所選擇的字型在新的CSS3版本有關於@font-face規則描述。您"自己的"的字型是在 CSS3 @font-face 規則中定義的。

  1. <style>
  2. @font-face
  3. {
  4. font-family: myFirstFont;
  5. src: url(sansation_light.woff);
  6. }
  7. div
  8. {
  9. font-family:myFirstFont;
  10. }
  11. </style>

CSS3 轉換和變形

2D新轉換屬性

以下列出了所有的轉換屬性:

Property 描述 CSS
適用於2D或3D轉換的元素 3

2D 轉換方法

函式 描述
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。

3D轉換屬性

下表列出了所有的轉換屬性：

3D 轉換方法

函式 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視檢視。

CSS3 過渡

過渡屬性

下表列出了所有的過渡屬性:

  1. div
  2. {
  3. transition-property: width;
  4. transition-duration:1s;
  5. transition-timing-function: linear;
  6. transition-delay:2s;
  7. /* Safari */
  8. -webkit-transition-property:width;
  9. -webkit-transition-duration:1s;
  10. -webkit-transition-timing-function:linear;
  11. -webkit-transition-delay:2s;
  12. }

CSS3 動畫

要建立CSS3動畫，你需要了解@keyframes規則。@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

例項

當動畫為 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：

  1. @keyframes myfirst
  2. {
  3. 0%{background: red;}
  4. 25%{background: yellow;}
  5. 50%{background: blue;}
  6. 100%{background: green;}
  7. }

下面的表格列出了 @keyframes 規則和所有動畫屬性：

  1. div
  2. {
  3. animation-name: myfirst;
  4. animation-duration:5s;
  5. animation-timing-function: linear;
  6. animation-delay:2s;
  7. animation-iteration-count: infinite;
  8. animation-direction: alternate;
  9. animation-play-state: running;
  10. /* Safari and Chrome: */
  11. -webkit-animation-name: myfirst;
  12. -webkit-animation-duration:5s;
  13. -webkit-animation-timing-function: linear;
  14. -webkit-animation-delay:2s;
  15. -webkit-animation-iteration-count: infinite;
  16. -webkit-animation-direction: alternate;
  17. -webkit-animation-play-state: running;
  18. }

CSS3 多列

下表列出了所有 CSS3 的多列屬性：

CSS3 盒模型

在 CSS3 中, 增加了一些新的使用者介面特性來調整元素尺寸，框尺寸和外邊框，主要包括以下使用者介面屬性：

  • resize：none | both | horizontal | vertical | inherit
  • box-sizing: content-box | border-box | inherit
  • outline:outline-color outline-style outline-width outine-offset

resize屬性指定一個元素是否應該由使用者去調整大小。

box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

CSS3伸縮佈局盒模型(彈性盒)

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

下表列出了在彈性盒子中常用到的屬性:

屬性 描述
指定 HTML 元素盒子型別。
設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。
設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。
設定彈性盒子的子元素超出父容器時是否換行。
修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊
flex-direction 和 flex-wrap 的簡寫
order 設定彈性盒子的子元素排列順序。
在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex 設定彈性盒子的子元素如何分配空間。

CSS3 多媒體查詢

從 CSS 版本 2 開始，就可以通過媒體型別在 CSS 中獲得媒體支援。如果您曾經使用過列印樣式表，那麼您可能已經使用過媒體型別。清單 1 展示了一個示例。

清單 1. 使用媒體型別

  1. <linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>
  2. <linkrel="stylesheet"type="text/css"href="print.css"media="print"/>

清單 2. 媒體查詢規則

  1. @media all and(min-width:800px){...}
  • @media all 是媒體型別，也就是說，將此 CSS 應用於所有媒體型別。
  • (min-width:800px) 是包含媒體查詢的表示式，如果瀏覽器的最小寬度為 800 畫素，則會告訴瀏覽器只運用下列 CSS。

清單 3. and 條件

  1. @media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}

清單 4. or 關鍵詞

  1. @media(min-width:800px)or(orientation:portrait){...}

清單 5. 使用 not

  1. @media(not min-width:800px){...}

相關推薦

HTML5和CSS3 新特性總結

HTML5 1.HTML5 新元素 HTML5提供了新的元素來建立更好的頁面結構： 標籤 描述 定義頁面的側邊欄內容。 <bdi> 允許您設定一段文字，使其脫

H5和CSS3新特性總結

說到H5C3會不會覺得東西好多啊，今天就整理了一份總結性的內容；CSS3選擇器有哪些？ 答：屬性選擇器、偽類選擇器、偽元素選擇器。 CSS3新特性有哪些？答：1.顏色：新增RGBA，HSLA模式2. 文字陰影（text-shadow、）3.邊框： 圓角（border-

HTML5和CSS3新特性一覽

tag 帶來 種類型 成了 value emp points ner contex 1.HTML5 新元素 HTML5提供了新的元素來創建更好的頁面結構： 標簽 描述 <article> 定義頁面

常用的css3新特性總結

rip splay 插件 ash 500px line 對象 cal 投影 1:CSS3陰影 box-shadow的使用和技巧總結： 基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiusc

HTML5和CSS3的新特性

綜述：這個問題在面試的時候經常被問到，有必要做一個總結，理解的深刻充分一些 1.html5的新特性？(記住有九大模組內容) 添加了video，radio標籤 添加了canvas畫布和svg,渲染向量圖片 添加了一些列語義化標籤header,fo

html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

als ie8 mil oct scrip locals bsp 框架 canvas 新特性： 1. 拖拽釋放(Drag and drop) API 2. 語義化更好的內容標簽（header,nav,footer,aside,article,section） 3. 音頻、視

jquery,html5,css3主要特性總結

doc 陰影 n) 換行 local shadow 元素操作 orm nim jquery特性： 1、豐富簡單的DOM選擇器 2、同一函數實現get和set 3、支持鏈式方法書寫 4、完善的事件處理功能 5、強大的css動畫效果 6、完善的Ajax 7、簡單的元素樣式操作

HTML5新特性總結

googl spa 數據庫 geo auto 網上 tro 圖片 footer HTML5屬於上一代HTML的新叠代語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體！！！ 例如： video 標簽和 audio 及 canvas 標記 新特性： 1. 取消了過

Html5的新特性總結

新加語義化標籤： HTML5其實是關於影象，位置，儲存，速度的優化和改進 影象： 　　到目前為止，基本上想要直接在網頁上進行繪圖還是不能輕易完成的，即使是幾何圖形也不可以。在瀏覽器當中直接能跟圖片的互動操作也很有限，多數是儲存和點選。如果希望能夠跟圖片進行更多的操作或者在瀏覽器當中畫出圖形，就需要fl

css3和H5 新特性

css3: css3選擇器：屬性選擇器，偽類選擇器，偽元素選擇器 css3新特性： 1、邊框屬性：       border-radius：圓角       border-shadow:給邊框加陰影     border-show(水平陰影的位置，垂直陰影的位置，陰

使用Modernizr探測HTML5/CSS3新特性

HTML5, CSS3以及相關技術（例如canvas和web sockets）帶來了非常有用的特性，可以讓我們的web程式提升一個新的level。這些新技術允許我們只用HTML,CSS和JavaScript就可以構建包括在平板和移動裝置上能夠執行的多樣化表單頁面。HTML5

《響應式Web設計——HTML5和CSS3實戰》——知識點整理總結(持更~)

1.HTML5、CSS3及響應式入門 1.1 什麼是響應式 如果要用一句話概括，那麼響應式網頁是針對人以裝置對網頁內容進行完美佈局的一種顯示機制。相反，如果需要根據不同裝置提供特定的內容和功能，那就需要一個真正的“手機版”網站。這種情況下，手機版網站會提供與

HTML5新特性總結大全

一.HTML5概念： 1.什麼是HTML5： （1）HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準； （2）HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支援。 2.HTML5的起步： （1）HTML5 是 W3

c++11新特性總結和boost庫的使用

來自<<深入理解c++11 c++11新特性解析與應用>> 程式碼見：https://github.com/Jeromecen/cpp11study/tree/master I、保持語言的穩定性和相容性” 總結：主要是utf8字串，虛擬函式o

HTML5新特性總結（一）-新標籤

一. 語義化標籤 1. 使用語義化標籤的原因/優點 根據內容的結構化使用語義化標籤，能夠使開發者更好的閱讀和理解以及瀏覽器爬蟲與搜尋引擎解析。 2. 新標籤 新block標籤：header,footer,main,aside,article,section,nav,h

HTML5和CSS3動畫效果知識點總結

1.響應式佈局； 響應式佈局有兩種方法：1. 流式佈局：百分比佈局（寬，高，定位置） 所謂百分比，尺寸的百分比：基於父級的百分比。 流式佈局需要在head裡面寫上這句話：<meta name=viewport content=width=device-width, i

CSS3 常用新特性總結

本文轉載於:猿2048網站➯CSS3 常用新特性總結 更新於（2017.07.07）會總結專案中比較常用的有些CSS屬性

css3新特性

字號 簡寫形式 between 兩端對齊 alternate hid 行級元素 chm 持續時間 CSS3 新屬性 一、【 CSS3新增屬性前綴 】 　　1、-webkit-:chrome/safari 　　2、-moz-:火狐 　　3、-mo-:IE 　　4、-o-: O

HTML5和CSS3扁平化風格博客

清除浮動 小細節 介紹 first header ant oct some main.c 多學一點總是好的~自始至終都覺得的css和html效果比較美觀，於是在看慕課網教程時，自己也跟著敲了深愛著的前端代碼這部分分為兩部分：①基礎篇：http://www.imooc.com

css3新特性選擇器（補充）

last inpu child 一行 標簽 after 第一個 ren 得到 1.選擇p標簽中的第一個字符 p:first-letter{ color:red; font-size:25px; } 2.選擇p標簽中的第一行 p:first-line{ 　　color:red