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

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

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頁面第一行是 瀏覽器就會按照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

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

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

@H_502_136@

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

@H_502_136@

Welcome to HTML5 World!

Aside

Copyright ? 2020 GrapeCity inc.

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相關的內容，希望大家持續關注。

總結

以上是編程之家為你收集整理的給萌新HTML5 入門指南全部內容，希望文章能夠幫你解決給萌新HTML5 入門指南所遇到的程序開發問題。

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

總結

以上是生活随笔為你收集整理的html编程入门指南,给萌新HTML5 入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。