整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          關于 HTML5 你需要了解的基礎知識

          TML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。 -- Palak Shah

          本文導航
          • -新標簽和元素 …… 08%

          • -HTML5 的高級功能 …… 16%

          • -地理位置 …… 16%

          • -網絡存儲 …… 33%

          • -應用緩存(AppCache) …… 44%

          • -視頻 …… 50%

          • -音頻 …… 61%

          • -畫布(Canvas) …… 71%

          • -HTML5 工具 …… 78%

          編譯自: http://opensourceforu.com/2017/06/introduction-to-html5/

          作者: Palak Shah

          譯者: geekpi

          HTML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。

          HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發展起來。它是一個更高版本的 HTML,它的許多新元素可以使你的頁面更加語義化和動態。它是為所有人提供更好的 Web 體驗而開發的。HTML5 提供了很多的功能,使 Web 更加動態和交互。

          HTML5 的新功能是:

          • 新標簽,如 <header> 和 <section>

          • 用于 2D 繪圖的 <canvas> 元素

          • 本地存儲

          • 新的表單控件,如日歷、日期和時間

          • 新媒體功能

          • 地理位置

          HTML5 還不是正式標準(LCTT 譯注:HTML5 已于 2014 年成為“推薦標準”),因此,并不是所有的瀏覽器都支持它或其中一些功能。開發 HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。

          新標簽和元素

          • 語義化元素: 圖 1 展示了一些有用的語義化元素。

          • 表單元素: HTML5 中的表單元素如圖 2 所示。

          • 圖形元素: HTML5 中的圖形元素如圖 3 所示。

          • 媒體元素: HTML5 中的新媒體元素如圖 4 所示。

          圖 1:語義化元素

          圖 2:表單元素

          圖 3:圖形元素

          圖 4:媒體元素

          HTML5 的高級功能

          地理位置

          這是一個 HTML5 API,用于獲取網站用戶的地理位置,用戶必須首先允許網站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

          地理位置的一些用途是:

          • 公共交通網站

          • 出租車及其他運輸網站

          • 電子商務網站計算運費

          • 旅行社網站

          • 房地產網站

          • 在附近播放的電影的電影院網站

          • 在線游戲

          • 網站首頁提供本地標題和天氣

          • 工作職位可以自動計算通勤時間

          工作原理: 地理位置通過掃描位置信息的常見源進行工作,其中包括以下:

          • 全球定位系統(GPS)是最準確的

          • 網絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址

          • GSM/CDMA 蜂窩 ID

          • 用戶輸入

          該 API 提供了非常方便的函數來檢測瀏覽器中的地理位置支持:

          if (navigator.geolocation) {

          // do stuff

          }

          getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。

          語法是:

          getCurrentPosition(showLocation, ErrorHandler, options);
          • showLocation:定義了檢索位置信息的回調方法。

          • ErrorHandler(可選):定義了在處理異步調用時發生錯誤時調用的回調方法。

          • options (可選): 定義了一組用于檢索位置信息的選項。

          我們可以通過兩種方式向用戶提供位置信息:測地和民用。

          1. 描述位置的測地方式直接指向緯度和經度。

          2. 位置信息的民用表示法是人類可讀的且容易理解。

          如下表 1 所示,每個屬性/參數都具有測地和民用表示。

          圖 5 包含了一個位置對象返回的屬性集。

          圖5:位置對象屬性

          網絡存儲

          在 HTML 中,為了在本機存儲用戶數據,我們需要使用 JavaScript cookie。為了避免這種情況,HTML5 已經引入了 Web 存儲,網站利用它在本機上存儲用戶數據。

          與 Cookie 相比,Web 存儲的優點是:

          • 更安全

          • 更快

          • 存儲更多的數據

          • 存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。

          有兩種類型的 Web 存儲對象:

          1. 本地 - 存儲沒有到期日期的數據。

          2. 會話 - 僅存儲一個會話的數據。

          如何工作: localStorage 和 sessionStorage 對象創建一個 key=value 對。比如: key="Name", value="Palak"。

          這些存儲為字符串,但如果需要,可以使用 JavaScript 函數(如 parseInt() 和 parseFloat())進行轉換。

          下面給出了使用 Web 存儲對象的語法:

          • 存儲一個值:

          • localStorage.setItem("key1", "value1");

          • localStorage["key1"] = "value1";

          • 得到一個值:

          • alert(localStorage.getItem("key1"));

          • alert(localStorage["key1"]);

          • 刪除一個值: -removeItem("key1");

          • 刪除所有值:

          • localStorage.clear();

          應用緩存(AppCache)

          使用 HTML5 AppCache,我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外,所有瀏覽器都可以使用 AppCache(截止至此時)。

          應用緩存的優點是:

          • 網頁瀏覽可以脫機

          • 頁面加載速度更快

          • 服務器負載更小

          cache manifest 是一個簡單的文本文件,其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中,如下所示:

          <html manifest="test.appcache">

          ...

          </html>

          它應該在你要緩存的所有頁面上。

          緩存的應用程序頁面將一直保留,除非:

          1. 用戶清除它們

          2. manifest 被修改

          3. 緩存更新

          視頻

          在 HTML5 發布之前,沒有統一的標準來顯示網頁上的視頻。大多數視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規定了使用 video 元素在網頁上顯示視頻的標準方式。

          目前,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 中工作,我們必須添加一個 MPEG4 和 WebM 文件。

          video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式,如下所示:

          <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 的輸出

          音頻

          對于音頻,情況類似于視頻。在 HTML5 發布之前,在網頁上播放音頻沒有統一的標準。大多數音頻也通過 Flash 等不同的插件播放。但 HTML5 規定了通過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。

          目前,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 工作,我們必須添加一個 MP3 和 Wav 文件。

          audio 元素允許多個 source 元素,它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式,如下所示:

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

          要在網頁上創建圖形,HTML5 使用 畫布 API。我們可以用它繪制任何東西,并且它使用 JavaScript。它通過避免從網絡下載圖像而提高網站性能。使用畫布,我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外,畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面,如下所示:

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

          畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現繪制。所有繪畫應在 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 所示。

          你可以繪制許多對象,如弧、圓、線/垂直梯度等。

          HTML5 工具

          為了有效操作,所有熟練的或業余的 Web 開發人員/設計人員都應該使用 HTML5 工具,當需要設置工作流/網站或執行重復任務時,這些工具非常有幫助。它們提高了網頁設計的可用性。

          以下是一些幫助創建很棒的網站的必要工具。

          • HTML5 Maker: 用來在 HTML、JavaScript 和 CSS 的幫助下與網站內容交互。非常容易使用。它還允許我們開發幻燈片、滑塊、HTML5 動畫等。

          • Liveweave: 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用,并為一些代碼提供自動完成功能,這使得開發和測試更快更容易。

          • Font dragr: 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體,以便你可以知道看起來是否正確。也提供了拖放界面,允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。

          • HTML5 Please: 可以讓我們找到與 HTML5 相關的任何內容。如果你想知道如何使用任何一個功能,你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表,語法,以及如何使用元素的一般建議等。

          • Modernizr: 這是一個開源工具,用于給訪問者瀏覽器提供最佳體驗。使用此工具,你可以檢測訪問者的瀏覽器是否支持 HTML5 功能,并加載相應的腳本。

          • Adobe Edge Animate: 這是必須處理交互式 HTML 動畫的 HTML5 開發人員的有用工具。它用于數字出版、網絡和廣告領域。此工具允許用戶創建無瑕疵的動畫,可以跨多個設備運行。

          • Video.js: 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網站,你應該使用此工具。它使視頻看起來不錯,并且是網站的一部分。

          • The W3 Validator: W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網站標記的有效性。要測試任何網站的標記有效性,你必須選擇文檔類型為 HTML5 并輸入你網頁的 URL。這樣做之后,你的代碼將被檢查,并將提供所有錯誤和警告。

          • HTML5 Reset: 此工具允許開發人員在 HTML5 中重寫舊網站的代碼。你可以使用這些工具為你網站的訪問者提供一個良好的網絡體驗。


          Palak Shah

          作者是高級軟件工程師。她喜歡探索新技術,學習創新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯系她。


          via: http://opensourceforu.com/2017/06/introduction-to-html5/

          作者:Palak Shah[2] 譯者:geekpi 校對:wxy

          本文由 LCTT 原創編譯,Linux中國 榮譽推出

          點擊“了解更多”可訪問文內鏈接

          作者:charryhuang;轉自:騰訊技術工程

          1991 年 8 月,第一個靜態頁面誕生了,這是由 Tim Berners-Lee 發布的,想要告訴人們什么是萬維網。從靜態頁面到 Ajax 技術,從 Server Side Render 到 React Server Components,歷史的車輪滾滾向前,一個又一個技術誕生和沉寂。

          前言

          1994 年,萬維網聯盟(W3C,World Wide Web Consortium)成立,超文本標記語言(HTML,Hyper Text Markup Language)正式確立為網頁標準語言,我們的旅途從此開始。
          本文將沿著時間線,從“發現問題-解決問題”的角度,帶領大家了解 Web 技術發展的關鍵歷程,了解典型技術的誕生以及技術更迭的緣由,思考技術發展的原因。

          Tim Berners-Lee

          Tim Berners-Lee(蒂姆·伯納斯·李),英國科學家,萬維網之父,于 1989 年在歐洲核子研究組織(CERN)正式提出萬維網的設想。該網絡最初是為了滿足世界各地大學和研究所的科學家之間對自動信息共享的需求而設計和開發的,這也是為什么HTML的頂層聲明是 document,標簽名、文檔對象模型的名稱也是由此而來。
          1990 年 12 月,他開發出了世界上第一個網頁瀏覽器。1993 年 4 月 30 日,歐洲核子研究組織將萬維網軟件置于公共領域,把萬維網推廣到全世界,讓萬維網科技獲得迅速的發展,深深改變了人類的生活面貌。
          他創造了超文本標記語言(HTML),并創建了歷史上第一個網站。當然,現在只剩下了由 CERN 恢復的網站副本:info.cern.ch.

          靜態網頁時代

          早期的靜態網頁,只有最基本的單欄布局,HTML 所支持的標簽也僅有<h1><p><a>。后來為了豐富網頁的內容,<img><table>標簽誕生了。
          這一階段,Web 服務器基本上只是一個靜態資源服務器,每當客戶端瀏覽器發來訪問請求,它都來者不拒的建立連接,查找 URL 指向的靜態頁面,再返回給客戶端。
          隨著網頁的飛速發展,人們發現要人工實現所有信息的編寫是非常困難的,而且非常耗時。
          設想一下,假如一個頁面有兩塊區域展示的內容是互相獨立的,那么你需要涵蓋所有的可能,需要編寫的頁面數量是兩塊區域的內容數量的乘積!
          此外,靜態網站只能夠根據用戶的請求返回指向的網頁,除了進行超鏈接跳轉,沒辦法實現任何交互。
          此時,人們想要
          • 網頁能夠動態顯示
          • 直接使用數據庫里的數據
          • 網頁實現一些用戶交互
          • 讓頁面更美觀

          JavaScript 的誕生

          1994 年,網景公司發布了 Navigator 瀏覽器,但他們急需一種網頁腳本語言,以使瀏覽器可以與網頁互動。
          1995年,網景公司的 Brendan Eich 迫于公司的壓力,只花了十天就設計了 JS 的最初版本,并命名為 Mocha。后來網景公司為了蹭 Java 的熱度,把 JS 最終改名為 JavaScript。但實際情況是,網景公司和 Sun 公司結成聯盟,才更名為 JavaScript。
          從此網頁有了一些簡單的用戶交互,比如表單驗證;也有了一些JS為基礎的動效,如走馬燈。
          但是讓網頁真正開始進入動態網頁時代的卻是以 PHP 為代表的后端網站技術。

          擴展資料:第一次瀏覽器大戰

          在網景公司推出 JavaScript 的時候,微軟以 JS 為基礎,編寫了 JScript 和 VBScript 作為瀏覽器語言,并在 1995 年的 8 月推出了 IE 1.0。
          由于微軟在系統里捆綁瀏覽器,而 90% 的人都在使用 Windows 操作系統,大量用戶被動地選擇了 IE。面對微軟快速搶占瀏覽器份額,網景公司無奈之下只能快速將 JavaScript 向 ECMA 提交標準,制定了 ECMAScript 標準。
          在這段時間,還發生過一件趣事,IE 4.0 發布當天 Netscape 的員工們發現公司的草坪上出現了一個大大的 IE 圖標,這明顯是一個挑釁的舉動。作為回應,Netscape 把自己的吉祥物 “Mozilla” 放在 IE 的圖標上,并掛上胸牌,寫著 “Netscape 72,Microsoft 18”——在當時, IE 的市場份額確實不如 Netscape Navigator。
          但這無法解決份額的問題,網景公司最終在第一次瀏覽器大戰中落敗,于 1998 年,被美國在線(AOL)以42億美元收購。
          在 1998 年網景公司被收購前,網景公司公開了 Navigator 源代碼,想通過廣大程序員的參與重新獲得市場份額。Navigator 改名為 Mozilla。這也是火狐瀏覽器的由來,也是第二次瀏覽器大戰的伏筆。

          CSS

          1994 年,Hkon Wium Lie 最初提出了 CSS 的想法。1996 年 12 月,W3C 推出了 CSS 規范的第一版本。
          美觀是所有人的追求。HTML 誕生以來,網頁基本上就是一個簡陋的富文本容器。由于缺少布局和美化手段,早期網頁流行用table標簽進行布局。為了解決網頁“丑”的問題,Hkon Wium Lie 和 Bert Bos 共同起草了 CSS 提案,同期的 W3C 也對這個很感興趣。
          早期網頁外觀
          早期的 CSS 存在多種版本,在 PSL96 版本你甚至可以在里面使用邏輯表達式。但因為它太容易擴展,瀏覽器廠商那么多,會變得很難統一,最終被放棄。
          在眾多提案中,H?kon W Lie 的 CHSS(Cascading HTML Style Sheets)最早提出了樣式表可疊加的概念。
          行尾的百分比表示這條樣式的權重,最終將根據權重計算最終值。圖中將會計算 30pt * 40% + 20pt * 60% 作為h2字體大小的最終值。
          為了解決 CSS 兼容性的問題,網景公司甚至還將 CSS 用 JS 來編寫。
          CSS 從誕生開始就伴隨著大量的 bug,不同瀏覽器表現不同坑害了無數的程序員。今天我們能用上相對靠譜的 css,不得不說這是一個奇跡。

          動態網頁技術

          1995 年,Rasmus Lerdof 創造的 PHP 開始活躍在各大網站,它讓 Web 可以訪問數據庫了,PHP 實現了人們渴望的動態網頁。
          這里的動態網頁不是指網頁動效,而是指內容的動態展示、豐富的用戶交互。PHP 就像給網絡世界打開了一扇窗,各種動態網頁技術(如 ASP、JSP)雨后春筍般的冒了出來,萬維網也因此開始高速發展,MVC 模式也開始出現在后端網站技術中。
          動態網頁技術解決了以前各種令人無法呼吸的痛,生活總會越來越好的:
          • 可以用數據庫作為基礎來展示網頁內容
          • 可以實現表單和一些簡單交互
          • 再也不用編寫一大堆靜態頁面了
          PHP 等動態網頁技術的原理,大體上都是根據客戶端的請求,從數據庫里獲取相對應的數據,然后塞到網頁里去,返回給客戶端一個填充好內容的網頁。這個階段也是前后端耦合的
          網頁開發流程
          而當一些基礎的需求被滿足之后,動態網頁技術帶來的不足也漸漸暴露出來
          • 網頁總是刷新。用戶名密碼校驗需要刷新以展示錯誤提示;因下拉選擇器選擇不同而展示的內容需要刷新才能展示;每次數據交互必然會刷新一次頁面。
          • 網頁和后端邏輯混合。相信老前端們都有過這樣的經歷:開發完HTML后,會把頁面發給后端修改,加上數據注入邏輯;聯調或者debug的時候兩個人坐在一塊看,查問題的效率很低。
          • 有大量重復代碼無法復用。舉一個典型的例子,論壇。很多時候只有內容有變化,菜單、側邊欄等幾乎不會有改變,但每次請求的時候還是得再將整個網頁傳輸一遍。不僅頁面會刷新,速度慢,還挺耗流量(這個年代上網也是一種奢侈)。
          然后 AJAX 站了出來。

          AJAX

          AJAX,Async JavaScript And XML,于 1998 年開始初步應用,2005 年開始普及。AJAX 的廣泛使用,標志著 Web2.0 時代的開啟。這同時也是各大瀏覽器爭鋒的時代。
          現在,我們可以通過 AJAX 來動態獲取數據,利用 DOM 操作動態更新網頁內容了。來看看加入了 AJAX 的網頁是怎么工作的:
          這個時候前端路由還沒有興起,大多數情況下還是后端返回一整個頁面,部分內容通過 AJAX 進行獲取。
          隨著智能手機的出現,APP 開始萌芽。相比起網頁,APP 編寫好之后只需要數據接口就能工作;而網頁不僅需要后端寫業務邏輯,控制跳轉,還要寫一部分接口用于 AJAX 請求。
          這個階段前端能做的事情還是很少,還背負著“切圖仔”的綽號。隨著 HTML5 草案的提出,前端能做的交互越來越多,程序員們急需解決以下問題:
          • 后端業務代碼和數據接口混合,還得兼容 APP 的接口(很多企業既有 APP 又有網站)
          • 前端的代碼復雜度急劇增加
          能不能讓前端也像 APP 一樣,只需要請求數據接口即可展現內容呢?

          擴展資料:第二次瀏覽器大戰

          2004 年 Firefox 發布,拉開了第二次瀏覽器大戰的序幕。同期市面上誕生的各種新興瀏覽器,如 Safari、Chrome 等,也加入了戰爭。
          此前由于 XP 系統實在過于火爆,導致 IE 6 無任何競爭對手,微軟甚至解散了瀏覽器的大部分員工,只留下幾個人象征性地維護順便修補一下 bug。這讓開發人員非常痛苦。
          此時 Firefox 以優越于 IE 的性能和非常友好的編程工具,迅速將那些被 IE6 搞得焦頭爛額的網頁開發人員們,從水火之中救出,導致先讓前端工程師成為忠實的第一批用戶,然后,經由這些有經驗的開發人員們推廣到了普通的用戶群體。
          基于 webkit 內核的 Safari,借助自家產品(iOS、MacOS)的壟斷快速收割移動端和 mac 端市場份額;同樣基于 webkit 內核的 Chrome,趁著微軟放松警惕,憑借優越于市場上所有瀏覽器的性能,如同中國歷史上的成吉思汗一樣大殺四方,快速擴展市場份額。
          微軟知道,自己已經失去了最初能稱霸的機會,這次它不想失去,IE 再次開始迭代,各大瀏覽器廠商又開始不顧標準,迭代再次開始,為了統一化標準,W3C 開發了 HTML5,但是遲遲得不到微軟的認可。在其他瀏覽器紛紛支持 HTML5 后,微軟發現,自己又成了孤家寡人,份額不斷縮水。
          2016 年,Chrome 瀏覽器份額超越 IE,第二次瀏覽器大戰結束。
          瀏覽器大戰極大的推動了技術進步,正是 Google 研發出的 V8 引擎極大的提升了 JS 的運行效率,NodeJS 才有機會誕生,前端才能走向全棧。JS 其實沒有你想象的那么慢

          SPA

          2008 年 HTML5 草案提出,各大瀏覽器開啟良性競爭,爭先實現 HTML5 功能。由于 HTML5 帶來前端代碼復雜度的增加,前端為了尋求良好的可維護性和可復用性,也不得不參考后端 MVC 進行了設計和拆分,后來出現了三大前端框架:Vue(2014)、React(2010)、AngularJS(2009)。
          單頁應用返回一個空白的 HTML,并通過 JS 腳本進行動態生成內容,從此和頁面刷新說拜拜。
          后端不再負責模板渲染,前端和 APP 開始對等,后端的 API 也可以通用化了。前后端終于得以分離。(PS:最終目標是成為后端)
          但 SPA 因為返回的是空 HTML,所有 JS 也被打包為一個文件,需要在一開始就加載完所有的資源,
          • 請求網頁后白屏時間比傳統網頁要長
          • 爬蟲爬到的是空白頁面,沒辦法做 SEO
          • 在業務復雜的情況下,請求文件很大,渲染非常慢
          這使得前端不得不拆分過于龐大的單頁應用,出現了框架的多頁面概念,也出現了多種解決方案。
          很多網頁首次加載的時候其實并不需要太多的東西,比如論壇首頁與貼子詳情頁,完全可以將其拆開,用戶在新打開的頁面閱讀反而體驗更好(多頁應用)。
          又比如管理后臺,可以在頁面框架內,將每個菜單對應的管理頁拆出來動態加載(import)。

          Server Side Render

          Server Side Render,服務端渲染,簡稱 SSR,又稱服務端同構、直出,一般使用 NodeJS 實現。
          這里的服務端渲染和以前的不一樣,SSR 會利用已經“脫水”的首屏數據來渲染首屏頁面返回給客戶端,到了瀏覽器再注入瀏覽器事件,并且保留單頁應用的能力,對 SEO 非常友好。但學習成本高,限制較多。
          讓我們看看傳統 SPA 和加入了 SSR 的 SPA 在請求上的區別:
          客戶端渲染示意
          服務端渲染示意
          傳統 SPA 可以更快的返回頁面,請求響應時間更短;加載 JS 后才開始渲染,白屏時間更長,loading 結束后用戶感知到的相對可交互時間更早。
          而 SSR 在接到瀏覽器請求時,先從后端拉取首屏數據渲染在頁面內才返回,請求響應時間更長;因為節約了一段瀏覽器請求首屏數據的時間,白屏時間更短。由于 JS 異步加載,用戶感知的相對可交互時間變晚。但體驗上 SSR 一般更好。
          在極端情況下,用戶眼中傳統 SPA 會一直顯示 loading,使用了 SSR 的頁面則會出現“點不動”的情況。
          大多數時候 SSR 體驗會更佳,因為服務端承擔了大部分渲染工作,這也導致服務端負載變高。但在業務復雜的情況下,SSR 首屏請求的接口數很多,導致返回 HTML 變慢。
          歸根結底,SSR 不能很好的應付業務復雜的情況,首屏要加載的東西還是太多了。所以我們要怎樣讓用戶感知到的白屏時間變短呢?
          • 減小加載體積
          • 減少接口請求數
          • PWA 緩存
          • 分塊渲染

          NodeJS

          說完了 SSR,必須說一下 NodeJS。2010 年 NodeJS 正式立項到現在已經 11 個年頭了,NodeJS 的誕生來自于 Ryan Dahl(下圖) 的靈感。他想以非阻塞的方式做所有事情,用完全異步方式可以處理非常多的請求(高并發)。
          NodeJS 的出現讓前端向全棧的發展邁出了重大的一步。很多公司開始用 NodeJS 搞 BFF(backend for frontend),我們也開始把 Controller 層放到 NodeJS 來處理,后端只負責基礎業務數據。也就是現在的三層架構:
          這種架構在跨端的時候具有良好的適配性,我們可以根據業務需求,為不同端設計不同的 Controller 和 View,而后臺可以不做變更。這種架構省去了很多溝通成本,前端專注頁面的展示,后端專注業務邏輯。
          當然,NodeJS 還可以對后端數據進行預處理,前端根據自己的需要自己設計數據結構,頁面開發與接口調試形成閉環,還為后端分擔了壓力。

          擴展資料:第三次瀏覽器大戰

          智能手機的飛速發展,這張圖表現的淋漓盡致。第三次瀏覽器大戰是爭奪移動端市場份額的一戰,也是當下正在進行的一戰。
          Benedict Evans: “Mobile is eating the world.”(移動設備正在蠶食世界) “Mobile remakes the Internet.”(移動設備正在重構Internet)
          而未來,瀏覽器真正的對手不再是瀏覽器,而是小程序這樣結合了APP和網頁優點的新興技術。

          未來

          早在 2009 年,Facebook 的工程師就開發了 bigPipe,讓 Facebook 頁面打開速度提高了兩倍。bigPipe 使用 分塊渲染 的思想,將網頁的渲染變成了一小塊一小塊的,服務端渲染好一塊頁面就發送給客戶端。他們直接把木桶拆了,打破了短板效應
          服務端渲染 VS 流式分塊渲染
          時隔 11 年,也就是 2020 年 12 月,React 團隊提出了 React Server Components,算是一個可擴展的前后端融合方案。其理念和 bigPipe 類似,把組件放在服務端渲染,節省了從瀏覽器進行數據請求的開支,一些運行時也可以不用放到瀏覽器,減小了包大小(如 markdown 在服務端渲染好了,也就不再需要把工具庫發送給瀏覽器了)。React Server Components 的引入,也同步做到了自動的 Code Split。
          React Server Components 原理
          不同的是 React Server Components 返回的不是 HTML,而是帶有結構和數據的自定義類 JSON 數據。
          這種結構,是對服務端渲染的核心(結構+數據)進行抽象,結合 React 的工作方式(如 Suspense),平緩的從服務端過渡到了客戶端,維持了組件狀態,并且可以更自由的拼裝服務器組件和客戶端組件。
          客戶端組件和服務端組件混用
          關于拆分這條思路,讓我想到微前端,雖然現在微前端還有很多問題,但微應用即服務也不乏為一條解決之道。未來前端或許會往“小而美”的方向發展,甚至形成一個以服務端組件為單位的包管理器,網頁打包大小會越來越小,更多的組件是從網絡上直接獲取。
          此外,我也很期待 Web Components 的發展,有了原生的支持,0kb runtime 也不是不可能了。合久必分分久必合,現存很多前端框架也可以得到統一了。當然現在 Web Components 想要投入使用,首先離不開瀏覽器的支持,而且必須有一個平緩的過渡,此外兼容性也是一個大問題(最后還是苦了程序員們)。
          本文首發公眾號:騰訊技術工程(ID:Tencent_TEG),如需轉載請聯系出處。

          、系統概述

          HTML5崗位技能技術是計算機類專業重要的核心課程,課程所包含的教學內容多,實踐性強,并且相關技術更新快。傳統的課堂講授模式以教師為中心,學生被動式接收,難以調動學生學習的積極性和主動性。混合式教學結合線上線下教學模式,以學生為中心,變被動為主動,充分調動學生學習的積極性,提升課程的教學效果。

          HTML5崗位技能是指構建 Web 應用程序用戶界面的過程。它涵蓋了網頁設計、網頁制作以及網站的前端開發等方面。HTML5崗位技能是屬于互聯網技術領域中的一項重要工作。

          作為 HTML5崗位技能人員,我們的主要任務是將設計師提供的網頁設計圖轉化為網頁前端代碼,然后通過瀏覽器展示給用戶。在這個過程中,我們需要使用 HTML、CSS和JavaScript 等技術來實現網頁的布局、樣式和交互效果。

          在Web前端開發中,我們還需要掌握一些常用的前端框架和工具例如,Bootstrap 是一個流行的前端框架,它提供了一套響應式的網頁模板和組件,可以快速搭建出適配不同設備的網頁。另外,還有Vue.js和 React等JavaScript 框架,它們可以幫助我們構建復雜的單頁應用。

          除了以上提到的技術和工具,作為 HTML5崗位技能人員,我們還需要了解和應用一些 Web 標準和最佳實踐。比如,響應式設計是一種設計方法,可以使網頁在不同設備上都能夠良好地展示和使用。此外,還需要關注網頁的性能優化,包括減少 HTTP 請求、壓縮文件、使用緩存等方面的技巧來提升網頁的加載速度和用戶體驗。

          二、HTML5崗位技能實訓室介紹

          HTML5崗位技能實訓室的培養目標是培養掌握Web前端基礎理論知識、掌握前端開發技術、掌握移動端開發技術、掌握Web測試技術和掌握數據庫技術等知識和技能、動手能力強、適應各種崗位工作的復合應用型人才,從事Web前端開發、移動端開發、軟件測試、系統維護、解決方案設計等工作。

          HTML5崗位技能實訓室是一個旨在提供實踐環境和教學資源的綜合實訓室。HTML5崗位技能實訓室的目標是為學生提供一個真實的HTML5崗位技能環境,使他們能夠學習并實踐HTML5崗位技能的相關技術和方法。

          HTML5崗位技能實訓室建設方案系統是一個集硬件、軟件和教學資源于一體的綜合實訓室,HTML5崗位技能實訓室的建設旨在為學生提供一個實踐和交流的平臺,讓他們通過實際項目的開發來應用所學的知識,培養解決問題和合作的能力,同時也促進創新和創業精神的培養。這樣的實訓室可以提升學生的實踐能力,并為他們將來投身HTML5崗位技能行業做好準備。

          HTML5崗位技能實訓室以HTML5崗位技能領域學習者的職業生涯發展及終身學習需求為依據,重點滿足職業院校在校學生、進修教師、企業員工、社會自學者四類對象不同層次的學習需求,聯合全國高水平院校以及企業,建設HTML5崗位技能專業優質專業資源、課程資源、認證資源、競賽資源。企業資源等內容:優化資源庫平臺,在“能學、輔教”的基礎上,滿足個性化學習者私人定制的實際需要,并完善平臺的運行機制,保證平臺內容的持續更新: 依托資源庫平臺,實現學生學習效果評價,能夠為企業出具學生能力分析報告,指導企業招聘和學生就業。

          三、HTML5崗位技能實訓室組成

          3.1HTML5崗位技能教學平臺

          平臺基于spring cloud微服務架構,提供便捷的SSO單點登錄,采用kubernetes進行部署,可支持公有云、混合云、私有云的安裝模式,數據層使用MySQL集群和MongoDB集群,實現了全流程EdvOps自動化運維,具有高內聚、松耦合、業務單一、高性能、高并發、高可能、跨平臺、跨語言等特點。主要模塊有課程制作工具、云盤、共享課、我的課、云優選課、云視頻庫、3D模型庫。

          課程制作工具:由平臺提供專用的微服務模塊進行支撐,采用websocket雙向通信技術,底層存儲采用三層遞進的緩存方式,目的就是為了加快課程資源的加載速度。自主研發視頻轉碼,在線視頻剪輯功能。支持由word文檔直接導入,并且根據標題類型自動生成目錄,方便快捷。同時支持ppt、excel、圖片、超鏈接、視頻、音頻、3D模型、章節測驗等內容的插入,實現多個超文本文件的同屏展示。

          共享課:使用訂單配發或校內共享的概念,讓課程資源更大程度的進行共享。

          我的課:支持從共享課資源中直接進行“生成副本”,導入進我的課中,并且同時支持自行創建。所有的課程資源支持導出功能,可導出為本地的離線文件,導出文件為后綴名為wz的加密文件,在使用平臺進行二次導入直接生成課程資源,便于線上傳播。

          云優選課:由行業資深從業人員在互聯網上收集整理的學習資源,包括系列類學習視頻和知識點類學習視頻,供教師和學生進行自主學習。

          云視頻庫:平臺提供數百個包含各專業的微課視頻,可直接引用到課程資源中。

          3D模型庫:采用three。js技術,實現在線加載3D模型,提供更加直觀形象的教學體驗。

          題庫:題庫支持通用題目(單選題、多選題、判斷題、填空題、主觀題)以及實訓題目(編程題、web前端題、虛擬化題等);對于通用類題目可采用excel模板批量導入,采用瀑布流的展示方式,可共享到校內供其他教師進行使用。

          作業:支持手動建題和從題庫中選題兩種模式創建作業,提供作業庫模塊,作業庫內的作業可多次發放給學生,對于作業平臺提供自動評測,包括單選題、多選題、判斷題、填空題、編程題、虛擬化題。

          考試:支持導入試卷、手動創建、題庫選題三種創建方式,同時支持系統隨機組卷功能;提供試卷庫模塊,試卷庫內的試卷可多次發放給學生,支持試卷的自動判分。

          課堂活動:平臺支持多種課堂活動,如:簽到、主題討論、提問、分組任務、投票、問卷、計時器等,提高課堂的趣味性和參與性。

          個人云盤:平臺將用戶在備課,教學等過程中使用的文件,保存在個人云盤空間,支持二次直接使用和存檔,實現云文件的保存。

          3.2HTML5崗位技能實訓平臺

          平臺采用B/S結構,運用spring cloud微服務技術,構建多個穩定、高效的服務模塊,提供SSO單點登錄服務,并使用統一的身份認證鑒權。平臺基于k8s實現公有云、混合云、私有云多種部署方式,提供在線HTML5崗位技能的運行環境,并內置代碼運行結果檢測,自動進行測評統計,實現真正的云開發,開箱即用,主要模塊有課程制作工具、作業、活動、云盤、共享課、我的課、云優選課。

          便捷的實驗制作工具:讓教師輕松實現pdf、ppt、word、excel等不同格式的文本、圖片、音頻、視頻、超鏈接等進行混合編排,并自動生成動態實驗目錄,從而實現不同實訓資源同屏展示。

          智能代碼評測,助力HTML5崗位技能實訓:平臺支持在線對學生提交的實驗代碼進行評測,將評測結果統計分析后展示給教師,提高教師的教學效率,方便學生的學習過程。

          提交代碼查重,防止抄襲:對于學生提交并且通過測評的HTML5崗位技能實訓代碼進行代碼的查重,防止學生互相抄襲代碼。

          在線問答,及時解答學生疑問:平臺提供HTML5崗位技能實訓的在線問題,學生在HTML5崗位技能實訓過程中,通過在線問答及時與老師進行溝通,提高學習效率。

          可記錄學習情況的實驗筆記:平臺為用戶在HTML5崗位技能實訓頁面提供實驗筆記功能,用戶可在實驗過程中記錄下自己的筆記。

          實驗題解,幫助學生掌握實驗知識點:平臺會在每個HTML5崗位技能實訓題目后面,提供相應的實驗題解,教師可改變其是否展示給學生。從而讓學生在實驗完成之后進行學習,更好的掌握實驗的知識點。

          支持高并發的評測服務:平臺采用kafka消息隊列來處理評測的請求,并內置高配置的底層沙箱服務,支持高并發的用戶同時使用。

          學生測評結果自動統計:平臺將課堂內的用戶的評測結果進行統計,按照消耗內存、消耗時間兩個維度進行展示,從而直觀的展示該實驗的整體評測數據。

          支持公共資源課程,便于老師教學:HTML5崗位技能實訓平臺可內置完整的實訓資源,其中包括實訓文檔以及在線資源包,用戶可以直接進行使用。

          個人云盤,資源不丟失:平臺會為用戶提供云盤服務,云盤內所有文件都會按照不同的文件類型進行分開,便于用戶查看和操作。

          平臺支持Web前端應用程序開發、web企業級開發、數據庫設計等實驗。

          3.3HTML5崗位技能教學資源包

          HTML5崗位技能教學資源包包含專業基礎課程: 計算機應用基礎、靜態網頁設計與制作、C語言程序設計、數據結構、HTML5 + CSS3 Web 前端開發技術、計算機專業英語等。專業核心課程:HTMI5 與 JavaSeript 程序設計、UI 設計基礎、美學基礎、Bootstrap 應用開發、NodeJS 應用開發、Vue 應用程序開發、Web 前端綜合實戰等。

          3.4HTML5崗位技能實訓資源包

          對接真實職業場景或工作情境,在校內外進行HTML5崗位技能實訓。使學生掌握網頁設計與制作的技術,能夠利用HTML5、CSS3等技術進行網頁布局,基于項目化教學的模式培養學生實踐動手能力;使學生了解JavaScript的基本語法,具備JavaScript的編程技巧和編程步驟;掌握常用的前端框架技術主要包含JQuery框架、Bootstrap框架、React框架、Vue框架、Angular框架等。利用數據庫管理系統和數據挖掘系統設計出能夠實現對數據庫中的數據進行添加、修改、刪除、處理、分析、理解、報表和打印等多種功能的數據管理和數據挖掘應用系統;并利用應用管理系統最終實現對數據的處理、分析和理解。

          培養具有良好職業道德和人文素養,掌握web前后端數據交互、響應式開發等知識,具備動態網頁設計、開發、調試、維護等能力,能從事web前端軟件編程、軟件測試、軟件技術服務、智能終端界面開發等工作的中級技術技能人才。

          3.5HTML5崗位技能實訓室配套設施

          HTML5崗位技能實訓室配套設置包含實訓室硬件設施、HTML5崗位技能軟件和工具等內容,其中硬件設施如智慧黑板、教師講臺、多媒體設備、學生實訓電腦、桌椅、服務器、交換機、機柜及HTML5崗位技能實訓室裝修和HTML5崗位技能文化建設。HTML5崗位技能軟件和工具應包含常用的HTML5崗位技能軟件和工具,這些HTML5崗位技能軟件和工具可以幫助學生進行應用程序的編寫、測試和調試。

          四、HTML5崗位技能實訓室建設圖

          HTML5崗位技能實訓室建設圖

          五、HTML5崗位技能實訓室方案清單

          六、HTML5崗位技能實訓室方案價值

          6.1專業教學支撐

          6.2教材聯合開發教材

          聯合各院校教授專家,開發HTML5崗位技能專業系列教材,為院校專業實驗課程開展和教學提供參考。

          6.3 產學研支撐平臺

          平臺采用spring cloud微服務開發架構,各服務模塊單獨運行并提供服務接口;可提供穩定、快速、高效的服務;平臺整體采用前后端分離和分布式微服務的彈性計算架構實現,后端主要基于Java的Spring cloud實現,前端vue實現等,具有高內聚、松耦合、業務單一、高性能、高并發、高可能、跨平臺、跨語言等特點。

          平臺提供SSO單點登錄,多個應用系統統一登錄,統一的用戶管理,一個賬戶可登錄驗證教學全場景以及數字技術專業群實踐教學等所有應用模塊系統。

          平臺采用kubernetes技術進行部署,支持公有云、私有云、混合云模式安裝;平臺支持多數據源從而保證技術的一致性;確保服務的穩定、可擴展、彈性擴容;每個獨立服務支持分布式集群部署,理論上可以無限橫向擴展,提高系統處理能力,支持大規模并發教學全場景和數字化專業群教學實踐應用。

          基礎虛擬化服務由docker和kvm兩種虛擬化技術根據學科性質進行選擇性支撐,可滿足不同的虛擬化需求,提供穩定、可自行配置的虛擬機器。

          基于全流程DevOps自動化運維,支持持續集成、分析、服務注冊與發現、系統監控、性能監控、日志管理、預警、持續部署(基于docker的鏡像倉庫,Kubernetes的容器云管理調度平臺,在線可視化管理、監控、調度容器)。

          基礎持久化層支持RDS和NoSQL兩種方式,采用MySQL集群和MongoDB集群搭建,支持基于CQRS的分布式事務處理,支持數據自動備份,同時使用于Redis集群對熱點數據進行緩存,支持大并發;支持純本地化數據源。

          基礎服務層支持在線驗證碼服務、基礎文件服務、消息隊列服務、OSS對象存儲服務、用戶/鑒權服務、個人云盤服務、WebSocket服務等,保證平臺的通用性。用戶基礎信息管理:對訂單實行按業務方向進行配置,對班級、教師、學生相關信息進行新增、修改、刪除以及數據權限進行配置。

          6.4 技能大賽支撐

          6.5 1+X認證服務


          主站蜘蛛池模板: 中文字幕视频一区| 国产一区精品视频| 白丝爆浆18禁一区二区三区| 插我一区二区在线观看| 免费高清av一区二区三区| 亚洲第一区香蕉_国产a| 国产高清在线精品一区小说| 国产精品视频一区| 国产91大片精品一区在线观看| 久久久久国产一区二区三区| 在线视频亚洲一区| 尤物精品视频一区二区三区| 97精品一区二区视频在线观看| 一本AV高清一区二区三区| 亚洲第一区精品日韩在线播放| 欧洲精品一区二区三区| 激情无码亚洲一区二区三区| 无码乱码av天堂一区二区 | 久久国产精品亚洲一区二区| 中文字幕日本一区| 久久精品中文字幕一区| 国产精品无码一区二区在线观一| 国产拳头交一区二区| 欧洲精品码一区二区三区免费看 | 成人在线视频一区| 一区二区三区91| 久久婷婷色综合一区二区| 久久婷婷色综合一区二区| 国产成人综合精品一区| 久久久人妻精品无码一区| 亚洲AV无码一区二区三区在线观看| 国产成人无码aa精品一区| 卡通动漫中文字幕第一区| 动漫精品专区一区二区三区不卡| 日韩一区二区三区视频| 91福利国产在线观看一区二区 | 午夜精品一区二区三区在线观看| 日韩一区二区三区在线观看 | 麻豆精品久久久一区二区| 99久久人妻精品免费一区 | 国产精品亚洲不卡一区二区三区|