前言：

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变形、设计动画等等新特性 （具体可以参考 ）

网页组成

网页一般由下面3部分组成

HTML5简介

用了8年时间，HTML5在2014年才正式制定完毕并发布，更偏向于拓展移动市场，当然在别的平台也表现不凡

HTML5的优势

HTML5的劣势

HTML5也有不能完成的功能，比如常用的拍照、访问相册等需要桥接才能实现的功能（桥接越多，性能越差）

毕竟不是原生，所以肯定存在性能比原生差的问题

HTML5开发主要有2种形式

自己编写大量代码（慢）

使用线程的HTML5框架（快）

一般在移动端主要有4种形式开发

HTML5开发前准备

开发工具

iOS

XCode

Android

eclipse、MyEclipse、android studio

HTML5

HTML简介 HTML常见标签

：标题标签

标题3标题5</h5> <h6>标题6</h6>

效果：

：段落标签

段落3段落5</p>

效果：

：表单标签

效果：

图像标签

图像标签需要我们给其src属性传入路径

相对路径：资源在当前项目内 ./ .// 形式

绝对路径：资源不在当前项目内 形式

图像标签简单使用

效果：

效果：

图像标签的可选属性

如果只给图片设置高或者宽,那么图片会根据高或者宽自动调整等比例尺寸

如果使用百分比设置宽高,指的是相对于父标签的百分比,这边图片的父标签是body

效果：

超链接标签

href属性：告诉浏览器我们要跳转的地址

如果不想跳转可以设置为'#'表示当前窗口

target属性：告诉浏览器以什么样的形式跳转

超链接标签

超链接简单使用

```html

<!-- 如果不想跳转可以填'#'表示当前窗口 --> <a href="">超链接</a> ``` 效果：  ```html <!-- 如果想在新窗口打开,可以使用target属性 (_blank:在新窗口中打开 _parent:在父窗口打开 _self:在当前页面打 开 _top:回到当前窗口顶部) --> <a href="" target="_blank">在新窗口中打开</a> <a href="" target="_parent">在父窗口打开</a> <a href="" target="_self">在当前页面打开</a> <a href="" target="_top">回到当前窗口顶部</a>

```
效果：

超链接嵌套使用

效果：

容器标签：用来容纳其它标签，相当于移动开发中最纯洁的UIView，里面写什么，就会显示什么，不会有渲染等效果 —— 所写即所得，正因为这个特性，开发中经常用它来自定义

：属于块元素：是以另起一行开始渲染的元素

html <div>div容器div容器div容器div容器</div> <div>div容器div容器div容器</div> <div>div容器div容器div容器div容器</div>
效果：

- <span>：属于行内元素：不需另起一行 <br><br> ```html <span>span容器span容器span容器span容器</span> <span>span容器span容器span容器</span> <span>span容器span容器span容器span容器</span> <span>span容器span容器span容器</span> ``` 效果：