第1章 Web前端技术简介-【好程序员成长】HTML5从入门到精通

第1章 Web前端技术简介 Web前端概述 Web前端开发工具 HTML入门 Web前端技术简介 Web开发工具 HTML入门 目 录 CATALOUGUE 01 02 03 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 了解Web前端技术 理解HTML基本原理 了解行业相关信息 了解Web前端开发工具 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1.1 Web前端概述 1.1.1 初识Web前端 1.1.2 Web前端开发的三大核心技术 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1.1 Web前端概述 1.1.1 初识Web前端 1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http: //info. cern. ch/），从此人类宣布了万维网时代的到来。随着互联网的飞速发展，网站开发人员也变得炽手可热。 Web前端开发是从网页演变而来，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。 早期的前端其实就是Table布局，后来发展到DIV+CSS网站重构，再到JavaScript逐渐成为web前端开发的语言及web2.0的出现，每个阶段涌现出相应的产品，如SNS、博客、微博等。随着人们对网页需求的不断增大，Web前端技术也正加速地发展。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1.1 Web前端概述 1.1.1 初识Web前端 Web开发职位可分为UI设计师（网页设计师）、Web前端开发工程师、Web后端工程师、数据库工程师。下面来了解一下这四大职位的分工： 首先由UI设计师根据产品的需求做出网站效果图，然后交付给Web前端工程师进行图片切割和网页制作。 数据库工程师负责把网站数据进行存储和优化处理。 Web后端工程师负责把网站数据进行增删改查等逻辑处理，并将操作的数据返给Web前端工程师进行数据的交互与显示。 Web前端工程师能充分理解项目需求和设计需求，并与UI设计师、Web后端工程师紧密合作，产出高质量的网站展示层，为用户呈现最好的界面交互体验。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1.1 Web前端概述 下面来介绍下Web前端开发所包括的三大核心技术——HTML语言、CSS语言、JavaScript语言。 1.HTML语言 HTML全称“Hyper Text Markup Language”，中文解释为“超文本标记语言”，它是制作网页的标准语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 2. CSS语言 1.1.2 Web前端开发的三大核心技术 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1.1 Web前端概述 1.1.2 Web前端开发的三大核心技术 CSS全称“Cascading Style Sheet”，中文解释为“层叠样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。 3. JavaScript语言 JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。 通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 1.1 Web前端概述 1.1.2 Web前端开发的三大核心技术 Web前端三大核心技术就像板凳的三条腿，缺一不可。用图片来表示三者之间的联系。 W3C组织规定，web标准需要将网页的结构、样式和行为三者进行分离。HTML +CSS+Javascript本质上构成一个MVC框架，即HTML用来描述网页的结构（Model）、CSS用来描述网页的结构（View）、Javascript用来描述网页的行为即调度数据和实现某种展现