HTML5快速入门（一）—— HTML简介

本文链接：https://blog.youkuaiyun.com/yeshaojian/article/details/51615541

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等

Web大概发展史

Web1.0
- 主流技术 —— HTML + CSS
Web2.0
- 主流技术 —— Ajax(JavaScript/DOM/异步数据请求)
Web3.0
- 主流技术 —— HTML5 + CSS3
  - HTML5亮点：Canvas、Web存储、Geolocation、Workers多线程处理、HTML5音视频
  - CSS3亮点：2D变形、设计动画等等新特性（具体可以参考 http://html5test.com/）

网页组成

网页一般由下面3部分组成
- HTML —— 网页具体内容和结构
- CSS —— 网页的样式（网页美化的主要模块）
- JavaScript —— 网页的交互效果，比如对用户鼠标事件做出响应

HTML5简介

用了8年时间，HTML5在2014年才正式制定完毕并发布，更偏向于拓展移动市场，当然在别的平台也表现不凡
HTML5的优势
- 最主要的还是跨平台，利用HTML5编写的应用可以说只要有浏览器的平台都可以运行并使用
- 开发速度快，API强大，某些功能可以轻易完成
- 流畅程度相对于原生可以达到一致
HTML5的劣势
- HTML5也有不能完成的功能，比如常用的拍照、访问相册等需要桥接才能实现的功能（桥接越多，性能越差）
- 毕竟不是原生，所以肯定存在性能比原生差的问题
HTML5开发主要有2种形式
- 自己编写大量代码（慢）
- 使用线程的HTML5框架（快）
  - sencha-touch
  - phoneGap
  - jQuery mobile
  - Bootstrap （个人比较喜欢）
一般在移动端主要有4种形式开发
- 原生：与系统无缝兼容
- 纯HTML5：成本低，覆盖广，效率高
- 原生+ HTML5：最佳方案

HTML5开发前准备

开发工具
- iOS
  - XCode
- Android
  - eclipse、MyEclipse、android studio
- HTML5
  - eclipse、MyEclipse（后端的伙伴最爱）
  - Dreamwaver（网页三剑客之一，平面设计师和前段最爱）
  - WebStrom（个人最喜欢，默认集成各式各样插件，而且配色各种666，特别丰富）

HTML简介

HTML（Hypertext Markup Language）超文本标记语言，本质其实就是文本，由浏览器负责将它解析成具体的网页内容。
HTML语法松散，目前最新版本5.0，也称HTML5
HTML和XML相似，也是由各种标签（元素、标记、节点）组成
HTML5新增了27个标签元素，废弃16个标签元素（涵盖了结构性标签、行内语义性标签、交互性标签、级块性标签）

HTML常见标签


<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

效果：

标题标签.png

：段落标签


<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>

效果：

段落标签.png

：表单标签


<input>
<input type="color">
<input type="file">
<input type="radio"><