html5菜鸟,HTML5前端

HTML初学菜鸟求教

HTML5学习路线可以分为3个阶段：了解HTML5、熟练掌握HTML5、精通HTML5；

Tips：HTML5此处指的是HTML、CSS、JavaScript以及HTML5和CSS3（新增的）

首先，先了解一下HTML5

可以去HTML5学堂了解一下HTML5是什么，HTML5能够做什么以及HTML5行业的状态，在已了解的基础上去发现自己是否喜欢和适合HTML5这个职业。

大概时间：2~3天

其次学习HTML与CSS

在一些机构培训当中，全日制，每天学8个小时，也需要学习1~1.5个月，而且学不完整不扎实。

自学的情况下，折算相应时间即可，另外需要注意，自学时选择合适的书籍进行学习，会相对高效一些。

选择好的学习资源（主要看知识逻辑、表达方式等），才能够更好的去吸收知识，学习时间成本也会低一些。

资源推荐：

HTML+CSS方面的可以去看《HTML5布局之路》；

JavaScript方面的可以去看《Head First JavaScript》，它比较适合入门；

最后是JavaScript，原生JS、AJAX、jQuery，差不多也得需要2~3个月（每天8小时）

至于说精通~~~对HTML5技术领域有深刻的研究与认知，能够根据自身的开发经验与项目经验构建自己的前端框架或者工具。最起码3~5年甚至更长，其前提还是不断深入研究，而非“工具式”的使用。

哪里有HTML5在线学习资源？

HTML5在线学习资源很多啊，有技术博客或者技术分享网站、技术视频、小程序等等啊，不过还得根据自身的情况来选择吧。选择一个适合自己的学习资源，更有利于你对HTML5的学习，吸收起来也比较容易。

编程小白的话，不推荐你一开始就通过技术分享网站来学习HTML5，技术博客上的文章会比较零散，它更多的是对HTML5的一些技术点的总结吧，没有形成一个完整的学习知识体系，不利于初学者学习。但是，你在学习的过程中，对某些技术点有疑问或者不理解的话，就可以很好的利用技术分享网站，比如HTML5学堂等，利用它有针对性的进行学习。

好的技术视频对编程小白来说也是一个不错的在线学习资源，一定要不错的！！！不然看完视频你会感觉到自己好像什么都不会，那是因为大部分的技术视频都是在讲解技术知识，忽略了课程逻辑与教学方法的重要性。听过HTML5学堂的技术视频，他们是按照一个开发流程的逻辑进行讲解，讲一部分理论知识，再动手实践理论知识，最后会有一个知识总结，我觉得这种模式学起来会比较容易，也不会出现理论很强动手能力差的现象。

在学习的过程中，不知道自己的掌握情况，可以通过做面试题来检测自己的掌握情况，这个建议你去看“决胜前端”（minApp），里面有大量的面试题，而且还对每一个题目做了详细的分析与解答，还是挺适合初学者的。

想学习HTML5，有什么好的书籍推荐吗？

首先，永远不要用《从入门到精通》那种书学习，当字典差不多，用于自学，那就准备《从入门到放弃》吧~~~

然后嘛，HTML5本身由不同的语言组成，是HTML+CSS+JavaScript，三种语言各自有各自的特点，HTML与CSS，属于结构和样式，就是做网页布局，JS是逻辑层面，脚本语言。

结构样式方面，比较推荐当前比较新的书籍，比如《HTML5布局之路》，很详细的讲解了布局知识，还提供了相关的项目经验以及面试题。

JS方面，权威方面的书籍是《高级JavaScript程序设计》和《JS犀牛书》，但是这两本都比较适用于有一定基础的人。对于没基础的，可能国外的head first系列会更适合，国内的话，很适合入门的书籍目前没看到。

菜鸟教程-HTML

!DOCTYPE html声明为html5文档，有助于浏览器正确显示网页

html元素是html页面的根元素

head元素包含了文档的元数据，如定义网页编码格式

title元素描述了文档的标题

body元素包含了可见的页面内容

h1元素定义一个大标题

p元素定义一个段落

注：在浏览器的页面上使用键盘的F12按键开启调试模式，就可以看到组成标签

“HTML 标签”和“HTML 元素”通常是描述同样的意思，但是严格来说，一个HTML元素包含了开始标签和结束标签。只有body区域才会在浏览器中显示。

标题是通过h1-h6标签来定义的，字号逐渐减小。

HTML链接是通过标签a来定义的，在href中指定链接的地址。

图像是通过img来定义的，图像的名称和尺寸是以属性的形式来提供的。

HTML文档由HTML元素定义。

菜鸟请问HTML5能做一个办公室座位分布图，点击座位出来人员信息么？如何实现？能简单的做个示例么？

你可以用h5场景来做，那样制作起来难度不大，还不用配置空间和域名：ih5可以实现你说的功能；

html5新增标签都有哪些

html5新增标签大致如下：

canvas 新元素

canvas    标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API 

新多媒体元素

audio    定义音频内容  

video    定义视频（video 或者 movie）  

source    定义多媒体资源 video 和 audio  

embed    定义嵌入的内容，比如插件。  

track    为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。 

新表单元素

datalist    定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。  

keygen    规定用于表单的密钥对生成器字段。  

output    定义不同类型的输出，比如脚本的输出。 

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

article    定义页面独立的内容区域。  

aside    定义页面的侧边栏内容。  

bdi    允许您设置一段文本，使其脱离其父元素的文本方向设置。  

command    定义命令按钮，比如单选按钮、复选框或按钮  

details    用于描述文档或文档某个部分的细节  

dialog    定义对话框，比如提示框  

summary    标签包含 details 元素的标题  

figure    规定独立的流内容（图像、图表、照片、代码等等）。  

figcaption    定义 figure 元素的标题  

footer    定义 section 或 document 的页脚。  

header    定义了文档的头部区域  

mark    定义带有记号的文本。  

meter    定义度量衡。仅用于已知最大和最小值的度量。  

nav    定义导航链接的部分。  

progress    定义任何类型的任务的进度。  

ruby    定义 ruby 注释（中文注音或字符）。  

rt    定义字符（中文注音或字符）的解释或发音。  

rp    在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。  

section    定义文档中的节（section、区段）。  

time    定义日期或时间。  

wbr    规定在文本中的何处适合添加换行符。  

初学者建议多访问下菜鸟教程：网页链接，都是比较全面的基础知识，可以看做编程词典，即使老司机也经常去查一些资料。