码迷,mamicode.com
首页 > Web开发 > 详细

HTML5技术学习总结

时间:2015-05-21 10:52:53      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:html5   web前端   基础   总结   

背景:

          HTML5(下面简称H5)技术早在N多年前就“如火如荼”了,当然现在的热度依旧不减。尤其是移动市场大火的今天,很多网站都采用了H5的技术。其实很多时候我们实际开发中多或少的都会用到H5技术。尤其是像我这种“半道出家”的非“职业前端”开发人员,很多页面效果都是度娘和google的,网上dang下来也简单测试下兼容性也就用了。我想这也是H5工作小组想要达到的目的,“文化渗透”、“逐步蚕食”,避免大规模“反弹”!

这两天抽空读了下《HTML5 + CSS3从入门到精通》(技术书记,现在基本上都是从入门到精通,真的毫无创意!囧!!),精通不精通不知道,但是总算系统的梳理了下知识链。

 

说下自己的感受:

        学习H5我们不需要过度的关注细节,五柳先生的“不求甚解”的态度就很好,遇到能想起来,用到明白来源,不用作为扩展知识。

        其次,H5的设计起点就是从实用出发的,也就是说很多特性都是怎么方便就怎么来。所以我们可以关注我们感兴趣的技术,但是开发的时候还是不要特意的使用H5,能用到而且兼容性也不错就用,用不到也不要“画蛇添足”,比如163邮箱就有用到nav标签等,但是如果自己不是很精通H5或者是没必要重构就不要去把一些东西改为H5的,比如编写JS的特意的用WebWorker。除非我们很明确的就是针对移动端这种基本上全面支持H5的Browser设计开发功能。

       最后,H5技术不复杂,它从来都不是什么新技术,只是HTML的延续,我认为的H5包括如下三点:

     (1)改进及增强的HTML属性,新页面可以尝试使用。

     (2)增强了的JS交互接口:WebWorker、WebStorage、Web DB、Offline Application、geolocation、canvas,可以说H5和JS相互增强更上一层,但是还是要小心使用。

     (3)CSS3:改进增强CSS功能,让页面效果更绚,开发更简单,尤其是“移动先行”的现代互联网网页设计理念能让“响应式设计”越来越简单、流行,甚至出现了很多框架,比如bootstrap。

 

学习方法:

      学习HTML这类的标记语言,我们需要从四个方面入手:

    (1)语法:即怎样的书写格式是Browser接受和支持的,HTML技术的语法很简单,只要注意大小写在HTML、XHTML、H5中的一些细节不同就可以了。

    (2)元素:也就是标签,这个就靠经验和记忆了,不求甚解多用就好。但是有一点,系统的学习和杂乱的记忆不同点就是:系统的学习会把元素分类。这样方便记忆、对比和使用,能让我们尽量减少不必要的错误嵌套。一般会把HTM标签分为文档结构标签、文本格式标签、字符格式标签、列表标签、链接标签、表格标签和表单标签这8类,有些标签不实用就不用看。

    (3)属性:知道每类标签都有什么属性,一般来说学习方法是知道有什么属性,然后了解下哪些标签不支持。其实,除了name、id、class、style外很多元素属性我们都很少用,涉及到格式的属性,我们都用CSS来代替了。这也是H5推荐的做法,那些属性在H5中都被废弃了,比如background属性。

    (4)其他:其他的东西就是去了解一些额外的知识:历史背景、关联技术、深入技术,比如XML、DTD,甚至是Browser对页面的解析、渲染过程,DOM树的构建、Render Tree的构建过程,来帮助我们学习、开发高效页面。“课外知识”多了,自然就能做到“他强由他强,清风拂山岗”的境界了。

      

     学习计算机技术,千万不能沉迷外家功夫!

 

HTML5技术学习总结

标签:html5   web前端   基础   总结   

原文地址:http://blog.csdn.net/hackersaillen/article/details/45887255

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!