Web第五讲：Web前端开发技术概述

开发环境设置

安装vs-code，并安装前端开发工程师常用的插件。

vscode-icon：文件图标

Class autocomplete for HTML：自动补全html代码

beautify：格式化代码，使javascript、JSON、CSS、Sass、HTML代码更美观

HTML Snippets：超级实用且初级的H5代码片段以及提示

HTML CSS Support：让html标签上写class智能提示当前项目所支持的样式

debugger for chrome：让vscode映射chrome的debug功能，静态页面都可以使用vscode打断点调试

Path Intellisense：路径自动补全

jQuery Code Snippets：jQuery提示插件

ESLint：JavaScript代码检测工具

HTMLHint：html代码检测

bootstrap 3 sinnpet：bootstrap代码提示

web前端开发基本介绍 web前端工作内容 IT公司网页开发过程 开发工具 运行环境/浏览器

WEB浏览器的作业是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

常见浏览器：Chrome、Safari、Firefox、Internet Explorer

WEB的起源与发展 万维网WWW及W3C W3C是什么？ 什么是WWW？ WWW是如何工作的？ 什么是浏览器(brower)？什么是服务器(server)？ Web工作原理

web工作原理是基于请求和响应的模式，客户端浏览器发送http请求，web服务器响应http。

网页静态内容：就是网页中固定不变的内容。

网页动态内容：就是从数据库中读取的或JavaScript动态生成的。

web特点 web是易导航和图形化web是具有平台无关性web是支持分支式结构web是具有动态性web是具有交互性 web标准 网站

动态网站

Web服务器 IP地址、端口号 Port(端口号)：逻辑意义上的数据传输通道，或者说模拟通道。 统一资源定位器(URL) 实例： 协议类型 超链接 网站构建技术 网站开发全栈

前端Front End：HTML5、Javascrip、CSS

后端Back End：Java、Python、Node.js、Ruby on Rail

数据库Data sets：Mysql、MongoDB

架构Infrastructure：Servers(服务器)、Cloud(阿里云、AWS)(云)、Container(容器)

BS架构：brower、server，请求与响应

技术栈

客户端：Javascript、CSS、HTML

服务端：Programming Language(编程语言)、database(数据库)、web server(服务器)、operating system(操作系统)

Web前端开发的三层结构 HTML是网页信息结构基础；CSS是网页表现技术，对网页布局、字体、颜色、背景和其它效果实施更加精确的控制：Javascript和HTMLDOM是网页行为，实现网页的动态、交互功能。 HTML

HTML全称是Hyper Text Markup Language(超文本标记语言)，用来描述页面的内容和结构。

HTML是构成Web页面(Page)的基础，最新版本是HTML5。

HTML超文本标记语言的发展历史

从初期的网络诞生后，已经出现了许多HTML版本：

版本发布时间

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2012

XHTML5

2013

一个简单的HTML页面 HTML基本结构

如何学习HTML？

CSS CSS发展历史 JavaScript JavaScript案例 HTML DOM

AJAX jQuery

jQery库的引用：

开发环境/浏览器

开发与debug建议在谷歌浏览器或火狐浏览器下进行。

Web前端开发工具及环境配置 环境配置及实例 综合案例 职业名称： 主要技术： 市场需求： 前端与后端比较(2003年) 工作内容：

Web2.0纪元：2004年-2006年

职业名称： 主要技术： 市场需求： 前端与后端比较(2008年) 工作内容：

HTML5纪元：

职业名称： 主要技术： 市场需求： 前端与后端比较(2008年) 工作内容：

前端行业未来发展

关于前端技术

前端技术的参考书