网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页。
例如一篇qq日志、一篇博文等展示性文章。在web1.0时代，用户能做的唯一事情就是浏览这个网站的文字图片内容，这时用户也不能像现在在大多数网站都可以评论交流（缺乏交互性）。
相信可能大多数人都听过“网页三剑客 dreamweaver+fireworks+flash”吧，2010这个组合就是web1.0时代额产物，我在2010年以前还是在使用三剑客做网页设计的。
“前端开发”是从“网页制作”演变而来的。
从2005年开始，互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。
在web 2.0时代，网页有静态网页和动态网页。
所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。
web2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中进行评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客dreamweaver+fireworks+flash”制作的，那是远远不能满足需求。
现在网站开发无论是开发难度，还是开发方式上，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“web前端开发”。
所以，处于web2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客dreamweaver+fireworks+flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多，例如代码冗余、网站维护困难（学习到后期，你会知道为什么不用这个组合了。
公司官网（在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是页面的行为
如果我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子
1、先把房子结构建好（html）
2、建好房子之后给房子装修（css），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖
3、最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（javascript），这样才能看得见里面。
市面上有很多的html编辑器可以选择，常见的hbuild、sublime text、dreamweare都可以用来开发html。 当然pycharm也支持html开发。
1、浏览器
浏览器在本地也能打开html文件，浏览器就跟解释器一样，从上倒下，从左到右
全球共有五大浏览器厂商，我们主要以chrome为主
ie chrome firfox safri presto 浏览器内核不同，浏览器渲染引擎不同（后期考虑兼容性问题），其他浏览器都是使用这5款浏览器内核
2、浏览器历史：
世界最早浏览器，网景浏览器（netscape ） 后来它想做操作系统，动了微软的奶酪，微软就想弄死他， 微软做的也特别的绝情，微软利用windows操作系统的市场占有率，提供了免费浏览器ie,而且windows 操作系统里还必须有 中国最早浏览器ie6，国企内就用ie6， 浏览器不同，解析的标签标准不同，微软太霸道，就不改标准，坚持不更新，后来谷歌和火狐抢占了市场，ie就傻逼了，目前也只有傻逼才用ie。。。 市场越发地混乱，于是w3c（万维网联盟（world wide web consortium，w3c））成立，用来制定大家的统一标准 须知：学前端一半工作在考虑兼容性，目前html5在兼容性方面解决的比较好
3、文件后缀名规范
.htm和.html扩展名的区别
#1、dos系统（win95或win98）下只能支持长度为3的后缀名，所以老版本的系统一直在用.htm后缀 #2、但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的 #3、如果文件后缀是.htm，毫无疑问，浏览器也可以兼容，但推荐使用.html
用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件(即网页文件)内容下载到本地，然后打开显示的过程。
而文本文件的文档结构只有空格和换行两种组织方式，如此，文本文件在打开显示时，显示的效果将会非常非常非常的单一，
为了让显示的效果不那么单调，我们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部分内容，然后为内容打上不同的标记，比如什么是标题，什么是段落，然后存放硬盘里，等下次打开时，word会识别之前的标记，然后按照预先编排好的结果显示出来
站在显示文本内容的角度去看，浏览器与word的原理一样，我们可以将浏览器当成一个网页版的只读word，浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为html,html全称是超文本标记语言（hypertext markup language）
“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签，比如用标签h1标记标题，用标签p标签段落，如此我们标记一首唐诗就成了如下格式：
<h1>卧石绿</h1> <p>卧石一支绿</p> <p>沃枝回芳脾</p> <p>鱼吻卧石水</p> <p>卧石答春绿</p>
所以我们学习html就是在学习一系列的标签
html注意事项!!!
#1、记号/标签是不会显示出来的。 #2、虽然用<h1>标记的文本在显示时会被加大加粗，但请务必记住，html的作用只有一个它是专门用来对文件做记号来标识其语义的（语义指的是该文本是做什么用的），加大和加粗这种为文本添加样式的操作并不是html擅长的，虽然早期的时候确实也用html来制作样式，但以后我们专门用css来做这件事，这也是一种解耦合的思想 #3、html是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以html部分是整个前端的基础。
超文本标记语言（第一版）：在1993年6月作为互联网工程工作小组（ietf）工作草案发布（并非标准），后来陆续由w3c制定标准
ietf简介
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页面，并且可以照样在浏览器里正常的展示。 简而言之 1、html语法非常宽松容错性强; 2、xhtml更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等; 3、html5是html的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
我要评论
网友评论