標籤：html_ 介紹 ssi input 時間 技術 radio 使用者 document
HTML5 是下一代的 HTML。有必要再過一遍。看下要點。
具體看 http://www.w3school.com.cn/html5/index.asp 教程
和 HTML5 標籤參考手冊
學習記錄：
--------------------------
HTML5 中的一些有趣的新特性：
最新版本的 Safari、Chrome、Firefox 以及 Opera 支援某些 HTML5 特性。Internet Explorer 9 將支援某些 HTML5 特性。
視頻 video
音頻 audio
---------------------------
頁面內容可拖放 ， 具體解釋 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
大致是，設定內容可拖動：draggable 屬性為true ;
拖動什麼：
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}
-----------
放到何處：
如果需要設定允許放置，我們必須阻止對元素的預設處理方式。 這要通過調用 ondragover 事件的 event.preventDefault() ；
---------
進行放置：
ondrop 屬性調用了一個函數，drop(event)：
function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}代碼解釋：
--------------------
什麼是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製映像。
a. 向 HTML5 頁面添加 canvas 元素。
b. canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>
----------------
cxt.moveTo(10,10);
cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();
---------
cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();
--------
畫圖的，挺有勁，效果有點了。
HTML5 支援內嵌 SVG。
什麼是SVG？與其他映像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
樣本沒看明白， canvas 和 svg 如要用還需要找對應的教程再詳細看和入門。
Canvas 與 SVG 的比較下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
地理位置，看調用實際能用的地圖，國內如 baidu地圖 高德地圖 qq地圖
----------
HTML 5 Web 儲存在用戶端儲存資料HTML5 提供了兩種在用戶端儲存資料的新方法：
sessionStorage 方法針對一個 session 進行資料存放區。當使用者關閉瀏覽器視窗後，資料會被刪除。
HTML 5 應用程式緩衝Cache Manifest 基礎
如需啟用應用程式緩衝，請在文檔的 <html> 標籤中包含 manifest 屬性：
<!DOCTYPE HTML><html manifest="demo.appcache">...</html>
每個指定了 manifest 的頁面在使用者對其訪問時都會被緩衝。如果未指定 manifest 屬性，則頁面不會被緩衝（除非在 manifest 檔案中直接指定了該頁面）。
manifest 檔案的建議的副檔名是：".appcache"。
請注意，manifest 檔案需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 網頁伺服器上進行配置。
【這塊具體再看，目前還沒接觸，實際開發中有不少和資料有關的業務，有時還強行去掉緩衝功能】
HTML 5 Web Workersweb worker 是運行在背景 JavaScript，不會影響頁面的效能。
目前還沒接觸過
HTML 5 伺服器發送事件PHP 代碼 (demo_sse.php)：
<?phpheader(‘Content-Type: text/event-stream‘);header(‘Cache-Control: no-cache‘);$time = date(‘r‘);echo "data: The server time is: {$time}\n\n";flush();?>
代碼解釋：
未試過， 不知和 websocket 實現有多大的差異， 邏輯上看著類似，後台推資料，前端收到作處理。
-------------
HTML5 新的 Input 類型HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
本章全面介紹這些新的輸入類型：
具體一些實際的校正，還是用正則判斷下， number 的屬性有點坑（盡量不用）
HTML5 的新的表單元素：HTML5 擁有若干涉及表單的元素和屬性。
本章介紹以下新的表單元素：
裡面的 datalist 功能挺好， 與select下拉有一拼
新的 form 屬性：
這個 multiple 多選挺好
multiple 屬性multiple 屬性規定輸入欄位中可選擇多個值。
注釋：multiple 屬性適用於以下類型的 <input> 標籤：email 和 file。
執行個體Select images: <input type="file" name="img" multiple="multiple" />
pattern 屬性
pattern 屬性規定用於驗證 input 域的模式（pattern）。
模式（pattern） 是Regex。您可以在我們的 JavaScript 教程中學習到有關Regex的內容。
注釋：pattern 屬性適用於以下類型的 <input> 標籤：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字元）：
執行個體Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入欄位所期待的值。
required 屬性
required 屬性規定必須在提交之前填寫輸入欄位（不可為空）。
注釋：required 屬性適用於以下類型的 <input> 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
最後可以來下測試 現在就開始測驗！ 祝您好運。
HTML 5 教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
