萌新的HTML5 入門指南

博客園 發(fā)布時間：2020-11-06 16:34:53 作者：葡萄城技術(shù)團(tuán)隊(duì)

這篇文章主要介紹了給萌新的HTML5 入門指南，幫助萌新更好的理解和學(xué)習(xí)html5的相關(guān)知識，感興趣的朋友可以了解下

本文由葡萄城技術(shù)團(tuán)隊(duì)原創(chuàng)并首發(fā)

作者：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。

HTML5的發(fā)展改變了互聯(lián)網(wǎng)技術(shù)趨勢，前端熱度依舊不減，所以對于應(yīng)用開發(fā)人員前端技術(shù)也成了必備技能之一，本篇文章的目的是為了幫助萌新的入門指導(dǎo)，也同時希望能為老鳥起到一定查漏補(bǔ)缺的作用，那么讓我們開始吧。

什么是HTML5？

廣義上的HTML5是HTML最新的修訂版本，由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。

但我們在日常中常說的HTML5技術(shù)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。

開發(fā)人員在開發(fā)過程中為了提高開發(fā)效率，常常會用到各種組件工具例如：jQuery，BootStrap，webpack，或者前端框架，如：VUE等。除了學(xué)習(xí)各種工具框架的使用，HTML5的基礎(chǔ)知識也是需要了解掌握，這樣有助于更好的理解工具框架的設(shè)計(jì)以及使用。

后面我們將結(jié)合一系列文章，深入淺出的介紹關(guān)于HTML，CSS和JavaScript的常用功能及編程技巧。

那么首先來了解下HTML5都更新了那些內(nèi)容：

什么樣的網(wǎng)頁是HTML5網(wǎng)頁？

只要html頁面第一行是 <!DOCTYPE html> 瀏覽器就會按照HTML5標(biāo)準(zhǔn)去解析網(wǎng)頁，無論頁面中是否使用了HTML5新增內(nèi)容

HTML5新增了哪些內(nèi)容？

• 更好的語義化標(biāo)簽

結(jié)構(gòu)元素：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。

一些語義化標(biāo)簽如section、nav在使用時和傳統(tǒng)div并無大的區(qū)別，但這種標(biāo)簽更有利于搜索引擎的索引整理，利于智能手機(jī)、Pad等小屏設(shè)備適配，以及方便殘障人士使用。

同時也有些標(biāo)簽為瀏覽器增加了新的功能，如audio、video。

• 應(yīng)用程序接口（API）

1. Canvas，可以獲取canvas標(biāo)簽元素的上下文對象，然后使用該上下文對象中的繪圖功能進(jìn)行繪制。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相關(guān)API在用戶授權(quán)情況下，可以獲取用戶位置信息。

4. 新的表單元素，tel、email、url、search、range、number、color、datetime、datetime-local、time、date、week、month。隨著瀏覽器的支持，很多表單控件將成為歷史

5. 新的表單特性和函數(shù)：placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required

6. 拖放API：draggable屬性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer對象

7. WebSocket，一種瀏覽器與服務(wù)器間進(jìn)行全雙工通訊（full-duplex）的網(wǎng)絡(luò)技術(shù)，可以傳輸基于信息的文本和二進(jìn)制的數(shù)據(jù)

8. Web Workers，JavaScript單線程，復(fù)制js需算會導(dǎo)致頁面出現(xiàn)假死。如果js操作不需要訪問頁面window，那么可以放在web worker中并行處理。

• 廢除元素

廢除一些純變現(xiàn)以及兼容性不好的元素如：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

瀏覽器支持

IE9開始支持，IE10后支持較好。

Chrome，F(xiàn)irefox，Safari，Opera支持較好。

以上便是一些常用的HTML5新增的一些特性，接下來，我們一起看一看在HTML5在頁面布局方面有什么變化吧。

HTML5頁面布局

常用的頁面布局方式有很多種，比如

最早的靜態(tài)表格布局
通過柵欄劃分頁面的流式布局
根據(jù)屏幕大小自動調(diào)整內(nèi)容的自適應(yīng)布局
融和流式布局和自適應(yīng)布局的響應(yīng)式布局

以上布局主要通過使用css中display、position和float屬性相配合來實(shí)現(xiàn)，在確定位置以及清除浮動時，常常會遇到棘手問題（例如：垂直居中，屏幕適應(yīng)）。

CSS3中提供了一種更簡單的布局方式Flex布局（彈性布局）。

下面我們通過一個例子來展示Flex布局的易用性，下圖是一個典型的單頁應(yīng)用樣式，結(jié)構(gòu)上分為header，aside，footer和main四部分。header和footer自適應(yīng)寬度，aside固定寬度并可收縮，main區(qū)域自動根據(jù)剩余空間填充。

我們首先使用自適應(yīng)布局來實(shí)現(xiàn)上圖的結(jié)構(gòu)

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計(jì)算，瀏覽器高度變化時自動調(diào)整。container中aside為浮動元素，寬度20%。main根據(jù)剩余寬度調(diào)整。

這樣的布局方式存在一些問題，就是當(dāng)header、footer高度發(fā)生變化后，需要重新設(shè)置container高度，另外如果container中并列元素較多時，浮動難以控制。

接下來，我們看一下如何使用Flex布局實(shí)現(xiàn)上面的效果：

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

效果如下：

對比自適應(yīng)布局，上面的代碼有以下特點(diǎn)：

頁面使用HTML5語義化標(biāo)簽，頁面各部分功能清晰。
body設(shè)置高度 100vh，這里使用了CSS3 的新單位vh，即 view height 視窗高度，100vh相當(dāng)于html, body 高度100%，同樣還有vw代表視窗寬度
body設(shè)置flex布局，方向從上到下疊放
designerContainer 設(shè)置flex 1，自動充滿header和footer之外剩余空間
container內(nèi)部依舊flex布局，designerMain 設(shè)置 flex 1，自動充滿aside剩余空間

Flex兼容性注意事項(xiàng)：

l IE9不支持FLEX，建議IE11

l Safari 和 IOS 需要加 -webkit-

之前我們也寫過FlexBox教程，更多的內(nèi)容歡迎大家查看這篇文章了解：https://www.cnblogs.com/powertoolsteam/p/10000927.html

后面我們將會為大家介紹JavaScript相關(guān)的內(nèi)容，希望大家持續(xù)關(guān)注。

以上就是萌新的HTML5 入門指南的詳細(xì)內(nèi)容，更多關(guān)于HTML5 入門指南的資料請關(guān)注腳本之家其它相關(guān)文章！