整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
欢的可以收藏转发加关注
HTML5经历了前期HTML快速的更新换代，以其独有特性的优势迅速占据了网页开发市场鳌头。介于目前学习和想要从事HTML5网页开发的人越来越多。本次，给大家整理了一下基本的HTML5学习路线图，适应于一些零基础学习HTML5的同学借鉴。
如果你依然在编程的世界里迷茫，不知道自己的未来规划，可以加入web前端学习交流秋秋圈：767273102 里面可以与大神一起交流并走出迷茫。新手可免费领取学习资料，看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法（详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入
HTML5学习路线规划：
一、HTML5基础
HTML 快速入门、文本、图像、链接、表格、列表、表单、框架;
二、CSS3基础
CSS基础语法、各种选择器(通用选择器、元素选择器、id和class选择器、后代选择器、伪类选择器等)、框模型与背景、文本格式化、表格、显示与定位、浏览器调试
三、HTML5高级
HTML5 增强表单元素、HTML5验证、HTML5新事件和新属性、Canvas绘图、HTML5 SVG、音频和视频处理、离线Web存储与应用、HTML5 拖放、Web Socket API、Geolocation API、Web Worker API
四、实战技能目标
掌握JQuery核心API，HTML5 中的绘图、音频视频处理、表单新特性，轻量级WEBAPP开发。
HTML5开发从根本上改变了开发者开发web和应用的方式，从桌面浏览器到移动应用，HTML5都已经成为前端开发必不可少的语言。特别是移动互联网的爆发和微信这个超级应用对HTML5的支持，掌握HTML5语言的程序员已然成为各个互联网公司的标配，薪资也是一路走高。
如果你想入门HTML5，又苦于没有好的学习方法，可以选择一套优秀的教程来进行学习，让自己少走弯路快速进入HTML5开发的行列。
学习前端的伙伴可以私信回复小编“前端”领取全套免费前端学习资料和学习视频
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。
由于HTML5只是在HTML的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起，HTML一般用于描述网页的结构，所以一些样式和脚本方面的标签和属性以及关于JavaScript部分的特性也不再提及，重点在于梳理常用标签体系。
现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持HTML5上采取了措施。
（1）IE浏览器
2010年3月16日，微软MIX10技术大会上宣布其推出的IE9浏览器已经支持HTML5。同时还声称，随后将会更多的支持HTML新标准和CSS3新特性。
（2）FireFox浏览器
2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版，该版本中Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多的HTML5语法分析器，以及支持更多的HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频，在线音频在内的多种应用都已经在版本中实现。
（3）Google浏览器
2010年2月19日，谷歌Gears项目经理通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用用于HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此只要谷歌不断以加强网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出吊证的重要原因。
（4）Safari浏览器
2010年6月7日，苹果在开发者发布会公布Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera浏览器
2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3，将会是全球互联网发展的未来趋势，包括目前Opera在内的诸多浏览器厂商，纷纷研发HTML5的相关产品，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>具体内容</div>
<span>具体内容</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、复选框演示
<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>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>缩写词或者首字母缩略词</abbr>
<address>联系信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>
HTML标签可以设置属性，属性总是以名称/值对的形式出现，比如：name=“value”，它的主要作用是控制或修饰标签。
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
由窗口触发该事件 (同样适用于 <body> 标签)：
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：
通过键盘触发事件，类似用户的行为：
通过鼠标触发事件，类似用户的行为：
通过视频（videos），图像（images）或音频（audio） 触发该事件，多应用于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。
课件资料?腾讯文档
联网的迅速发展，软件行业成了更多年轻人的就业选择。HTML5简单易学门槛低，是Web时代前端开发超好用的工具。而HTML5开发人员的就业薪资也远远高于其他行业。
资料显示，初级HTML5开发人员的平均薪资在8K-10K左右，拥有一定工作经验的人薪资普遍达到15K-20K。如此广阔的前景当然吸引了无数专业或非专业人士的加入。HTML5用途范围广，下面小编就来给大家分享常见的HTML5框架。
HTML5基础入门之常见的HTML5框架有哪些?
1、Siimpler
Siimpler 是个简单的 HTML 开发框架，他可以通过选择你自己喜欢的部分，来帮助你迅速又简单地创建 HTML5 开发结构。网络设计者们也可以通过使用 Siimpler 框架类的文件和文件夹来无缝的开始一个 Web 项目。
2、Ionic
Ionic 是个神奇的框架和强大前端开源系统，使用先进的Web技术，比如CSS、HTML 和 JS 来创建令人惊叹的手机应用。
3、Foundation
Foundation 是世界上精妙的前端响应框架，同时，它可以兼容所有的浏览器和网络设备。Foundation 拥有移动友好型的用户接口，设置了许多关键特性。
4、Enyo
Enyo是一个开源的 Jaa 框架，该框架能够让你创建顶级的 HTML5 应用程序，该应用程序能够运行在各种各样的电子设备上，比如说手机、台式机、笔记本、电视以及Web应用。
5、LimeJS
针对于所有的新的桌面浏览器和触屏设备，LimeJS 对于有用户经验的游戏开发者而言是教好的和较强大的开发框架。
6、Bootstrap
Bootstrap能让所有开发者都能迅速上手、所有设备都可以适配、所有项目都适用。此外，bootstrap的官网也有很多教程提供。
7、juery UI
juery UI 主要分为交互、微件和效果库3个部分，主打代码开源，操作继承了juery 的简单特性，兼容各主流桌面浏览器。
前端HTML5是当下很多企业都会用到的软件开发，HTML5是移动互联网前端的主流开发语言，目前还没有任何一种前端开发技术能够取代HTML5。因此，无论是PC端还是APP端的应用，前端样式都离不开HTML5.
从手机与电脑上网的使用率来看，从事HTML5或者Web相关的开发工作，就业前景还是比较可观的。而且，现在的网站开发都往移动设备上转移，所以HTML5或者Web前端是众望所归。
关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
这7个框架，你都会用吗？
*请认真填写需求信息，我们会在24小时内与您取得联系。
