学html5需要什么基础？

年来，html5前端开发受到很多企业的青睐；html5火爆的市场现象使此类人才供不应求，市场需求导致学习html5开发的人越来越多。那么学习HTML5需要什么基础？下面本篇文章就来给大家介绍一下。

学习HTML5之前，我们必须要掌握一些基础，需要先学会HTML，CSS ,Javascript ，jQuery；有一定的英文基础。

其中HTML5主要是要HTML控件+Javascript的脚本程序；搞不好你看到的h5效果就是一个JavaScript的Canvas效果。

建议先去学好Html、CSS和JavaScript（通常是一起的），然后再学习HTML5的相关知识。这类书籍和视频还是很多的，而且大都大同小异。

以上就是学html5需要什么基础？的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

html5介绍

在编写html文档时,<!doctype>声明必须位于html5文档中的第一行:

<!doctype html>

字符编码(字符集)声明也被简化:

html5中的默认字符编码是UTF-8

对于中文网页需要使用<meta charset="UTF-8">声明编码,否则会出现乱码.

html5中的一些新特性:

●用于绘画的canvas元素

●用于媒介回放的video和audio元素

●对本地离线存储的更好的支持

●新的特殊的内容元素.比如article,footer, header,nav,section

●新的表单控件.比如calendar,date,time,email,url,search

二 html 内容模型

html5中引入了很多的标记元素,根据内容类型的不同,这些元素被分成7大类:

●内联(Embedded)

●流(Flow>)

●标题(Heading)

●交互(Interactive)

●元数据(Metadata)

●短语(Phrasing)

●区段(Sectioning)

html内容类型旨在使标记结构对浏览器和网站设计者更有意义

元数据(Metadata):通常出现在页面的head中,设置页面其他部分的表现和行为.

元素:<base>,<link>,<meta>,<noscript>,<script>,<style>,<title>

内联(Embedded):在文档中添加其他类型的内容.

元素:<audio>,<video>,<canvas>,<iframe>,<img>,<math>,<object>,<svg>

交互(Interactive):与用户交互的内容.

元素:<a>,<audio>,<video>,<button>,<details>,<embed>,<iframe>,<img>,<input>,<label>,<object>,<select>,<textarea>

标题(Heading):定义段落标题

元素:<h1>,<h2,<h3>,<h4>,<h5>,<h6>,<hgroup>

短语(Phrasing):文本和文本标记元素

元素:<img>,<span>,<strong>,<label>,<br/>,<small>,<sub>等

相同的元素可以属于多个内容模型

流(Flow)内容:包含在文档正常流中的大多数html5元素

区段(Sectioning)内容:定义标题,内容,导航和页脚的范围

元素:<article>,<aside>,<nav>,<section>

流(Flow)包含了几乎所有的其他内容.

三 html页面结构

通用的html5页面结构如下图所示:

在编写html5文档时,你可能不需要其中的某些元素,具体取决于你的页面结构

四 header, nav&footer

在html4中,我们将定义一个这样的头:

在html5中,我们使用简单的<header>标签

<header>标签定义了文档的头部区域

<header>元素适合在<body>标签内部使用

实例:

<!doctype html>

<html>

<body>

</header>

</body>

</html>

注意:<header>与<head>标签不同

在html5中,<footer>标签定义文档或者文档的一部分区域的页脚

文档的页脚:

<p>Posted by:A ping</p>

</footer>

在典型情况下,<footer>元素会包含文档创作者的姓名,文档的版权信息,使用条款的链接,联系信息等等

在html5中,<nav>标签定义导航链接的部分

并不是所有的html文档都要使用到<nav>元素.<nav>元素只是作为标注一个导航链接的区域

一个导航链接的实例:

<nav>

<a href="/jquery">JQuery</a>

</nav>

运行效果如下:

一个通用的html5页面结构:

<body>

<nav>

五 article,section&aside

在html5中,<article>标签定义独立的内容

<article>标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分

<article>的潜在来源:

●论坛帖子

●博客文章

●新闻故事

●评论

实例：

<p>文章元素的内容</p>

</article>

在html5中,<section>标签定义了文档的某个区域.比如章节,头部,底部或者文档的其他区域

实例:

文档的某个区域,解释了什么是W3C:

<p>World Wide Web Consortium(W3C)是万维网联盟...</p>

</section>

在html5中,<aside>标签定义<article>标签外的内容

aside的内容应该与附近的内容相关

实例:

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World,Florida</p>

</aside>

提示:<aside>的内容可用作文章的侧栏

欢的可以收藏转发加关注

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开发的行列。

学习前端的伙伴可以私信回复小编“前端”领取全套免费前端学习资料和学习视频