1、什么是前端
前端对于网站来说，通常是指网页，网站的前端部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
前端设计一般可以理解为网站的视觉设计，比如 UI 设计；前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript等。
前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。
HTML 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构； CSS 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等； JavaScript 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。
2、网页组成
一个网页的组成部分主要包括下面几个部分：文字、图片、输入框、视频、音频、超链接 等。
3、Web 标准
说到 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
W3C 最重要的工作是发展 Web 规范，这些规范描述了 Web 的通信协议。简单的说就是就是确定 Web 页面的语法格式和规范的。
与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。
那么 Web 标准规范了下面三个部分：
•HTML 标准（结构标准 ），相当人的骨架结构。•CSS 样式（表现）标准 ， 相当于给人化妆变得更漂亮。•JavaScript 行为标准 ， 相当于人在唱歌，页面更灵动。
4、浏览器内核
浏览器内核是一个浏览器的核心部分，也就是「渲染引擎」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
这里涉及到一个「兼容性问题」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
常见浏览器以及对应的内核：
| 内核 | 代表浏览器 | 描述 |
Trident | IE | IE内核，是微软开发的一种排版引擎 |
Gecko | Firefox | Gecko是当年最流行的排版引擎之一，仅次于Trident |
Webkit | Safari | 苹果浏览器内核，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高 |
Chromium | Chrome（前期） | fork自苹果的Webkit内核，谷歌前期使用，后期谷歌联手Opera自研和发布了Blink引擎 |
Blink | Chrome/Opera | Blink内核诞生于2013年4月。Blink其实是基于WebKit的 |
Presto | Opera前内核,已废弃 | 2013年被Blink取代 |
5、认识 HTML
通常我们看到的网页，都是以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
HTML 指的是超文本标记语言，它是用来描述网页的一种语言。
所谓超文本，有 2 层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。
6、HTML 结构标准
HTML 基本结构如下：
<!doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>•<!DOCTYPE html> 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。•<html></html> 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。•<head></head> 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。•<body></body> 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。
7、html 标签分类
HTML标签从数量上分为单标签和双标签。
单标签： <! Doctype html> 双标签： <html> </html> ，<head></head>， <title></title>
8、html 标签关系分类
包含（嵌套关系）：<head><title></title></head> 父子关系 并列关系： <head></head> <body></body> 兄弟姐妹
9、开发工具
前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。
那么我推荐大家使用的是「Visual Studio Code[1]」 ，VScode 是一款轻量级的编辑器，安装包小，启动速度快，而且功能非常强大，以及成为前端不可缺少的编码利器。
提到 Web 开发工具不得不提到 JebBrain 全家桶的「 Webstorm[2] 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称道的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。
建议初学者初期使用VSCode等文本编辑器，太过于智能的编辑器确实会带给我们极大地便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。
References
[1] Visual Studio Code: https://code.visualstudio.com/[2] Webstorm: http://www.jetbrains.com/webstorm/
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
