給萌新HTML5 入門指南

時間 2020-11-10

標籤 javascript css html 前端 html5 java webpack web 編程 canvas 欄目 HTML5 简体版

原文原文鏈接

本文由葡萄城技術團隊原創並首發javascript

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。css

HTML5的發展改變了互聯網技術趨勢，前端熱度依舊不減，因此對於應用開發人員前端技術也成了必備技能之一，本篇文章的目的是爲了幫助萌新的入門指導，也同時但願能爲老鳥起到必定查漏補缺的做用，那麼讓咱們開始吧。html

什麼是HTML5？

廣義上的HTML5是HTML最新的修訂版本，由萬維網聯盟（W3C）於2014年10月完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到符合當代的網絡需求。前端

但咱們在平常中常說的HTML5技術，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。html5

開發人員在開發過程當中爲了提升開發效率，經常會用到各類組件工具例如：jQuery，BootStrap，webpack，或者前端框架，如：VUE等。除了學習各類工具框架的使用，HTML5的基礎知識也是須要了解掌握，這樣有助於更好的理解工具框架的設計以及使用。java

後面咱們將結合一系列文章，深刻淺出的介紹關於HTML，CSS和JavaScript的經常使用功能及編程技巧。webpack

那麼首先來了解下HTML5都更新了那些內容：web

什麼樣的網頁是HTML5網頁？編程

只要html頁面第一行是 <!DOCTYPE html> 瀏覽器就會按照HTML5標準去解析網頁，不管頁面中是否使用了HTML5新增內容canvas

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>

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>

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相關的內容，但願你們持續關注。