HTML5技术学习总结

背景:

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的构建过程,来帮助我们学习、开发高效页面。“课外知识”多了,自然就能做到“他强由他强,清风拂山岗”的境界了。

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

时间: 2024-08-01 21:54:40

HTML5技术学习总结的相关文章

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用.水务燃气 SCADA 监控应用及智能楼宇等应用场景. HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机  Camera 的概念,剩下需要掌

HTML5 例子学习 HT 图形组件

HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.hightopo.com/guide/

HTML5在线学习网站推荐

因为HTML5流行及其功能的强大,越来越多的人加入HTML5的学习.当然,目前大部分人学习都是通过网络,HTML5同样有许多教学网站,那么HTML5在线学习网站有哪些?现在请看我为大家推荐的HTML5在线学习网站. 学习HTML5的网站和博客 无论学习什么语言,最开始的当然是要从基础学起.如果你是一个对HTML5一无所知的初学者,那么以下的几个网站绝对不容错过.网站中包括HTML5的基础教程.文章和博客,而且其中包含的不仅仅只是代码,还包含很多带有简单步骤讲解的例子. 1. W3Schools(

读懂前端与HTML5技术区别,玩转互联网企业!

潭哥说 现在好多人都把HTML5和前端的概念弄混淆了.例如,H5是HTML5的简称,而现在好多人把HTML5看成了是前端开发的总称.今天潭哥就为各位普及一下,到底前端和HTML5有哪些区别? 什么是前端开发?  以一个网站为例包括网站设计.前端开发.程序开发等.网站设计就是网站的外观,平面的东西.程序开发也好理解就是功能实现.而前端开发,简单来说,就是把平面效果图转换成网页,把静态转换成动态.它的工作包括了:切图.写样式.做鼠标效果和图片切换效果等.而优秀的前端开发可以保障实现这些效果的同时,即

聊一聊HTML5技术的优点有哪些?

HTML5是万维网的核心语言,是对HTML的第五次重大修改,也是近几年流行起来的编程语言.自从谷歌宣布停止使用flash将HTML5作为网页内容标准后,Facebook.苹果.火狐等等浏览器纷纷转战HTML5,这让HTML5的前景更加广阔,HTML5也一跃成为当下最热门的编程语言之一.那么,HTML5到底有哪些优点能够迅速取代flash呢?下面,千锋武汉小编来给大家分析一下HTML5的那些优点! 1.网络标准HTML5本身是由W3C推荐出来的,它的开发是通过谷歌.苹果,诺基亚.中国移动等几百家公

一文读懂前端与HTML5技术的区别!

一文读懂前端与HTML5技术的区别! 现在好多人都把HTML5和前端的概念弄混淆了.例如,H5是HTML5的简称,而现在好多人把HTML5看成了是前端开发的总称.到底前端和HTML5有哪些区别? 什么是前端开发 以一个网站为例包括网站设计.前端开发.程序开发等.网站设计就是网站的外观,平面的东西.程序开发也好理解就是功能实现.而前端开发,简单来说,就是把平面效果图转换成网页,把静态转换成动态.它的工作包括了:切图.写样式.做鼠标效果和图片切换效果等.而优秀的前端开发可以保障实现这些效果的同时,即

HTML5开发学习教程,学习HTML5还是学习HTML5的制作工具?

一名优秀的HTML5前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司往往出高薪也很难招到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错,而技巧则见仁见智. 以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了.无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫WEB前端开发. HTML5前端开发在产品开发环节中的作用变得越来越重要,

IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同的岗位所涉及的技术也会有差别,所以先要确定自己的发展定位,收集要学习的内容,整理好学习的顺序.很多时候,成功除了勇气.坚持不懈外,更需要方向.也许有了一个好的方向,成功来得比想象的更快.如果在错误的路上奔跑,再怎么努力也是白搭.学习Web前端也是如此,首先应该选择一个正确的学习路线.HTML5学习线