作者：张波
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Web前端开发与应用教程(HTML5+CSS3+JavaScript)试读：
前言
HTML5的时代已经到来，各大浏览器早已做好准备，能很好地支持HTML5规范。当前互联网技术飞速发展，但几乎每一个互联网产品，都无法回避前端开发这一环节。
本书主要介绍Web前端开发技术，从HTML5基础标签到CSS3页面布局和特效，再通过JavaScript技术进一步提升网页前端的交互性和实用性。通过实例循序渐进，逐步引导读者深入学习。
本书的主要特色不仅在于通过丰富的小实例来介绍知识点，而且将一个完整的案例贯穿全书始终，并且在全书最后的章节进行思路的汇总和整理，帮助读者将所学知识应用到实际项目当中。避免学习知识的局限性和片面性，使读者在获取知识的同时，掌握实际应用的方法和技巧。
本书是一本介绍HTML5、CSS3和JavaScript前端开发的实用型教材，全书可分四部分。
第1章至第5章，全面介绍HTML5的常用标签及其属性，并且为每个标签及属性都设计了范例页面，这些内容是很好的学习参考。
第6章至第9章，详细介绍CSS3的选择器和属性，也设计了对应的范例页面，便于读者进行参考和学习。需要说明的是，由于CSS3相关内容非常丰富，本书选取了一部分常用内容进行介绍。
第10章至第13章，重点介绍JavaScript编程的相关内容，包括基础语法、函数、对象、编程、事件处理等知识，涵盖了初学者所需掌握的内容和知识。
第14章至第16章，综合运用所学内容，开发一个完整的网站——茗茶馆。通过这个实例让读者巩固前面所学知识，同时掌握Web前端项目开发的思路和技巧。
本书由张波主编，邵彧、师晓利为副主编，其中师晓利编写第1～3、5章，王佳编写第4章，邵彧编写第6～9章，张波编写第11～13章，李帷笳编写第14章，邹雪艳编写第15、16章，第10章及课件的制作、资料的整理由李建彬、刘大学、彭守旺、骆秋容、刘克纯、缪丽丽、陈文娟、刘大莲、庄建新、崔瑛瑛、翟丽娟、徐维维、韩建敏、庄恒、徐云林、刘瑞新、马春锋完成。全书由张波统稿，刘瑞新教授主审。书中部分内容参考了网上部分资料，由于参考内容来源广泛，篇幅有限，恕不一一列出，在此一并表示感谢。
由于Web前端开发技术发展迅速，书中难免有不足之处，恳请各位同仁及读者提出宝贵意见和建议。编者第1章 Web前端开发概述
Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。通信协议HTTP能够传输任意类型的数据对象来满足Web服务器与客户之间的多媒体通信的需求。Web带来的是世界范围的超级文本服务。用户可以通过Internet从全世界任何地方调来所希望得到的文本、图像、音频、视频等信息。另外Web还可以提供其他的Internet服务，如TELNET、FTP、Gopher和USERNET等。1.1 Web前端开发相关概念
Web开发分为前端（Front-end）和后端（Back-end）两部分，后端指的是程序、数据库和服务器层面的开发，而前端则指的是直接与用户接触的网页，比如布局、特效、交互等。
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
前端开发的主要工作是把UI（User Interface，用户界面）的设计图按照W3C标准做成HTML页面，用CSS进行布局，并且用javascript脚本语言实现页面上的前端互动。互动效果包括弹出层、页签切换、图片滚动、Ajax异步互动等。1.1.1 浏览器
浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标签语言的一个应用）内容，并让用户与这些文件交互的一种软件。它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为HTML格式。目前常见的网页浏览器有QQ浏览器、Internet Explorer、Firefox、Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。
但是并非所有浏览器都支持HTML5，同一浏览器不同的版本对HTML5的支持情况也不同。本书为了介绍Web前端开发的最新技术，使用的测试浏览器为Firefox48版本，如图1-1所示，读者可根据具体情况安装相应浏览器。图1-1 浏览器1.1.2 URL
URL（Uniform Resource Locator，统一资源定位符）是对可以从互联网上得到资源位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。每个页面都应具有唯一的一个URL。基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。完整的、带有授权部分的普通统一资源标志符语法看上去如下：
协议：//用户名：密码@子域名.域名.顶级域名：端口号/目录/文件名.文件后缀？参数=值#标志
如：http：//portal.sias.edu.cn/seeyon/main.do？method=main
上面地址看似语法很复杂，用户在浏览页面的时候一般不需要输入如此复杂的URL。用户在访问页面时一般只需输入网站的域名，通过超链接就可以达到该网站的其他页面。1.1.3 WWW
WWW是环球信息网的缩写（亦作“Web”“WWW”“W3”，英文全称为“World Wide Web”），中文名字为“万维网”，“环球网”等，常简称为Web。分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URL）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过单击链接来获得资源。1.1.4 网站
网站（Website）是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。用户可以通过浏览器来访问网站，获取需要的资讯或者享受网络服务。
因特网上的网站有很多，按照网站主体性质的不同分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其他非盈利机构网站以及其他类型等；按照网站功能划分有产品（服务）查询展示型网站、品牌宣传型网站、企业涉外商务网站、网上购物型网站、企业门户综合信息网站、行业协会信息门户、B2B交易服务型网站、沟通交流平台、政府门户信息网站等。那么这些各式各样的网站又是如何制作的呢？本书将为大家介绍相关技术和实现方法。1.1.5 Web标准
Web开发应用遵循的标准就是Web标准。Web标准是由W3C和其他标准化组织共同制定的，该标准用来创建和解释基于Web的内容，Web标准可以使得在网上发布的文档向后兼容，使其能够被大多数人所访问。其官方网站为：http：//www.w3.org。
Web标准包括一系列标准。网页部分的标准通过三部分来描述：结构（Structure）、表现（Presentation）和行为（Behavior）。
结构、表现和行为对应于3种常用的技术，即HTML、CSS和JavaScript。
●HTML用来决定网页的结构和内容。
●CSS用来设计网页的表现形式。
●JavaScript用来控制网页的行为。1.2 Web前端开发相关技术
互联网建立50多年了，网站开发技术日新月异，各领域的划分也越来越明确和细致，传统的掌握Dreamweaver就能做网页的认识已经不能适应当前和未来的趋势，作为一名前端人员，就应该掌握更多、更有针对性的技术和知识。Web前端离不开浏览器，主流开发一般采用的是HTML+CSS+JavaScript这3个核心，围绕这3个核心可以开发出来大量技术框架和解决方案。1.2.1 HTML
HTML是超文本标签语言（HyperText Markup Language，HTML），是网页的骨骼，是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义，由IETF用简化的SGML（标准通用置标语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。
HTML最新版本是HTML5，它是HTML当前的一个主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
HTML在Web飞速发展的过程中起到了非常重要的作用，HTML的发展历程见表1-1。表1-1 HTML版本信息
其中值得一提的是从HTML4开始页面的结构和表现分离为两种语言：一种用于实现结构的HTML；一种用于表现的CSS。1.2.2 CSS
CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML或XML（标准通用标签语言的一个子集）等文件样式的计算机语言。
如果仅用HTML5技术制作页面，那么大多数网页在视觉上都没有什么吸引力，这是因为HTML是用在定义内容上，而不是放在用CSS（层叠样式表）定义样式上。不过，通过对CSS的学习，你将学会如何为文本和背景添加样式，实现多栏布局，建立起适应各种设备（从手机到台式计算机甚至屏幕更大的设备）的布局等。CSS样式表不过是一种文本文件，其中包含一个或多个（通过属性和值）决定网页某特定元素如何显示的规则。CSS里有控制基本格式的属性（如font-size和color），有控制布局的属性（如position和float），还有决定访问者打印时在哪里换页的打印控制元素。CSS还有很多控制项目显示或消失的动态属性，可以用于创建下拉列表和其他交互性组件。CSS3是目前最新的版本，它提供了大量设计人员和开发人员长期期待的功能。这些功能包括圆角、阴影效果、文字阴影、自定义字体、旋转文本、半透明背景颜色、多图像背景、渐变以及其他很多功能。而且目前主流最新版本的浏览器已经实现了很多CSS3的组件（且即将实现更多），因此从现在起就可以很好地使用它们了。
CSS值得重视的一点在于，开发人员可以在HTML页面之外创建CSS文件，再将它应用于网站上所有的页面。这在构建网页之初及随后对其进行修改时都极大地简化了样式设置工作。一段时间后，如果需要重新设计网站，而内容和结构保持不变，就可以在HTML不发生变动的情况下，为网页提供一套全新的外观。1.2.3 JavaScript
JavaScript是世界上最流行的脚本语言之一，因为你在PC、手机、平板电脑上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言，它能够跨平台、跨浏览器驱动网页，与用户交互。
HTML定义网页的内容，CSS定义网页的表现，JavaScript则定义特殊的行为。建立网站不可能脱离HTML（如果要让网站看起来很吸引人，则离不开CSS），但JavaScript并不是必需的。在大多数情况下，JavaScript的特性都是用于增强访问者体验的——它们在由HTML和CSS构建的核心体验的基础上进行增强。
通过编写简单的JavaScript程序，可以显示和隐藏内容；通过编写复杂一些的程序，可以加载数据并动态地更新页面。可以操作定制的HTML5 audio和video元素控件，使用HTML5的canvas元素创建游戏。可以利用地理定位，根据访问者所在的位置定制其体验。因此将HTML、CSS和JavaScript三种技术结合起来进行Web开发，可以编写出界面既美观功能又强大的网站。1.3 Web前端开发工具
HTML5是一种标签语言，标签语言代码是以文本形式存在的，因此，所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入到记事本中，将编写好的文件另存为.html或.htm文件，就可以在浏览器中预览效果了。1.3.1 NotePad
Notepad，指代码编辑器或Windows中的“记事本”程序。在Windows下主要用于文本编辑。一款开源、小巧、免费的纯文本编辑器。建议初学者使用NotePad进行编写，这样可以增加代码编写体验，增强对代码的理解和记忆。如图1-2所示。图1-2 记事本编辑器1.3.2 TextPad
TextPad是一个强大的替代Windows记事本Notepad的文本编辑器，编辑文件的大小只受虚拟内存大小的限制，支持拖放式编辑，可以把它作为一个简单的网页编辑器使用。普通用户也可不安装模板而只使用单独的主程序，支持Unicode编码。可以编译、运行简单的Java程序。其主界面如图1-3所示。
下载地址：http：//www.textpad.com/download/。图1-3 TextPad编辑器1.3.3 WebStorm
WebStorm中文译名“网络风暴”，是Jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。官方下载地址：http：//www.jetbrains.com/webstorm/。WebStorm较前两款工具功能要强大，当然用法也会更复杂些，具体使用方法在此不再展开介绍，大家可以参阅其他教程。
WebStorm为非开源软件，可以试用30天，如果继续使用需要支付费用。其主界面如图1-4所示。图1-4 WebStorm主界面1.3.4 Dreamweaver
虽然前面已经介绍了三款非常简单的文本编辑器来编写网页，但是编写效率相对较低，对于语法错误及格式都没有提示，因此，可以使用专门编写HTML网页的工具来弥补这种缺陷。Adobe Dreamweaver，简称“DW”，中文名称“梦想编织者”，是美国Adobe公司开发的集网页制作和管理网站于一身的、所见即所得网页编辑器，DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver的网站地图功能可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，可以自动更新所有链接。它还是视觉化编辑与原始码编辑同步的一款设计工具。如果大家学完本书的基础内容之后，在Web开发的过程中就可以借助Dreamweaver这个平台更快速高效地进行Web前端开发了。其使用方法在此也不再展开介绍，大家可以借助其他教程进行学习。其主界面如图1-5所示。图1-5 Dreamweaver主界面1.4 练习
1.在记事本中手工编写HTML5基本框架代码，并在浏览器中预览。
2.在浏览器中查看常用网站的页面效果和源文件。
3.下载安装试用TextPad。
4.下载安装试用WebStorm。
5.下载安装试用Dreamweaver。第2章 HTML5基础
本章主要介绍HTML的基础知识，包括HTML的基础语法，如何创建页面，页面中基本标签的使用方法等内容，为后续章节的学习打下基础。2.1 HTML语法基础
HTML语言是用来描述网页的一种语言，该语言是一种标签语言（即一套标签，用来描述网页），而不是编程语言，它是制作网页的基础语言，主要用于描述超文本中内容的显示方式。2.1.1 HTML文档结构
完整的HTML文件包括头部和主题两大部分，头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等；主体包括文本、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象称为HTML元素。基本的HTML文件结构如下：
从上面的代码可以看出，在HTML文件中，DOCTYPE（Document Type），该声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档使用哪种HTML或者XHTML规范。在HTML5中，Web页面的文档类型说明（Doctype）被极大地简化了。只剩下＜！DOCTYPE html＞非常简单的一行代码。
＜html＞与＜/html＞标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。由于HTML语言语法的松散性，该标签可以省略，但为了使之符合Web标准和文档的完整性，建议不要省略该标签。
在文档的头部＜head＞＜/head＞区，用于定义文档的头部，它是所有头部元素的容器。＜head＞标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。＜head＞标签的作用范围是整篇文档，定义在＜head＞＜/head＞内的元素内容一般不会直接显示在网页上。
在文档的主体＜body＞＜/body＞区，包含文档的所有内容如文本、超链接、图片、表格和列表等。
注意：在构建HTML结构时，标签不允许交叉出现，否则会造成语法错误。如以下代码就是错误的。2.1.2 HTML标签
HTML5不是一种编程语言，而是一种描述性的标签语言，用于描述超文本中的内容和结构。HTML最基本的语法是＜标签名＞＜/标签名＞。标签通常是成对使用的，一个开始标签和一个结束标签。结束标签是在开始标签的前面加上一个斜线“/”。当浏览器读取HTML文件时，就会解析里面的各个标签，然后将每个标签相对应的功能表达出来。
HTML的标签有很多，在HTML5中又新增了一部分。表2-1列出了按照功能分类的常用的标签。表2-1 HTML常用标签（续）
比如在HTML标签中用＜title＞＜/title＞标签来定义页面的标题，当浏览器读取到title元素时，就将该标签里的内容显示在浏览器的标题上。【例2-1】显示＜title＞标签，代码如下：
在浏览器中预览，显示效果如图2-1所示。图2-1 ＜title＞标签展示效果2.1.3 标签的属性
HTML属性能够赋予标签含义和语境，提供了有关HTML元素的更多信息。属性要在开始标签中指定，通常是以名称/值对的形式出现，比如：name="value"，name表示属性的名称，value代表该属性的值，value常用双引号“"”括起来，也可以使用单引号“'”括起来。多个属性用空格隔开，指定多个属性的时候不需要区分顺序。如：
＜img src="picture/food.jpg"alt="美食"width="30%"height="40%"＞
此行代码表示插入了一幅图片，该图片来自同一目录中picture文件夹内的food.jpg，图片显示在页面上的尺寸是浏览器宽度的30%、高度的40%。【例2-2】多属性值，代码如下：
在浏览器中预览，显示效果如图2-2所示。图2-2 ＜img＞标签展示效果2.2 文本控制标签
设计Web页面时要组织好页面的基本元素，同时再配合一些特效，构成一个绚丽多彩的页面。页面的组成对象包括文本、图片、表单、超链接以及多媒体等。内容是网站的灵魂，而文本则是构成网站灵魂的物质基础。文本与图片在网站上的运用是最广泛的，一个内容充实的网站必然会用大量的文本与图片，然后把超级链接应用到文本和图片上，才能使这些文本和图片“活”起来。本节将介绍如何在页面中添加文本信息。2.2.1 标题段落标签
标题段落在页面文字中起到格式化文本的作用，可以使得文本信息结构更清晰，读者可以一目了然。
1.标题标签＜hi＞
＜hi＞标签用于定义段落标题的大小级数。其语法格式如下：
＜hi＞标题＜/hi＞
其中i表示标题级数，取值范围为1到6之间的正整数。
最大的标题级数是＜h1＞，最小的标题级数是＜h6＞。可使用＜hi＞标签的align属性来控制文字的对齐方式，属性值可以是left（左对齐）、center（居中对齐）、right（右对齐）和justify（两端对齐，对行进行伸展，这样每行都可以有相等的长度），默认的属性值为left。【例2-3】显示各级标题，代码如下：
在浏览器中预览，显示效果如图2-3所示。图2-3 ＜hi＞标签展示效果
2.段落标签＜p＞
＜p＞标签用于划分段落，控制文本的位置。其语法格式如下：
＜p＞段落内容＜/p＞
＜P＞是成对标签，用于定义内容从新的一行开始，并与上段之间有一个空行。开始标签＜p＞和结束标签＜/p＞之间写入段落内容。
可使用＜P＞标签的align属性定义新开始的一行内容在页面中的对齐位置，属性值可以是left（左对齐）、center（居中对齐）、right（右对齐）和justify（两段对齐，对行进行伸展，这样每行都可以有相等的长度）。＜p＞标签的align属性不建议使用，可以利用后续要学习的CSS来代替。【例2-4】段落标签，代码如下：
在浏览器中预览，显示效果如图2-4所示。图2-4 ＜p＞标签展示效果2.2.2 文本格式化标签
1.换行标签＜br＞
＜br＞标签用于定义文本从新的一行显示。其语法格式如下：
＜br＞
它不产生一个空行，但连续多个的＜br＞标签可以产生多个空行的效果。＜br＞标签是非成对标签，所以规范的换行标签在使用的时候记为＜br＞。
注意：＜br＞标签只是简单地开始新的一行，而当浏览器遇到＜p＞标签时，通常会在相邻的段落之间插入一些垂直的间距。【例2-5】换行标签，代码如下：
在浏览器中预览，显示效果如图2-5所示。图2-5 ＜br＞标签展示效果
注意：在本例中注意观察＜br＞标签与＜p＞标签的区别，特别是行间距。
2.水平线标签＜hr＞
＜hr＞标签用于产生一条水平线，以分隔文档的不同部分。其语法格式如下：
＜hr＞
＜hr＞标签是非成对标签，所以规范的换行标签在使用的时候记为＜hr＞。其主要属性见表2-2。表2-2 HTML常用标签【例2-6】水平线标签，代码如下：
在浏览器中预览，显示效果如图2-6所示。图2-6 ＜hr＞标签展示效果
3.字形标签
字形标签用于设置文字的风格。常用的字形标签见表2-3。表2-3 常用字形标签
HTML5规范声明：应该使用＜h1＞～＜h6＞来表示标题，使用＜em＞标签来表示强调的文本，使用＜strong＞标签来表示重要文本，使用＜mark＞标签来表示标注的或突出显示的文本。根据HTML5规范，在没有其他标签更合适时，才应该把＜b＞标签作为最后的选项。
4.＜div＞标签
＜div＞标签可以用来排版大块HTML段落，设置多个段落的文本对齐方式等。其语法格式如下：
＜div＞块内容＜/div＞
目前＜div＞标签最重要的功能是结合CSS设计页面布局。＜div＞标签是一种块（block）容器，默认的状态是占据一行。如：
5.＜span＞标签
＜span＞标签被用来组合文档中的行内元素。使用方法和＜div＞标签基本相同。其语法格式如下：
＜span＞行内容＜/span＞
＜span＞标签没有固定的格式表现。当对它应用样式时，才会产生视觉上的变化。如果不对＜span＞应用样式，那么span元素中的文本与其他文本不会有任何视觉上的差异。可以通过CSS对它定义样式，也可以通过JavaScript对它进行操作。
＜span＞标签和＜div＞标签主要区别为：＜span＞标签不换行，而＜div＞标签换行；＜span＞标签不能包含＜div＞＜p＞标签，而＜div＞标签可以包含＜span＞标签和＜p＞标签。2.2.3 特殊字符标签
随着互联网的发展，页面内容越来越丰富，很多行业信息也会出现在页面上，每个行业有自己的行业特性，如数学、物理、化学有很多特殊符号。本节将介绍如何在页面上显示这些特殊符号。
在HTML中，特殊字符以“&”开头，以“；”结尾，中间为相关字符编码。如用于声明标签的“＜”和“＞”，在页面上需要显示这两个符号的时候需要进行特殊处理。在HTML编码中，用“<；”表示“＜”，用“>；”表示“＞”。表2-4列出了常用特殊字符标签的表示方法。表2-4 特殊字符标签2.3 图片标签
图片在网页中占据重要的位置，俗话说，一图胜千言。图片感官上的形象性，能够直接再现事物本身，直观具体地表达页面内容，更能够增加页面的美观性。图片不仅能够增加网页的吸引力，同时也大大地提升了用户在浏览网页的体验。图片的展示形式丰富多样，不同形式的图片展现也让浏览网页的乐趣变得更加多样化。2.3.1 图片的格式与分辨率
图片的格式有很多种，常见的有JPEG、GIF、BMP、TIFF、PNG等，选择网页上的图片只有一个原则，即在图片清晰的前提下，文件越小越好。因此在网页文件中使用最广泛的图片格式为GIF、JPEG和PNG。
GIF就是图片交换格式（Graphics Interchange Format），只支持256色以内的图片；GIF采用无损压缩存储，在不影响图片质量的情况下，可以生成很小的文件；它支持透明色，可以使图片浮现在背景之上；GIF文件可以制作动画，这是它最突出的一个特点。GIF文件的众多特点恰恰适应了Internet的需要，于是它成了Internet上最流行的图片格式，它的出现为Internet注入了一股新鲜的活力。
JPEG是一种广泛使用的压缩图片标准，也是网页中最受欢迎的格式，JPEG可支持多达16MB颜色，它能展现十分丰富生动的图片，也可以压缩。
PNG格式的图片近年来在网络中也很流行，其特点为不失真，具有GIF和JPEG的色彩模式，网络传输速度快，支持透明图片的制作。
分辨率是指在单位长度内的像素点数，单位为dpi，是以每英寸包含几个像素来计算的，像素越多，分辨率就越高，而图片的质量也就越细腻；反之图片就会越粗糙；一般来说，图片最好不要超过100KB，如果遇到必须使用大张图片的话，大家可以把一张大图切成几张小图，这样可以缩短图片的显示速度，不需要等全部图片下载完才显示。2.3.2 嵌入图片
图片标签为＜img＞，是一个单标签，规范的图片标签语法格式如下：
＜img属性=”属性值”＞
该标签的属性和描述见表2-5。表2-5 ＜img＞标签的属性及描述
1.图片的源文件src
该属性用于指定图片源文件的路径，为必不可少的属性。语法格式为：
＜imgsrc=”图片路径”＞
图片的路径可以是相对路径也可以是绝对路径。如何表示路径将在2.3.3小节中为大家介绍。
2.设置图片的提示文字alt
该属性定义了图片的替代文本。当图片没有被成功下载，不能正常在页面上显示图片时，则在图片的位置上就会显示提示文字；当图片下载完成，则当鼠标指针放在该图片上，鼠标指针旁边就会出现提示文字。
3.设置图片的宽度width和高度height
该属性为可选属性，设置了这些属性，就可以在页面加载时为图片预留空间。如果没有这些属性，浏览器就无法了解图片的尺寸，也就无法为图片保留合适的空间，因此当图片加载时，页面的布局就可能会发生变化。
Width和height属性值的单位可以是像素，也可以是百分比。如：
＜imgsrc="图片路径"width="60%"height="30px"＞
该行代码表示图片的宽度为浏览器宽度的60%，高度为固定值30px。
技巧：使用百分比值来代替像素的绝对值，将使浏览器按照与浏览器显示窗口的一定比例来缩放图片。2.3.3 路径的表示方法
在页面的各个元素中，只有文本是写在HTML中的，其他多媒体元素如图片、声音、视频等都是嵌入到页面中的，HTML只记录了这些文件的路径，所以正确的路径信息是多媒体能够在页面上正常显示的基础。
文件的路径可以有两种表示方法：绝对路径和相对路径。
1.绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“food.jpg”这个图片是存储在硬盘的“C：\code\ch2\picture”目录下，那么“food.jpg”这个图片的绝对路径就是“C：\code\ch2\picture\food.jpg”。那么如果要使用绝对路径指定网页的图片就应该使用以下语句：
＜imgsrc="E：\book\Web前端开发实践教程\第2章\picture\food.jpg"＞
＜imgsrc="C：\code\ch2\picture\food.jpg"＞
事实上，在网页编程时，很少会使用绝对路径，如果使用“C：\code\ch2\picture\food.jpg”来指定背景图片的位置，在制作网站的计算机上浏览可能会一切正常，但是上传到Web服务器上就很有可能不能正常显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的C盘，有可能是D盘或H盘。即使放在Web服务器的C盘里，Web服务器的C盘里也不一定会存在“C：\code\ch2\picture”这个目录，因此在浏览网页时不会显示图片。
2.相对路径
为了避免这种情况发生，通常在网页里指定文件时，都会选择使用相对路径。所谓相对路径，就是相对于本文档的目标文件位置。例如下面的例子，“2-7.htm”文件里引用了picture文件夹下的“food.jpg”图片，由于“picture”文件夹相对于“2-7.htm”来说，是在同一个目录的，那么要在“2-7.htm”文件里使用＜imgsrc="picture/food.jpg"alt="果冻美食"＞代码，只要这两个文件的相对位置没有变化（也就是说还是在同一个目录内），那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。【例2-7】图片标签，代码如下：
在浏览器中预览，显示效果如图2-7所示。
试读结束[说明：试读内容隐藏了图片]