自学html5css要多久,教你如何轻松自学HTML5

前言

本文将以笔记的形式编写,讲述了本猿,啊呸!!讲述了本人是如何自学HTML5,如果其中有任何错误,希望大家不吝赐教,一起学习IT知识,一起成长.

学习前的准备 : 在学习任何一门语言之前,我们要做的就是不要暴躁,不要心急,学习任何一门编程语言入门都是很难也非常的枯燥的,所以我们需要沉下心,慢慢去体会编程的乐趣,调整好心态之后,我们需要正真的的开始我们学习之路了.

学习思路 : 在学习之前我看了半天"京东商城"的首页,主要的目的是知道它每一块的内容是什么,它对应的功能是什么以及每一块它的效果有什么变化.这样做的目的是可以针对学习,这样做的目的可以让自己在学习的过程中让自己的思路很清晰,知道自己今天做的是什么.以下是我学习HTML5的几个步骤:

2, 把每天学习的知识写成笔记,便于日后复习

3, 学会灵活运用所学到的知识

4, 再简单的知识也要自己敲出来,只看是不会学会任何语言的,要做一个行动派.

5,在上面提供的网站中模块分的很细,也可以根据它的分类开始学习,前提是需要掌握基础知识.

一, 开始学习啦!

1, HTML5的简单介绍 :

1.1, 什么是HTML5?

所谓的HTML5就是网页5.0版本的超文本标记语言,是HyperText Markup Labguage的简称,2014年才完成HTML5的标准制定,历时8年. 简单理解其实它就是一个文本而已,只是它是由浏览器负责将它解析成具体的网页内容而已.

1.2, 为什么要用HTML5,使用它的好处是什么?

HTML5是跨平台的,用HTML5编写的UI界面能够运行在所有拥有浏览器的平台,也就是说,HTML5的运行平台(环境)是浏览器.但是,使用HTML5也有很多缺点:比如,不能使用照相机,不能访问相册等功能.

1.3, 编写HTML5的框架:

sencha-touch

phoneGap

jQuery mobile

bootstrap

目前有三种方式可以开发APP :

1, 原生代码(纯OC)开发APP.

2, 纯HTML.

3, 原生 + HTML.

2 , Web的发展

Web1.0

主流技术:HTML+CSS

Web2.0

主流技术:Ajax(JavaScript/DOM/异步数据请求)

Web3.0

主流技术:HTML5+CSS3

HTML5亮点: Canvas HTML5音视频 Web存储 Geolocation Workers多线程处理

CSS3亮点: 设计动画 2D变形 N多新特性

3, 网页的组成

网页一般都是由3部分组成的

3.1, HTML :

HTML的主要功能是搭建内容和整体的结构: 它的格式和xml格式类似,由N个标签(节点, 元素, 标记)组成

3.2, CSS :

CSS主要的功能是美化UI界面:即网页的样式

3.3, JS(JavaScript) :

所谓的JavaScript就是脚本语言,主要功能是处理用户和网页的交互效果:比如,处理用户点击鼠标的点击事件

4, 常见的HTML标签

标题：h1、h2、h3、h4、h5....

段落：p

换行：br

容器：div、span(用来容纳其他标签)

表格：table、tr、td

列表：ul、ol、li

图片：img

表单：input

链接：a

HTML5的新特性 :(具体见W3C官网)

HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签

5 什么事CSS

1, 什么是CSS?

所谓的CSS就是网页的层叠样式,Cascading Style Sheets的简称,它的主要功能是决定网页的最终样式,其美化网页的作用.

2, CSS的样式

2, CSS的编辑模式都是以键值对的形式存在的.比如 :

color: red;

background-color: blue;

font-size: 20px;

冒号的左边是属性名,冒号的右边是属性值.

2, CSS的书写形式有3种 :

- 行内样式：(内联样式)直接在标签的style属性中书写

- 页内样式：在本网页的style标签中书写

body {

color: red;

}

- 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

6 接下来我们开始我们的第一份代码编写HelloWorld

8. webStrom中讲解

第一个网页

Hello World!

-->

总结 : HTML5编写比iOS简单,总之一句话,需要多敲,不敲,神仙也帮不了你拿到高薪!!!