整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
歡的可以收藏轉(zhuǎn)發(fā)加關(guān)注
HTML5經(jīng)歷了前期HTML快速的更新?lián)Q代，以其獨有特性的優(yōu)勢迅速占據(jù)了網(wǎng)頁開發(fā)市場鰲頭。介于目前學(xué)習(xí)和想要從事HTML5網(wǎng)頁開發(fā)的人越來越多。本次，給大家整理了一下基本的HTML5學(xué)習(xí)路線圖，適應(yīng)于一些零基礎(chǔ)學(xué)習(xí)HTML5的同學(xué)借鑒。
如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，可以加入web前端學(xué)習(xí)交流秋秋圈：767273102 里面可以與大神一起交流并走出迷茫。新手可免費領(lǐng)取學(xué)習(xí)資料，看看前輩們是如何在編程的世界里傲然前行不停更新最新的教程和學(xué)習(xí)方法（詳細的前端項目實戰(zhàn)教學(xué)視頻），有想學(xué)習(xí)web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習(xí)的小伙伴歡迎加入
HTML5學(xué)習(xí)路線規(guī)劃：
一、HTML5基礎(chǔ)
HTML 快速入門、文本、圖像、鏈接、表格、列表、表單、框架;
二、CSS3基礎(chǔ)
CSS基礎(chǔ)語法、各種選擇器(通用選擇器、元素選擇器、id和class選擇器、后代選擇器、偽類選擇器等)、框模型與背景、文本格式化、表格、顯示與定位、瀏覽器調(diào)試
三、HTML5高級
HTML5 增強表單元素、HTML5驗證、HTML5新事件和新屬性、Canvas繪圖、HTML5 SVG、音頻和視頻處理、離線Web存儲與應(yīng)用、HTML5 拖放、Web Socket API、Geolocation API、Web Worker API
四、實戰(zhàn)技能目標
掌握JQuery核心API，HTML5 中的繪圖、音頻視頻處理、表單新特性，輕量級WEBAPP開發(fā)。
HTML5開發(fā)從根本上改變了開發(fā)者開發(fā)web和應(yīng)用的方式，從桌面瀏覽器到移動應(yīng)用，HTML5都已經(jīng)成為前端開發(fā)必不可少的語言。特別是移動互聯(lián)網(wǎng)的爆發(fā)和微信這個超級應(yīng)用對HTML5的支持，掌握HTML5語言的程序員已然成為各個互聯(lián)網(wǎng)公司的標配，薪資也是一路走高。
如果你想入門HTML5，又苦于沒有好的學(xué)習(xí)方法，可以選擇一套優(yōu)秀的教程來進行學(xué)習(xí)，讓自己少走彎路快速進入HTML5開發(fā)的行列。
學(xué)習(xí)前端的伙伴可以私信回復(fù)小編“前端”領(lǐng)取全套免費前端學(xué)習(xí)資料和學(xué)習(xí)視頻
HTML（HyperText Markup Language，超文本標記語言）是用來描述網(wǎng)頁的一種語言，它不是一種編程語言，而是一種標記語言。
HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式，HTML5是互聯(lián)網(wǎng)的下一代標準，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標準，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。
HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進行網(wǎng)頁瀏覽時看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識別的信息，HTML5在從前HTML4.01的基礎(chǔ)上進行了一定的改進。
由于HTML5只是在HTML的基礎(chǔ)上進行了新增或者廢棄一些標簽或者特性，本文默認均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網(wǎng)頁的結(jié)構(gòu)，所以一些樣式和腳本方面的標簽和屬性以及關(guān)于JavaScript部分的特性也不再提及，重點在于梳理常用標簽體系。
現(xiàn)今瀏覽器的許多新功能都是從HTML5標準中發(fā)展而來的。目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過對這些主流web瀏覽器的發(fā)展策略調(diào)查，發(fā)現(xiàn)它們都支持HTML5上采取了措施。
（1）IE瀏覽器
2010年3月16日，微軟MIX10技術(shù)大會上宣布其推出的IE9瀏覽器已經(jīng)支持HTML5。同時還聲稱，隨后將會更多的支持HTML新標準和CSS3新特性。
（2）FireFox瀏覽器
2010年7月，Mozilla基金會發(fā)布了即將推出的Firefox4瀏覽器的第一個早期測試版，該版本中Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，F(xiàn)irefox4對HTML5是完全級別的支持。目前，包括在線視頻，在線音頻在內(nèi)的多種應(yīng)用都已經(jīng)在版本中實現(xiàn)。
（3）Google瀏覽器
2010年2月19日，谷歌Gears項目經(jīng)理通過微博宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以重點開發(fā)HTML5項目。據(jù)費特表示，目前在谷歌看來，Gears應(yīng)用用于HTML5的諸多創(chuàng)新非常相似，并且谷歌一直積極發(fā)展HTML5項目。因此只要谷歌不斷以加強網(wǎng)絡(luò)標準的應(yīng)用功能為工作重點，那么為Gears增加新功能就無太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因。
（4）Safari瀏覽器
2010年6月7日，蘋果在開發(fā)者發(fā)布會公布Safari5，這款瀏覽器支持10個以上的HTML5新技術(shù)，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera瀏覽器
2010年5月5日，Opera軟件公司首席技術(shù)官，號稱“CSS之父”的Hakon Wium Lie認為，HTML5和CSS3，將會是全球互聯(lián)網(wǎng)發(fā)展的未來趨勢，包括目前Opera在內(nèi)的諸多瀏覽器廠商，紛紛研發(fā)HTML5的相關(guān)產(chǎn)品，web未來屬于HTML5。
綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進，HTML5的時代即將來臨。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm為本文使用的工具，請自行購買激活，也可以使用以上的免費工具，安裝步驟都較為簡單，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
單標簽：
<標簽名 [屬性名=屬性值,...]>
成對標簽：
<標簽名 [屬性名=屬性值,...]></標簽名>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
<p>這是一個段落</p>
使用示例：
<a href="百度一下，你就知道">打開百度，你就知道！</a>
常見屬性：
屬
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
<th>表頭四</th>
</tr>
<tr>
<td>單元格一</td>
<td>單元格二</td>
<td>單元格三</td>
<td>單元格四</td>
</tr>
</table>
無序列表：
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表：
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
自定義列表：
<dl>
<dt>+</dt><dd>列表項</dd>
<dt>+</dt><dd>列表項</dd>
<dt>+</dt><dd>列表項</dd>
</dl>
<div>具體內(nèi)容</div>
<span>具體內(nèi)容</span>
常見標簽：
基本布局：
常見標簽：
案例演示：
1、form、input、label演示
<form action="" method="get">
<p>
<label for="username">賬戶：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
2、textarea演示
<form action="" method="post">
<textarea name="mycontext" cols="30" rows="10"></textarea>
<input type="submit">
</form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post">
<fieldset>
<legend>請選擇你的愛好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="運動">
<option value="籃球">籃球</option>
<option value="足球">足球</option>
</optgroup>
<optgroup label="電子">
<option value="看電影">看電影</option>
<option value="看電視">看電視</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5、單選框演示
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
6、復(fù)選框演示
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 Audio 標簽。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 Video 標簽。
</video>
水平線：<hr>
換行：<br>
<b>粗體文本</b>
<code>計算機代碼</code>
<em>強調(diào)文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd>
<pre>預(yù)格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>縮寫詞或者首字母縮略詞</abbr>
<address>聯(lián)系信息</address>
<bdo>文字方向</bdo>
<blockquote>從另一個源引用的部分</blockquote>
<cite>工作的名稱</cite>
<del>刪除的文本</del>
<ins>插入的文本</ins>
<sub>下標文本</sub>
<sup>上標文本</sup>
HTML標簽可以設(shè)置屬性，屬性總是以名稱/值對的形式出現(xiàn)，比如：name=“value”，它的主要作用是控制或修飾標簽。
HTML事件可以觸發(fā)瀏覽器中的行為，比方說當(dāng)用戶點擊某個 HTML 元素時啟動一段 JavaScript。
由窗口觸發(fā)該事件 (同樣適用于 <body> 標簽)：
表單事件在HTML表單中觸發(fā) (適用于所有 HTML 元素，但該HTML元素需在form表單內(nèi))：
通過鍵盤觸發(fā)事件，類似用戶的行為：
通過鼠標觸發(fā)事件，類似用戶的行為：
通過視頻（videos），圖像（images）或音頻（audio） 觸發(fā)該事件，多應(yīng)用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。
課件資料?騰訊文檔
聯(lián)網(wǎng)的迅速發(fā)展，軟件行業(yè)成了更多年輕人的就業(yè)選擇。HTML5簡單易學(xué)門檻低，是Web時代前端開發(fā)超好用的工具。而HTML5開發(fā)人員的就業(yè)薪資也遠遠高于其他行業(yè)。
資料顯示，初級HTML5開發(fā)人員的平均薪資在8K-10K左右，擁有一定工作經(jīng)驗的人薪資普遍達到15K-20K。如此廣闊的前景當(dāng)然吸引了無數(shù)專業(yè)或非專業(yè)人士的加入。HTML5用途范圍廣，下面小編就來給大家分享常見的HTML5框架。
HTML5基礎(chǔ)入門之常見的HTML5框架有哪些?
1、Siimpler
Siimpler 是個簡單的 HTML 開發(fā)框架，他可以通過選擇你自己喜歡的部分，來幫助你迅速又簡單地創(chuàng)建 HTML5 開發(fā)結(jié)構(gòu)。網(wǎng)絡(luò)設(shè)計者們也可以通過使用 Siimpler 框架類的文件和文件夾來無縫的開始一個 Web 項目。
2、Ionic
Ionic 是個神奇的框架和強大前端開源系統(tǒng)，使用先進的Web技術(shù)，比如CSS、HTML 和 JS 來創(chuàng)建令人驚嘆的手機應(yīng)用。
3、Foundation
Foundation 是世界上精妙的前端響應(yīng)框架，同時，它可以兼容所有的瀏覽器和網(wǎng)絡(luò)設(shè)備。Foundation 擁有移動友好型的用戶接口，設(shè)置了許多關(guān)鍵特性。
4、Enyo
Enyo是一個開源的 Jaa 框架，該框架能夠讓你創(chuàng)建頂級的 HTML5 應(yīng)用程序，該應(yīng)用程序能夠運行在各種各樣的電子設(shè)備上，比如說手機、臺式機、筆記本、電視以及Web應(yīng)用。
5、LimeJS
針對于所有的新的桌面瀏覽器和觸屏設(shè)備，LimeJS 對于有用戶經(jīng)驗的游戲開發(fā)者而言是教好的和較強大的開發(fā)框架。
6、Bootstrap
Bootstrap能讓所有開發(fā)者都能迅速上手、所有設(shè)備都可以適配、所有項目都適用。此外，bootstrap的官網(wǎng)也有很多教程提供。
7、juery UI
juery UI 主要分為交互、微件和效果庫3個部分，主打代碼開源，操作繼承了juery 的簡單特性，兼容各主流桌面瀏覽器。
前端HTML5是當(dāng)下很多企業(yè)都會用到的軟件開發(fā)，HTML5是移動互聯(lián)網(wǎng)前端的主流開發(fā)語言，目前還沒有任何一種前端開發(fā)技術(shù)能夠取代HTML5。因此，無論是PC端還是APP端的應(yīng)用，前端樣式都離不開HTML5.
從手機與電腦上網(wǎng)的使用率來看，從事HTML5或者Web相關(guān)的開發(fā)工作，就業(yè)前景還是比較可觀的。而且，現(xiàn)在的網(wǎng)站開發(fā)都往移動設(shè)備上轉(zhuǎn)移，所以HTML5或者Web前端是眾望所歸。
關(guān)注我的頭條號，分享更多的技術(shù)學(xué)習(xí)文章，我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
這7個框架，你都會用嗎？
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
