技术新手,从何下手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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2675
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2627
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2232
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

7188
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3255
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5676
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2727
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

4978
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2932

扫码关注云+社区