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

相关文章

来自专栏我叫刘半仙

原 高效访问海量地图数据--GeoServer手动发布本地Shapefile地图

首先,本文实现的结果图给大家展现一下: ? 放大的样子: ? 颜色是通过属性中某个字段值来分级的,可以自定义。 上面功能是用ArcGIS切片好数据,在Geose...

3496
来自专栏liukaili_666888999

iOS11新特性

933
来自专栏编程

百度指数之图像数字识别(2)

作者介绍: 叶成,数据分析师,就职于易居中国,热爱数据分析和挖掘工作,擅长使用Python倒腾数据。 在开始本位之前,这里先感谢一下本人公司的伟哥和孟哥(虽然孟...

2936
来自专栏JackieZheng

自己动手写可视化软件(代码已开源)

  一年多前,那时候我还在实习,正好上一个项目接近的尾声,紧随而来的就是一个大数据一体化的项目,包括了数据的采集、处理、计算、整合以及数据展示等。   而可视化...

2059
来自专栏何俊林

直播技术总结(三)ijkplayer的一些问题优化记录

前言:ijkplayer中一些问题记录优化,看下Agenda: 在弱网时如何优化 ijkplayer播放卡顿如何优化 如何支持https链接播放? 如何降低ij...

69010
来自专栏IT派

七天速成小程序——喜马拉雅

很多新手都喜欢一个人完成项目,从项目的规划、搭建,到实施、debug、验收,一整套流程都是自己纯手完成,当然,对于提高自己的整体开发能力和自适应能力很有帮助。o...

692
来自专栏程序员的知识天地

tag标签是什么?对seo有什么用?

作为SEOer的我们在优化网站的时候回遇到几种标签,而tag标签就是其中一种,tag标签和一般的HTML标签不太一样,tag标签是一种特殊的标签,那么tag标签...

531
来自专栏Material Design组件

Material Design —Progress & activity

1913
来自专栏美团技术团队

Android OOM案例分析

在Android(Java)开发中,基本都会遇到java.lang.OutOfMemoryError(本文简称OOM),这种错误解决起来相对于一般的Except...

4444
来自专栏魏艾斯博客www.vpsss.net

Optimizilla 在线图片压缩优化 自由调整图片压缩比例

1375

扫码关注云+社区