web前端概述

web前端概述

web前端:网站的前台部分，是运行在电脑，移动端等浏览器上展示给用户浏览的网 页。

前端开发: 用代码根据UI设计实现网站前台页面、内容以及交互效果

UI: 用户界面 UI设计: 设计师运用设计软件(PhotoShop等)设计的用户名界面，一般是图片居多， 没有交互效果。

web(world wide web ): 缩小为WWW，万维网，全球广域网。互联网的总称，他是 一种基于超文本和http，全球性的，动态交互的，跨平台的分布式图形信息系统。 web主要是通过网页传递信息。

web前端三大件：

1. . HTML 超文本标记语言,编写网页的结构。可以理解为像人的骨头一样，决定网页 的结构。不是编程，主要是记住常用的标记即可。.html结尾的文件——F12 可以弹出开发工具(或者右键,选择检查)
2. css 层叠样式表: 给html编写的网页添加样式，如添加背景颜色，字体颜色等等。 可以理解为人的衣服。不是编程语言，和html一样，记住常用的样式即可。.css结尾 的文件
3. JavaScript(简称js),脚本语言，也是一种编程语言。为网页添加交互效果和特效。 可以理解为人的动作。学习js的需要一定的逻辑思维，不能硬背，要靠理解。js是前 端的核心技术，js学的好，前端就好。.js结尾的文件——在开发工具HTML代码中找到以.js结尾的就是js代码，可以复制文件地址粘贴到浏览器中打开文件查。

浏览器常规操作：

1. 前端开发常用浏览器: 谷歌浏览器(兼容性好)，fireFox(火狐浏览器),(Edge,IE主要 用于查看兼容性)
2. f12打开浏览器开发工具(或者浏览器里右键，点击检查)
3. 设置浏览器语言：点击设置图标，在Language选项中选择中文，点击蓝色按钮Reload DevTools
4. 开发工具(DevTool)的常用选项:Elements->查看网页元素 Console->控制台，JS调试使用 Sources->源代码，网页源文件，可看代码文件和图片等 Network->网络，网页发送的网络请求
5. ctrl+f 搜索html标记
6. 网页截图方法 ctrl+shift+p(windows)

web前端学习

• web前端能做什么1.各类传统pc网站，电脑浏览器访问的网站，网 页尺寸一般是固定尺寸,小于网页尺寸的电脑，会 出现滚动条，阅读不太方便。2.响应式网站: 可以根据不同的设备尺寸，显示 对应的布局，动态响应不同尺寸的布局。现在网 站的主流方案，一套代码兼容多种设备。3.wap 网页(移动端网页),只考虑移动设备的显示效果。4.H5-app,可以打包为安卓或ios的安装包。把网 页和浏览器打包在一起为一个安装包。5.微信小程序，微信公众号，支付宝小程序等 下，原理是微信内置了解析html的内核。6.H5(html)游戏，交互式动画。主要是基于 canvas(图片)技术，一般开发商品级的游戏需要 游戏引擎(cocos-2d,egret白鹭)。7.后端(后台)开发，主要做网站业务逻辑的处 理，如果支付，扣款，购买商品的发货等。主要 基于使用node.js运行JavaScript代码
• 前端的学习路线 HTML-->CSS-->javascript-->Ajax-->Node.js-->promise-->Axios-->Es6-->Vue.js
• 常用的IT技术社区--> 到各大知名IT技术社区，开通账号，发布一些 文章，心得，或者做项目的技术流程等。1. CSDN 中国最大的IT社区和服务平台 https:// www.csdn.net/2. 知乎, www.zhihu.com 互联网高质量的内容 创作和问答平台3. 掘金,juejin.cn, 开发者成长社区4. 力扣 力扣 刷题网站5. 51CTO WWW.51CTO.com it技术咨询网站6. github https://github.com/ 代码托管平台 和开源项目平台7. gitee 码云 国内的代码托管平台和开源项目平 台8. 开源中国 OSCHINA - 中文开源技术交流社区 国内最 大的开源技术社区，也是it资讯平台9. w3cschool 网站技术参考手册，几乎涵盖了 网站开发的所有技术。 https://www.w3school. com.cn

B/S与C/S架构

C(client)/S(server)架构：由客户端和服务器端 组成。C端不统一，用户需要安装c端才能访问服 务器端。优点:客户端可控性强，可以做独特的功 能。缺点:需要下载，针对不同的系统需要不同的 技术。

B(brower)/S(Server)架构，浏览器/服务器端模 式。通过浏览器访问不同的网页实现的不同的业 务需求。缺点: 界面比较统一，优点:不需要下载 其他应用，一个浏览器即可。前端主要是做B端 的各类应用。

主流浏览器内核

浏览器主要是访问网页，浏览器渲染网页的核心 功能就是解析html,css，js。解析html，css，js 的功能可以叫引擎(内核)。浏览器内核主要负责 对网页语法的解释并渲染网页。

1. Trident内核。 微软在Mosaic代码修改而来， 一直到IE11,也叫IE内核。 2.
2. Gecko 内核: Netspace6,后的内核，现在是 Firfox(火狐浏览器)使用的内核。源代码完全开 源，可开发性极高。
3. webKit:苹果公司自主研发的内核，也叫safari 浏览器。是自由软件，代码开源。oprea,搜狗浏 览器，遨游，qq浏览器，360浏览器等。
4. Blink 内核 : google 和oprea 联合开发的一个 引擎。在谷歌28以后开始使用，Oprea(15版本以 后)。

前端发展史

1990年: 英国的Tim Berners-Lee 和 同事创立了 一种标记语言html。万维网之父。

1993年，美国国家超级计算机应用中心Mosic浏 览器发布。

1994年，Mosic浏览器开发人员吉姆.克拉克创建 了网景公司,发布了Mosic Netspace 后面改名为 Navigator浏览器。

1994年, 万维网联盟成立,简称W3C。www万维 网(world wide web)，基于浏览器/服务器方式的 信息发现技术和超文本技术。W3C主要是制定 web技术的标准。是web技术领域最权威的，最 具影响力的中立性技术标准机构。开始进入web1. 0时代，网页主要是静态页面为主。

1995年，网景公司的工程师，Brendan Eich 花了 10天左右，设计了java script语言。js在 Navigator浏览器2.0运行。

1996年，微软发布了VBScript，JScript脚本语 言。JScript和JavaScript 实现方式不一样，ie浏 览器和navigater浏览器互不兼容。网景为了保住 JavaScript的市场主导地位，把js提交给了欧洲计 算机制造商协会(ECMA)，该机构就把js进行了国 际标准化，这时js被改名为 ECMAScript。

1999年 发布了ECMAScript3.0的版本，此后的10 年基本没有变化。Ie浏览器逐渐占据上风，到 2002年占市场90%，Netspace退出历史舞台。

1999 HTML4.01发布

2000年 w3c 推出了xml，html结合的新的标记 语言，xhtml ,由于xhtml的技术性问题等原因， 到2009，宣布不在继续推进xhmtl，还是用 html。（xml是用于数据传输，和html有点类 似） 动态页面的发展(网站后端技术)

动态页面的发展(网站后端技术)

网页的代码是存在服务器上，通过访问服务器把 代码下载到本地，浏览器才开始渲染页码。

网页可以通过服务器相关的技术，动态生成网页 代码，可以实时的返回不同的网页内容。

PHP：web后端开发语言，主要吸收了C，java, perl等计算机语言的特点创立，简单易学，只能 做web服务器端。跨平台。

JSP: sun公司创建的基于java的web服务器开发 技术，J2EE,到现在也是web后端开发的主流。跨 平台

ASP: 微软开发的一套做web动态网页的语言，后 面被asp.net取代,不能跨平台。

AJAX: 可以局部刷新网页页面信息，二不用更新 整个页面的数据。ajax技术在当时是一个革命性 的技术，也促进了web2.0的发展。

web2.0

由于IE打败了Netspace, Netspace被AOL收购前 创建了一个mozilla社区，该社区发布了Firefox 浏览器，Firefox浏览器很受欢迎，占了很多市场 份额。IE浏览器份额下降

期间出现了很多其他浏览器，Firefox和Opera浏 览器主要遵循w3c标准与IE浏览器对抗。浏览器 的标准不统一，兼容性很差，对开发人员来说是 一场噩梦。

为了解决兼容性问题，出现了很多的前端框架， 如: Dojo,jQuery,ExtJS等。其中最出名的就是 jQuery，占了市场的70%的份额。到现在都还在 用。

2004年Mozilla基金会和Opera提出了一份建 议，web form 2.0的规范草案，2008年，html5 的草案发布发布。

2008年 chrome 浏览器发布，JavaScript v8引 擎(解析js的引擎)。期间html5广受欢迎。

2009 ECMAScript5.0发布，CMAScript开始重 视js。

2012年，微软发布了TypeScirpt,主要是对js做了 扩展

2014年 w3c正式发布html5.0的版本。

nodejs出世: 2009年谷歌发布v8引擎，Ryan利 用google的v8引擎打造了一个在服务器端运行的 js的框架，Node.js

前端框架出世(主要是MV*框架):随着H5的流行， 前端开始受到重视，H5的技术太繁杂，需要花费 比较多时间学习，所有出现了专业的前端技术岗 位。最出名的是Angular.js(谷歌),React.js( Facebook),Vue.js(尤雨溪)

web app盛行: H5开发移动端网页，打包为手机 软件安装包。 Hybrid App(混合开发app)：利 用web开发技术，调用手机原生(Native)相关的 api(接口)，实现二者结合的app。

ES6---> 2015年 ECMAScript6.0发布，改版本增加了很多 新语法，让js更严谨，改变非常大，并更名为 ECMAScript2015。现在说的ES6主要是指 ECMAScript6.0后的版本。以后每年的6月左右都 会发布ECMAScript的新版本。到2023年6月左 右，发布了ECMAScript13版本