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

相关文章

来自专栏每日一篇技术文章

weex-14-video组件使用

下面是一个网络视频地址 http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981...

3031
来自专栏IMWeb前端团队

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

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

25610
来自专栏Android小菜鸡

LayaAir引擎学习经历

  由于公司任务安排,需要笔者先去了解一下LayaAir引擎库,以用来完成公司将要启动的大数据可视化项目,需要借助LayaAir引擎实现复杂的动画。笔者花两天时...

8352
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

html5 不是一门新的语言,而是我们之前学习的 html 的第五次重大修改版本。

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

css3-not选择器妙用

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

782
来自专栏腾讯Bugly的专栏

通往全栈工程师的捷径 —— React

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

37310
来自专栏九彩拼盘的叨叨叨

我完成的百度前端技术学院任务列表

1702
来自专栏测试2017

test

Markdown 是用来生成 HTML 结构的。样式和结构分离,算是其设计思想之一。而这也是现在 HTML 的发展方向。作为印证,<center> 这样的纯为样...

2230
来自专栏向治洪

Vuejs和其他前端框架的对比

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

44910
来自专栏编程直播室

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

1722

扫码关注云+社区

领取腾讯云代金券