本文由葡萄城技術團隊原創並首發
轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。
HTML5的發展改變了網際網路技術趨勢,前端熱度依舊不減,所以對於應用開發人員前端技術也成了必備技能之一,本篇文章的目的是為了幫助萌新的入門指導,也同時希望能為老鳥起到一定查漏補缺的作用,那麼讓我們開始吧。
什麼是HTML5?
廣義上的HTML5是HTML最新的修訂版本,由全球資訊網聯盟(W3C)於2014年10月完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準,以期能在網際網路應用迅速發展的時候,使網路標準達到符合當代的網路需求。
但我們在日常中常說的HTML5技術,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。
開發人員在開發過程中為了提高開發效率,常常會用到各種元件工具例如:jQuery,BootStrap,webpack,或者前端框架,如:VUE等。除了學習各種工具框架的使用,HTML5的基礎知識也是需要了解掌握,這樣有助於更好的理解工具框架的設計以及使用。
後面我們將結合一系列文章,深入淺出的介紹關於HTML,CSS和JavaScript的常用功能及程式設計技巧。
那麼首先來了解下HTML5都更新了那些內容:
什麼樣的網頁是HTML5網頁?
只要html頁面第一行是 <!DOCTYPE html> 瀏覽器就會按照HTML5標準去解析網頁,無論頁面中是否使用了HTML5新增內容
HTML5新增了哪些內容?
• 更好的語義化標籤
結構元素:article、aside、header、hgroup、footer、figure、section、nav。
其他元素:video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog。
一些語義化標籤如section、nav在使用時和傳統div並無大的區別,但這種標籤更有利於搜尋引擎的索引整理,利於智慧手機、Pad等小屏裝置適配,以及方便殘障人士使用。
同時也有些標籤為瀏覽器增加了新的功能,如audio、video。
• 應用程式介面(API)
1. Canvas,可以獲取canvas標籤元素的上下文物件,然後使用該上下文物件中的繪圖功能進行繪製。https://www.w3schools.com/html/html5_canvas.asp
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script>
2. 音訊和視訊,使用audio和video元素,瀏覽器無需安裝播放外掛,同時提供了播放控制API。
3. 地理位置,通過使用navigator相關API在使用者授權情況下,可以獲取使用者位置資訊。
4. 新的表單元素,tel、email、url、search、range、number、color、datetime、datetime-local、time、date、week、month。隨著瀏覽器的支援,很多表單控制元件將成為歷史
5. 新的表單特性和函式:placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required
6. 拖放API:draggable屬性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer物件
7. WebSocket,一種瀏覽器與伺服器間進行全雙工通訊(full-duplex)的網路技術,可以傳輸基於資訊的文字和二進位制的資料
8. Web Workers,JavaScript單執行緒,複製js需算會導致頁面出現假死。如果js操作不需要訪問頁面window,那麼可以放在web worker中並行處理。
• 廢除元素
廢除一些純變現以及相容性不好的元素如:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。
瀏覽器支援
IE9開始支援,IE10後支援較好。
Chrome,Firefox,Safari,Opera支援較好。
以上便是一些常用的HTML5新增的一些特性,接下來,我們一起看一看在HTML5在頁面佈局方面有什麼變化吧。
HTML5頁面佈局
常用的頁面佈局方式有很多種,比如
- 最早的靜態表格佈局
- 通過柵欄劃分頁面的流式佈局
- 根據螢幕大小自動調整內容的自適應佈局
- 融和流式佈局和自適應佈局的響應式佈局
以上佈局主要通過使用css中display、position和float屬性相配合來實現,在確定位置以及清除浮動時,常常會遇到棘手問題(例如:垂直居中,螢幕適應)。
CSS3中提供了一種更簡單的佈局方式Flex佈局(彈性佈局)。
下面我們通過一個例子來展示Flex佈局的易用性,下圖是一個典型的單頁應用樣式,結構上分為header,aside,footer和main四部分。header和footer自適應寬度,aside固定寬度並可收縮,main區域自動根據剩餘空間填充。
我們首先使用自適應佈局來實現上圖的結構
- HTML
<body> <div class="header"></div> <div class="container"> <div class="aside"></div> <div class="main"></div> </div> <div class="footer"></div> </body>
- CSS
html,body { margin: 0; padding: 0; height: 100%; background: black; } .header, .footer{ height:80px; background: white; } .container{ height: CALC(100% - 160px); background: pink; padding: 10px 0; } .aside{ width: 20%; height: 100%; float: left; background: gold; } .main{ width: 80%; height: 100%; float: left; background: gray; }
頁面分為上中下三部分,中間部分container高度通過使用CALC計算,瀏覽器高度變化時自動調整。container中aside為浮動元素,寬度20%。main根據剩餘寬度調整。
這樣的佈局方式存在一些問題,就是當header、footer高度發生變化後,需要重新設定container高度,另外如果container中並列元素較多時,浮動難以控制。
接下來,我們看一下如何使用Flex佈局實現上面的效果:
- HTML
<body> <header><h1>Welcome to HTML5 World!</h1></header> <section class="designerContainer"> <aside class="designerAside"> <div style="width:180px">Aside</div> </aside> <main class="designerMain"> </main> </section> <footer><h3>Copyright © 2020 GrapeCity inc.</h3></footer> </body>
- CSS
html, body{ margin: 0; padding: 0; } body{ height: 100vh; display: flex; flex-direction: column; } h1, h2, h3 { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; margin-block-start: 0; margin-block-end: 0; padding: 15px; } .designerContainer{ padding: 10px; flex: 1; display: flex; background: gray; } .designerAside{ text-align: center; background: gold; } .designerMain{ display: flex; flex: 1 100%; padding: 0 0 0 10px; background: pink; }
效果如下:
對比自適應佈局,上面的程式碼有以下特點:
- 頁面使用HTML5語義化標籤,頁面各部分功能清晰。
- body設定高度 100vh, 這裡使用了CSS3 的新單位vh,即 view height 視窗高度,100vh相當於html, body 高度100%,同樣還有vw代表視窗寬度
- body設定flex佈局,方向從上到下疊放
- designerContainer 設定flex 1,自動充滿header和footer之外剩餘空間
- container內部依舊flex佈局,designerMain 設定 flex 1,自動充滿aside剩餘空間
Flex相容性注意事項:
l IE9不支援FLEX,建議IE11
l Safari 和 IOS 需要加 -webkit-
之前我們也寫過FlexBox教程,更多的內容歡迎大家檢視這篇文章瞭解:https://www.cnblogs.com/powertoolsteam/p/10000927.html
後面我們將會為大家介紹JavaScript相關的內容,希望大家持續關注。