前端简介

一 web1.0时代的网页制做

网页制做是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，咱们当时称为“牛皮癣”网页。

例如一篇QQ日志、一篇博文等展现性文章。在web1.0时代，用户能作的惟一事情就是浏览这个网站的文字图片内容，这时用户也不能像如今在大多数网站均可以评论交流（缺少交互性）。

相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧，2010这个组合就是web1.0时代额产物，我在2010年之前仍是在使用三剑客作网页设计的。

二 web2.0时代的前端开发

“前端开发”是从“网页制做”演变而来的。

从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能知足用户的需求，用户须要更好的体验。

在web 2.0时代，网页有静态网页和动态网页。

所谓动态网页，就是用户不只仅能够浏览网页，还能够与服务器进行交互。举个例子，你登录新浪微博，要输入帐号密码，这个时候就须要服务器对你的帐号和密码进行验证经过才行。

web2.0时代的网页不只包含炫丽的动画、音频和视频，还可让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，若是是用“网页三剑客Dreamweaver+Fireworks+Flash”制做的，那是远远不能知足需求。

如今网站开发不管是开发难度，仍是开发方式上，都更接近传统的网站后台开发，因此如今再也不叫“网页制做”，而是叫“web前端开发”。

因此，处于web2.0时代的你，若是要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，由于这个组合已是上个互联网时代的产物。并且这个组合开发出来的网站问题也很是多，例如代码冗余、网站维护困难（学习到后期，你会知道为何不用这个组合了。

三 Web前端能作什么？

公司官网（在PC经过浏览器来访问公司网站）移动端网页（在手机上来浏览公司信息、小游戏等）移动端APP（例如：淘宝、去哪儿旅游、携程等）微信小程序（微信最新推出的功能，随用随装，不占用手机空间）。前端开发所学技术由简单到难，因此在不少网站上你会看到“七天入门前端”的视频博客等等，也就是说一星期就学会了HTML+CSS。最基本的页面你就能够书写了。

四 前端开发都有哪些内容

咱们知道，用所谓的网页三剑客已经不能知足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页如今新的标准是W3C，目前模式是HTML、CSS和JavaScript。

（1）HTML是什么？

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来讲，网页就是用HTML语言制做的。HTML是一门描述性语言，是一门很是容易入门的语言。 

（2）CSS

CSS，全称“（层叠样式表）”。之后咱们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

（3）JavaScript

JavaScript是一门脚本语言。

HTML、CSS和JavaScript的区别 咱们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。可是这三者到底是干吗的呢？

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为

若是咱们把前端开发的过程比喻成“建房子”，作一个网页就像盖一栋房子

一、先把房子结构建好（HTML）

二、建好房子以后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖

三、最后呢，装修完了以后，当夜幕降临的时候，咱们要开灯（JavaScript），这样才能看得见里面。

五 Web前端开发环境

市面上有不少的HTML编辑器能够选择，常见的Hbuild、Sublime Text、Dreamweare均可以用来开发HTML。 固然PyCharm也支持HTML开发。

一、浏览器

浏览器在本地也能打开html文件，浏览器就跟解释器同样，从上倒下，从左到右

全球共有五大浏览器厂商，咱们主要以chrome为主

ie
chrome
firfox
safri
presto
浏览器内核不一样，浏览器渲染引擎不一样（后期考虑兼容性问题），其余浏览器都是使用这5款浏览器内核 

二、浏览器历史：

世界最先浏览器，网景浏览器（Netscape ）
后来它想作操做系统，动了微软的奶酪，微软就想弄死他，
微软作的也特别的绝情，微软利用windows操做系统的市场占有率，提供了免费浏览器ie,并且windows
操做系统里还必须有

中国最先浏览器ie6，国企内就用ie6，

浏览器不一样，解析的标签标准不一样，微软太霸道，就不改标准，坚持不更新，后来谷歌和火狐抢占了市场，IE就傻逼了，目前也只有傻逼才用IE。。。

市场愈加地混乱，因而w3c（万维网联盟（World Wide Web Consortium，W3C））成立，用来制定你们的统一标准

须知：学前端一半工做在考虑兼容性，目前html5在兼容性方面解决的比较好

三、文件后缀名规范

.htm和.html扩展名的区别

#一、DOS系统（win95或win98）下只能支持长度为3的后缀名，因此老版本的系统一直在用.htm后缀

#二、但在windows后缀长度能够大于3位，因此windows下无所谓htm与html，html是为长文件的格式命名的

#三、若是文件后缀是.htm，毫无疑问，浏览器也能够兼容，但推荐使用.html

六 HTML简介

用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件(即网页文件)内容下载到本地，而后打开显示的过程。

而文本文件的文档结构只有空格和换行两种组织方式，如此，文本文件在打开显示时，显示的效果将会很是很是很是的单一，

为了让显示的效果不那么单调，咱们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部份内容，而后为内容打上不一样的标记，好比什么是标题，什么是段落，而后存放硬盘里，等下次打开时，word会识别以前的标记，而后按照预先编排好的结果显示出来

站在显示文本内容的角度去看，浏览器与word的原理同样，咱们能够将浏览器当成一个网页版的只读word，浏览器也必须有一套本身能识别的标记文本的规范，该规范被称为HTML,HTML全称是超文本标记语言（HyperText Markup Language）
“超文本”指的是用超连接的方法，将各类不一样空间的文字信息组织在一块儿的网状文本
“标记”指的是在编辑文本时用特殊的记号标记一下各部份内容的意义，该记号称之为标签，好比用标签h1标记标题，用标签p标签段落，如此咱们标记一首唐诗就成了以下格式：

<h1>卧石绿</h1>
<p>卧石一支绿</p>
<p>沃枝回芳脾</p>
<p>鱼吻卧石水</p>
<p>卧石答春绿</p>

因此咱们学习HTML就是在学习一系列的标签

HTML注意事项!!!

#一、记号/标签是不会显示出来的。

#二、虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，HTML的做用只有一个它是专门用来对文件作记号来标识其语义的（语义指的是该文本是作什么用的），加大和加粗这种为文本添加样式的操做并非HTML擅长的，虽然早期的时候确实也用HTML来制做样式，但之后咱们专门用CSS来作这件事，这也是一种解耦合的思想

#三、HTML是一个网页的主体部分，也是一个网页的基础。由于一个网页能够没有样式，能够没有交互，可是必需要有网页须要呈现的内容。因此HTML部分是整个前端的基础。

七 HTML发展史

超文本标记语言（初版）：在1993年6月做为互联网工程工做小组（IETF）工做草案发布（并不是标准），后来陆续由w3c制定标准

IETF简介

• IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"
• IETF负责定义并管理因特网技术的全部方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

• W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
• W3C于1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者Tim Berners-Lee
• W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种状况下，HTML标准不是很规范，浏览器也对HTML页面中的错误至关宽容。这反过来又致使了HTML开发者写出了大量含有错误的HTML页面

html语言自己有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们但愿xml来弥补html的不足，可是目前有成千上万的网页都是用html编写的，因此彻底使用xml来替代html还为时过早，因而W3C在2000年推出了xhtml1.0， 创建xhtml的目的就是实现从html向xml的过分

为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增长任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，若是页面有HTML错误，就要显示错误信息。可是因为已有的web页面中已经有了大量的错误，不少开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准以后增长了一个附录C，容许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面

W3C随后在XHTML 1.1中取消了附录C，即便用XHTML 1.1标准的页面必须用新的MIME type来分发。因而这个标准并无不少人采用

有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容做为了一个很重要的原则。HTML5确实引入了许多新的特性，可是它最重要的一个特性是，不会break已有的网页。你能够将任何已有的网页的第一行改为<!DOCTYPE html>，它就成也一个HTML5页面，而且能够照样在浏览器里正常的展现。

简而言之
一、HTML语法很是宽松容错性强;
二、XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引发等等;
三、HTML5是HTML的下一个版本因此除了很是宽松容错性强之外,还增长许多新的特性