HTML5的新特性

時間  2019-11-10
標籤 html5 html 特性 欄目 HTML5 简体版
原文   原文鏈接

　　1、HTML5新特性javascript

　　一、視頻php

　　在HTML5以前，網絡上的視頻大多都是使用Flash插件進行播放的，保險如今也仍然有不少。HTML5規定了一種經過video元素包含視頻的標註方法。css

　　視頻格式的支持：html

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

　　Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件html5

　　MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件java

　　WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件git

　　video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式，示例：web

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
屬性 值 描述
autoplay autoplay 若是出現該屬性，則視頻在就緒後立刻播放。
controls controls 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
height pixels 設置視頻播放器的高度。
loop loop 若是出現該屬性，則當媒介文件完成播放後再次開始播放。
preload preload 若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。
src url 要播放的視頻的 URL。
width pixels 設置視頻播放器的寬度。

　　關於視頻的javascript控制與事件。大致上有play()，pause()，load()三種方法，事件和屬性詳細參見HTML5 視頻/DOM。canvas

　　二、音頻瀏覽器

　　和視頻相同，以前也沒有網頁直接播放音頻的標準，都是使用的插件。如今能夠直接使用audio標籤來加載音頻文件了。

　　音頻格式的支持：

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis   √ √ √  
MP3 √     √ √
Wav   √ √   √

　　audio 元素容許多個 source 元素。source 元素能夠連接不一樣的音頻文件。瀏覽器將使用第一個可識別的格式：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
屬性 值 描述
autoplay autoplay 若是出現該屬性，則音頻在就緒後立刻播放。
controls controls 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
loop loop 若是出現該屬性，則每當音頻結束時從新開始播放。
preload preload 若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。
src url 要播放的音頻的 URL。

　　事件與控制和視頻的相同。

　　三、拖放

　　拖放（Drag 和 drop）是 HTML5 標準的組成部分，抓取對象之後拖到另外一個位置。在 HTML5 中，任何元素都可以拖放。

　　示例以下：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>請把 W3School 的圖片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/w3school_banner.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

　　看起來很複雜，可是分步分析要簡單一下。

　　拖放通常狀況下都須要藉助javascript來輔助處理，一個拖放的步驟以下：

　　第一步：設置對象爲可拖放的。

　　<img draggable="true" />

　　第二步：什麼被拖動了

　　分別調用ondragstart 和 setData()，ondragstart是當拖動開始時執行的方法，上面的例子在拖動開始時調動drag(event)方法，傳遞進去一個event參數，這個event參數中包含被拖動的元素，也即本元素。

　　第三步：拖動時觸發什麼操做

　　調用event.dataTransfer.setData() 方法設置被拖數據的數據類型和值:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

　　在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。

　　第四步：放到何處

　　ondragover 事件規定在何處放置被拖動的數據。默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。這要經過調用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()。

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>

　　這裏定義了放置時觸發什麼事件（用於放置內容），被拖動到上面時觸發什麼事件（用於執行上面的preventDefault()方法）

　　第五步：進行放置

　　當放置被拖數據時，會發生 drop 事件。在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

　　調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以連接形式打開）

　　經過 dataTransfer.getData("Text") 方法得到被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。

　　被拖數據是被拖元素的 id ("drag1")

　　把被拖元素追加到放置元素（目標元素）中

　　其中event.target返回的是觸發事件的目標，也即觸發事件的元素。

　　四、畫布

　　HTML5中又一個強大的功能，canvas 元素，用於在網頁上繪製圖形。

　　HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。畫布是一個矩形區域，您能夠控制其每一像素。canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。利用畫布和javascript能夠製做一些簡單的HTML5遊戲。

　　使用方法：

<canvas id="myCanvas" width="200" height="100"></canvas>

　　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);

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();

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>

　　首先獲取canvas對象，而後使用對象的getContext方法獲取一個context對象，能夠是2d的也能夠是3d的。

　　getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

　　座標原點是左上角。

 　　五、SVG矢量圖形

　　一個直接畫矢量圖的方法出如今了HTML5中，他就是SVG元素。

　　HTML5 支持內聯 SVG。

  • SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
  • SVG 用於定義用於網絡的基於矢量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失
  • SVG 是萬維網聯盟的標準

　　與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：

  • SVG 圖像可經過文本編輯器來建立和修改
  • SVG 圖像可被搜索、索引、腳本化或壓縮
  • SVG 是可伸縮的
  • SVG 圖像可在任何的分辨率下被高質量地打印
  • SVG 可在圖像質量不降低的狀況下被放大

　　直接內聯SVG：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

　　更多更強大的功能參考：SVG教程

　　插播：SVG與canvas的區別：

　　Canvas 和 SVG 都容許您在瀏覽器中建立圖形，可是它們在根本上是不一樣的。

　　SVG 是一種使用 XML 描述 2D 圖形的語言。

　　SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。

　　在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

　　Canvas 經過 JavaScript 來繪製 2D 圖形。

　　Canvas 是逐像素進行渲染的。

　　在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas

SVG
依賴分辨率 不依賴分辨率
不支持事件處理器 支持事件處理器
弱的文本渲染能力 最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
可以以 .png 或 .jpg 格式保存結果圖像 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 不適合遊戲應用

　　六、地理定位

　　在移動網站上頗有用，經過網頁獲取位置展現內容等等。

　　HTML5 Geolocation API 用於得到用戶的地理位置。

　　示例：

<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊按鈕獲取您當前座標（可能須要比較長的時間獲取）：</p>
<button onclick="getLocation()">點我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="緯度: " + position.coords.latitude + 
  "<br>經度: " + position.coords.longitude;    
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用戶拒絕對獲取地理位置的請求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="請求用戶地理位置超時。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知錯誤。"
      break;
    }
  }
</script>
</body>
</html>
  • 檢測是否支持地理定位
  • 若是支持，則運行 getCurrentPosition() 方法。若是不支持，則向用戶顯示一段消息。
  • 若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象
  • getCurrentPosition() 方法的第二個參數用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數，參數爲getCurrentPosition對象中傳遞過去的error對象
  • showPosition() 函數中對象position得到並顯示經度和緯度

　　position對象的成員有：

屬性 描述
coords.latitude 十進制數的緯度
coords.longitude 十進制數的經度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米計
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，從正北開始以度計
coords.speed 速度，以米/每秒計
timestamp 響應的日期/時間

　　其餘有趣的方法：

　　watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

　　clearWatch() - 中止 watchPosition() 方法

　　下面的例子展現 watchPosition() 方法。您須要一臺精確的 GPS 設備來測試該例（好比 iPhone）：

<!DOCTYPE html>
<html>
<body>
<p id="demo">點擊按鈕獲取您當前座標（可能須要比較長的時間獲取）：</p>
<button onclick="getLocation()">點我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="緯度: " + position.coords.latitude + 
  "<br>經度: " + position.coords.longitude;    
  }
</script>
</body>
</html>

　　獲取地理位置的功能能夠與Google Map結合使用，製做一些地圖類的網頁。關於與地圖API結合使用，參考網絡。

　　七、HTML5存儲

　　用於在客戶端存儲數據，由於HTTP是無狀態連接，能夠把一些內容放在本地存儲中。

　　HTML5 提供了兩種在客戶端存儲數據的新方法：

　　localStorage - 沒有時間限制的數據存儲，sessionStorage - 針對一個 session 的數據存儲。

　　以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

　　在 HTML5 中，數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的狀況下存儲大量數據成爲可能。

　　對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。

　　HTML5 使用 JavaScript 來存儲和訪問數據。

　　localStorage 方法：localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。如何建立和訪問 localStorage：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
    {
    localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
else
    {
    localStorage.pagecount=1;
    }
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器會繼續計數。</p>

</body>
</html>

　　sessionStorage 方法

　　sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。如何建立並訪問一個 sessionStorage：

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
    {
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
else
    {
    sessionStorage.pagecount=1;
    }
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script> 

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器已經重置了。</p>

</body>
</html>

　　八、應用緩存

　　鑑於HTML強大的功能，能夠作一些WEB應用，可是若是應用比較大，每次打開都須要很長時間，這個時候就須要用到應用緩存了。

　　使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。

　　HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

　　應用程序緩存爲應用帶來三個優點：

　　離線瀏覽 - 用戶可在應用離線時使用它們

　　速度 - 已緩存資源加載得更快

　　減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

　　如下是一個能夠離線瀏覽的網頁的示例：

<!DOCTYPE html>
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">得到日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>請打開<a href="/example/html5/html5_html_manifest.html" target="_blank">這個頁面</a>，而後脫機瀏覽，從新加載頁面。頁面中的腳本和圖像依然可用。</p>
</body>
</html>

 　　使用說明：

　　如需啓用應用程序緩存，請在文檔的 <html> 標籤中包含 manifest 屬性，每一個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。若是未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。manifest 文件的建議的文件擴展名是：".appcache"。

　　注意：manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。

　　manifest 文件：

　　manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

　　manifest 文件可分爲三個部分：

　　CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存

　　NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存

　　FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

　　（1）、CACHE MANIFEST：第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

　　上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

　　（2）、NETWORK

　　下面的 NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的：

NETWORK:
login.asp

　　可使用星號來指示全部其餘資源/文件都須要因特網鏈接。

　　（3）、FALLBACK

　　下面的 FALLBACK 小節規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件：

FALLBACK:
/html5/ /404.html

　　第一個 URI 是資源，第二個是替補。

　　那麼如何更新緩存呢？

　　一旦應用被緩存，它就會保持緩存直到發生下列狀況：

　　用戶清空瀏覽器緩存

　　manifest 文件被修改（參閱下面的提示）

　　由程序來更新應用緩存

　　完整的示例：

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

　　重要提示：以 "#" 開頭的是註釋行，但也可知足其餘用途。應用的緩存會在其 manifest 文件更改時被更新。若是您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。

　　注意：一旦文件被緩存，則瀏覽器會繼續展現已緩存的版本，即便您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您須要更新 manifest 文件。

　　瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點 5MB）。

　　九、Web Workers

　　當網頁在執行javascript時，您的網頁可能會暫時失去響應，可是若是是個很是耗時間的javascript呢，網頁失去響應可能會被用戶覺得瀏覽器崩潰了，這就得不償失了，在應用軟件中咱們可使用多線程解決這個問題，在HTML5中也引入了相似的功能，叫作Web Workers。

　　web worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

　　使用方法：首先須要建立一個JS腳本，用於在後臺執行：

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

　　以上代碼中重要的部分是 postMessage() 方法 - 它用於向 HTML 頁面傳回一段消息。

　　而後就是頁面中的部分了：

<!DOCTYPE html>
<html>
<body>

<p>計數: <output id="result"></output></p>
<button onclick="startWorker()">開始 Worker</button> 
<button onclick="stopWorker()">中止 Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
  {
  if(typeof(w)=="undefined")
  {
  w=new Worker("/example/html5/demo_workers.js");
  }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
  }
}

function stopWorker()
{ 
w.terminate();
}
</script>

</body>
</html>

　　先判斷瀏覽器是否支持worker，而後再判斷worker是否已建立，沒有建立則建立一個worker，內容是咱們的js腳本。

　　爲worker對象添加onmessage事件監聽器，當worker對象使用postMessage(?)方法傳遞一個對象時，就會觸發onmessage事件。

　　在onmessage事件監聽器中，經過讀取event.data來讀取postMessage傳遞的值。

　　中止worker時使用w.terminate()，釋放資源。

　　因爲 web worker 位於外部文件中，它們沒法訪問下例 JavaScript 對象：window 對象，document 對象，parent 對象。

　　十、HTML5 服務器發送事件(Server-Sent Events)

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

　　之前也可能作到這一點，前提是網頁不得不詢問是否有可用的更新。經過服務器發送事件，更新可以自動到達。

　　示例：

<!DOCTYPE html>
<html>
<body>
<h1>獲取服務端更新數據</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("demo_sse.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data + "<br>";
    };
  }
else
  {
  document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
  }
</script>

</body>
</html>

　　先檢查是否支持SSE，支持再作處理。

　　服務器端代碼示例：

　　爲了讓上面的例子能夠運行，您還須要可以發送數據更新的服務器（好比 PHP 和 ASP）。

　　服務器端事件流的語法是很是簡單的。把 "Content-Type" 報頭設置爲 "text/event-stream"。如今，您能夠開始發送事件流了。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

　　把報頭 "Content-Type" 設置爲 "text/event-stream"

　　規定不對頁面進行緩存

　　輸出發送日期（始終以 "data: " 開頭）

　　向網頁刷新輸出數據

　　在上面的例子中，咱們使用 onmessage 事件來獲取消息。不過還可使用其餘事件：

事件 描述
onopen 當通往服務器的鏈接被打開時
onmessage 當接收到消息時
onerror 當錯誤發生時
onclose 當鏈接關閉時

　　以上能夠看做是HTTP的SOCKET通訊，更多詳細內容參考WebSocket。

　　十一、新的語義元素與表單元素

　　參考w3cschool的語義元素與w3school的表單元素。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程