HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版） (范玉玲，段春笋，张芊茜) (Z-Library)

版权信息 书名：HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版） 作者：范玉玲，段春笋，张芊茜 出版社：人民邮电出版社 出版时间：2018-12 ISBN：978-7-115-49002-5

内容提要 本书全面系统地介绍了静态网页设计、开发涉及的主要技术和技 巧，包括网站开发基础知识、开发工具、HTML5标记语言、CSS3样式、 响应式网页布局及网站建设流程等。 本书配备三种层次的案例，让学习者由浅入深、循序渐进地掌握 前端开发技术。一是通过大量示例辅助学习者掌握基础知识点；二是 将一个完整的网站拆解为多个项目渗透在每个章节中，通过项目驱动 的方式让学习者巩固并灵活运用基础知识，并能在此过程中逐步了解 网站建设的思路和开发流程；三是在章节末尾设置了动手实践项目， 涵盖了本章主要知识点及相关技巧并适当延伸，引导学习者进行深入 探索，培养学习者的自学能力和应用能力。 本书配有视频讲解和习题，适合作为高等院校Web开发课程的MOOC 教学教材，也适合作为初学者的自学教程。

前言 当下Web前端技术发展迅速，HTML经历了从HTML4到HTML5的重大变 革，CSS3在CSS2的基础上增加了诸多新特性，为适应网站用户的移动 浏览设备，响应式网页设计也是Web前端开发领域的主要趋势之一，作 为专业网页设计人员必须掌握这些基础的Web开发技术。本书系统全面 地介绍了网页设计制作所涉及的主要技术，并将一个完整的个人介绍 网站拆分为15个项目案例贯穿全书始终，将所讲知识运用在实际项目 中，可提高学习者分析问题、解决问题及动手编码的能力。 主要内容 本书共8章。 第1章主要介绍网页的基本组成，网页设计的基本概念，Web工作 原理及网页编辑工具。 第2章主要介绍HTML文档的基本结构，HTML4的常规标签及HTML5新 增的常用标签。 第3章系统介绍CSS样式规则、引入方式、基础选择器、字体与文 本属性、颜色与背景属性。 第4章主要介绍CSS复杂选择器、样式优先级。 第5章主要介绍CSS盒模型、表格与列表样式、浮动与定位及常用 页面布局。 第6章介绍CSS3的新增属性，包括滤镜、过渡、动画及转换等属 性。 第7章主要介绍响应式页面设计的概念、媒体查询、运用 Bootstrap框架进行页面设计等。

第8章介绍网站建设的主要流程，包括网站定位、确定主题、站点 结构规划、收集内容、网站设计原则及测试发布。 本书特点 本书通过基础知识讲解+丰富示例+项目案例+动手实践项目等多种 方式，采用不同层次的示例练习让学习者由浅入深、循序渐进地掌握 前端开发的相关技术。 · 基础知识讲解+知识点示例：各章知识点大多配有丰富示例， 引导学习者由浅入深地逐步掌握前端开发基本技能。 · 项目驱动：以典型网站为例，按知识点讲解顺序拆分为15个项 目案例，分布在各章中，将理论知识和实践完美地结合起来。 · 动手实践：对已学知识的扩展和延伸，只配效果图和难点分 析，没有具体步骤，培养学习者自学和独立解决问题的能力。部分动 手实践配有视频讲解。 项目介绍 本书的15个项目均包括项目目标、项目内容和项目步骤三个部 分。项目目标描述通过本项目的学习，学习者能够达到的对知识点的 理解、掌握和灵活运用程度；项目内容描述完成项目需要掌握的理论 和实践知识要求；项目步骤是根据网页效果进行具体分析，列出详细 操作步骤。 项目一至项目六：使学习者掌握HTML文档结构，熟练使用HTML标 记进行文档结构化。项目七至项目八：使学习者掌握网站的整体风格 设计，通过CSS实现网页的美化及优化。项目九至项目十一：使学习者 掌握常用的页面布局方法，能够解决常见的浮动、定位问题。项目十 二至项目十四：使学习者掌握常用的CSS3属性；了解响应式布局，掌 握媒体查询的使用；掌握Bootstrap框架创建响应式网页的方法。项目 十五：根据前面的14个项目，逆向分析设计思路，使学习者掌握网站 设计思路、流程和发布等知识。 教材资源 本书基于济南大学与达内教育集团合作的2016年教育部产学合作 协同育人项目立项课程“Web前端技术”而编写，配套学习资源包括实 例代码、习题、教学课件和试题等，可通过人民邮电出版社人邮教育 社区（www.ryjiaoyu.com）下载使用。MOOC课程可以通过人邮学院

（www.rymooc.com）平台进行学习，读者可扫描二维码查看本书MOOC 课程页面。 致谢及反馈 本书由济南大学范玉玲、段春笋、张芊茜主编，负责主体设计及 内容的编写，由济南大学周劲负责总体审核，济南大学董立凯、赵燕 和刘淑辉等负责内容审核、整理工作，山东女子学院仲晓芳负责各类 材料收集、整理工作。另外，学生刘晓露、吕中华、张华鑫参与了项 目的审核及验证工作，在此对他们表示由衷的感谢。 虽然编者已经尽了最大努力，但水平有限，书中难免存在不妥之 处，请读者和同仁不吝指正。

第1章 网站开发基础知识 学习要求 • 了解互联网的访问过程和工作机制。 • 理解浏览器与服务器、WWW（万维网）、IP地址与域名等最基本 的概念。 • 理解网站、网页、静态网页和动态网页等概念。 • 熟练使用文本编辑工具Notepad++。 本章主要介绍网页的基本组成、网页设计的基本概念和Web的工作 原理。要求读者重点掌握网页设计涉及的基本概念，能够熟练使用编 辑工具，如Note Pad++等。

1.1　网页初识 说到网页，其实大家并不陌生，人们常常通过网页浏览新闻、查 询信息、网上购物。那么网页究竟是什么？一个琳琅满目的网页中包 含了哪些元素？图1-1所示的页面，包括了导航栏、表单、超链接、图 片和文本等。 图1-1 网页初识 网页文件是一个包含HTML标签的纯文本文件，它可以存放在世界 某个角落的某一台计算机中，通过超链接实现网页间的互联。世界各 地的人们需要通过浏览器来阅读。网页文件通常是HTML格式的，是构 成网站的基本元素，是承载各种网站应用的平台。 为了界面美观并能够突出网页的内容和主题，可以选择使用不同 的元素来表现。设计者可使用表格来控制网页中的信息的布局方式， 可使用图像来直观地展示效果，可使用表单来获取用户的输入信息。 网页主要由文字、图形和超链接等元素构成。当然，除了这些元 素，网页中还可以包含音频、视频及Flash等。

1．文字 文字是网页发布信息所用的主要形式。由文字制作出的网页占用 空间小，因此，当用户浏览时，这类网页可以很快地展现在用户面 前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存 为”功能将其下载下来，便于以后阅读和长期保存，也可对其进行编 辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板、不活 泼的感觉，使读者没有往下浏览的欲望。 所以，设计文字性网页时一定要注意编排，包括标题的字体字 号、内容的层次样式、是否需要变换颜色进行点缀等。 标题：醒目的标题和副标题，使浏览者一眼就能看到要点，并找 到继续阅读的兴趣点。另外标题还具有将网页文档分段的功能，使浏 览者便于阅读。 字体：字体的选择能够体现出网站设计的实用性和创意性，但是 有些字体在开发者的计算机上有，浏览者的计算机上却未必装载这种 字体，只能以默认字体显示。CSS3新增的@font-face属性会首先找到 服务器上的字体，然后下载并渲染客户端浏览器的文字。这样就彻底 解决了本地操作系统中没有对应字体的问题。 字号：网页中的文字不能太大或太小。太大会使得一个网页信息 量变小，太小又使人们浏览时感到费劲。另外文字大小的确定还与设 备和视距有关。一个设计优秀的网页中的文字，应统筹规划，大小搭 配适当。 2．图形 一个设计优秀的网页除了有能吸引浏览者的文字形式和内容外， 图形的表现功能是不能低估的。这里的图形概念是广义的，它可以是 普通的绘制图形、图像或者动画。网页上的图形最常使用JPEG、GIF和 PNG三种格式，它们具有跨平台的特性，可以在不同操作系统支持的浏 览器上显示。图形在网页中可用于菜单按钮、背景图和链接标志。 菜单按钮：网页上的菜单按钮有一些是由图形制作的，通常有横 排和竖排两种形式，由此可以转入不同的页面。

背景图：为了加强视觉效果，有些网页在整个网页的底层放置了 图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友 好。但图片是影响网页下载速度的重要原因，把一个网页全部内容控 制在30KB左右可以保证比较理想的下载时间，否则2秒的延迟就可能丢 失大量的浏览者。 链接标志：通过链接可以从一个网页转到另一个网页，也可以从 一个网站转到另一个网站。链接的标志有文字和图形两种。设计者可 制作一些精美的图形作为链接按钮，使它和整个网页融为一体。 3．超链接 超链接是从一个网页指向另一个目的端的链接。超链接实现了网 页与网页之间、网页与站点间的跳转。各个网页链接在一起后，才能 真正构成一个网站。 4．音频 声音是多媒体和视频网页重要的组成部分。背景音乐可以增加浏 览者的感官享受。浏览器支持的音频格式有MP3、OGG和WAV等。 5．视频 视频文件的采用使网页效果更加精彩且富有动感。

1.2　基本概念 本节介绍基本的网页设计概念：WWW、URL、HTTP、IP地址、域 名、DNS、静态网页和动态网页等。这些概念在今后的网页设计中经常 会遇到，理解它们的含义和作用，对设计和制作网页都非常重要。 1．WWW WWW是“World Wide Web”的缩写，也被称作“Web”“3W”，中 文称为“万维网”，是一个由许多互相链接的超文本组成的系统。在 这个系统中，每个有用的事物都称为“资源”，并且由一个全局“统 一资源标识符”（URI）标识。这些资源通过超文本传输协议 （Hypertext Transfer Protocol，HTTP）传送给用户，浏览者通过单 击链接来获得资源。 通过万维网，人们只要通过简单的方法，就可以迅速方便地取得 丰富的信息资料。 2．URL 统一资源定位符（Uniform Resource Locator，URL）是互联网上 标准资源的地址，包括资源位置和访问方法。互联网上的每个文件都 有一个唯一的URL。 上网浏览网页，用鼠标单击打开不同的网页就是连接到不同URL的 过程，这个过程中URL都会显示在浏览器的地址栏里，图1-2所示为济 南大学的网站。

图1-2 URL举例 图1-2方框中的http://www.ujn.edu.cn部分就是济南大学的URL。 如果用户访问的是清华大学的网站，浏览器上就会显示 “http://www.tsinghua.edu.cn/”，即清华大学网站的URL。 URL通常包括三个部分：第一部分是协议（或称为服务类型），告 诉浏览器该如何工作；第二部分是文件所在的主机；第三部分是文件 的路径和文件名。 URL格式基本语法： 协议://主机[:端口][/文件] 当前最流行的协议是HTTP，还有File、FTP、Gopher、Telnet、 News等，例如： file://ftp.linkwan.com/pub/files/foobar.txt 其中File协议主要用于访问本地计算机中的文件，主机是由 ftp.linkwan.com部分约定，文件在pub/files/目录下，文件名为 foobar.txt。 3．HTTP HTTP是互联网上应用最广泛的一种网络协议，设计HTTP最初的目 的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加

高效，使网络传输量减少。它不仅保证计算机正确快速地传输超文本 文档，还能确定传输文档中的哪一部分内容首先显示（如文本先于图 形）等。 HTTP传输的数据都是未加密的，也就是明文的，因此使用HTTP传 输隐私信息非常不安全。为了保证这些隐私数据能加密传输，网景公 司设计了SSL（Secure Sockets Layer）协议，用于对HTTP传输的数据 进行加密，从而就诞生了HTTPS。 简单来说，HTTPS协议是由SSL+HTTP构建的可进行加密传输、身份 认证的网络协议，要比HTTP安全。 4．IP地址 IP地址是互联网协议地址，是IP Address的缩写。Internet上的 每台主机（Host）都有一个唯一的IP地址。就像是家庭住址一样，如 果要写信给一个人，需要填写地址，邮递员才能把信送到。计算机发 送信息就好比是邮递员，它必须知道唯一的“地址”才能不至于把信 送错地址。只不过写信的地址使用文字来表示，而计算机的地址用二 进制数字表示。 IP就是使用这个地址在主机之间传递信息，这是Internet 能够运 行的基础。IP地址的长度为32位（共有232个IP地址），分为4段，每 段8位，通常用“点分十进制”表示成（a.b.c.d）的形式，其中，a、 b、c、d 都是 0～255 的十进制整数。如 100.4.5.6，实际上是 32 位二进制数：01100100.00000100.00000101.00000110。 IP地址可以视为网络标识号码与主机标识号码两部分，因此IP地 址可分两部分组成，一部分为网络地址，另一部分为主机地址。设计 者必须决定每部分包含多少位。网络号的位数直接决定了可以分配的 网络数（计算方法：2网络号位数-2）；主机号的位数则决定了网络中最 大的主机数（计算方法：2主机号位数-2）。然而，由于整个互联网所包 含的网络规模可能比较大，也可能比较小，设计者选择了一 种灵活的方案：将IP地址空间划分成不同的类别，每一类均具有 不同的网络号位数和主机号位数。IP地址通常分为A、B、C、D、E五 类，它们适用的类型分别为：大型网络、中型网络、小型网络、多目 地址、备用。常用的是B和C两类。

5．域名 IP地址是Internet主机作为路由寻址用的数字型标识，人们不容 易记忆。因而产生了域名（Domain Name）这种字符型标识。就像每个 人用身份证号码作为唯一的标识，但是在日常生活中还是用名字来替 代身份证号码一样。 域名由两个或两个以上的词构成，域名中的词由若干个a～z的拉 丁字母或阿拉伯数字组成，每一个词不超过63个字符，也不区分大小 写字母。词中不能使用除连字符“-”外其他的任何符号。级别最低的 域名写在最左边，而级别最高的域名写在最右边。由多个词组成的完 整域名总共不超过255个字符。 域名不仅便于记忆，而且即使在IP地址发生变化的情况下，通过 改变解析对应关系，域名仍可保持不变。 例如，济南大学的域名是ujn.edu.cn，清华大学的域名是 tsinghua.edu.cn。 最右边的词称为顶级域名，顶级域名分为两类： 一是国家顶级域名，例如，中国是.cn，美国是.us，日本是.jp 等； 二是国际顶级域名，例如，.com表示商业机构，.net表示网络提 供商，.org表示非营利组织，.edu表示教育机构，.gov表示政府机构 等。 例如，百度的域名baidu.com，标号“baidu”是这个域名的主 体，后边的标号“.com”是该域名的后缀，代表这是一个商业机构。 6．DNS 互联网上每台主机的IP地址和域名之间是如何对应的呢？当用户 在浏览器里输入域名访问的时候，怎么才能找到唯一对应的那台主机 地址呢？ 在Internet上，域名与IP地址之间是一对一（或者多对一）的， 域名虽然便于人们记忆，但机器之间只能互相识别IP地址，将域名映

射为IP地址的过程就称为“域名解析”，域名解析需要由专门的域名 解析服务器来完成。 DNS 是域名系统（Domain Name System）的缩写，它由域名解析 器和域名服务器组成。域名服务器是保存该网络中所有主机域名和IP 地址的对应关系，并将域名转换为IP地址功能的服务器。其中域名必 须对应一个IP地址，而一个IP地址可能会有多个域名与之对应。 7．静态网页和动态网页 在网站设计中，网页是构成网站的最基本元素，通常网页分为静 态网页和动态网页两类。 静态网页是指利用HTML脚本语言编写的标准HTML网页。它的文件 扩展名是.htm、.html、.shtml、.xml，可以包含文本、图像、声音、 Flash动画、客户端脚本和Active X控件及Java小程序等。静态网页是 网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页 是指没有后台数据库、不含程序和不可交互的网页，一般适用于更新 较少的展示型网站。它也可以出现各种动态的效果，如GIF格式的动 画、Flash、滚动字幕等，这些“动态效果”只是视觉上的动态。 所谓的动态网页，是指与静态网页相对的一种网页，页面代码虽 然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作 的结果而发生改变。它的文件扩展名可以 是.aspx、.asp、.jsp、.php、.perl、.cgi等。 需要强调的是，不要将动态网页和页面内容是否有动感混为一 谈。动态网页是基本的HTML语法规范与Java、PHP等高级程序设计语 言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高 效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了 HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成 的网页都是动态网页。

1.3　Web工作原理 用户启动客户端浏览器后，在浏览器中输入将要访问页面的URL地 址，由DNS进行域名解析，找到服务器IP地址，向该地址所指向的Web 服务器发出请求。整个访问过程如图1-3所示。

图1-3 Web工作原理 Web服务器根据浏览器送来的请求，把URL地址转换成页面所在服 务器上的文件全名，查找相应的文件。 如果URL指向静态HTML文档，Web服务器使用HTTP把该文档直接送 给浏览器。如果HTML文档中嵌入了ASP、PHP或JSP程序，则由Web服务 器运行这些程序，把结果送到浏览器。如果Web服务器运行的程序包含 对数据库的访问，则服务器将查询指令发送给数据库服务器，对数据 库执行查询操作。 查询结果由数据库返回Web服务器，再由Web服务器将结果数据嵌 入页面，并以HTML格式发送给浏览器。 浏览器解释HTML文档，在客户端屏幕上展示结果。

1.4　前端开发技术简介 Web前端常用的开发技术包括HTML、CSS、Java Script、j Query 和Ajax等。 1.4.1　常用技术 HTML（Hyper Text Markup Language，超文本标记语言）是一种 用来制作超文本文档的简单标记语言，是网页制作的基本语言，也是 一种规范或标准。网页文件本身是一种文本文件，通过添加各种标记 符号告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何 安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标 记符解释和显示其标记的内容。 CSS（Cascading Style Sheets，层叠样式表）是标准的布局语 言，用来排版和显示HTML元素。CSS能够对网页中元素位置的排版进行 像素级精确控制，支持几乎所有的字体、字号、样式，拥有对网页对 象和模型样式编辑的能力。CSS不仅可以静态地修饰网页，还可以配合 各种脚本语言动态地对网页各元素进行格式化。 Java Script是一种解释性的，基于对象的脚本语言，被广泛用于 Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更 流畅美观的浏览效果。Java Script是目前发展最快的语言之一，从一 个可以将一些交互性带入网页的工具，发展成为一个可以进行高效服 务器端开发的工具。 j Query是一个快速、简洁的Java Script框架。j Query设计的宗 旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事

情。它封装Java Script常用的功能代码，提供一种简便的Java Script设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交 互。j Query的核心特性可以总结为：具有独特的链式语法和短小清晰 的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行 扩展；拥有便捷的插件扩展机制和丰富的插件。j Query兼容各种主流 浏览器，如IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+等。 Ajax即“Asynchronous Java Script And XML”（异步Java Script和XML），是指一种创建交互式网页应用的网页开发技术。通过 在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行 更新。 1.4.2　开发框架 使用Web开发框架，可以帮助开发者提高Web应用程序、Web服务和 网站等Web开发工作的质量和效率。目前，互联网中有大量的Web开发 框架，每个框架都可以为用户的Web应用程序提供功能扩展。 Bootstrap就是一款响应式的、直观并且强大的前端框架。 Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个 CSS/HTML框架。Bootstrap基于HTML5和CSS3开发，它在 j Query的基 础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼 容大部分j Query插件。Bootstrap中包含了丰富的Web组件，根据这些 组件，可以快速搭建一个美观、功能完备的网站。其中包括以下组 件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、 分页、排版、缩略图、警告对话框、进度条、媒体对象等。借助开发 框架，Web开发可以事半功倍。