HTML5新的API

Drag&Drop API (拖放)
               使用dataTransfer 接口來支持拖放數據存儲，它的使用方式一般爲 event.dataTransfer。
               設置  ：
                     dataTransfer.effectAllowed[=value]。該屬性返回拖曳對象允許的拖曳時的反饋效果  【放在可移動元素start事件上】
                     dataTransfer.dropEffect[=value]。該屬性返回已設置的拖放時反饋效果。    【放在目標容器over事件上】
                     dataTransfer.items。返回一個關於拖曳數據的DataTransferItemList對象。
                     dataTransfer.setDragImage(element, x, y)。指定拖曳元素時隨鼠標移動的圖片，x、y分別是圖片相對於鼠標的橫座標和縱座標。
                     dataTransfer.addElement(element)。將元素添加到被拖曳的列表裏。如果你想讓某個元素跟隨被拖曳元素一同被拖曳，可以使用這個方法。
                     dataTransfer.types。返回在dragstart事件觸發時爲元素存儲數據的格式。如果是系統文件的拖曳，則返回files。
                     dataTransfer.setData(format, data)。爲元素添加數據，在dragstart事件觸發時可以用它爲被拖曳元素存儲數據。數據格式一般有兩種：
                           text/plain（設置format爲字符串text即可，主要用於文本數據）和text/uri-list（設置format爲字符串url即可，主要用於url）。
                     data=dataTransfer.getData(format)。返回存儲的數據。如果數據不存在，則返回空字符串。
                     dataTransfer.clearData([format])。刪除指定格式的數據。如果不指定格式，則刪除所有數據。
                    dataTransfer.files。如果是拖曳系統文件，返回正在被拖曳的文件列表對象。可以通過它獲得所拖曳的文件數據。【拖拽上傳】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
 <head>
     <meta http-equiv="content-type" charset="utf-8"  />
     <meta name="generator" content="editplus" />
     <meta name="author" content="" />
     <meta name="keywords" content="" />
     <meta name="description" content="" />
     <title> fileAPI(圖片拖拽上傳) </title>
     <style type="text/css">
            #box{                                  /* 容器基本樣式 */
                border: 2px gray dotted;
                width: 171px;
                height: 158px;
                line-height: 158px;
                text-align: center;
                mask-image: url(mask.png);         /* 實現虛化效果的遮罩圖片 */
                -webkit-mask-image: url(mask.png); /* Mask的WebKit兼容寫法，目前僅WebKit內核瀏覽器支持Mask */
                mask-clip: content;                /* 控制遮罩圖片的顯示區域，不擋住邊框，可以去掉試試是什麼效果*/
                -webkit-mask-clip: content;        /* Mask的WebKit兼容寫法，目前僅WebKit內核瀏覽器支持Mask */
            }
            #box.hover{                            /* 將鼠標拖曳到容器上時的樣式 */
                border: 2px olive solid;
            }
            #box.drop{                             /*放置圖片後的容器樣式 */
                border: 2px blue solid; 
            }
     </style>
 </head>
 <body>
     <div id="box"></div>
     <script type="text/javascript">

        History  API（歷史記錄）
               提供了兩個新方法pushState()和replaceState()，它們允許我們添加和改變當前瀏覽器的地址。
               設置：
                     history.pushState({username: "html5"}, "user account", "user.html");  用於向history對象添加當前頁面的記錄，並且改變瀏覽器地址欄的URL
                     history.replaceState({username: "html5" }, "user account", "user.html"); 類似於pushState()，只是將當前頁面狀態替換爲新的狀態
                                       值：          state對象                標題          可選參數目標URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
 <head>
     <meta http-equiv="content-type" content="text/html;charset=utf-8"  />
     <meta name="generator" content="editplus" />
     <meta name="author" content="" />
     <meta name="keywords" content="" />
     <meta name="description" content="" />
     <title> History API新特性 </title>
     <style type="text/css">
            *{margin:0;padding:0;}
            div{width:100px;height:50px;text-align:center;line-height:50px;color:#fff;}
            #click-item{background:#ffcc00;}
            #result-item{background:#ff9900;}
     </style>
 </head>
 <body>
     <div id="click-item"></div>
     <div id="result-item"></div>
     <script type="text/javascript">
            var clickItem = document.getElementById('click-item');
            var resultItem = document.getElementById('result-item');
            clickItem.onclick = function(){
                resultItem.innerHTML = 'clicked!';
                history.pushState({note: 'set result'}, '', 'result.html');
            }
     </script>
 </body>
</html>

        Notification API (桌面通知)
               可以使用webkitNotifications.checkPermission這個方法來判斷當前Notification的許可狀態。Notification的狀態一共有3種：
                     0表示PERMISSION_ALLOWED（允許）。
                     1表示PERMISSION_NOT_ALLOWED（未作許可授權）。
                     2表示PERMISSION_DENIED（拒絕）。
               一個小例子，請使用Chrome瀏覽器查看。

        Communication API （跨域通信）
               以往的瀏覽器，跨域存在安全問題（CSRF攻擊，Cross-Site Request Forgery跨站請求僞造），現在使用Communication API可以很好的避免這個問題。
               發展：
                     起初，使用iframe或Frameset直接調用某個頁面；
                     演化，①以Web Service③和各種SDK④下的API爲代表的主動服務模式。它們的代表有新浪微博SDK的API接口、騰訊系列SDK的API接口等各種專業服務提供商。
                              ②以iframe和<script>爲代表的被動服務模式。它們的代表有CNZZ站長統計、天氣預報和其他各類被iframe索引的資源。
                              ③後來被大家廣爲接受的一種方案，即Ajax方式。出於安全考慮，不允許使用跨域。

        WebSocket API
               提供了全雙工通信方式，代表了一個巨大的進步，我們從此可以在Web應用中實現實時的數據傳輸和獲取。
               支持雙向、雙工通信。可以實現實現微博新消息通知、郵件推送、實時遊戲和聊天等功能。

        Web Worker
               簡單來說，就是通過JavaScript創建一個後臺進程（或者叫工作者進程），執行一些特殊的任務（比如耗時比較長的數據處理），並且提供主進程和新進程之間數據交換的
               接口：postMessage和onmessage。它起到互不阻塞執行的效果，避免了傳統的JavaScript執行長時間操作時界面無響應的弊端，提高了性能及用戶體驗。

        Storage API
               主要涉及localStorage API、sessionStorage API、applicationCacheAPI（離線存儲）和服務器端Manifest文件等概念。

        Canvas和WebGL

        Device API
               可能是所有的HTML相關API中最大膽、最有應用前景、最有技術突破的一個草案:，使HTML5 標籤可以直接調用類似攝像頭、電源、系統、文件、網絡等各種重要的
               但是以前從未實現的功能。
               子API:
                     Geolocation API（地理位置API）
                     File API來幫助我們在Web頁面中訪問本地文件，它可以在Web應用中展現文件，或者選擇並讀取文件。
                     Media Capture API增強了HTML表單，提供了對音頻、圖像和視頻進行採集的功能。PC上還未實現，歐朋手機瀏覽器實現HTML5標籤打開攝像頭。
                     Contact API主要應用在移動設備上，提供對用戶通用通訊錄的訪問，包含如下關鍵接口。
                              Contacts接口：提供了訪問用戶通用通訊錄的方法。
                              Contact接口：提供了讀操作來獲取單個聯繫人的信息
                     Calendar API
                              與Contact API非常類似，提供了對用戶通用日曆的存取方式，主要應用在移動設備上。
                              API定義了一個高級的接口來訪問日曆信息，例如事件、提醒、警告或其他日曆信息。
                     System Information API用於爲Web應用提供訪問系統各種運行時屬性的方式，主要也應用在移動設備上。（都還未有瀏覽器實現）
                              電源（電量）
                              CPU（類型、規格和當前系統負載信息）
                              溫度
                              網絡（WIFI?3G/4G？信號強度？）
                              傳感器（偵測外部環境）
                              多媒體編解碼（設備是否支持XX格式）
                              存儲設備（硬盤？閃存卡？性能？）
                              輸出設備（屏幕、聲音播放器... ...）
                              輸入設備（鼠標、鍵盤、攝像頭... ...）
                     Messaging API
                              定義了一個簡單的API來發送和接收電子郵件、短信和彩信，主要應用在移動設備上。許多現代的瀏覽器已經支持mailto（非常常見）、tel（常見）
                              和sms（不常見）協議。MessagingAPI補充了sms:（短信）、mms:（彩信）和mailto:（電子郵件）等URI類型，以提供以下功能：
                                    爲消息添加附件的能力。
                                    發送一條消息成功或者失敗後的回調方法。

                     -----------------------------------------------
                     5種實用API:
                           頁面全屏
                           焦點位置
                           拍攝照片
                           電量變化
                           資源預加載

css Cursor:url()自定義鼠標指針樣式爲圖片

display:inline、block、inline-block的區別

傳遞cookie

阻止a標籤默認行爲的幾種簡單方法

echarts x軸文字高度

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結