整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5 是第五個(gè)且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。 -- Palak Shah
本文導(dǎo)航
-新標(biāo)簽和元素 …… 08%
-HTML5 的高級(jí)功能 …… 16%
-地理位置 …… 16%
-網(wǎng)絡(luò)存儲(chǔ) …… 33%
-應(yīng)用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%
-HTML5 工具 …… 78%
編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/作者： Palak Shah
譯者： geekpi
HTML5 是第五個(gè)且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個(gè)更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動(dòng)態(tài)。它是為所有人提供更好的 Web 體驗(yàn)而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動(dòng)態(tài)和交互。
HTML5 的新功能是：
新標(biāo)簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲(chǔ)
新的表單控件，如日歷、日期和時(shí)間
新媒體功能
地理位置
HTML5 還不是正式標(biāo)準(zhǔn)（LCTT 譯注：HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個(gè)插件。
語義化元素： 圖 1 展示了一些有用的語義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。
圖 1：語義化元素
圖 2：表單元素
圖 3：圖形元素
圖 4：媒體元素
地理位置這是一個(gè) HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或?yàn)g覽器彈出窗口來實(shí)現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是：
公共交通網(wǎng)站
出租車及其他運(yùn)輸網(wǎng)站
電子商務(wù)網(wǎng)站計(jì)算運(yùn)費(fèi)
旅行社網(wǎng)站
房地產(chǎn)網(wǎng)站
在附近播放的電影的電影院網(wǎng)站
在線游戲
網(wǎng)站首頁提供本地標(biāo)題和天氣
工作職位可以自動(dòng)計(jì)算通勤時(shí)間
工作原理： 地理位置通過掃描位置信息的常見源進(jìn)行工作，其中包括以下：
全球定位系統(tǒng)（GPS）是最準(zhǔn)確的
網(wǎng)絡(luò)信號(hào) - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數(shù)來檢測(cè)瀏覽器中的地理位置支持：
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對(duì)象返回。
語法是：
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation：定義了檢索位置信息的回調(diào)方法。
ErrorHandler（可選）：定義了在處理異步調(diào)用時(shí)發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)方法。
options （可選）： 定義了一組用于檢索位置信息的選項(xiàng)。
我們可以通過兩種方式向用戶提供位置信息：測(cè)地和民用。
描述位置的測(cè)地方式直接指向緯度和經(jīng)度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示，每個(gè)屬性/參數(shù)都具有測(cè)地和民用表示。
圖 5 包含了一個(gè)位置對(duì)象返回的屬性集。
圖5：位置對(duì)象屬性
網(wǎng)絡(luò)存儲(chǔ)在 HTML 中，為了在本機(jī)存儲(chǔ)用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲(chǔ)，網(wǎng)站利用它在本機(jī)上存儲(chǔ)用戶數(shù)據(jù)。
與 Cookie 相比，Web 存儲(chǔ)的優(yōu)點(diǎn)是：
更安全
更快
存儲(chǔ)更多的數(shù)據(jù)
存儲(chǔ)的數(shù)據(jù)不會(huì)隨每個(gè)服務(wù)器請(qǐng)求一起發(fā)送。只有在被要求時(shí)才包括在內(nèi)。這是 HTML5 Web 存儲(chǔ)超過 Cookie 的一大優(yōu)勢(shì)。
有兩種類型的 Web 存儲(chǔ)對(duì)象：
本地 - 存儲(chǔ)沒有到期日期的數(shù)據(jù)。
會(huì)話 - 僅存儲(chǔ)一個(gè)會(huì)話的數(shù)據(jù)。
如何工作： localStorage 和 sessionStorage 對(duì)象創(chuàng)建一個(gè) key=value 對(duì)。比如： key="Name"， value="Palak"。
這些存儲(chǔ)為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進(jìn)行轉(zhuǎn)換。
下面給出了使用 Web 存儲(chǔ)對(duì)象的語法：
存儲(chǔ)一個(gè)值：
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
得到一個(gè)值：
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
刪除一個(gè)值： -removeItem("key1");
刪除所有值：
localStorage.clear();
應(yīng)用緩存（AppCache）使用 HTML5 AppCache，我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機(jī)工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時(shí)）。
應(yīng)用緩存的優(yōu)點(diǎn)是：
網(wǎng)頁瀏覽可以脫機(jī)
頁面加載速度更快
服務(wù)器負(fù)載更小
cache manifest 是一個(gè)簡(jiǎn)單的文本文件，其中列出了瀏覽器應(yīng)緩存的資源以進(jìn)行脫機(jī)訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中，如下所示：
<html manifest="test.appcache">...
</html>
它應(yīng)該在你要緩存的所有頁面上。
緩存的應(yīng)用程序頁面將一直保留，除非：
用戶清除它們
manifest 被修改
緩存更新
視頻在 HTML5 發(fā)布之前，沒有統(tǒng)一的標(biāo)準(zhǔn)來顯示網(wǎng)頁上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)方式。
目前，video 元素支持三種視頻格式，如表 2 所示。
下面的例子展示了 video 元素的使用：
<! DOCTYPE HTML><html>
<body>
<video src=" vdeo.ogg" width="320" height="240" controls="controls">
This browser does not support the video element.
</video>
</body>
</html>
例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個(gè) MPEG4 和 WebM 文件。
video 元素允許多個(gè) source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：
<video width="320" height="240" controls="controls"><source src="vdeo.ogg" type="video/ogg" />
<source src=" vdeo.mp4" type="video/mp4" />
<source src=" vdeo.webm" type="video/webm" />
This browser does not support the video element.
</video>
圖6：Canvas 的輸出
音頻對(duì)于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。
目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。
audio 元素的使用如下所示：
<! DOCTYPE HTML><html>
<body>
<audio src=" song.ogg" controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>
此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個(gè) MP3 和 Wav 文件。
audio 元素允許多個(gè) source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：
<audio controls="controls"><source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
This browser does not support the audio element.
</audio>
畫布（Canvas）要在網(wǎng)頁上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實(shí)現(xiàn)繪制。所有繪畫應(yīng)在 JavaScript 中。
<script type="text/javascript">var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.storkeStyle = "red";
cxt.fillRect(10,10,100,100);
cxt.storkeRect(10,10,100,100);
</script>
以上腳本的輸出如圖 6 所示。
你可以繪制許多對(duì)象，如弧、圓、線/垂直梯度等。
為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計(jì)人員都應(yīng)該使用 HTML5 工具，當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時(shí)，這些工具非常有幫助。它們提高了網(wǎng)頁設(shè)計(jì)的可用性。
以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。
HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動(dòng)畫等。
Liveweave： 用來測(cè)試代碼。它減少了保存代碼并將其加載到屏幕上所花費(fèi)的時(shí)間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動(dòng)完成功能，這使得開發(fā)和測(cè)試更快更容易。
Font dragr： 在瀏覽器中預(yù)覽定制的 Web 字體。它會(huì)直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動(dòng)字形、Web 開放字體和矢量圖形來馬上測(cè)試。
HTML5 Please： 可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個(gè)功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語法，以及如何使用元素的一般建議等。
Modernizr： 這是一個(gè)開源工具，用于給訪問者瀏覽器提供最佳體驗(yàn)。使用此工具，你可以檢測(cè)訪問者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。
Adobe Edge Animate： 這是必須處理交互式 HTML 動(dòng)畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無瑕疵的動(dòng)畫，可以跨多個(gè)設(shè)備運(yùn)行。
Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來不錯(cuò)，并且是網(wǎng)站的一部分。
The W3 Validator： W3 驗(yàn)證工具測(cè)試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測(cè)試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯(cuò)誤和警告。
HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個(gè)良好的網(wǎng)絡(luò)體驗(yàn)。
Palak Shah
作者是高級(jí)軟件工程師。她喜歡探索新技術(shù)，學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者：Palak Shah[2] 譯者：geekpi 校對(duì)：wxy
本文由 LCTT 原創(chuàng)編譯，Linux中國(guó) 榮譽(yù)推出
作者：charryhuang；轉(zhuǎn)自：騰訊技術(shù)工程
document，標(biāo)簽名、文檔對(duì)象模型的名稱也是由此而來。<h1>、<p>、<a>。后來為了豐富網(wǎng)頁的內(nèi)容，<img>、<table>標(biāo)簽誕生了。30pt * 40% + 20pt * 60% 作為h2字體大小的最終值。HTML5崗位技能技術(shù)是計(jì)算機(jī)類專業(yè)重要的核心課程，課程所包含的教學(xué)內(nèi)容多，實(shí)踐性強(qiáng)，并且相關(guān)技術(shù)更新快。傳統(tǒng)的課堂講授模式以教師為中心，學(xué)生被動(dòng)式接收，難以調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性和主動(dòng)性。混合式教學(xué)結(jié)合線上線下教學(xué)模式，以學(xué)生為中心，變被動(dòng)為主動(dòng)，充分調(diào)動(dòng)學(xué)生學(xué)習(xí)的積極性，提升課程的教學(xué)效果。
HTML5崗位技能是指構(gòu)建 Web 應(yīng)用程序用戶界面的過程。它涵蓋了網(wǎng)頁設(shè)計(jì)、網(wǎng)頁制作以及網(wǎng)站的前端開發(fā)等方面。HTML5崗位技能是屬于互聯(lián)網(wǎng)技術(shù)領(lǐng)域中的一項(xiàng)重要工作。
作為 HTML5崗位技能人員，我們的主要任務(wù)是將設(shè)計(jì)師提供的網(wǎng)頁設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁前端代碼，然后通過瀏覽器展示給用戶。在這個(gè)過程中，我們需要使用 HTML、CSS和JavaScript 等技術(shù)來實(shí)現(xiàn)網(wǎng)頁的布局、樣式和交互效果。
在Web前端開發(fā)中，我們還需要掌握一些常用的前端框架和工具例如，Bootstrap 是一個(gè)流行的前端框架，它提供了一套響應(yīng)式的網(wǎng)頁模板和組件，可以快速搭建出適配不同設(shè)備的網(wǎng)頁。另外，還有Vue.js和 React等JavaScript 框架，它們可以幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用。
除了以上提到的技術(shù)和工具，作為 HTML5崗位技能人員，我們還需要了解和應(yīng)用一些 Web 標(biāo)準(zhǔn)和最佳實(shí)踐。比如，響應(yīng)式設(shè)計(jì)是一種設(shè)計(jì)方法，可以使網(wǎng)頁在不同設(shè)備上都能夠良好地展示和使用。此外，還需要關(guān)注網(wǎng)頁的性能優(yōu)化，包括減少 HTTP 請(qǐng)求、壓縮文件、使用緩存等方面的技巧來提升網(wǎng)頁的加載速度和用戶體驗(yàn)。
HTML5崗位技能實(shí)訓(xùn)室的培養(yǎng)目標(biāo)是培養(yǎng)掌握Web前端基礎(chǔ)理論知識(shí)、掌握前端開發(fā)技術(shù)、掌握移動(dòng)端開發(fā)技術(shù)、掌握Web測(cè)試技術(shù)和掌握數(shù)據(jù)庫(kù)技術(shù)等知識(shí)和技能、動(dòng)手能力強(qiáng)、適應(yīng)各種崗位工作的復(fù)合應(yīng)用型人才，從事Web前端開發(fā)、移動(dòng)端開發(fā)、軟件測(cè)試、系統(tǒng)維護(hù)、解決方案設(shè)計(jì)等工作。
HTML5崗位技能實(shí)訓(xùn)室是一個(gè)旨在提供實(shí)踐環(huán)境和教學(xué)資源的綜合實(shí)訓(xùn)室。HTML5崗位技能實(shí)訓(xùn)室的目標(biāo)是為學(xué)生提供一個(gè)真實(shí)的HTML5崗位技能環(huán)境，使他們能夠?qū)W習(xí)并實(shí)踐HTML5崗位技能的相關(guān)技術(shù)和方法。
HTML5崗位技能實(shí)訓(xùn)室建設(shè)方案系統(tǒng)是一個(gè)集硬件、軟件和教學(xué)資源于一體的綜合實(shí)訓(xùn)室，HTML5崗位技能實(shí)訓(xùn)室的建設(shè)旨在為學(xué)生提供一個(gè)實(shí)踐和交流的平臺(tái)，讓他們通過實(shí)際項(xiàng)目的開發(fā)來應(yīng)用所學(xué)的知識(shí)，培養(yǎng)解決問題和合作的能力，同時(shí)也促進(jìn)創(chuàng)新和創(chuàng)業(yè)精神的培養(yǎng)。這樣的實(shí)訓(xùn)室可以提升學(xué)生的實(shí)踐能力，并為他們將來投身HTML5崗位技能行業(yè)做好準(zhǔn)備。
HTML5崗位技能實(shí)訓(xùn)室以HTML5崗位技能領(lǐng)域?qū)W習(xí)者的職業(yè)生涯發(fā)展及終身學(xué)習(xí)需求為依據(jù)，重點(diǎn)滿足職業(yè)院校在校學(xué)生、進(jìn)修教師、企業(yè)員工、社會(huì)自學(xué)者四類對(duì)象不同層次的學(xué)習(xí)需求，聯(lián)合全國(guó)高水平院校以及企業(yè)，建設(shè)HTML5崗位技能專業(yè)優(yōu)質(zhì)專業(yè)資源、課程資源、認(rèn)證資源、競(jìng)賽資源。企業(yè)資源等內(nèi)容:優(yōu)化資源庫(kù)平臺(tái)，在“能學(xué)、輔教”的基礎(chǔ)上，滿足個(gè)性化學(xué)習(xí)者私人定制的實(shí)際需要，并完善平臺(tái)的運(yùn)行機(jī)制，保證平臺(tái)內(nèi)容的持續(xù)更新: 依托資源庫(kù)平臺(tái)，實(shí)現(xiàn)學(xué)生學(xué)習(xí)效果評(píng)價(jià)，能夠?yàn)槠髽I(yè)出具學(xué)生能力分析報(bào)告，指導(dǎo)企業(yè)招聘和學(xué)生就業(yè)。
3.1HTML5崗位技能教學(xué)平臺(tái)
平臺(tái)基于spring cloud微服務(wù)架構(gòu)，提供便捷的SSO單點(diǎn)登錄，采用kubernetes進(jìn)行部署，可支持公有云、混合云、私有云的安裝模式，數(shù)據(jù)層使用MySQL集群和MongoDB集群，實(shí)現(xiàn)了全流程EdvOps自動(dòng)化運(yùn)維，具有高內(nèi)聚、松耦合、業(yè)務(wù)單一、高性能、高并發(fā)、高可能、跨平臺(tái)、跨語言等特點(diǎn)。主要模塊有課程制作工具、云盤、共享課、我的課、云優(yōu)選課、云視頻庫(kù)、3D模型庫(kù)。
課程制作工具：由平臺(tái)提供專用的微服務(wù)模塊進(jìn)行支撐，采用websocket雙向通信技術(shù)，底層存儲(chǔ)采用三層遞進(jìn)的緩存方式，目的就是為了加快課程資源的加載速度。自主研發(fā)視頻轉(zhuǎn)碼，在線視頻剪輯功能。支持由word文檔直接導(dǎo)入，并且根據(jù)標(biāo)題類型自動(dòng)生成目錄，方便快捷。同時(shí)支持ppt、excel、圖片、超鏈接、視頻、音頻、3D模型、章節(jié)測(cè)驗(yàn)等內(nèi)容的插入，實(shí)現(xiàn)多個(gè)超文本文件的同屏展示。
共享課：使用訂單配發(fā)或校內(nèi)共享的概念，讓課程資源更大程度的進(jìn)行共享。
我的課：支持從共享課資源中直接進(jìn)行“生成副本”，導(dǎo)入進(jìn)我的課中，并且同時(shí)支持自行創(chuàng)建。所有的課程資源支持導(dǎo)出功能，可導(dǎo)出為本地的離線文件，導(dǎo)出文件為后綴名為wz的加密文件，在使用平臺(tái)進(jìn)行二次導(dǎo)入直接生成課程資源，便于線上傳播。
云優(yōu)選課：由行業(yè)資深從業(yè)人員在互聯(lián)網(wǎng)上收集整理的學(xué)習(xí)資源，包括系列類學(xué)習(xí)視頻和知識(shí)點(diǎn)類學(xué)習(xí)視頻，供教師和學(xué)生進(jìn)行自主學(xué)習(xí)。
云視頻庫(kù)：平臺(tái)提供數(shù)百個(gè)包含各專業(yè)的微課視頻，可直接引用到課程資源中。
3D模型庫(kù)：采用three。js技術(shù)，實(shí)現(xiàn)在線加載3D模型，提供更加直觀形象的教學(xué)體驗(yàn)。
題庫(kù)：題庫(kù)支持通用題目（單選題、多選題、判斷題、填空題、主觀題）以及實(shí)訓(xùn)題目（編程題、web前端題、虛擬化題等）；對(duì)于通用類題目可采用excel模板批量導(dǎo)入，采用瀑布流的展示方式，可共享到校內(nèi)供其他教師進(jìn)行使用。
作業(yè)：支持手動(dòng)建題和從題庫(kù)中選題兩種模式創(chuàng)建作業(yè)，提供作業(yè)庫(kù)模塊，作業(yè)庫(kù)內(nèi)的作業(yè)可多次發(fā)放給學(xué)生，對(duì)于作業(yè)平臺(tái)提供自動(dòng)評(píng)測(cè)，包括單選題、多選題、判斷題、填空題、編程題、虛擬化題。
考試：支持導(dǎo)入試卷、手動(dòng)創(chuàng)建、題庫(kù)選題三種創(chuàng)建方式，同時(shí)支持系統(tǒng)隨機(jī)組卷功能；提供試卷庫(kù)模塊，試卷庫(kù)內(nèi)的試卷可多次發(fā)放給學(xué)生，支持試卷的自動(dòng)判分。
課堂活動(dòng)：平臺(tái)支持多種課堂活動(dòng)，如：簽到、主題討論、提問、分組任務(wù)、投票、問卷、計(jì)時(shí)器等，提高課堂的趣味性和參與性。
個(gè)人云盤：平臺(tái)將用戶在備課，教學(xué)等過程中使用的文件，保存在個(gè)人云盤空間，支持二次直接使用和存檔，實(shí)現(xiàn)云文件的保存。
3.2HTML5崗位技能實(shí)訓(xùn)平臺(tái)
平臺(tái)采用B/S結(jié)構(gòu)，運(yùn)用spring cloud微服務(wù)技術(shù)，構(gòu)建多個(gè)穩(wěn)定、高效的服務(wù)模塊，提供SSO單點(diǎn)登錄服務(wù)，并使用統(tǒng)一的身份認(rèn)證鑒權(quán)。平臺(tái)基于k8s實(shí)現(xiàn)公有云、混合云、私有云多種部署方式，提供在線HTML5崗位技能的運(yùn)行環(huán)境，并內(nèi)置代碼運(yùn)行結(jié)果檢測(cè)，自動(dòng)進(jìn)行測(cè)評(píng)統(tǒng)計(jì)，實(shí)現(xiàn)真正的云開發(fā)，開箱即用，主要模塊有課程制作工具、作業(yè)、活動(dòng)、云盤、共享課、我的課、云優(yōu)選課。
便捷的實(shí)驗(yàn)制作工具：讓教師輕松實(shí)現(xiàn)pdf、ppt、word、excel等不同格式的文本、圖片、音頻、視頻、超鏈接等進(jìn)行混合編排，并自動(dòng)生成動(dòng)態(tài)實(shí)驗(yàn)?zāi)夸洠瑥亩鴮?shí)現(xiàn)不同實(shí)訓(xùn)資源同屏展示。
智能代碼評(píng)測(cè)，助力HTML5崗位技能實(shí)訓(xùn)：平臺(tái)支持在線對(duì)學(xué)生提交的實(shí)驗(yàn)代碼進(jìn)行評(píng)測(cè)，將評(píng)測(cè)結(jié)果統(tǒng)計(jì)分析后展示給教師，提高教師的教學(xué)效率，方便學(xué)生的學(xué)習(xí)過程。
提交代碼查重，防止抄襲：對(duì)于學(xué)生提交并且通過測(cè)評(píng)的HTML5崗位技能實(shí)訓(xùn)代碼進(jìn)行代碼的查重，防止學(xué)生互相抄襲代碼。
在線問答，及時(shí)解答學(xué)生疑問：平臺(tái)提供HTML5崗位技能實(shí)訓(xùn)的在線問題，學(xué)生在HTML5崗位技能實(shí)訓(xùn)過程中，通過在線問答及時(shí)與老師進(jìn)行溝通，提高學(xué)習(xí)效率。
可記錄學(xué)習(xí)情況的實(shí)驗(yàn)筆記：平臺(tái)為用戶在HTML5崗位技能實(shí)訓(xùn)頁面提供實(shí)驗(yàn)筆記功能，用戶可在實(shí)驗(yàn)過程中記錄下自己的筆記。
實(shí)驗(yàn)題解，幫助學(xué)生掌握實(shí)驗(yàn)知識(shí)點(diǎn)：平臺(tái)會(huì)在每個(gè)HTML5崗位技能實(shí)訓(xùn)題目后面，提供相應(yīng)的實(shí)驗(yàn)題解，教師可改變其是否展示給學(xué)生。從而讓學(xué)生在實(shí)驗(yàn)完成之后進(jìn)行學(xué)習(xí)，更好的掌握實(shí)驗(yàn)的知識(shí)點(diǎn)。
支持高并發(fā)的評(píng)測(cè)服務(wù)：平臺(tái)采用kafka消息隊(duì)列來處理評(píng)測(cè)的請(qǐng)求，并內(nèi)置高配置的底層沙箱服務(wù)，支持高并發(fā)的用戶同時(shí)使用。
學(xué)生測(cè)評(píng)結(jié)果自動(dòng)統(tǒng)計(jì)：平臺(tái)將課堂內(nèi)的用戶的評(píng)測(cè)結(jié)果進(jìn)行統(tǒng)計(jì)，按照消耗內(nèi)存、消耗時(shí)間兩個(gè)維度進(jìn)行展示，從而直觀的展示該實(shí)驗(yàn)的整體評(píng)測(cè)數(shù)據(jù)。
支持公共資源課程，便于老師教學(xué)：HTML5崗位技能實(shí)訓(xùn)平臺(tái)可內(nèi)置完整的實(shí)訓(xùn)資源，其中包括實(shí)訓(xùn)文檔以及在線資源包，用戶可以直接進(jìn)行使用。
個(gè)人云盤，資源不丟失：平臺(tái)會(huì)為用戶提供云盤服務(wù)，云盤內(nèi)所有文件都會(huì)按照不同的文件類型進(jìn)行分開，便于用戶查看和操作。
平臺(tái)支持Web前端應(yīng)用程序開發(fā)、web企業(yè)級(jí)開發(fā)、數(shù)據(jù)庫(kù)設(shè)計(jì)等實(shí)驗(yàn)。
3.3HTML5崗位技能教學(xué)資源包
HTML5崗位技能教學(xué)資源包包含專業(yè)基礎(chǔ)課程： 計(jì)算機(jī)應(yīng)用基礎(chǔ)、靜態(tài)網(wǎng)頁設(shè)計(jì)與制作、C語言程序設(shè)計(jì)、數(shù)據(jù)結(jié)構(gòu)、HTML5 + CSS3 Web 前端開發(fā)技術(shù)、計(jì)算機(jī)專業(yè)英語等。專業(yè)核心課程：HTMI5 與 JavaSeript 程序設(shè)計(jì)、UI 設(shè)計(jì)基礎(chǔ)、美學(xué)基礎(chǔ)、Bootstrap 應(yīng)用開發(fā)、NodeJS 應(yīng)用開發(fā)、Vue 應(yīng)用程序開發(fā)、Web 前端綜合實(shí)戰(zhàn)等。
3.4HTML5崗位技能實(shí)訓(xùn)資源包
對(duì)接真實(shí)職業(yè)場(chǎng)景或工作情境，在校內(nèi)外進(jìn)行HTML5崗位技能實(shí)訓(xùn)。使學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的技術(shù)，能夠利用HTML5、CSS3等技術(shù)進(jìn)行網(wǎng)頁布局，基于項(xiàng)目化教學(xué)的模式培養(yǎng)學(xué)生實(shí)踐動(dòng)手能力；使學(xué)生了解JavaScript的基本語法，具備JavaScript的編程技巧和編程步驟；掌握常用的前端框架技術(shù)主要包含JQuery框架、Bootstrap框架、React框架、Vue框架、Angular框架等。利用數(shù)據(jù)庫(kù)管理系統(tǒng)和數(shù)據(jù)挖掘系統(tǒng)設(shè)計(jì)出能夠?qū)崿F(xiàn)對(duì)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行添加、修改、刪除、處理、分析、理解、報(bào)表和打印等多種功能的數(shù)據(jù)管理和數(shù)據(jù)挖掘應(yīng)用系統(tǒng)；并利用應(yīng)用管理系統(tǒng)最終實(shí)現(xiàn)對(duì)數(shù)據(jù)的處理、分析和理解。
培養(yǎng)具有良好職業(yè)道德和人文素養(yǎng)，掌握web前后端數(shù)據(jù)交互、響應(yīng)式開發(fā)等知識(shí)，具備動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)、開發(fā)、調(diào)試、維護(hù)等能力，能從事web前端軟件編程、軟件測(cè)試、軟件技術(shù)服務(wù)、智能終端界面開發(fā)等工作的中級(jí)技術(shù)技能人才。
3.5HTML5崗位技能實(shí)訓(xùn)室配套設(shè)施
HTML5崗位技能實(shí)訓(xùn)室配套設(shè)置包含實(shí)訓(xùn)室硬件設(shè)施、HTML5崗位技能軟件和工具等內(nèi)容，其中硬件設(shè)施如智慧黑板、教師講臺(tái)、多媒體設(shè)備、學(xué)生實(shí)訓(xùn)電腦、桌椅、服務(wù)器、交換機(jī)、機(jī)柜及HTML5崗位技能實(shí)訓(xùn)室裝修和HTML5崗位技能文化建設(shè)。HTML5崗位技能軟件和工具應(yīng)包含常用的HTML5崗位技能軟件和工具,這些HTML5崗位技能軟件和工具可以幫助學(xué)生進(jìn)行應(yīng)用程序的編寫、測(cè)試和調(diào)試。
HTML5崗位技能實(shí)訓(xùn)室建設(shè)圖
6.1專業(yè)教學(xué)支撐
6.2教材聯(lián)合開發(fā)教材
聯(lián)合各院校教授專家，開發(fā)HTML5崗位技能專業(yè)系列教材，為院校專業(yè)實(shí)驗(yàn)課程開展和教學(xué)提供參考。
6.3 產(chǎn)學(xué)研支撐平臺(tái)
平臺(tái)采用spring cloud微服務(wù)開發(fā)架構(gòu)，各服務(wù)模塊單獨(dú)運(yùn)行并提供服務(wù)接口；可提供穩(wěn)定、快速、高效的服務(wù)；平臺(tái)整體采用前后端分離和分布式微服務(wù)的彈性計(jì)算架構(gòu)實(shí)現(xiàn)，后端主要基于Java的Spring cloud實(shí)現(xiàn)，前端vue實(shí)現(xiàn)等，具有高內(nèi)聚、松耦合、業(yè)務(wù)單一、高性能、高并發(fā)、高可能、跨平臺(tái)、跨語言等特點(diǎn)。
平臺(tái)提供SSO單點(diǎn)登錄，多個(gè)應(yīng)用系統(tǒng)統(tǒng)一登錄，統(tǒng)一的用戶管理，一個(gè)賬戶可登錄驗(yàn)證教學(xué)全場(chǎng)景以及數(shù)字技術(shù)專業(yè)群實(shí)踐教學(xué)等所有應(yīng)用模塊系統(tǒng)。
平臺(tái)采用kubernetes技術(shù)進(jìn)行部署，支持公有云、私有云、混合云模式安裝；平臺(tái)支持多數(shù)據(jù)源從而保證技術(shù)的一致性；確保服務(wù)的穩(wěn)定、可擴(kuò)展、彈性擴(kuò)容；每個(gè)獨(dú)立服務(wù)支持分布式集群部署，理論上可以無限橫向擴(kuò)展，提高系統(tǒng)處理能力，支持大規(guī)模并發(fā)教學(xué)全場(chǎng)景和數(shù)字化專業(yè)群教學(xué)實(shí)踐應(yīng)用。
基礎(chǔ)虛擬化服務(wù)由docker和kvm兩種虛擬化技術(shù)根據(jù)學(xué)科性質(zhì)進(jìn)行選擇性支撐，可滿足不同的虛擬化需求，提供穩(wěn)定、可自行配置的虛擬機(jī)器。
基于全流程DevOps自動(dòng)化運(yùn)維，支持持續(xù)集成、分析、服務(wù)注冊(cè)與發(fā)現(xiàn)、系統(tǒng)監(jiān)控、性能監(jiān)控、日志管理、預(yù)警、持續(xù)部署(基于docker的鏡像倉(cāng)庫(kù)，Kubernetes的容器云管理調(diào)度平臺(tái)，在線可視化管理、監(jiān)控、調(diào)度容器)。
基礎(chǔ)持久化層支持RDS和NoSQL兩種方式，采用MySQL集群和MongoDB集群搭建，支持基于CQRS的分布式事務(wù)處理，支持?jǐn)?shù)據(jù)自動(dòng)備份，同時(shí)使用于Redis集群對(duì)熱點(diǎn)數(shù)據(jù)進(jìn)行緩存，支持大并發(fā)；支持純本地化數(shù)據(jù)源。
基礎(chǔ)服務(wù)層支持在線驗(yàn)證碼服務(wù)、基礎(chǔ)文件服務(wù)、消息隊(duì)列服務(wù)、OSS對(duì)象存儲(chǔ)服務(wù)、用戶/鑒權(quán)服務(wù)、個(gè)人云盤服務(wù)、WebSocket服務(wù)等，保證平臺(tái)的通用性。用戶基礎(chǔ)信息管理：對(duì)訂單實(shí)行按業(yè)務(wù)方向進(jìn)行配置，對(duì)班級(jí)、教師、學(xué)生相關(guān)信息進(jìn)行新增、修改、刪除以及數(shù)據(jù)權(quán)限進(jìn)行配置。
6.4 技能大賽支撐
6.5 1+X認(rèn)證服務(wù)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
