技术新手,从何下手HTML5?

HTML与CSS的学习顺序

你曾经有没有这样的感受呢?虽然HTML5学堂中关于HTML与CSS的文章不少的,但是却不知从何下手?

这样的日子,将从今天一去不复返了~!今天,是我们HTML5学堂“进化”改版之后的第一篇HTML与CSS的文章,和我们一起,从这篇文章出发,一步步逐渐拿下“HTML与CSS”吧~!

首先,希望所有要学习HTML与CSS的小伙伴们有这样一个意识:实现一个网页的布局很简单,但是想要将写出“扩展性良好、语义性强、规范”的前端页面却没有那么简单。HTML结构的选择以及CSS样式的处理,除了要考虑基本的视觉效果与兼容之外,还需要考虑后台数据的影响,对SEO的影响,对服务器请求速度、网页加载速度的影响等等。

HTML与CSS知识的基本组成

1 浏览器的基本知识与兼容

2 布局的前期工作与实现思路

3 标签的基本知识(HTML)

4 CSS(样式)

5 工具类文件的使用

具体说说这些知识吧

1 浏览器的基本知识与兼容

1.1 发展史

1.2 内核与内核前缀

1.3 hack

1.4 兼容问题(兼容是未来前端/HTML5开发工程师的不归路)

1.5 调试方法

2 布局的前期工作与实现思路

2.1 网站制作开发流程

2.2 网页的基本组成

2.3 布局的概念与种类

3 标签的基本知识(HTML)

3.1 种类

3.2 SEO与选用

3.3 书写规范

4 样式

4.1 CSS引入方式

4.2 CSS选择器

4.3 CSS显示属性

4.4 CSS自身属性(盒模型)

4.5 CSS文本属性

4.6 代码规范

5 工具及其他相关技术

5.1 背景图合并 / CSS Sprite

5.2 PhotoShop抠图

5.3 CSS压缩(less、sass等)

特别提醒

利利在此特别提醒,千万不要按照上面的项目自上而下学习,除非你打算像利利一样,花一年多时间自学别人两个月能够学完的东西。上面罗列的项目是给大家比较直观的一个概念,而网站的开发与实现并非依照上面的这种流程和步骤。因此HTML5学堂-利利&堡堡,在此推荐大家的学习顺序是:

——> 掌握基本工具与调试方法

——> 标签学习

——> 网页一级布局

——> 具体模块布局

——> 模块内部实

——> 代码兼容。

(PS:还有一个是关于“代码优化”,这个部分建议贯穿网页布局与模块实现)

关于结构与样式,从技术层面上来说,这两者是相互独立的,但是从网页功能的实现层面上来说,却是彼此依赖并构成一个整体,因此在学习时,极其不建议分开学习,建议穿插学习,那么怎么样的穿插顺序呢?跟着我们的微信号一步一步来,肯定没有问题的~

利利强烈建议各位在学习HTML5之前,对HTML5这个技术以及整个行业有一定的了解,而不要过于盲目,因此对于不是太了解HTML5行业的朋友们,可以点击“精选文章”导航里的“初学之路”模块进行查看。

HTML5的基本编辑器与调试方法

另外,今天提一下HTML5的基本编辑器与调试方法

个人推荐使用Sublime Text的编辑器(关于该编辑器的用法、快捷键、插件安装等,可以查看我们官网[PC端]中的相关文章,在这里就不讲解了)。

另外还有一些人会对“H5 Builder”情有独钟,相比Sublime,这个软件的内存消耗量比较大,但是功能还是没有什么问题的。Dreamweaver个人不推荐,当然如果你执意要用记事本神马的,我也不拦着,因为它的确能写代码。

关于调试,其实是很重要的一个环节,毕竟我们在学习时(无论培训还是自学),都会涉及到代码错误,掌握调试的基本方法,并解决代码问题,是开发攻城狮们必备的技能,关于调试方法,后面我们会随着讲解的进行具体提到。

下周我们将继续于周一为大家分享HTML+CSS的基础知识,下期的主要内容为:网站制作流程。

对于HTML5学堂“进化”后的每次分享之后的内容,都在“新版往期”的菜单栏当中

对于想了解其他HTML与CSS技术的工程师,可以点击导航,查看我们此前书写的HTML与CSS技术文章


原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-04-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

polymer组件化与vm特性

一、Polymer Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponen...

2328
来自专栏IMWeb前端团队

Iconfont在教育平台的实践

本文作者:IMWeb bleanycao 原文出处:IMWeb社区 未经同意,禁止转载 Iconfont 体系化解决方案 背景 性能优化是前端开发不得...

2097
来自专栏IMWeb前端团队

react css组织的另一种选择styled-components

本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

23410
来自专栏黑泽君的专栏

HTML是什么?HTML版本发展

 参考链接:http://www.w3cwhy.com/css-html/w3c-html.html

1444
来自专栏编程

灵活的 overflow

来源: 大漠 https://www.w3cplus.com/css/flexible-overflow.html 说到对于CSSer而言并不会陌生,用来控制内...

19510
来自专栏向治洪

vue.js与其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

2398
来自专栏达摩兵的技术空间

css3-not选择器妙用

css3中增加了not选择器,可以用于排除不符合某些规则的元素,下面我从语法,兼容性,可能的实践三个角度更好的学习使用它。

642
来自专栏守候书阁

移动web开发问题和优化小结

到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这...

1202
来自专栏更流畅、简洁的软件开发方式

学习HTML5之表单

HTML5 的标准已经定了,应该火了,或者已经火了。那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿。所以...

3515
来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

1512

扫码关注云+社区