HTML5和CSS3

時間 2019-11-20

標籤 html5 html css3 css 欄目 HTML5 简体版

原文原文鏈接

1、HTML5web

　　HTML5 是 HTML 標準的最新演進版本。這個術語表明了兩個不一樣的概念：它是一個新的 HTML 語言版本包含了新的元素，屬性和行爲，同時包含了一系列能夠被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。正則表達式

l 語義：可以讓你更恰當地描述你的內容是什麼。canvas

HTML5 中的節段和提綱瀏覽器

　　HTML5 中新的提綱和節段元素一覽: 緩存

　　　<section > ：定義區段，語義大於div,性能優化

　　　<article > ：定義文章,服務器

　　　<nav > ：定義導航連接,網絡

　　　<header> ：定義 section 或 page 的頁眉(頭部),異步

　　　<footer> ：定義 section 或 page 的頁腳（尾部）,ide

　　　<aside > ：定義頁面內容以外的內容：側邊欄 ,

　　　<hgroup> ：用於對網頁或區段（section）的標題進行組合

使用 HTML5 的音頻和視頻

　　<audio>（音頻）和 <video>（視頻）元素嵌入和操做多媒體內容。

HTML5 的表單　　

1.<input> 元素

<input> 的 type 特性擁有更多的值。

　　search: 這個元素呈現爲一個搜索框。換行符會從輸入值中去掉，此外沒有其餘的語法加強了。

　　tel: 這個元素可現爲一個編輯電話號碼的輸入控件。換行符會從輸入值中去掉，此外沒有其餘的語法加強了，由於電話號碼國際化差別很是明顯。你可使用如 pattern 與 maxlength 等屬性來限制輸入到控件中的值。

　　url: 這個元素呈現爲一個編輯URL 的輸入控件。換行符與首尾的空格將會被自動去除。

　　email: 這個元素呈現爲一個郵件地址。換行符會被自動去除。能夠設置一個無效的郵件地址，但若知足輸入框的限制，必須遵照在擴展的巴科斯範式(ABNF)中的規範：1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) 其中atext 在規範RFC 5322 section 3.2.3 中被定義,而ldh-str在規範RFC 1034 section 3.5 中被定義。

<input> 元素也擁有一些新的特性。

　　list： <datalist> 元素的 ID，該元素的內容，<option> 元素被用做提示信息，會在 input 的建議區域做爲提議顯示出來。

　　pattern：一個正則表達式，用於檢查控件的值，可以做用於 type 值是 text， tel， search， url，和 email 的 input 元素。

　　form：一個字符串，用於代表該 input 屬於哪一個 <form> 元素。一個 input 只能存在於一個表單中。

　　formmethod：一個字符串，用於代表表單提交時會使用哪一個 HTTP 方法 (GET 或 POST)；若是定義了它，則能夠覆蓋 <form> 元素上的 method 特性。只有當 type 值爲 image 或 submit，而且 form 特性被設置的狀況下， formmethod 才能生效。

2.<form> 和<datalist> 元素

　　<form> 元素有了一個新特性：novalidate：設置了該特性不會在表單提交以前對其進行驗證。

　　<datalist> 元素會在填寫 <input> 字段時，顯示一列 <option> 做爲提示。你可使用 <input> 元素上的 list 特性來將一個特定的 input 與特定的 <datalist> 元素作關聯。

3.<output> 元素

　　<output> 元素表示計算的結果。

你可使用 for 特性來在 <output> 元素與文檔內其餘可以影響運算的元素(例如，input 或參數)創建關聯。 for 特性的值是以空格作分隔的其餘元素的 ID 列表。

4.placeholder 特性

　　placeholder 特性做用於 <input> 與 <textarea> 元素上，提示用戶此域內可以輸入什麼內容。placeholder 中的文本不能包含回車與換行。

5.autofocus 特性

　　autofocus 特性讓你可以指定一個表單控件，當頁面載入後該表單自動得到焦點，除非用戶覆蓋它，例如在另外一個控件中輸入值。一個文檔內只有一個表單可以擁有 autofocus 特性，它是一個 Boolean 值。這個特性適用於 <input>， <button>， <select>，與 <textarea> 元素。例外狀況是，若是一個 autofocus 元素的 type 特性值設置成了 hidden，則 autofocus 沒法生效(就是說，你沒法讓一個隱藏控件自動得到焦點)。

6.label.control DOM 屬性

　　HTMLLabelElement DOM 接口除了爲 <label> 元素提供了對應的特性外，還提供了一個額外的屬性。 control 屬性返回被打上標籤的控件，就是 label 適用的控件，由 for 特性(若是定義的話) 或是第一個後代元素控件來肯定。

7.約束驗證

　　1）、約束驗證的 HTML 語法

　　　　<input>, <select>，和 <textarea> 元素上的 required 特性，指定必須提供該元素的值。(在 <input> 元素上， required 只能與特定的 type 特性值結合起來生效。)

　　　　<input> 元素上的 pattern 特性用於限定元素值必須匹配一個特定的正則表達式。

　　　　<input> 元素上的 min 與 max 特性限定了可以輸入元素的最大與最小值。

　　　　<input> 元素的 step 特性(與 min 與 max 特性結合使用) 限定了輸入值的間隔。若是一個值與容許值的梯級不相符，則它沒法經過驗證。

　　　　<input> 與 <textarea> 元素的 maxlength 特性限制了用戶可以輸入的最大字符數(在 Unicode 代碼點內)。

　　　　type 的 url 與 email 值分別用於限制輸入值是否爲有效的 URL 或電子郵件地址。

　　2）、約束驗證 API

　　　　HTMLFormElement 對象的 checkValidity() 方法，當表單的相關元素都經過了它們的約束驗證時返回 true，不然返回 false。

　　在表單相關元素上：

　　　　willValidate 屬性，若是元素的約束沒有被符合則值爲 false。

　　　　validity 屬性，是一個 ValidityState 對象，表示元素當前所處的驗證狀態(就是說約束成功或是失敗)。

　　　　validationMessage 屬性，用於描述與元素相關約束的失敗信息。

　　　　checkValidity() 方法，若是元素沒有知足它的任意約束，返回false，其餘狀況返回 true。

　　　　setCustomValidity() 方法，設置自定義驗證信息，用於即將實施與驗證的約束來覆蓋預約義的信息。

l 通訊：可以讓你和服務器之間經過創新的新技術方法進行通訊。

Web Sockets

　　容許在頁面和服務器之間創建持久鏈接並經過這種方法來交換非 HTML 數據。

Server-sent events

　　容許服務器向客戶端推送事件，而不是僅在響應客戶端請求時服務器才能發送數據的傳統範式。

WebRTC

　　這項技術，其中的 RTC 表明的是即時通訊，容許鏈接到其餘人，直接在瀏覽器中控制視頻會議，而不須要一個插件或是外部的應用程序。

l 離線 & 存儲：可以讓網頁在客戶端本地存儲數據以及更高效地離線運行。

離線資源：應用程序緩存

　　火狐全面支持 HTML5 離線資源規範。其餘大多數針對離線資源僅提供了某種程度上的支持。

在線和離線事件

　　Firefox 3 支持 WHATWG 在線和離線事件，這可讓應用程序和擴展檢測是否存在可用的網絡鏈接，以及在鏈接創建和斷開時能感知到。

WHATWG 客戶端會話和持久化存儲 (又名 DOM 存儲)

　　客戶端會話和持久化存儲讓 web 應用程序可以在客戶端存儲結構化數據。

IndexedDB

　　是一個爲了可以在瀏覽器中存儲大量結構化數據，而且可以在這些數據上使用索引進行高性能檢索的 Web 標準。

自 web 應用程序中使用文件

　　對新的 HTML5 文件 API 的支持已經被添加到 Gecko 中，從而使 Web 應用程序能夠訪問由用戶選擇的本地文件。這包括使用 type file 的 <input> 元素的新的 multiple 屬性針對多文件選擇的支持。還有 FileReader。

l 多媒體：使 video 和 audio 成爲了在全部 Web 中的一等公民。

使用 HTML5 音視頻

　　<audio> 和 <video> 元素嵌入並支持新的多媒體內容的操做。

WebRTC

　　這項技術，其中的 RTC 表明的是即時通訊，容許鏈接到其餘人，在瀏覽器中直接控制視頻會議，而不須要一個插件或是外部的應用程序。

使用 Camera API

　　容許使用，操做計算機攝像頭，並從中存儲圖像。

Track 和 WebVTT

　　<track> 元素支持字幕和章節。WebVTT 一個文本軌道格式。

l 2D/3D 繪圖 & 效果：提供了一個更加分化範圍的呈現選擇。

Canvas

　　<canvas> 是 HTML5 新增的元素，能夠說是H5中最爲濃墨重彩的一筆，可以使用JavaScript腳原本繪製圖形。例如：畫圖，合成照片，建立動畫甚至實時視頻處理與渲染。

　　HTML5 針對 <canvas> 元素的文本 API

　　HTML5 文本 API 如今由 <canvas> 元素支持。

WebGL

　　WebGL 經過引入了一套很是地符合 OpenGL ES 2.0 而且能夠用在 HTML5 <canvas> 元素中的 API 給 Web 帶來了 3D 圖像功能。

SVG

　　一個基於 XML 的能夠直接嵌入到 HTML 中的矢量圖像格式。

l 性能 & 集成：提供了很是顯著的性能優化和更有效的計算機硬件使用。

Web Workers

　　可以把 JavaScript 計算委託給後臺線程，經過容許這些活動以防止使交互型事件變得緩慢。

XMLHttpRequest Level 2

　　容許異步讀取頁面的某些部分，容許其顯示動態內容，根據時間和用戶行爲而有所不一樣。這是在 Ajax背後的技術。

即時編譯的 JavaScript 引擎

　　新一代的 JavaScript 引擎功能更強大，性能更傑出。

History API

　　容許對瀏覽器歷史記錄進行操做。這對於那些交互地加載新信息的頁面尤爲有用。

　　conentEditable 屬性：把你的網站改變成 wiki !

　　HTML5 已經把 contentEditable 屬性標準化了。瞭解更多關於這個特性的內容。

拖放

　　HTML5 的拖放 API 可以支持在網站內部和網站之間拖放項目。同時也提供了一個更簡單的供擴展和基於 Mozilla 的應用程序使用的 API。

HTML 中的焦點管理

　　支持新的 HTML5 activeElement 和 hasFocus 屬性。

基於 Web 的協議處理程序

　　你如今可使用 navigator.registerProtocolHandler() 方法把 web 應用程序註冊成一個協議處理程序。

requestAnimationFrame

　　容許控制動畫渲染以得到更優性能。

全屏 API

　　爲一個網頁或者應用程序控制使用整個屏幕，而不顯示瀏覽器界面。

指針鎖定 API

　　容許鎖定到內容的指針，這樣遊戲或者相似的應用程序在指針到達窗口限制時也不會失去焦點。

在線和離線事件

　　爲了構建一個良好的具備離線功能的 web 應用程序，你須要知道何時你的應用程序確實離線了。順便提一句，在你的應用程序又再回到在線狀態時你也須要知道。

l 設備訪問 Device Access：可以處理各類輸入和輸出設備。

使用 Camera API

　　容許使用和操做計算機的攝像頭，並從中存取照片。

觸控事件

　　對用戶按下觸控屏的事件作出反應的處理程序。

　　使用地理位置定位

　　讓瀏覽器使用地理位置服務定位用戶的位置。

　　檢測設備方向

　　讓用戶在運行瀏覽器的設備變動方向時可以獲得信息。這能夠被用做一種輸入設備（例如製做可以對設備位置作出反應的遊戲）或者使頁面的佈局跟屏幕的方向相適應（橫向或縱向）。

2、CSS3

　　CSS 已經擴展到一個可以以更加靈活多樣的方法給元素設置樣式。這一般被稱爲 CSS3, CSS3中不一樣的模塊並不所有位於 level 3：其中一些位於 level 1 而另外一些位於 level 4，覆蓋了全部中間的層次。

l 新的背景樣式特性

　　如今可使用 box-shadow 給邏輯框設置一個陰影，並且還能夠設置多背景。

l 更精美的邊框

　　如今不只可使用圖像來格式化邊框，使用 border-image 和它關聯的普通屬性，並且能夠經過 border-radius 屬性來支持圓角邊框。

l 設置過渡和動畫

過渡

　　transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：

　　　　transition-property：規定設置過渡效果的 CSS 屬性的名稱

　　　　transition-duration：規定完成過渡效果須要多少秒或毫秒

　　　　transition-timing-function：規定速度效果的速度曲線

　　　　transition-delay：定義過渡效果什麼時候開始

1 transition: all 1s ease 0s;

動畫

　　animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：

　　　　animation-name：規定須要綁定到選擇器的 keyframe 名稱

　　　　animation-duration：規定完成動畫所花費的時間，以秒或毫秒計

　　　　animation-timing-function：規定動畫的速度曲線

　　　　animation-delay：規定在動畫開始以前的延遲

　　　　animation-iteration-count：規定動畫應該播放的次數

　　　　animation-direction：規定是否應該輪流反向播放動畫

2 div{

3  width: 60px;

4  height: 60px;

5 

6  position: absolute;

7  top: 100px;

8  left: 100px;

9  animation: yundong 1s linear 0s 5 alternate forwards;

10  }

11 

12  /*定義動畫*/

13  @-webkit-keyframes yundong{

14  0%{

15  left:100px;

16  }

17  100%{

18  left: 700px;

19  }

20  }