HTML与CSS的学习顺序
你曾经有没有这样的感受呢?虽然HTML5学堂中关于HTML与CSS的文章不少的,但是却不知从何下手?
这样的日子,将从今天一去不复返了~!今天,是我们HTML5学堂“进化”改版之后的第一篇HTML与CSS的文章,和我们一起,从这篇文章出发,一步步逐渐拿下“HTML与CSS”吧~!
首先,希望所有要学习HTML与CSS的小伙伴们有这样一个意识:实现一个网页的布局很简单,但是想要将写出“扩展性良好、语义性强、规范”的前端页面却没有那么简单。HTML结构的选择以及CSS样式的处理,除了要考虑基本的视觉效果与兼容之外,还需要考虑后台数据的影响,对SEO的影响,对服务器请求速度、网页加载速度的影响等等。
1 浏览器的基本知识与兼容
2 布局的前期工作与实现思路
3 标签的基本知识(HTML)
4 CSS(样式)
5 工具类文件的使用
1.1 发展史
1.2 内核与内核前缀
1.3 hack
1.4 兼容问题(兼容是未来前端/HTML5开发工程师的不归路)
1.5 调试方法
2.1 网站制作开发流程
2.2 网页的基本组成
2.3 布局的概念与种类
3.1 种类
3.2 SEO与选用
3.3 书写规范
4.1 CSS引入方式
4.2 CSS选择器
4.3 CSS显示属性
4.4 CSS自身属性(盒模型)
4.5 CSS文本属性
4.6 代码规范
5.1 背景图合并 / CSS Sprite
5.2 PhotoShop抠图
5.3 CSS压缩(less、sass等)
利利在此特别提醒,千万不要按照上面的项目自上而下学习,除非你打算像利利一样,花一年多时间自学别人两个月能够学完的东西。上面罗列的项目是给大家比较直观的一个概念,而网站的开发与实现并非依照上面的这种流程和步骤。因此HTML5学堂-利利&堡堡,在此推荐大家的学习顺序是:
关于结构与样式,从技术层面上来说,这两者是相互独立的,但是从网页功能的实现层面上来说,却是彼此依赖并构成一个整体,因此在学习时,极其不建议分开学习,建议穿插学习,那么怎么样的穿插顺序呢?跟着我们的微信号一步一步来,肯定没有问题的~
利利强烈建议各位在学习HTML5之前,对HTML5这个技术以及整个行业有一定的了解,而不要过于盲目,因此对于不是太了解HTML5行业的朋友们,可以点击“精选文章”导航里的“初学之路”模块进行查看。
HTML5的基本编辑器与调试方法
另外,今天提一下HTML5的基本编辑器与调试方法
个人推荐使用Sublime Text的编辑器(关于该编辑器的用法、快捷键、插件安装等,可以查看我们官网[PC端]中的相关文章,在这里就不讲解了)。
另外还有一些人会对“H5 Builder”情有独钟,相比Sublime,这个软件的内存消耗量比较大,但是功能还是没有什么问题的。Dreamweaver个人不推荐,当然如果你执意要用记事本神马的,我也不拦着,因为它的确能写代码。
关于调试,其实是很重要的一个环节,毕竟我们在学习时(无论培训还是自学),都会涉及到代码错误,掌握调试的基本方法,并解决代码问题,是开发攻城狮们必备的技能,关于调试方法,后面我们会随着讲解的进行具体提到。
下周我们将继续于周一为大家分享HTML+CSS的基础知识,下期的主要内容为:网站制作流程。
对于HTML5学堂“进化”后的每次分享之后的内容,都在“新版往期”的菜单栏当中
对于想了解其他HTML与CSS技术的工程师,可以点击导航,查看我们此前书写的HTML与CSS技术文章