整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
如@一條小蟲在「Notion：重新定義數字筆記」中所說：
Notion 自稱是一款「統一管理你的文檔、wiki 和任務的協作空間」。它具有無限的層級和相互鏈接的組織彈性，給筆記間的關系提供了足夠自由的組織方式；它排版靈活，能夠把筆記里的內容按塊( Block )進行組織和拖拽，甚至可以做出 Trello 看板進行項目管理；它的內容類型豐富，可以嵌入圖片、網頁、文檔甚至視頻，幾乎無所不能。
Notion 豐富的應用場景
這款以模塊( Block )化為切入點的筆記軟件以極其強大的功能和應對各種復雜筆記組合要求的能力一經面世便橫掃整個筆記軟件市場。而且，它還憑借著自身實力非凡的美工 UI 和全平臺( WEB )通用的一致體驗，外加多人協作功能，以驚人姿態在 2016 年攻城拔寨，展現了新時代全面數字化筆記應該有的風貌。
現在，這個年輕的后起之秀一個也沒有停下腳步，開發了針對 iOS 平臺的原生客戶端 Notion for iOS。在 Product Hunter 首發宣傳當天一舉拿下日榜、周榜、月榜三個第一名，是當之無愧的明星產品。內測用戶如是評價：
Amazing user experience. It's easy to structure any kind of document as thoughts flow through your brain, and it does that beautifully.
Notion 是有史以來最棒的筆記軟件，我幾乎用它來記錄一切。從制定計劃、撰寫文檔、記錄筆記一直到問題跟蹤，可以說無論什么都不在話下。它不僅更新穩定，而且經常都會有許多小功能更新進來。簡直翹首以盼 Notion 馬上就要支持的離線數據、搜索引擎增強和增強的通知系統了！所有功能馬上就要來了！
而且，隨著 iOS 版更新而來的就是全方位的功能和性能上的加強， 真的讓 Notion 在各種場合下都可以做到游刃有余。
Notion 最大的特點就是萬物模塊化，大到一篇筆記、一段代碼、一個視頻，小到一個圖標、一條列表、一項待辦都是 Notion 的 Block。借助 iOS 設備觸摸板的優勢，在 Notion for iOS 上進行 Block 間的調整和排版變得更方便，一如原生 drag & drop 般絲滑：
iOS 端基本上延續了 Notion 在桌面端的優美 UI，在 iOS 端新建一個頁面和網頁端相差不大：
你可以為每一個頁面(可嵌套)單獨設置封面、圖標、標題和描述，你也可以把這些元素刪除。正文部分使用 Block 來填充(實際上一個頁面也是其父頁面的一個 Block 而已)，默認是一個文本 Text Block。正文部分，你可以在任意位置添加新的 Block，也可以把當前的 Block 轉換成別的類型。
iOS 更新過后，Notion 可添加的 Block 種類進一步增加：
針對文檔、wiki、任務的不同需求，Notion 提供了 20+ 不同的 Block：
頁面：文本、標題、日期、定位、分割線、引用、導入 Html、Markdown
列表：有序列表、無序列表、代辦列表、折疊列表
內嵌：文檔( Word/PPT/Excel/PDF )、文件(上傳任意格式)、網頁、書簽、Google Drive、地圖、推特、設計稿
多媒體：音樂、視頻、圖片、emoji
學術：LaTeX 公式、代碼塊
高級：協同討論、@協作者、按鈕
其中內嵌網頁可以把整個網頁嵌入一個窗格內，如同無邊框的瀏覽器一樣；而書簽則可以通過 URL 爬取到網頁的標題摘要等等放在 Notion 里面。
這里借用@一條小蟲的配圖給大家看看 Notion 支持的 Block 在一個頁面上可以如何豐富地呈現出來：
有關 Notion 的更多用法，大家可以參閱小蟲這篇文章，也可以到官網去查看詳細的文檔。
隨著這次的更新，Notion 的離線數據功能也已開放，你在手機上打開過的頁面，就會自動離線一份在本地，方便隨時查看。另外，分享功能也得到大幅增強，你不僅可以把筆記分享給 Notion 用戶來進行協同編輯，還可以生成 web 頁面讓任何人都可以訪問。或者，你可以直接導出 PDF 和 Markdown 來分發你的內容。
iOS 版本現在和 Web 版本的收費策略保持一致，免費下載和使用，可以用 Google 賬號快速登錄，但是有 300 個 Block 和 3 天歷史版本回溯的限制。Pro 版本 8 美元/月，提供無限的 Block 、協作者、文件大小、Slack 推送和更多高級的功能：
免費用戶也不用擔心，通過邀請他人使用 Notion 雙方也可快速獲贈 150 個 Block，如果邀請人數超過 6 個，即可解鎖 Block 限制，可以說是非常良心了。
TML5提供了一些離線存儲的功能，用于在離線狀態下緩存應用程序的資源和數據。
以下是HTML5中常用的離線存儲技術：
Application Cache允許你定義一個緩存清單文件（Manifest），列出需要在離線狀態下緩存的文件。瀏覽器會根據清單文件緩存這些文件，使得應用程序可以在離線狀態下繼續訪問。Application Cache已被廢棄，推薦使用Service Worker替代。
Service Worker是一種在瀏覽器后臺運行的腳本，可以攔截和處理網絡請求。它可以用于緩存應用程序的資源，包括HTML文件、CSS、JavaScript、圖像等。通過使用Service Worker，應用程序可以在離線狀態下加載緩存的資源，提供離線訪問的能力。
IndexedDB是一種客戶端數據庫，可以在瀏覽器中存儲大量結構化數據。它提供了一個異步的API，用于存儲和檢索數據。應用程序可以使用IndexedDB在本地存儲數據，以便在離線狀態下訪問和操作數據。
Web Storage包括兩種機制：localStorage和sessionStorage。它們都允許應用程序在瀏覽器中存儲數據。localStorage用于持久保存數據，即使瀏覽器關閉后也會保留數據；sessionStorage用于臨時保存數據，當會話結束或瀏覽器關閉后數據將被清除。
.應用程序標簽
DataList(數據列表)
Progress(進度條)
Meter(數值顯示器) 示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>應用程序標簽</title> <style> .my-progress{ -webkit-appearance: none; } </style></head><body><!--數據列表，呈現需要載體--><input type="text" list="data-list"><datalist id="data-list"> <option value="張三"></option> <option value="李四"></option></datalist><!--進度條--><progress></progress><!--progress默認最大值是1，可以設定自己想要的值--><progress class="my-progress" value="30" max="100"></progress><meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter></body>可以利用數據列表（data-list）做一個那種帶下拉框的輸入框，可以根據用戶輸入的內容匹配下拉框的內容（select2也可以實現這種需求，而且最低可以兼容到IE8，推薦用select2）,后面的progress和meter樣式不好控制，用的不太多。
2.自定義屬性（data-*）
在html5中可以自定義數據，以data開頭，利用這個自定義標簽我們可以把屬性暫時存儲到頁面中，在js中可以使用，例子如下：
<html lang="en"><head> <meta charset="UTF-8"> <title>data屬性</title></head><body> <ul id="list"> </ul></body><script> // 鍵是ID 值是信息 var data = { 01: { name: "張三1", age: 18 }, 02: { name: "張三2", age: 19 }, 03: { name: "張三3", age: 20 } }; var list = document.getElementById("list"); for(var id in data){ var item = data[id]; var liem = document.createElement("li"); liem.innerHTML = item.name; //自定義data-*屬性 liem.setAttribute("data-name",item.name); liem.setAttribute("data-age",item.age); list.appendChild(liem); //點擊獲取dataset屬性 liem.addEventListener("click",function(){ //下面這兩種方式均可以，都不帶data- alert(this.dataset['name']); alert(this.dataset.name); }) }</script>下面這篇文章總結的很好，可以參考：http://blog.csdn.net/qq_31851435/article/details/53100691
3.新的表單提交方式
傳統的一共有9中表單提交方式，html5新增了幾種，目前只用在移動端，pc端兼容性有問題，而且在輸入的時候并沒有進行驗證，比如類型是email的，并沒有校驗郵箱格式，還是需要我們自己手動寫正則表達式驗證的，只是在手機端當喚起輸入法的時候會自動切換到英文輸入法。
<head> <meta charset="UTF-8"> <title>新的表單提交方式</title></head><body><h3>傳統的表單提交方式（9種）</h3>用戶名：<input type="text"> <br>密碼：<input type="password"><br>性別：<input type="radio"><br>課程:<input type="checkbox"><br>隱藏：<input type="hidden">文件：<input type="file"><br>按鈕：<input type="button" value="按鈕"><br>表單:<input type="submit"><br>重置：<input type="reset"><br><hr><h3>新的表單提交方式（目前只用在移動端）</h3>顏色：<input type="color"><br>網址：<input type="url"><br>搜索：<input type="search" results="10" placeholder="Search..."><br>郵箱：<input type="email" pattern="^\*.com"><br>日期：<input type="date" min="2015-09-01" max="2018-09-01"><br>圖片：<input type="image"><br>范圍：<input type="range" min="0" max="50" value="10"><br>數字：<input type="number"></body>
4.新的選擇器
html5提供新的選擇器，querySelector選擇單個的元素，返回滿足條件的第一個元素，是一個dom元素，querySelectorAll選擇全部的元素，返回滿足條件的全部元素，是一個dom數組，里面可以是id，標簽或class類。
<html lang="en"><head> <meta charset="UTF-8"> <title>新選擇器</title></head><body><h3>新選擇器</h3><ul> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> <li class="item">item4</li> <li class="item">item5</li> <li class="item">item6</li> <li class="item">item7</li> <li class="item">item8</li> <li class="item">item9</li> <li class="item">item10</li></ul></body><script> //匿名函數，可以將作用域分隔開 (function(){ var liem = document.querySelector(".item"); //只選擇第一個 console.log(liem.innerHTML); var lis = document.querySelectorAll("ul>li"); //選擇全部 for(var i=0;i<lis.length;i++){ console.log(lis[i]); lis[i].addEventListener("click",function(){ debugger; //可以調試代碼。類似于瀏覽器打斷點 console.log(this.innerHTML); }) } })()</script>5.元素類列表（Element.classList）
新H5中DOM對象多了一個classList屬性，是一個數組:
add 添加一個新的類名
remove 刪除一個類名
contains 判斷是否包含一個指定的類名
toggle 切換一個類名。 element.toggle('class-name',[addorremove])，第一個參數是類名，第二個參數是布爾值，如果是true，則添加類名，如果是false,則去掉類名。示例：
<head> <meta charset="UTF-8"> <title>元素類列表</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body><div class="container"> <div class="collapse navbar-collapse"> <nav class="navbar navbar-default"> <a class="navbar-brand" href="#">Brand</a> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </div></div><script> //匿名函數 (function(){ /** 點擊時添加和刪除類名**/ var lis = document.querySelectorAll(".nav li"); for(var i=0;i<lis.length;i++){ lis[i].addEventListener("click",function(e){ //去掉原先所有的樣式 for(var j=0;j<lis.length;j++){ lis[j].classList.remove("active"); } //添加點擊樣式 this.classList.add("active"); e.preventDefault(); //取消事件的默認操作 }) } /** 點擊時存在類名則刪除，不存在類名則添加**/ var elem = document.querySelector(".navbar-brand"); //點擊時如果存在active這個屬性則去掉，如果不存在這個屬性則加上 elem.addEventListener("click",function(e){ //判斷是否包含active這個類名 var isExist = elem.classList.contains("active"); this.classList.toggle("active",!isExist); e.preventDefault(); }) })()</script></body>6.訪問歷史Api
在HTML5中可以通過window.history操作訪問歷史狀態，讓一個頁面可以有多個歷史狀態
window.history.forward(); // 前進
window.history.back(); // 后退
window.history.go(); // 刷新
history.pushState(放入歷史中的狀態數據, 設置title(現在瀏覽器不支持)， 改變歷史狀態)，通過JS可以加入一個訪問狀態
<head> <meta charset="UTF-8"> <title>歷史記錄</title></head><body><input type="button" value="測試歷史記錄" onclick="addHistory()"></body><script> //添加歷史記錄 function addHistory(){ //判斷瀏覽器是否支持歷史記錄，畢竟是h5的新特性，低版本瀏覽器不支持 if(window.history && history.pushState){ //支持 history.pushState(new Date().toLocaleDateString(),"設置歷史記錄的標簽，但是目前瀏覽器還不支持","?demo="+new Date().toLocaleTimeString()); }else{ console.log("抱歉，瀏覽器不支持歷史記錄") } } //下面這個事件是點擊瀏覽器中的前進或后退時觸發 window.addEventListener("popstate",function(e){ console.log("點擊了歷史按鈕"+e.state); })</script>7.全屏Api
H5中可以用requestFullScreen()方法實現指定元素的全屏顯示（類似于瀏覽器中按F11）。首先需要獲取需要全屏顯示的元素，然后判斷瀏覽器是屬于谷歌內核還是火狐內核或者其它瀏覽器，然后調用響應方法即可。(注意：目前這個特性瀏覽器兼容性還比較差，谷歌和火狐可以)
var elem = 需要全屏的元素;if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen();} else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen();} else if (elem.requestFullScreen){ elem.requestFullScreen();}<head> <meta charset="UTF-8"> <title>全屏顯示</title></head><body><h3 style="cursor: pointer">點我全屏顯示</h3><p>測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示 測試全屏顯示測試全屏顯示測試<br> 全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示測試全屏顯示</p><script> //匿名函數 (function () { //獲取事件源和要全屏顯示的元素 var elem = document.querySelector("p"); document.querySelector("h3").addEventListener("click",function(e){ //判斷瀏覽器是否支持全屏顯示 if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.requestFullScreen){ elem.requestFullScreen(); }else{ console.log("瀏覽器不支持全屏顯示") } }); })()</script></body>8.Application Cache離線訪問技術
在H5中可以利用Application Cache實現離線訪問技術，測試時可以通過谷歌瀏覽器——NetWork——No throttling(Disable cache后面的那個下拉框)——下拉選擇Offline(模擬未聯網的情形)。示例如下：
html代碼：<html lang="en" manifest="cache.manifest"><head> <meta charset="UTF-8"> <title>離線訪問</title> <link rel="stylesheet" href="style.css"></head><body><p>這是html頁面中的內容</p><script src="script.js"></script></body>style.css文件代碼body::before{ content: "這是Css中引入的內容"; font-size: 40px;}script.js文件代碼：document.write("這是js中引入的內容")cache.manifest文件代碼：CACHE MANIFEST# version 1.0.1CACHE: 08離線訪問.html script.js style.cssNETWORK: *解釋：在html代碼中通過css的偽類和js的document.write函數分別輸出兩句話，模擬請求其它文件，然后在manifest（緩存清單）中定義了一個cache.manifest的緩存清單文件，文件里首先定義了當前軟件的版本，下面的CACHE，代表斷網情況下，從下面定義的文件中讀取文件，NETWORK代表聯網時候要讀取的文件，星號代表全部。即斷網時從我定義的文件中讀取文件，聯網時，讀取全部文件，這樣便可實現離線訪問。
9.web網頁存儲
h5中提供sessionStorage和localStorage兩種數據存儲方式，前者存儲的內容只在本次會話中存儲，瀏覽器關閉數據消失，后者是可以永久存儲在瀏覽器中，除非手動或通過程序刪除。這兩種存儲方式比cookie存儲的數據量大，而且可以存儲對象數據（cookie只能存儲字符串數據）。
<head> <meta charset="UTF-8"> <title>網頁存儲</title></head><body><textarea rows="5" cols="30" id="txt-data"></textarea><input type="button" value="設置數據" id="set-data"><input type="button" value="獲取數據" id="get-data"><script> (function(){ var txtValue = document.querySelector("#txt-data"); console.log(txtValue.value); //設置數據 document.querySelector("#set-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ sessionStorage.setItem("key",txtValue.value); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) //獲取數據 document.querySelector("#get-data").addEventListener("click",function (e) { //判斷是否支持存儲 if(window.sessionStorage){ txtValue.value = sessionStorage.getItem("key"); }else{ console.log("還在用渣渣IE嗎？升級吧。。。") } }) })()</script></body>10.操作文件Api
通過file表單選擇文件，之后利用h5提供的文件api可以獲取文件名，大小，類型，最后修改時間等文件信息。
<html lang="en"><head> <meta charset="UTF-8"> <title>操作文件</title> <link rel="stylesheet" href="css/bootstrap.css"></head><body> <div class="container"> <form> <input type="file" class="form-control hidden" id="btn_file" multiple> <input type="button" value="選擇文件" class="btn btn-success" id="btn_select"> <div class="list-group" id="ul_list"> <!--待追加數據位置--> </div> </form> </div></body><script> (function(){ var btn_file = document.querySelector("#btn_file"); var btn_select = document.querySelector("#btn_select"); var ul_list = document.querySelector("#ul_list"); //利用“hidden”類將文件輸入框隱藏，當點擊“選擇文件按鈕時”，調用選擇文件按鈕，選擇文件， // 因為input type="file"這個無法修改樣式，把它隱藏，點擊其它按鈕時，在其它按鈕中調用點擊上傳文件 btn_select.addEventListener("click",function(){ btn_file.click(); }) //選擇文件完成后（即文件內容發生改變后） btn_file.addEventListener("change",function(e){ var files = btn_file.files; //獲取所有文件，并遍歷 for(var i=0;i<files.length;i++){ console.log(files[i]); var liem = document.createElement("li"); liem.setAttribute("class","list-group-item"); liem.innerHTML = ' <h4 class="list-group-item-heading">'+files[i].name+'</h4>'+ '<p class="list-group-item-text">'+files[i].lastModifiedDate.toLocaleTimeString()+' '+(files[i].size/1024).toFixed(2)+'kb</p>' ul_list.appendChild(liem); } }) })()</script>這里是用到了bootstrap的樣式，因為file表單比較丑，而且無法改變樣式，所以我們可以把文件表單隱藏（用hidden隱藏樣式），提供一個按鈕，當點擊這個按鈕時去雕砌選文件的彈框，multiple屬性支持一次選擇多個文件。
11.拖拽文件
拖拽文件時需要依次注冊以下事件：
dragenter 注冊拖拽進入事件
dragleave 注冊拖拽離開事件
dragover 注冊滑動事件（在這里面阻止默認事件）
drop 注冊松手落地事件。 在拖動松手落地事件中判斷拖進來的是文件還是圖片地址還是文字，分別進行處理。e.dataTransfer獲取拖動進來的信息。
<head> <meta charset="UTF-8"> <title>拖拽文件</title> <link rel="stylesheet" href="css/bootstrap.css"> <style> #target{ height: 200px; border: 5px dashed #c0c0c0; color: #505050; padding: 20px; font-size: 40px; cursor: pointer; text-align: center; -webkit-user-select: none; } #target.actived{ border-color: #888; color: #080808; box-shadow: 0 0 80px #e0e0e0 inset; } </style></head><body><div class="container"> <div class="page-header"> <h3>拖拽文件</h3> </div> <div class="jumbotron"> <p>我們這里測試拖拽文件</p> <img src="test.png"> </div> <div id="target"> 拖拽文件進來 <ul id="result" class="list-group"></ul> </div></div></body><script> (function(){ var target = document.querySelector("#target"); var fileList = document.querySelector('#result'); //注冊拖拽進入事件 target.addEventListener("dragenter",function(){ this.classList.add("actived"); //添加樣式 }) //注冊拖拽文件離開事件 target.addEventListener("dragleave",function(){ this.classList.remove("actived"); //添加樣式 }) //注冊落地事件之前必須要先阻止默認事件，這里在滑動里面阻止默認事件 target.addEventListener("dragover",function(e){ e.preventDefault(); //阻止默認事件 e.stopPropagation(); }) //注冊松手落地事件 target.addEventListener("drop",function(e){ //判斷拖入進來的是文件，圖片還是文字，分別處理 if(e.dataTransfer.files.length){ //拖入的是文件 var files = e.dataTransfer.files; for (var i = 0; i < files.length; i++) { var li = document.createElement('li'); li.setAttribute('class', 'list-group-item'); // 創建信息的子節點 li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>'; fileList.appendChild(li); } }else{ //不是文件 var data = e.dataTransfer.getData('text/plain'); //判斷拖入的是文本還是圖片 if(data){ //拖入的是文本,直接置換 target.innerHTML = data; }else{ //拖入的是圖片 var imgElem = document.createElement("img"); imgElem.src = data; target.appendChild(imgElem); } } }) })()</script>12.訪問設備信息
h5提供了許多可以訪問設備的Api，但是目前基本都應用在手機端，pc端使用非常有限。
獲取網絡狀態。
// × 所有PC瀏覽器現在都不支持 只有手機端的Firefoxvar connectionInfo = navigator.connection;或者下面這個方法：if (navigator.onLine){ console.log('online');}else{ console.log('offline');}獲取重力感應方向
window.addEventListener('deviceorientation', function(event) { var a = event.alpha; // Y軸 上下方向 var b = event.beta; // Z軸 東西方向 var g = event.gamma; // X軸 南北方向});加速度計
window.addEventListener('devicemotion', function(e) { // 獲取加速計數據 {x,y,z} var acceleration = e.accelerationIncludingGravity;});地理坐標
navigator.geolocation.getCurrentPosition(function(e) { // e.coords.longitude : 經度, e.coords.latitude : 緯度 document.querySelector('#result').innerHTML = JSON.stringify(e.coords);}, function(e) { document.querySelector('#result').innerHTML = JSON.stringify(e);});navigator.geolocation.watchPosition(success, error);H5還有其它的一些特性，包括語義化標簽，ARIA無障礙互聯網應用，多媒體（包括音頻，視頻）等等，真正使用的時候再詳細研究。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
