從零開始，學習web前端之HTML5開發

時間  2019-12-14
標籤 開始 學習 web 前端 html5 html 開發 欄目 HTML 简体版
原文   原文鏈接

什麼是HTML5

HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。是下一代 HTML 標準。javascript

爲何要學習HTML5

HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，還提供了一些新的Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，甚至結合Canvas咱們可開發網頁版遊戲。 
HTML5的設計目的是爲了在移動設備上支持多媒體，它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言。php

HTML5的優點有不少,好比：更聰明的存儲，更具備語義化的標籤，對視頻和音頻的支持等等。。。最重要的是，HTML5是將來的趨勢。css

HTML5的改進：html

新元素 
新屬性 
徹底支持 CSS3 
Video 和 Audio 
2D/3D 製圖 
本地存儲 
本地 SQL 數據 
Web 應用 
等等前端

 

web前端HTML5學習qq羣：733581373html5

若是想看到更加系統的文章和學習方法經驗能夠關注的微信號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’能夠領取一套完整的學習視頻java

新增的語義化標籤

HTML5新增了一些標籤，也移除了一些標籤。web

目前兼容性比較好的經常使用的新標籤有：正則表達式

<header>    表示頁眉，通常用在文檔頭部
<nav>       表示導航，通常用於導航區域
<section>   表示區塊，定義了某個區域
<article>   表示文章，通常用於表示文章（評論，博客...） <aside> 表示側邊欄，通常和article一塊兒用，表示文章的側邊欄 <figure> 表示獨立的流內容（圖像、圖表、照片、代碼等等） .....

<!DOCTYPE html>瀏覽器

<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> header { width: 1000px; height: 50px; background: red; margin: 0 auto; color: white; text-align: center; } nav { width: 1000px; height: 50px; background: blue; color: white; text-align: center; margin: 0 auto; } section { margin: 0 auto; width: 1000px; height: 500px; color: white; text-align: center; margin: 0 auto; } aside { float: left; width: 300px; height: 500px; background: green; color: white; text-align: center; margin: 0 auto; } article { float: right; height: 500px; width: 700px; color: white; text-align: center; background: pink; margin: 0 auto; } footer { width: 1000px; height: 50px; background: gray; color: white; text-align: center; margin: 0 auto; } </style> </head> <body> <!--頭部--> <header>頭部</header> <nav>導航</nav> <!--主題--> <section> <!--側邊欄--> <aside>側邊欄</aside> <!--文章--> <article>文章</article> </section> <!--底部--> <footer>底部</footer> </body> </html>

 

 

這裏寫圖片描述

瀏覽器兼容問題 
目前新版本的瀏覽器對H5的支持都比較好，可是有些舊的瀏覽器並不識別H5的新元素。全部的瀏覽器對於沒法識別的元素都會做爲內聯元素來處理。 
爲了讓舊版本的瀏覽器識別這些新元素，咱們能夠將這些元素CSS 的 display 屬性值爲 block:

header, section, footer, aside, nav, main, article, figure { display: block; }

 

 

自定義標籤

咱們能夠自定義一個標籤，並在html中使用它 
示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> document.createElement("myNode");//建立一個元素 </script> <style> myNode{ display: block; width: 100px; height: 100px; background: red; } </style> </head> <body> <!--使用自定義元素--> <myNode></myNode> </body> </html>

 

 

IE9如下的兼容性解決辦法 
在IE9版本如下，並不能正常解析這些新標籤，可是卻能夠識別經過document.createElement(‘tagName’)建立的自定義標籤，因而咱們的解決方案就是將HTML5的新標籤所有經過 document.createElement(‘tagName’)來建立一遍，這樣IE低版本也能正常解析HTML5新標籤了，在實際開發中咱們更多采用的是經過檢測IE瀏覽器的版原本加載三方的一個JS庫來解決兼容問題。

1.先下載js下面的文件 
html5shiv.js

2.將html5shiv.js引入便可

<!--[if lt IE 9]> <script src="../js/html5shiv.min.js"></script> <![endif]-->

 

注意：並非全部的瀏覽器都須要引入這個文件，因此咱們在IE9如下的瀏覽器引入便可

<!--[if lt IE 9]> <!--[endif]>

 

上面代碼是條件註釋，只有IE瀏覽器識別，當IE瀏覽器版本小於9時，纔會引入js文件。

表單

伴隨着互聯網富應用以及移動開發的興起，傳統的Web表單已經愈來愈不能知足開發的需求，因此HTML5在Web表單方向也作了很大的改進，如拾色器、日期/時間組件等，使表單處理更加高效。

input輸入類型

email       輸入email格式
tel         手機號碼  
url         只能輸入url格式
number 只能輸入數字 search 搜索框 range 範圍 滑動條 color 拾色器 time 時間 date 日期 不是絕對的 datetime 時間日期 month 月份 week 星期

 

 

新的表單元素

  • datalist
  • keygen (在新的web標準中已廢棄)
  • output
  • meter
  • progress

datalist 
數據列表，通常配合form和input使用，使其具備自動完成的功能。

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 城市： <input type="text" list="cityData"> <datalist id="cityData"> <option>aaaa</option> <option>abaasd</option> <option>adasdww</option> <option>bsdas</option> <option>csdas</option> <option>fsdas</option> <option>dsdas</option> </datalist> </form> </body> </html>

 

這裏寫圖片描述

output 
用來輸出計算結果或用戶動做的結果。

示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)"> <input name="a" type="number" step="any"> + <input name="b" type="number" step="any"> = <output name="o"></output> </form> </body> </html>

 

 

這裏寫圖片描述

meter 
表示度量器（不經常使用）

<meter min="0" max="100" low="20" high="80" value="81" ></meter>

 

progress 
表示進度條

<progress min="0" max="100" value="10"></progress>

 

表單屬性

autocomplete 
是否自動完成，on：開啓 off取消，可用於form和input

<form action="" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>

 

這裏寫圖片描述

能夠看到，當咱們輸入過信息後，再次輸入時，會自動匹配以前輸入夠的內容。而郵箱因爲設置了autocomplete=」off」，因此不會自動完成，

novalidate 
取消驗證，用於form元素上。

html5表單自己會自動驗證一些input，例如屬性爲email的input

<form action=""> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>

 

這裏寫圖片描述

若是再form中添加這個屬性，那麼點擊提交按鈕時將不會驗證。

<form action="" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>

這裏寫圖片描述

點擊提交表單不會驗證，直接提交

required 
required 屬性適用於如下類型的 input標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<form action=""> Username: <input type="text" name="usrname" required> <input type="submit"> </form>

這裏寫圖片描述

添加該屬性後該input不能爲空。點擊提交按鈕時會驗證。

注意：若是form元素設置了novalidate屬性，就算input設置了required 屬性，也不會進行驗證。

<form action="" novalidate> Username: <input type="text" name="usrname" required> <input type="submit"> </form>

這裏寫圖片描述

placeholder 
佔位符，通常用於提示用戶輸入信息

email：<input type="email" placeholder="請輸入郵箱">

 

這裏寫圖片描述

autofocus 
獲取焦點，用於input中。添加該屬性進去頁面時會自動獲取焦點。若是多個input都設置了這個屬性的話，最前面的input會獲取焦點。

<form action="" > userName: <input type="text" > pwd：<input type="password" placeholder="請輸入密碼" autofocus> email：<input type="email" placeholder="請輸入郵箱" autofocus> <input type="submit"> </form>

 

multiple 
multiple 文件上傳多選或郵箱多個,屬性適用於如下類型的 input標籤：email 和 file

<input type="file" name="img" multiple>

 

pattern 
正則表達式 驗證表單 
pattern 屬性適用於如下類型的 input 標籤: text, search, url, tel, email, 和 password.

<form action="" > userName: <input type="text" pattern="[A-Za-z]{3}" title=""> <input type="submit"> </form>

這裏寫圖片描述

formaction 
描述表單提交的URL地址 
formaction 屬性用於 type=」submit」 和 type=」image」.

<input type="submit" formaction="demo-admin.php" value="提交">

 

表單事件

oninput 
用戶輸入時觸發

$(function () { $("#emailIpt")[0].oninput=function () { console.log(this.value); }; });

oninvalid 
驗證不經過時觸發

$(function () { $("#emailIpt")[0].oninvalid=function () { this.setCustomValidity("請輸入正確的郵箱地址");//自定義提示信息 }; });

 

多媒體

在以前的版本咱們若是想在網頁上播放多媒體，必須依賴第三方插件，如今HTML5給咱們提供了多媒體標籤使咱們能夠音頻和視頻。

audio 
音頻標籤

<audio id="myAudio" src="music/TheTruthThatYouLeave.mp3"> </audio>

可是不一樣瀏覽器對音頻文件的支持程度不一樣。

這裏寫圖片描述
兼容寫法

<!-- autoplay: 自動播放 controls:控制條 loop：循環 --> <!--<audio src="music/yinyue.mp3" autoplay controls> </audio>--> <!--推薦的兼容寫法：--> <audio controls loop> <source src="music/yinyue.mp3"/> <source src="music/yinyue.ogg"/> <source src="music/yinyue.wav"/> 抱歉，你的瀏覽器不支持音頻標籤！ </audio>

 

video

視頻標籤

視頻標籤一樣存在瀏覽器兼容問題 
這裏寫圖片描述

<!--<video src="video/movie.mp4" controls autoplay ></video>--> <!-- 行內塊 display:inline-block --> <video controls autoplay> <source src="video/movie.mp4"/> <source src="video/movie.ogg"/> <source src="video/movie.webm"/> 抱歉，瀏覽器要換了！ </video>

相關屬性 

屬性有不少，經常使用的也就那幾個 
這裏寫圖片描述

相關方法

這裏寫圖片描述

相關事件

這裏寫圖片描述

新增獲取DOM的方式

querySelector 
返回文檔中匹配指定 CSS 選擇器的一個元素。

document.querySelector("img");//返回第一個img

 

querySelectorAll 
返回全部的元素

document.querySelectorAll("img");//返回img集合

 

類名操做

一、Node.classList.add('class') 添加class 二、Node.classList.remove('class') 移除class 三、Node.classList.toggle('class') 切換class，有則移除，無則添加 四、Node.classList.contains('class') 檢測是否存在class

自定義屬性

在HTML5中咱們能夠自定義屬性，其格式以下data-*=」」 
例如： 
data-info=」我是自定義屬性」，經過Node.dataset[‘info’] 咱們即可以獲取到自定義的屬性值。 
Node.dataset是以類對象形式存在的 
當咱們以下格式設置時，則須要以駝峯格式才能正確獲取 
data-my-name=」itcast」，獲取Node.dataset[‘myName’]

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 100px; height: 100px; background: pink; } </style> <script>window.onload=function () { var div=document.querySelector("div"); console.log(div.dataset["info"]);//獲取自定義屬性 } </script> </head> <body> <!--添加滴自定義屬性--> <div class="box" data-info="自定義屬性"></div> </body> </html>

 

 

拖拽

在HTML5的規範中，咱們能夠經過爲元素增長draggable=」true」來設置此元素是否能夠進行拖拽操做，其中圖片、連接默認是開啓的。

拖拽元素 
頁面中設置了draggable=」true」屬性的元素

目標元素 
頁面中任何一個元素均可以成爲目標元素，

例如：將盒子a中的元素拖拽到盒子b中，那麼，盒子a中的元素就是拖拽元素，盒子b就是目標元素

 

事件監聽

拖拽元素

ondrag      應用於拖拽元素，整個拖拽過程都會調用
ondragstart 應用於拖拽元素，當拖拽開始時調用
ondragleave 應用於拖拽元素，當鼠標離開拖拽元素時調用
ondragend   應用於拖拽元素，當拖拽結束時調用

 

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab 標籤</title> <script> window.onload=function(){ var imgNode=document.querySelector("img"); imgNode.ondragstart=function(){ console.log("拖拽開始"); } imgNode.ondragleave=function(){ console.log("離開拖拽元素") } imgNode.ondrag=function () { console.log("正在拖拽"); } imgNode.ondragend=function(){ console.log("拖拽結束") } } </script> </head> <body> <img src="../img/yixin.png" /> </body> </html>

 

 

這裏寫圖片描述

目標元素

ondragenter 應用於目標元素，當拖拽元素進入時調用
ondragover  應用於目標元素，當停留在目標元素上時調用
ondrop      應用於目標元素，當在目標元素上鬆開鼠標時調用
ondragleave 應用於目標元素，當鼠標離開目標元素時調用

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab 標籤</title> <style> .box{ width: 50px; height: 50px; background: red; } .box1{ width: 150px; height: 150px; border: 1px solid red; margin-left: 200px; position: relative; display: block; left: 200px; } </style> <script> window.onload=function(){ var divNode=document.querySelector(".box1"); divNode.ondragover=function (e) { /*阻止拖拽元素的默認行爲*/ e.preventDefault(); console.log("停留在目標元素上了"); } divNode.ondragenter=function () { console.log("拖拽元素進入"); } divNode.ondrop=function () { console.log("在目標元素上鬆開鼠標"); } divNode.ondragleave=function () { console.log("離開目標元素了"); } } </script> </head> <body> <div draggable="true" class="box" ></div> <div class="box1"></div> </body> </html>

 

 

 

這裏寫圖片描述

注意：ondragoverondragover 默認地沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。 
event.preventDefault()

全屏

HTML5規範容許用戶自定義網頁上任一元素全屏顯示。 
requestFullscreen() 開啓全屏顯示 
cancleFullscreen() 關閉全屏顯示

不一樣瀏覽器須要添加前綴： 
請求全屏 
webkitRequestFullScreen、mozRequestFullScreen 
取消全屏 
webkitCancleFullScreen、mozCancleFullScreen

兼容寫法：

//進入全屏 function requestFullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } } //退出全屏 function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }

 

 

web存儲

隨着互聯網的快速發展，基於網頁的應用愈來愈廣泛，同時也變的愈來愈複雜，爲了知足各類各樣的需求，會常常性在本地存儲大量的數據，傳統方式咱們以document.cookie來進行存儲的，可是因爲其存儲大小隻有4k左右，而且解析也至關的複雜，給開發帶來諸多不便，HTML5規範則提出解決方案。

window.sessionStorage 
window.localStorage

一、設置、讀取方便 
二、容量較大，sessionStorage約5M、localStorage約20M 
三、只能存儲字符串，能夠將對象JSON.stringify() 編碼後存儲

window.sessionStorage 
一、生命週期爲關閉瀏覽器窗口 
二、在同一個窗口下數據能夠共享

window.localStorage 
一、永久生效，除非手動刪除 
二、能夠多窗口共享

方法詳解 
setItem(key, value) 設置存儲內容 
getItem(key) 讀取存儲內容 
removeItem(key) 刪除鍵值爲key的存儲內容 
clear() 清空全部存儲內容

localStorage.setItem("name","yzq");//存數據 localStorage.getItem("name")//取數據 localStorage.removeItem("name");//移除數據 localStorage.clear();//清除全部數據 sessionStorage.setItem("pwd","aaa"); sessionStorage.getItem("pwd") sessionStorage.removeItem("pwd"); sessionStorage.clear();

 

 

網絡狀態監聽

<script> if(navigator.onLine) { alert("有網") } else { alert("沒網"); }; window.addEventListener('online', function() { alert('網絡鏈接已創建！'); }); window.addEventListener('offline', function() { alert('網絡鏈接已斷開！'); }) </script>

 

 

應用緩存

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。 
應用程序緩存爲應用帶來三個優點： 
離線瀏覽 - 用戶可在應用離線時使用它們 
速度 - 已緩存資源加載得更快 
減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本

步驟： 
1.首先建立一個manifest 文件，manifest 文件的建議的文件擴展名是：」.appcache」。 
2.在須要緩存的頁面的根標籤添加manifest 屬性。 
2.編寫manifest 文件，告知瀏覽器哪些須要緩存，哪些不須要…

例如咱們建立了一個名爲demo.appcache的文件，而後在須要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"
  • 1

注意，manifest 文件須要配置正確的 MIME-type，即 「text/cache-manifest」。必須在 web 服務器上進行配置。

Manifest 文件 
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分： 
CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存 
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存 
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

CACHE MANIFEST 
第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css /logo.gif /main.js

 

上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

NETWORK 
下面的 NETWORK 小節規定文件 「login.asp」 永遠不會被緩存，且離線時是不可用的：

NETWORK: login.asp

可使用星號來指示全部其餘資源/文件都須要因特網鏈接：

NETWORK: *

 

FALLBACK

當頁面沒法訪問時的回退頁面（好比 404 頁面）

FALLBACK: 404.html

 

示例： 
建立demo.appcache文件 
編寫manifest文件

CACHE MANIFEST
#上面一句必須 #v1.0.0 #須要緩存的文件 CACHE: a.js b.css #不須要緩存的文件 NETWORK: * #沒法訪問頁面 FALLBACK: 404.html

 

 

在html標籤中添加manifest屬性

<!DOCTYPE html> <html manifest="demo.appcache"> <head> <meta charset="UTF-8"> <title>Title</title> </body> </html>

 

若是你以爲本文對你有幫助，麻煩動動手指頂一下，算是對本文的一個承認。也能夠關注我web前端的博客專欄，我會不按期的更新，若是文中有什麼錯誤的地方，還望指正，謝謝！

最後總結的一些乾貨，我本身是一名從事了5年前端開發的全棧工程師，今年年初我花了一個月整理了一份最適合2018年學習的前端乾貨，包括基礎+資料+視頻，都是免費的(若是你不是學習，就不要進來啦，人數有限)

前端學習qq羣：733581373

若是想看到更加系統的文章和學習方法經驗能夠關注的微信號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’能夠領取一套完整的學習視頻

​

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程