自学前端也有小半年了，从最开始的一脸懵逼到现在的勉强入门。想来，也该好好总结一下了。
前端开发初识
1、[编辑器的选择/开发环境介绍]（#one）
2、[HTML文档和标签介绍]（#two）
3、[如何在HTML使用css、JavaScript]（#three）
4、[HTML5的新特性]（#four）
一、编辑器的的选择/开发环境介绍
前端的编辑器还是比较丰富的，这里列举几个比较主流的编辑器大家可以根据自己的喜好选择。
vscode 微软出品的编辑器，支持windows、Linux、macos，具有丰富的插件功能，有官方中文版本，并且是免费的;
WebStorm/IDEA,内置支持zen coding 、nodejs、拿来即用的，遇到gulp、git、markdown文件会智能提示对应的插件等，前端开发的神器，因为需要建立索引，启动时间比较长，占用内存大;
Atom，github；WEB端编辑器;
sublime text 启动快，短小精悍型的，可安装插件，收费。
开发环境介绍，相比其他语言，前端开发的优势之一就是不用配置复杂的开发环境，只需要选择上方任何一款工具，配合浏览器就可以开始学习了。
二、HTML文档介绍
什么是HTML？
- HTML简称超文本标记语言，是以.html格式结尾的一种文档格式。HTML文件由多个标签组成。
HTML文档的组成
常见的HTML文件由类型声明和HTML标签构成。
类型声明（!DOCTYPE）的作用是告诉浏览器，以什么格式渲染下面的文件；
html标签是HTML文件的基础；(HTML标签内一般还会有head和body标签)
以下是最基本的HTML文档：
常用标签
div、ul、li、p、span、a、img、table、h1、h2、h3、
HTML标签全局属性
如何理解html、css、JavaScrip三者之间的关系
如果把一个网站看成一个人的话，HTML就像是这个人的骨肉，css可以看成的是这个人外表，包括衣服，化妆品等，JavaScript可以看成是这个人的技能，会吃饭，会化妆，会减肥（操作dom）。这三者即相互独立，又和谐共处。在实际开发当中，三者最好是能够拆分成独立的文件，这样便于维护（结构、行为、样式分离）。
三、如何在HTML中使用css、JavaScript
- 1、行内使用Javascript
- 2、嵌入式；
- 3、外联式；
在实际开发当中，应尽量使用外联式，并且将js文件位置放置在body标签的下方（涉及到浏览器的渲染机制，这样有助于提高性能，避免造成阻塞）。使用外联式还有这些好处：可维护、可缓存、适用于未来。
HTML5的新特性
- 1、新标签
header、footer、nav、section、audio、video
- 2、新API
canvas api
canvas元素可以为页面提供一块画布来展示图形，结合canvas api可以实现各种复杂的动画效果。
geolocation api
html5 的Geolocation api（地理定位），可以请求用户共享他们的位置，请求的数据源有：IP地址、三维坐标、GPS、GSM或CDMA的手机id、用户自定义数据。
postMessage api
html5中引入了一种新的功能，跨文档消息通信，可以确保iframe、标签页、窗口间安全地进行跨源通信。postMessage API为发送消息的标准方式，发送消息非常简单：
window.postMessage('Hello, world', '[http://www.example.com/](http://www.example.com/)');
WebSockets api
WebSockets是html5中最强大的通信功能，它定义了一个全双工通信信道，仅通过Web上的一个Socket即可进行通信。
WebSockets 握手
为了建立WebSockets通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传递WebSocket消息。
WebSockets 接口
除了对WebSockets协议定义外，该规范还同时定义了用于JavaScript应用程序的WebSocket接口。WebSockets接口的使用很简单。要连接远程主机，只需要新建一个WebSocket实例，提供希望连接的对端URL。
拖放api
draggable属性
如果网页元素的draggable属性为true，这个元素是可以推动的
draggable
拖放事件
拖动过程会触发很多事件，主要有下面这些：
dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。
draggableElement.addEventListener('dragstart', function(e) {
console.log('拖动开始！');
});
dataTransfer对象
拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。
draggableElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Hello World!');
});
dataTransfer对象的属性有：
dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。
dataTransfer对象的方法有：
setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
本地存储
Web Storage是html5引入的一个非常重要的功能，可以在客户端本地存储数据，类似html4的cookie，但可实现功能要比cookie强大的多。
sessionStorage
sessionStorage将数据保存在session中，浏览器关闭数据就消失。
localStorage
localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。
不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
sessionStorage、localStorage、cookie三者的区别
共同点：sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，localStorage不会自动把数据发给服务器，仅在本地保存
2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。localStorage不会自动把数据发给服务器
3.cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
4.localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序员自己封装
HTML5中提供了localStorage对象可以将数据长期保存在客户端，除非人为清除，localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时，更新value
2.获取localStorage.getItem(key)如果key不存在返回null
3.删除localStorage.removeItem(key)一旦删除，key对应的数据将会全部删除
4.全部清除localStorage.clear()使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
注意：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。