教你如何轻松自学HTML5
2016-03-15 本文已影响1247人
Alexander
前言
本文将以笔记的形式编写,讲述了本猿,啊呸!!讲述了本人是如何自学HTML5,如果其中有任何错误,希望大家不吝赐教,一起学习IT知识,一起成长.
学习前的准备 : 在学习任何一门语言之前,我们要做的就是不要暴躁,不要心急,学习任何一门编程语言入门都是很难也非常的枯燥的,所以我们需要沉下心,慢慢去体会编程的乐趣,调整好心态之后,我们需要正真的的开始我们学习之路了.
学习思路 : 在学习之前我看了半天"京东商城"的首页,主要的目的是知道它每一块的内容是什么,它对应的功能是什么以及每一块它的效果有什么变化.这样做的目的是可以针对学习,这样做的目的可以让自己在学习的过程中让自己的思路很清晰,知道自己今天做的是什么.以下是我学习HTML5的几个步骤:
- 1, 学习前端所有的知识的网站 W3C: http://www.w3school.com.cn/index.html
- 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属性中书写
<body style="color: red;">
- 页内样式：在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
- 外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet"href="index.css">
6 接下来我们开始我们的第一份代码编写HelloWorld
8. webStrom中讲解
<!--<!--引出HTML松散的语法-->
<!--hello World!-->
<!---->
<!--ewdewqdew-->
<!--de-->
<!--deqwdewqwedeqw-->
<!--根标签: html是所有网页的根标签，格式：缩进式-->
<html>
<!--网页的配置信息(注意前后顺序)-->
<head>
<!--需要将文字输出格式设置为UTF-8,否则会出现乱码-->
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<!--网页的具体内容-->
<body>
Hello World!
</body>
</html>-->
- 总结 : HTML5编写比iOS简单,总之一句话,需要多敲,不敲,神仙也帮不了你拿到高薪!!!
