第1章 .................................................................................... .. Web前端开发概述 本章首先介绍Web前端开发基础,并讲解Web前端开发的流程、Web标准、常用的浏览 器内核,然后介绍HTML5的基本框架、发展历程、编写规范和文档基本格式。 ●Web前端开发的基础概念。 ●Web前端开发的流程。 ●Web标准及常用的浏览器内核介绍。 ●HTML5的基本框架、发展历程。 ●HTML5的编写规范、文档基本格式。 利用HTML5编写简单的Web前端网页。 以北京冬季奥运会为引导,在对Web前端基础知识学习过程中,融入对学生的理想信念 教育———中国梦,培养学生不甘落后、奋勇争先的奋斗精神。 2 Web前端开发(初级)———HTML5+CSS3+JavaScript 1.Web前端开发基础 1 1.1 初识Web前端技术 1. 因特网(t)是一个庞大的全球范围的计算机网络,它将计算机彼此联接在一起,并 且能够发送和接收数据,以接近光速的速度在世界各地来回传送信息。万维网(worldwide web,Web)只是因特网的一个方面,由保存在因特网上不同的计算机上的无数文件和文档组 成,这些交叉引用、彼此链接着的文件和文档织成了一张世界范围的信息大网。目前Web的 发展已经远远超越了当初那种简单的文本文档的形式,同样的渠道如今承载着图像、视频和音 频等多种信息。 网站的浏览者查看各种网站上的内容,实际上就是从远程计算机中读取一些内容,然后在 本地计算机上显示出来的过程。提供内容信息的计算机称为服务器,访问者使用浏览器程序, 如集成在Windows操作系统中的InternetExplorer(简称IE), 就可以通过网络取得服务器上 的文件以及其他信息。 网站(Website)是由多个网页(Webpage)构成的一个具有相关联系的页面集合。一个网 站少则由几个网页、多则由成千上万个网页组成,所有的信息都通过网页这个载体传递给浏览 者。从网页是否执行程序来分,网页可分为静态网页和动态网页两种类型。静态网页里面没 有程序代码,运行于客户端的程序、网页、插件和组件等都属于静态网页。在网络中看到的静 态网页文件通常是以.htm 或.tml为后扩展名的。动态网页内含有程序代码, Interne h运行于服务器 端的程序、网页和组件等都属于动态网页,它们会随客户、时间及需求的不同,返回不同内容的 网页。在网络中看到的动态网页文件通常是以.、php或.p等为扩展名的。 asp.js 目前,Web开发技术发展十分迅速。随着《网站重构》一书的问世,CSS 布局代替传统 table布局之风迅速刮起,国内外大大小小的网站都纷纷加入这场技术革命中。Gmail的上 线,让Ajax一夜之间成了Web开发领域的明星。随着Ajax的火热,DHTML 再次受到热捧, 各种JavaScript框架如雨后春笋般涌现出来,让人应接不暇。这种发展变化是一把双刃剑,一 方面,它使网页的表现力越来越强,可以用网页做出惊艳的效果;另一方面,漂亮的界面背后隐 藏着的是越来越难维护的实现代码。网页的维护工作会变得越来越难的原因主要有以下3个 层面 ( 。 1)浏览器层面。浏览器的向前兼容使得前端开发中被淘汰的技术、不推荐的方法依然 广为流传和应用,而新一轮的浏览器大战却愈演愈烈,除了Firefox、Opera、Safari、Chrome 这 些IE 的挑战者外,不同的浏览器对网页代码的解析存在着或 IE 本身也同时流行着各种版本 , 大或小的差异 。 (2)技术层面。Web标准被重视和普遍采用的时间不长,整个大环境对Web标准的理解 还停留在概念层面,对“好的实现方案”仍处于摸索阶段。不同的公司、团队、工程师,对“好的 实现方案”有自己的理解,或深或浅。理解不深,就很容易写出可维护性差的代码。 (3)团队合作层面。随着用户对使用体验的要求不断提高,对网页表现力的要求也越来 越高,从而导致实现代码越来越复杂,这无疑给团队合作带来了麻烦。页面越复杂,对团队协 作的要求就越高。如果协作不默契,很可能需要不停地打补丁,最后让代码变得千疮百孔,满 是地“雷”,没有人愿意去维护它们。 3 第1章Web前端开发概述 随着维护难度的增加,网页制作对技术的要求越来越高,Web开发领域长期以来形成的 设计和制作不分的局面终于有所好转。比如,在招聘网站上,十多年前几乎只有“网页设计师” 这个职位,而现在已经有了“前端开发工程师”和“页面工程师”的职位。之前既要负责设计又 要负责制作的网页设计师,已经分离成了两个岗位:一个专门负责设计,属于艺术类;另一个 专门负责开发,属于技术类。这是一个可喜的变化,设计师(designer)和开发者(developer)本 来就是两个完全不同的方向,将两者明确分开,表示网页制作的分工向着合理、成熟的方向又 迈出了一大步。而专注于网页制作的技术方向,有了更专业的“前端开发”方向。 1.2 b前端技术开发流程 1.We Web前端技术开发流程必须按照步骤走,大概分为7步。如图1-1所示,在每个步骤下面 列出的是该步骤可以(或可能)用到的工具。 图1-1 Web前端技术开发流程 (1)内容分析:仔细研究需要在网页中展现的内容,梳理其中的逻辑关系,分清层次以及 重要程度。 (2)结构设计:根据内容分析的成果,搭建出合理的HTML 结构,保证在没有任何CSS 样式的情况下,在浏览器中保持高可读性。 (3)原型设计:根据网页的结构,绘制出原型线框图,对页面进行合理的分区的布局,原 型线框图是设计负责人与客户交流的最佳媒介。 页面 ( 。 4)方案设计:在确定的原型线框图基础上,使用美工软件,设计出具有良好视觉效果的 (5)布局设计:使用HTML 和CSS 对页面进行布局。 (6)视觉设计:使用CSS 并配合美工设计标签,完成由设计方法到网页的转化。 (7)交互设计:为网页增添交互效果,如鼠标指针经过时的一些特效等。 1.1.3 Web标准———结构、样式和行为的分离 网页主要由三部分组成:结构(structure)、表现(presentation)和行为(behavior)。用一 本纸制图书来比喻,一本书分篇、章、节和段落等部分,这就构成了一本书的“结构”,而每个部 分用什么字体、什么字号、什么颜色等,就称为这本书的“表现”。由于传统的纸制图书是固定 的,不能变化的,因此它们不存在“行为”。 在一个网页中,同样可以分为若干组成部分,包括各级标题、正文段落、各种列表结构等, 4 Web前端开发(初级)———HTML5+CSS3+JavaScript 这些构成了一个网页的“结构”。每种组成部分的字号、字体和颜色等属性就构成了它的“表 现”。网页和传统媒体不同的一点是,它是可以随时变化的,而且可以和读者互动,如何变化以 及如何交互,就称为它的“行为”。因此概括来说,“结构”决定网页“是什么”,“表现”决定网页 看起来是“什么样子”,而“行为”决定了网页“做什么”。 “结构”“表现”和“行为”分别对应于三种非常常用的技术,即HTML 、CSS和JavaScript。 也就是说,HTML用来决定网页的结构和内容,CSS用来设定网页的表现形式,JavaScript用 来控制网页的行为。这三个部分被明确以后,一个重点的思想随即产生了,即这三者的分离。 最开始时HTML同时担任着“结构”和“表现“的双重任务,从而给网站的开发、维护等工作带 来了很多困难。 W3C是一个专门负责制定网页标准的非营利性组织,致力于结束网页制作领域混乱不堪 的局面,Web标准就是由W3C组织推行的。Web标准由一系列标准组合而成,其核心理念就 是将网页的结构、样式和行为分离开来,所以它可以分为三大部分:结构标准、样式标准和行 为标准。结构标准包括XML标准、XHTML标准、HTML标准;样式标准主要是指CSS标 准;行为标准主要包括DOM标准和ECMAScript标准。 一个符合标准的网页,标签中的标签名应该全部都是小写的;属性要加上引号;样式和行 为不再夹杂在标签中,而应该分别单独存放在样式文件和脚本文件中。理想状态下,网页源代 码由三部分组成:.tml文件、文件和.s文件。 h. s cj 1.4 常用的浏览器介绍 1. 浏览器是网站运行的平台,其核心部分是浏览器内核(renderingengine)。浏览器内核主 要负责对网页语法的解释并进行渲染,即显示网页。因此,一般来说浏览器内核也就是浏览器 所采用的渲染引擎,它决定了浏览器如何显示网页的内容以及页面的相关格式信息等。不同 的浏览器内核,对网页编写的代码解释也有不同。因此,同一网页代码在不同内核的浏览器进 行渲染,其显示效果也可能不同。因此,网页编写者需要在不同内核的浏览器中测试显示效 果,以确定是否正确显示。 1.IE浏览器 InternetExplorer(IE)是微软公司推出的一款网页浏览器,原称MicrosoftInternet Explorer(6版本以前)和WindowsInternetExplorer(7/8/9/10/11版本)。在IE7以前,中文 直译为“网络探路者”但在IE7以后官方便直接俗称“。 , IE浏览器” IE浏览器的内核为Trident。 在IE浏览器中,开发人员可以使用“更多工具”菜单中的“开发人员工具”进行HTML 、 CSS查看和调试,如图1-2所示。 2.Chrome浏览器 Chrome是一款由Google公司开发的网页浏览器,该浏览器基于其他开源软件撰写,包 括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。软件 的名称来自称作Chrome的网络浏览器GUI(图形使用者界面)。GoogleChrome的特点是简 洁、快速。GoogleChrome支持多标签浏览,每个标签页面都在独立的“沙箱”内运行,在提高 安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭。 Chrome浏览器的早期版本内核为WebKit,2013年4月以后新版本内核为Blink。 第1章Web前端开发概述 5 图1-2 IE 浏览器开发人员工具 在Chrome 浏览器中,开发人员也可以使用“更多工具”菜单中的“开发者工具”进行 HTML 、CSS 查看和调试,如图1-3所示。 图1-3 谷歌浏览器开发者工具 在开发者工具中,开发人员可以方便地通过元素和控制台进行内容、样式、表现形式的调 试。它还对盒子模型提供了方便可视化的布局形式。 6 Web前端开发(初级)———HTML5+CSS3+JavaScript 3.Fifox浏览器 Firefox((e) (r) 中文俗称“火狐”)是一款由Mozila公司开发的自由及开放源代码的网页浏览 器。其使用Gecko排版引擎,支持多种操作系统,如Windows、MacOS及GNU/Linux等。 Firefox的开发目标是“尽情地上网浏览”和“对多数人来说最棒的上网体验”。 Firefox浏览器的内核为Gecko。 4.Opra浏览器 Opera浏(e) 览器是一款挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的网 络浏览器,是跨平台浏览器,可以在Windows、MacOS和Linux三个操作系统平台上运行。 Opera浏览器创始于1995年4月。Opera浏览器因为它的快速、小巧和比其他浏览器更佳的 标准兼容性获得了国际上的最终用户和业界媒体的承认,并在网上受到很多人的推崇。 Opera桌面浏览器首创了许多新功能,从而帮助用户提高上网效率,促进创新和网络开 发。在Opera浏览器的第一个公开发行版本里,就实现了在一个窗口里同时打开多个文档, 这就是普遍流行的“标签式浏览”的前身。2001年,Opera首创了“鼠标手势”,极大地改变了 许多人网上冲浪的方式。 Opera还有很多帮助用户提高工作效率方面的创新,如浏览器内置的笔记功能,便于用户 快速浏览常用网址的“快速拨号”功能;能同步各种浏览信息的OperaLink功能等。在Opera 技术 0 。 版本中,又加入了可以通过压缩页面为窄带用户带来宽带浏览速度的Opo加速 10.eraTurb Opera浏览器的内核为Presto。 2 HTML5基本框架 1. 1.1 HTML发展历程 2. 要想把互相链接的数据文本片段编织成Web,就必须有某种用于建立这种链接的技术, 这就是超文本(hyper-text)的基础。使用超文本,一个文档中的一串文字可以直接链接到 Web上某个地方的另一个文档。超文本置标语言(hyper-textmarkuplanguage,HTML)是一 种计算机语言,用于将普通文本转化为活动的(active)文本以供显示和在Web上使用,并为普 通的无结构文本提供结构。如果没有结构,单纯的文本将会汇合在一起,以至于无法把一串文 字与另一串区分开来。 HTML由一些称为标签(的经过编码的标识符组成。标签包围着文本片段,将其与 tag) 其他部分区分开来,并且表明了所标记的文本的功能和用途。标签被直接嵌入普通文本文档, 并在计算机软件处理该文档时得到解析。HTML标签表明内容的某一组成部分的性质,并且 提供关于它的重要信息。标签自身不会被显示,并且会被区别对待于它们所封装的实际内容。 HTML被刻意设计为一种简单、灵活的语言。它是一个免费、公开的标准,不需要购买许 可,也不需要使用特别的软件来创建HTML文档。任何人都可以自由创建和发布网页,Web 能发展成为现在这样一种强大、影响深远的媒体正是得益于这种开放性。 但是当使用HTML创作文档时,必须遵守特定的规则,因为HTML中的各种要素必须 按特定方式组织起来才能正确发挥作用。这些规则由万维网协会(WorldWideWeb Consortium,W3C)负责维护。W3C是一个非营利性组织,它制定了用以构建Web的许多公 第1章 Web前端开发概述 开的技术标准,它们统称为Web标准。 1.2.2 HTML编码标准 尽管目前浏览器都兼容HTML,但为了使网页能够符合标准,设计者应该尽量使用 XHTML标准来编写代码。两者的区别如下。 1.XHTML标签和属性名必须小写 对于所有HTML标签和属性名,XHTML文档必须使用小写。因为XHTML是大小写 敏感的,如<li>和<LI>是不同的标签。 2.XHTML文档必须具有良好、完整的排版 编排良好性(well-formedness)是XHTML引入的一个新概念。从本质上说,标签必须有 结束标签,或者必须以特殊方式书写,而且标签必须嵌套。 例如,以下嵌套标签是正确的: <p>梦之都<em>XHTML 教程</em> </p> 以下交叠标签是错误的: <p>梦之都<em>XHTML 教程</p> </em> 3.对非空标签,必须使用结束标签 XHTML不允许忽略结束标签。除在DTD 中被声明为空的标签外,其他标签都必须有 结束标签。 例如,以下写法是正确的: <p> XHTML 教程</p><p> CSS 教程</p> 以下缺少结束的标签的写法是错误的: <p> XHTML 教程<p> CSS 教程 4.空标签 空标签必须有结束标签,或者起始标签必须以/>结束。例如,<br/>或<hr></hr>。 例如,以下具有结束空标签的写法是正确的: <br/><hr/> 以下没有结束空标签的写法是错误的: <br><hr> 5.XHTML属性值必须在引号中 XHTML所有的属性值必须在引号中,即使是以数字形式的属性值。 例如,以下写法是正确的: <table rows="3"> 以下写法是错误的: <table rows=3> 7 Web前端开发(初级)———HTML5+CSS3+JavaScript 6.属性最小化 XHTML不支持属性最小化,“属性/属性值”必须完整成对地写出。像disabled、checked 这样的属性名不能在不指定属性值的情况下出现。 例如,以下写法是正确的: <input checked="checked"> 以下写法是错误的: <input checked> 1.2.3 HTML文档基本格式 下面举例说明HTML文档的基本结构,网页效果如图1-4所示。 图1-4 HTML基本文档结构网页效果 上述网页的实现代码如代码清单1-1所示。 代码清单1-1 HTML基本文档结构代码 <!--代码清单1-1--> <!DOCTYPE html> <html lang="en"> <!-- 这里是头信息--> <head> <meta charset="UTF-8"> <title>奥林匹克精神</title> </head> <!--这里是内容信息--> <body> 北京冬季奥运会 </body> </html> 在代码清单1-1中,可以看到HTML基本文档结构如下。 (1)HTML文档首先要向浏览器说明当前文档使用了哪种HTML标准,<!DOCTYPE html>表示本文档是有效的HTML5文档,浏览器可以按照此类型进行解析。 (2)<html>和</html>是HTML文档的开始与结束标签,也是HTML文档的根标签, 代码清单中lang用来表示本文档使用的语言,"en"指英语,"zh-cn"指简体中文。 (3)HTML注释内容在“<!--”和“-->”之间,浏览器不做解析。 (4)HTML文件中主要分为头部标签<head>与内容标签<body>。 (5)头部标签<head>可以容纳文档的HTML相关信息,比如标题title、页面的语言与文 8 第1章 Web前端开发概述 字类型、应用CSS样式、JavaScript代码、简短描述、关键词等内容,是用户无法直接看到的。 (6)内容标签<body>中包括用户可以看到的全部内容,如段落、链接、表格等。 1.2.4 开发工具的选择 主流的Web前端开发写代码的软件有VisualStudioCode、Dreamweaver、SublimeText、 HBuilder、editplus、Webstorm 等。 1.VisualStudioCode VisualStudioCode(简称VSCode)是一款免费的、开源的现代化轻量级代码编辑器,支持 几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码 对比Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化,其开发起 始页面如图1-5所示。 图1-5 VSCode开发起始页面 为了达到快捷方便地使用,开发人员可以在VSCode中安装表1-1所示的插件。 表1-1 VSCode常用插件 插件名称功能描述 Chinese(Simplified)LanguagePackforVisualStudioCode 中文(简体)语言包 OpeninBrowser 右击选择浏览器打开HTML文件 OpenInDefaultBrowser 右击选择默认浏览器打开HTML文件 JS-CSS-HTMLFormatter 自动格式化JS、CSS和HTML代码 AutoRenameTag 自动重命名配对的HTML/XML标签 CSSPeek 追踪至样式 jQueryCodeSnippets jQuery代码片段 LiveServer 本地服务器 9 0 1 Web前端开发(初级)———HTML5+CSS3+JavaScript 2.HBuilder HBuilder是DCloud推出的一款支持HTML5 的Web开发IDE 。HBuilder的编写用到 了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然 地兼容了Eclipse的插件。HBuilder的最大优势是快,通过完整的语法提示和代码输入法、代 码块等,大幅提升了HTML 、JS 、CSS 的开发效率,其开发起始页面如图1-6所示。 图1-6 HBuilder开发起始页面 课堂实训1- 1 中国奥运奖牌网页策划与设计 1. 任务内容 中国在2022 年北京冬奥会上,取得了骄人的成绩,这既是中国运动事业的发展成就,也离 不开运动员们不甘落后、奋勇争取的努力。本实训需要通过HTML 建立基本的网站,载入奥 运相关内容及图片,从而可以基于HTML 体验基本的Web前端功能。网页效果如 图1-7所示。 2. 任务目的 体验奥运奖牌网页的制作过程,了解Web前端开发流程。 3. 技能分析 (1)内容分析:研究需要在网页中展现的内容,梳理其中的逻辑关系,分清层次。 (2)收集素材:收集所需的图片、文字等素材。 (3)结构设计:根据内容分析的成果,搭建HTML 结构。 (4)原型设计:根据网页的结构,绘制原型线框图,对页面进行合理的分区布局。 (5)方案设计:根据原型线框图,合理设计展示内容。