配套课件-HTML+CSS+JavaScript网页设计教程.ppt

1、HTML+CSS+JavaScript网页设计目 录CONTENTS第一章 网页设计综述第二章 HTML语言第三章 CSS第四章 JavaScript第五章 网页设计综合案例第一章 网页设计综述01第一章 网页设计综述 Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。第一章 网页设计综述1.1 We

2、b起源1.2 Web工作原理1.3 浏览器1.4 网页开发工具1.5 基本概念1.6 网页开发技术简介1.7 牛刀小试-做一个简单的网页目 录第一章 网页设计综述Web 前身Web的应用架构第一个Web服务器Web技术标准1980年Tim Berners-Lee负责的Enquire（Enquire Within Upon Everything的简称）项目。Web的应用架构是由英国人Tim Berners-Lee在1989年提出的1990年11月第一个Web服务器info.cern.ch开始运行，由Tim Berners-Lee编写的图形化Web浏览器第一次出现在人们面前。1991年，CERN（

3、European Particle Physics Laboratory）正式发布了Web技术标准。目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。1.1 Web起源第一章 网页设计综述1.2 Web工作原理用户通过Web来访问网络资源是，用户所使用的电脑一般叫做客户端，而存放网络资源的电脑叫做服务器，客户端和服务器之间的访问是通过HTTP（Hypertext Transfer Protocol，超文本传输协议）来完成的。用户在客户端的浏览器地址栏中输入所要访问网站的统一资源定位符（Uniform Resource Loca

4、tor，URL），就会向指定的Web服务器发送一个HTTP请求，告诉Web服务所要访问的资源。Web服务器接收到客户端的请求后，通常还会调用部署在应用服务器上的应用来进行数据库访问等操作，最后会把客户端所请求的资源通过HTTP协议发送给客户端。第一章 网页设计综述图1-1 Web工作原理第一章 网页设计综述1.3 浏览器浏览器是一个安装在计算机中的应用软件，它用来显示使用HTML（HyperText Markup Language，超文本标签语言）语言编写的网页文件中的文字、图像、超链接及其他信息。现在常用的浏览器有Internet Exploer、Firefox、Chrome和Opera等。

5、1.3.1 Microsoft Internet ExplorerInternet Explorer是微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer（6.0以前的版本）和Windows Internet Explorer(7.0、8.0、9.0、10.0、11.0等版本)，简称“IE浏览器”。在windows 10上，最新的浏览器为Microsoft Edge。第一章 网页设计综述1.3.2 FirefoxMozilla Firefox，中文俗称“火狐”，是一个开放源代码的网页浏览器，使用Gecko引擎（非IE内核），支持Windows、Mac OS

6、及GNU/Linux等多种操作系统。1.3.3 Google ChromeGoogle Chrome，是一个由Google公司开发的网页浏览器。该浏览器是基于WebKit等开源软件所撰写，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。第一章 网页设计综述1.3.4 OperaOpera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。可以在Windows、Mac和Linux三个操作系统平台上运行。Opera浏览器与其他浏览器相比，更快速、小巧，其标准兼容性获得了国际上的最终用户和业界媒体的承认和推崇。第一章 网页设计综述第一章

7、 网页设计综述1.4 网页开发工具可用于开发网页的工具很多，从最简单的纯文本编辑工具记事本（NotePad）、增强版的文本编辑工具EditPlus，到专门的网页设计工具Dreamweaver、WebStrom等，都可以用于网页的设计与开发。1.4.1 记事本记事本是Windows系统中的一个纯文本编辑器，具备最基本的的编辑功能，其体积小巧、启动快、占用内存低、容易使用。使用记事本编辑代码不会产生冗余的代码。第一章 网页设计综述1.4.2 EditPlusEditPlus是一款由韩国Sangil Kim（ES-Computing）出品的小巧但功能强大的文本编辑器。EditPlus是一个非常好用的

8、HTML编辑器，它除了支持颜色标签、HTML 标签，还内建完整的HTML&CSS1 指令功能，对于习惯用记事本编辑网页的用户，它可帮你节省大量的网页制作时间。1.4.3 DreamweaverAdobe Dreamweaver，简称”DW”，中文名称为”梦想编织者”，是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。第一章 网页设计综述1.4.4 WebStormWebStorm 是Jetbrains公司旗下一款JavaScript

9、 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”等。其提供的智能的代码补全、代码格式化、HTML代码提示、代码重构等功能，为网页设计与开发提供了极大的便利。第一章 网页设计综述第一章 网页设计综述1.5 基本概念从事网页设计工作，需要掌握和了解一些相关的专业术语，如WWW、HTTP、URL、Internet、W3C等。1.5.1 Internet网络Internet，中文正式译名为因特网，又叫做国际互联网。互联网实现了全球资源的共享，形成了一个能够共同参与、相互交流的互动平台。通过互联网，远在千里之外的朋友可以相互发送邮件、协同完成一个项目、共同娱乐。I

10、nternet是在美国早期的军用计算机网ARPANET（阿帕网）的基础上经过不断发展变化而形成的。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。一旦你连接到它的任何一个节点上，就意味着您的计算机已经连入Internet网上了。第一章 网页设计综述1.5.2 WWWWWW是环球信息网的缩写，（亦作“Web”、“WWW”、“W3”，英文全称为“World Wide Web”），中文名字为“万维网”，“环球网”等，常简称为Web。分为Web客户端和Web服务器程序。WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。Web是一个由许多互相链接的超文本组成的系统，通过互联网

11、访问。在这个系统中，每个有用的事物，称为一样“资源”；由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。第一章 网页设计综述1.5.3 URLURL（Uniform/Universal Resource Locator的缩写，统一资源定位符）是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个资源都有一个唯一的URL，它包含的信息指出文件

12、的位置以及浏览器应该怎么处理它。一个完整的URL包括访问协议类型、主机地址、路径和文件名称等几个部分。其中”访问协议类型”表示采用什么协议访问哪类资源，以便浏览器决定用什么方法获得资源，第一章 网页设计综述1.5.4 HTTP超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议，是万维网交换信息的基础。它详细规定了浏览器和Web服务器之间相互通信的规则，它允许将超文本标签语言编写的文档从Web服务器传送到Web浏览器。1.5.5 W3C万维网联盟（英语：World Wide Web Consortium，简称W3C），中文名字为

13、“万维网联盟”，又称W3C理事会。万维网联盟是国际上最著名的标准化组织。1994年10月在麻省理工学院（MIT）计算机科学实验室成立。该组织发不了很多Web技术标准和实施指南，如超文本标签语言（HTML）、可扩展标签语言（XML）等。第一章 网页设计综述第一章 网页设计综述1.6 网页开发技术简介HTML、CSS和JavaScript是设计网页需要掌握的三种基本技术，HTML用于定义网页的内容，CSS用于设计网页元素的表现形式，而JavaScript是与访问网页的用户进行交互的工具。第一章 网页设计综述1.6.1 HTML简介HTML（HyperText Markup Language，超文本

14、标签语言），是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。HTML是一种标签式的语言，通过各种不同的标签来描述网页中的文本、图片和声音等网页元素。使用HTML标签设计的网页文件是一个纯文本文件，该文件中的HTML代码由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本第一章 网页设计综述下图是青岛职业技术学院的网站首页在浏览器中的样子：图1-2 青岛职业技术学院网站首页 第一章 网页设计综述这个首页网页文件的HTML

15、源代码基本内容和结构如下图所示：该文件需要遵循的XML规范网页的头部定义浏览器标题提示网页的文字、图片等元素都放在标签之中定义一个无序列表网页文件的开始标签第一章 网页设计综述 HTML语言发展至今，先后经历了HTML 1.0、HTML 2.0、HTML 3.0、HTML.4.0、HTML 4.01等5个主要的版本。值得一提的是W3C组织于2000年底发布的XHTML，作为一个更严谨纯净的HTML版本，其目的是为了实现HTML向XML的过渡，其可扩展性和灵活性将适应未来网络应用的需求，HTML 5是最新的HTML版本，W3C正式于2008年1月正式发布草案，2014年10月定稿。由于各浏览器对

16、HTML 5的支持不统一，所以其应用受到一定限制，但其优秀的跨平台特性，使得应用HTML 5开发的应用也越来越多。第一章 网页设计综述1.6.2 CSS简介层叠样式表(英文全称：Cascading Style Sheets)，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言，可以用来表现HTML或XML等文件样式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。使用CSS样式可以控制许多仅使用HTML无法控制的属性。HTML是一种标签性语言。当在浏览器中打开一个HTML网页时，浏览器将读取该网页中的HTML标签，并根据内置的解析规则将网

17、页元素呈现出来。CSS决定浏览器将如何描述HTML元素的表现形式。换而言之，CSS以HTML为基础，提供了丰富的样式，可以设置网页元素的字体、颜色、背景及整体排版等，还可以针对不同的浏览器设置不同的样式。1996年12月，W3C发表了第一个有关样式的标准CSS1，1998年5月发布了CSS2，目前CSS最新版本为CSS3。第一章 网页设计综述例如，下面这段HTML代码,在网页中的显示结果如图1-3所示：图1-3 标签的默认显示样式第一章 网页设计综述如果我们使用CSS定义了这个标签的默认样式后，上面的HTML代码在网页中的显示就是这个样子：图1-4 使用CSS改变标签的默认显示样式第一章 网页

18、设计综述1.6.3 JavaScript简介JavaScript是一种基于对象（Object）和事件驱动（Event Driven），并具有安全性能的脚本语言，具有简单、动态、弱数据类型和跨平台等特性。现在广泛用于浏览器客户端，通过JavaScript可以设计出与用户进行交互并相应相应事件的动态网页，例如设计出下拉菜单、实现图片轮播等动态效果，给HTML网页增加动态功能。一个完整的JavaScript实现是由以下3个不同部分组成的：ECMAScript：描述了JavaScript语言的组成、语法和基本对象。文档对象模型（DOM）：描述处理网页内容的方法和接口。浏览器对象模型（BOM）：描述与浏

19、览器进行交互的方法和接口。第一章 网页设计综述 通过前面的学习，我们已经对网页设计的基本概念、一个网页的基本结构、设计网页需要的HTML、CSS和JavaScript等技术，有了一个基本的了解，下面我们使用EditPlus来做一个简单的仿照百度网站首页的网页：图1-5 百度网站的首页1.7牛刀小试-做一个简单的网页第一章 网页设计综述1.7.1 准备工作在设计一个网站时，通常需要将网站所需的图片文件、CSS样式文件、HTML网页文件、JavaScript脚本文件放在不同的目录下，所需建立的基本目录结构如下图所示：网站根目录存放CSS样式文件的子目录存放HTML网页文件的子目录存放图片文件的子目

20、录存放JavaScript文件的子目录图1-6 网站的基本目录结构将百度网站的图标这个图片文件放在images目录下。第一章 网页设计综述1.7.2 编写HTML代码 打开EditPlus，选择File-New-HTML Page，EditPlus会生成一个网页文件的基本结构，只需要把百度首页的百度标识图片、搜索内容输入框和”百度一下”按钮等三个网页元素对应的HTML代码输入在网页文件中，就可以得到一个类似于百度首页的网页了。网页源代码如下：图1-7 仿百度首页的网页基本HTML代码第一章 网页设计综述 把这个网页存储到上面建好的html目录下，文件名为：index.html。然后，在浏览器中

21、打开这个网页文件，显示的结果是这样子的：图1-8 仿百度首页网页在浏览器中的显示结果 这个网页离我们经常使用的百度首页的显示效果差别还很大，下面就需要使用CSS来设计这三个基本的网页元素的样式了。第一章 网页设计综述1.7.3 设计CSS样式 对于刚才设计好的这个网页，可以使用CSS样式来实现网页内容居中显示、搜索内容输入框大小修改、“百度一下”按钮颜色和对齐方式等效果。添加的CSS样式代码如下图所示：图1-9 仿百度首页网页添加的CSS样式代码第一章 网页设计综述1.7.4 添加CSS样式后网页的显示效果使用CSS样式修改了网页元素的对齐方式、字体大小、颜色等默认的显示效果后，所得到的仿百度

22、首页的网页，在浏览器中显示效果就是这样子了：图1-10添加样式后网页在浏览器中的显示结果第二章 HTML语言02第二章 HTML语言HTML指的是超文本标签语言（HyperText Markup Language，简称HTML）是一种用于创建网页（Web页面）的标签式语言，HTML使用标签来描述网页，可以用于构建Web站点中的网页，网页中包含了HTML标签及文本内容。HTML被用来对网页的内容（文字、图片等）进行结构化处理，由浏览器来解释执行。第二章 HTML语言2.1 HTML基本语法2.2 HTML文档基本结构2.3 HTML文档头部相关标签2.4 段落与文本格式化2.5 列表2.6 超链

23、接目 录2.7 图像与多媒体2.8 表单2.9 表格2.10 框架2.11 HTML 5结构元素第二章 HTML语言2.1 HTML基本语法HTML是一种标签式语言，通过使用各种不同的标签来定义网页元素。HTML标签是由尖括号包围的关键词，例如。HTML标签通常分为单标签和双标签。HTML标签对大小写不敏感，对于浏览器来说，、和都是同一个标签。2.1.1 双标签HTML标签通常是成对出现的，双标签由开始标签和结束标签两部分组成，必须成对使用，基本格式为：内容例如：这是一段文字 标签可以成对嵌套，但是不能交叉使用。例如，我们可以在标签中嵌套一个标签：在h3标签中正确嵌套i标签但这样交叉嵌套是错误

24、的：在h3标签中正确嵌套i标签第二章 HTML语言2.1.2 单标签单标签是指可以单独使用即可表达明确意思的标签，不需要成对出现的。单标签的基本格式为：或按照XHTML1.0规范要求，单标签也需要加上结束标志，即要使用这样的格式。常用的HTML单标签有：换行标签、水平分割线标签等。2.1.3 属性大多数的HTML标签都具有属性，通过设定属性值，可以让标签在浏览器中有不同的表现形式。HTML标签属性的基本语法是：例如：这是一段居中对齐效果的段落第二章 HTML语言2.1.4 注释作为一个合格的Web前端开发工程师，需要养成良好的变成习惯，如在网页文件中添加一定的注释，以提高代码的可读性和可维护性

25、。网页文件中所添加的注释，在浏览器中显示的时候，会被忽略掉。在HTML代码中有两种添加注释的方法：1.使用标签基本语法格式为：注意，左尖括号、感叹号和 两个横线（）是注释结束符号。2.使用标签是一个双标签，其基本语法格式为：注释信息开始标签和结束标签之间的是注释内容。第二章 HTML语言2.2HTML文档基本结构一个完整的HTML文档，是由头部head和主体body两部分组成。HTML文档以标签开始，以标签结束。所有的HTML代码都位于这两个标签之间。图2-2 HTML文档结构图图2-2 HTML文档结构图第二章 HTML语言标签位于文档的最前面，用于向浏览器说明当前文档使用的是那种HTML规

26、范，有助于浏览器能够正确的显示网页。图2-2中的HTML代码使用的是HTML 4.0规范。最新的HTML 5规范，将该标签简化为：。注意，doctype声明是不区分大小写的。标签用于告诉浏览器，这是一个Web文档，要按照HTML语言规范对文档内容进行解释。是HTML的头部标签，用于定义网页的标题、元标签、引入的外部样式表、脚本文件等信息。一个HTML文档只能有一对标签。标签之间的内容就是用HTML标签来定义的在网页中要显示的文字、图片等信息。只有之间的内容才会在浏览器中显示出来。第二章 HTML语言2.3 HTML文档头部相关标签HTML文档的头部标签主要包含页面的标题标签、元信息标签、引入外

27、部的样式表、脚本文件等标签，标签所包含的信息一般不会显示在网页上。2.3.1 页面标题标签标签用于定义HTML文档的标题，标签之间的内容将显示在浏览器窗口的标题栏中，其基本的语法格式为：网页标题内容（录屏）第二章 HTML语言2.3.2 元信息标签标签用于提供网页的元信息，这些信息不会显示在网页上，但是对于浏览器来说是可读的，用于设置网页的搜索关键字、网页的编码格式等。标签有两个属性：http-equiv和name。http-equiv属性：模拟http协议文件头信息，当信息从服务器传到客户端时，告诉浏览器如何正确显示网页内容。该属性一般与content属性配合使用，content属性用于指定

28、信息的详细参数。name属性：用于设置网页的搜索关键字、版权信息、网页作者等。具体的内容由content属性来设置。，name 属性用于描述网页，它是名称/值对中的名称，主要取值为author、description、keywords、robots、viewport等，name属性所描述的具体内容，由content属性设置。第二章 HTML语言，http-equiv 属性提供HTTP协议的响应头，用于给浏览器提供一些响应信息，它是名称/值对中的名称。http-equiv属性的值所描述的具体内容，通过content属性来设置。1.name属性的设置（1）定义网页关键词，该语句告诉搜索引擎，该网页

29、的关键词是HTML、CSS、PHP和JavaScript。（2）定义网页的基本描述，该语句用于说明网站的主要内容是什么。（3）定义网页作者，该语句用于说明该网页的作者为Aaron。第二章 HTML语言2.http-equiv属性的设置（1）页面重定向和刷新，该语句用于定义当前网页多长时间刷新或者重定向到制定的URL地址。content内的数字代表时间（秒），即多少时间后刷新。如果指定了url，则经过设定时间后，会重定向到指定网页URL所指向的地址。（2）设置网页编码,该语句告诉浏览器，这是一个html文件，需要用UTF-8的编码格式进行解释。（要注意网页源文件的编码格式也要采用UTF-8进行编

30、码）。通常将网页的编码设置为UTF-8会有更好的兼容性，对中文显示的支持也比较好。在HTML 5中，设置当前网页的字符编码为UTF-8，可以简化为如下的语句：第二章 HTML语言2.3.3 其他标签 在标签之间，还可以使用标签将外部的层叠样式表（CSS）文件引入到当前网页中，或者使用标签将外部的JavaScript代码引入到当前网页文件中。这两个标签的具体使用方法，我们会在第3章CSS和第4章JavaScript进行详细讲解。第二章 HTML语言2.4段落与文本格式化要设置网页中文字的字体、颜色、字号等内容，或者对网页中的文字进行分段等，需要用到、等文字分段和文本格式化相关的HTML标签。2.

31、4.1 标签标签用于设定网页中文本的字体、字体大小、字体颜色等属性。该标签在HTML 5规范中不推荐使用，其基本的语法格式为：文本内容1.face属性：设定位于之间文本的字体名称。字体名称可以是多个，用“,”分隔开字体名称即可。浏览器使用时，从左向右依次选择。2.size属性：设定位于之间文本的字体大小。取值为1至7，数字越大，字体也会变得更大。第二章 HTML语言3.color属性：设定于之间文本的字体颜色。可以使用两种颜色表示方法，一种是使用颜色的英文名称，另一种是使用#后面跟6位分别表示红、绿、蓝三种颜色的16进制数字组合成的颜色。例如#ff0000表示的是红色，#00ff00表示的是绿

32、色，#0000ff表示的是蓝色。2.4.2 样式标签 样式标签用于告诉浏览器应该以何种格式显示文字，例如把文字显示为加粗、加下划线等显示效果。常用的样式标签如下表所示：第二章 HTML语言序序号号标签标签效果效果加粗显示的文字加粗斜体显示的文字斜体文字下面有下划线下划线文字中间有删除线删除线上标显示的文字上标下标显示的文字下标字体变小变小字号字体变大变大字号打字机字体打字机字体表示缩写缩写地址地址引用引用（斜体）固定宽度字体固定宽度显示的计算机代码强调显示的文本黑体强调文字表2-1 常用的物理样式标签第二章 HTML语言2.4.3 2.4.3 段落标签段落标签标签在网页中用来开始一个新的段落，

33、用于对网页中的文字进行分段，浏览器会自动在标签的前后添加一些空白，这些空白的大小可以使用样式表进行控制。标签的基本语法为：段落的正文内容align属性用于设置标签之间文字的对齐方式：（1）left:左对齐（2）center：居中（3）right：右对齐（4）justify：两端对齐第二章 HTML语言2.4.4 2.4.4 换行换行 标签标签网页内容在浏览器中的显示形式，都是由各种标签来设置的。所以，即使在网页源文件中使用回车符对文字内容进行了换行，实际在浏览器中显示的时候，文字内容仍然会在同一行中。如果要强制让显示的内容产生换行的效果，就需要用到标签，这是一个单标签。第二章 HTML语言2.

34、4.5 2.4.5 水平分割线水平分割线 标签标签标签也是一个单标签，用于在网页中显示出一条水平的分割线，这条分割线的颜色、粗细和长度都可以通过设置该标签的相关属性来实现。该标签的基本语法格式为：width属性：用于设置水平线的宽度，可以使用像素或者百分比的方式。size属性：以像素(px)为单位设置水平线的高度。color属性：设置水平线的颜色align属性：设置水平线的对齐方式第二章 HTML语言2.4.6 2.4.6 内容居中标签内容居中标签标签之中的内容，不管是文字、图片或者其他对象，在浏览器中都会居中显示。2.4.7 2.4.7 预格式化标签预格式化标签设计网页的时候，如果需要保留文

35、字中的空格、换行或者缩进的效果，就可以将该段文字放在标签之间。标签会把一段文字在网页源文件中的编辑效果原样展示在浏览器中，所以在做诗歌内容的网页时，可以使用该标签。如果不使用标签，即使在网页源文件中的文本内容有空格、换行，将来在浏览器中显示的时候，空格和换行也会被过滤掉。第二章 HTML语言2.4.8 2.4.8 标题标签标题标签-标签可定义不同大小的标题，其中 定义的标题最大。定义的标题最小。在实际的网页设计中，一般不使用标题标签来设定显示内容字体的大小，通常使用样式表来实现。第二章 HTML语言2.4.9 2.4.9 和和标签标签和标签并没有特别的意义，在设计网页时，通常用作其他网页元素或

36、者文字的容器，可以使用CSS样式灵活的定义他们的位置，或者使用JavaScript来动态修改其中的内容。1.标签 DIV（division）是分区或者分节的意思。标签是一个块级标签，该标签中的内容会独占一段。其基本语法是：div中的其他网页元素 和其他HTML标签一样，也可以为标签指定其id、class和style属性，标签的这几个属性通常用于设置其样式来用。标签中不仅可以包含文字、图像、音视频等HTML元素，也可以包含，这样就形成了图层之间的嵌套，以实现复杂的网页布局设计。第二章 HTML语言2.标签 标签是行内标签（行内元素），标签中的的内容不会单独占用一行，也就是说标签的前后不会自动换行

37、。通常用标签来作为动态显示的内容，例如在用户注册界面中的文本框后面的提示文字。标签的基本语法是：设计网页时，我们可以把一个标签的display样式设置为：none，实现隐藏，在需要显示的时候，再把它的样式的display属性设置为：inline，即可实现动态显示标签之间内容的效果。第二章 HTML语言2.5 2.5 列表列表使用HTML提供的列表标签可以将网页中的信息进行合理的布局，通过有序或者无序的方式显示出来。HTML中提供了多种列表标签，比较常用的有无序列表、有序列表和自定义列表。在实际的网页设计工作中，通常把列表和样式表结合起来，实现更为美观的显示效果。2.5.1 2.5.1 无序列表

38、标签无序列表标签 标签通过在相关信息的前面加上“圆点”等与次序无关的符号来展示信息。该标签的语法格式为：列表项列表项标签的type属性有三种取值：1.disk：实心圆形2.circle：空心圆形3.square：实心正方形第二章 HTML语言2.5.2 有序列表标签标签通过在相关信息的前面加上“数字”等与次序有关的符号来展示信息。该标签的语法格式为：列表项列表项type属性的取值：1|A|a|I|i，分别表示列表项前面的序号按照数字、大写英文字母、小写英文字母、大写罗马字母、小写罗马字母的方式来显示。start属性定义有序列表的起始编号。例如，将type属性设置为“a”，start属性设置为“

39、3”，则第一个列表项前面的变化将显示为小写字母“C”第二章 HTML语言2.5.3 自定义列表设计网页时，除了可以使用样式表与、标签进行网页布局之外，还可以使用标签来定义一个描述列表，例如在做一个程序功能模块发布网页时，就可以使用标签。标签要与 和 标签一起使用，标签用于定义项目，标签用于描述项目。基本的语法格式为：项目1名称 项目1的说明 项目2名称 项目2的说明 项目2的说明第二章 HTML语言2.6 超链接 HTML 语言使用超链接与网络上的其他资源建立连接关系，大多数的网页自身包含有超链接指向其他相关的资源，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像或者是其他可以下载的资

40、源。通过超链接，把有用的相关资源组织在一起的集合，就形成了所谓的“万维网”。在浏览器中浏览网页时，当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手，点击这个超链接，就可以跳转到我们感兴趣的资源。第二章 HTML语言2.6.1 超链接标签通过使用 标签在 HTML 中创建链接，具体链接的资源目标，通过标签的href（Hypertext Refrence，超文本引用）属性来指定。有两种使用 标签的方式：1.通过使用 href 属性-创建指向另一个文档的链接2.通过使用 name 属性-创建文档内的书签在所有浏览器中，链接的默认外观如下：1.未被访问的链接带有下划线而且是蓝色的2.已被访

41、问的链接带有下划线而且是紫色的3.活动链接带有下划线而且是红色的标签的基本语法格式为：超链接显示内容 第二章 HTML语言标签几个属性的含义是：1.href属性：使用URL地址定义链接所指向的目标资源。关于使用URL地址表示资源的详细方式可以参阅1.5.3 URL的相关内容。2.name属性：定义文档内链接的锚点（anchor）名称3.title属性：提供关于链接目标的额外信息4.target属性：定义点击超链接打开目标窗口的方式。该属性的取值为：（1）_blank：在一个新的空白窗口中打开超链接（2）_self：在当前框架（或当前窗口）中打开超链接（默认方式）（3）_top：在顶层框架中打开

42、超链接（4）_parent：在窗口主体（或当前框架）的上一层打开超链接（5）framename：在指定的名字的框架中打开超链接第二章 HTML语言2.6.2 路径的表示方法在万维网中，每一个资源（网页、视频、图片等）都可以使用统一资源定位符（URL）进行描述。例如：http:/ HTML语言2.相对路径相对路径是指相对于当前文件所在的路径，跟其它资源文件（或文件夹）的路径关系。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响，因此这种书写形式省略了绝对路径中的相同部分，这样做的优点可以在站点文件所在服务器地址发生改变时，文件夹的所有内部链接都不会出现问题

43、。相对路径适合于引用网站内部的相关资源。相对位置的描述需要用到两个特殊的符号：“.”代表目前所在的目录。“.”代表上一层目录。“/”代表根目录第二章 HTML语言2.6.3 网页内跳转如果一个网页的内容偏多，在浏览网页过程中，需要跳转到当前网页的某个位置，可以使用标签来定义一个书签的方式来实现。1.先定义一个书签通过标签的name属性来定义书签：，即在标签所在的位置定义一个锚点。也可以使用id属性来定义一个书签。2.定义链接到书签的超链接 使用标签的href属性，定义一个超链接，指向书签的定义位置：，即该超链接指向文件名所指定网页文件中的锚点位置。如果是在同一个网页的不同部分跳转，文件名可以省

44、略。第二章 HTML语言02第二章 HTML语言HTML指的是超文本标签语言（HyperText Markup Language，简称HTML）是一种用于创建网页（Web页面）的标签式语言，HTML使用标签来描述网页，可以用于构建Web站点中的网页，网页中包含了HTML标签及文本内容。HTML被用来对网页的内容（文字、图片等）进行结构化处理，由浏览器来解释执行。第二章 HTML语言2.1 HTML基本语法2.2 HTML文档基本结构2.3 HTML文档头部相关标签2.4 段落与文本格式化2.5 列表2.6 超链接目 录2.7 图像与多媒体2.8 表单2.9 表格2.10 框架2.11 HTML

45、 5结构元素第二章 HTML语言2.7 图像与多媒体要构建一个丰富多彩的网站，网页中仅有文字和超链接是远远不够的，图像、音频、视频、Flash动画等多媒体资源可以丰富一个网站的内容，能够吸引更多的访问者。2.7.1 图像标签用来在网页文件中插入图像，通过设置该标签的相关属性，可以设置所插入图像的显示大小、替换文字等。标签的基本语法格式为：标签的属性比较多，使用起来有很大的灵活性，但在网页设计当中，这些属性用的较多的是src、width、height和alt，其他的属性所实现的效果通常使用样式表来进行控制。几个常用属性是：第二章 HTML语言1.src属性：设定要显示图像的URL地址。2.wid

46、th属性：设置图像在浏览器中显示的宽度（像素单位）。3.height属性：设置图像在浏览器中显示的高度（像素单位）4.alt属性：当图片在浏览器中无法显示的时候，替代显示的文字信息。5.border属性：设置图像周围的边框。标签还有align、hspace、vspace等图像对齐方式和间距有关的属性，在实际的网页设计过程中，很少使用这几个属性进行图片和文字的混排，通常使用样式表来控制图文混排的效果。所以这几个属性就不做详细介绍了。第二章 HTML语言2.7.2 图像映射图像映射是指带有可点击区域的一幅图像，要完成图像映射要用到三种标签：标签、标签和标签。1.标签与标签用于定于图像中的映射区域，

47、标签永远嵌套在 标签内部，用于定义图像的具体映射区域。（1）标签的基本语法格式为：标签的name属性所定义的名字，将被标签的usemap属性引用。第二章 HTML语言（2）标签的基本语法格式为：shape属性的取值用于确定映射区域的形状，映射区域的坐标由coords属性来具体指定。如果shape=rect，则映射区域为矩形区域，coords属性的值为x1,y1,x2,y2，用于定义矩形区域的左上角和右下角坐标。如果shape=circle，则映射区域为圆形，coords属性的值为x,y,radius，用于定义圆形区域圆心的坐标和半径。如果shape=poly，则映射区域为多边形，coords的

48、值为x1,y1,x2,y2,xn,yn，用于定义多边形各个顶点的坐标，如果最后一个坐标和第一个不一致，浏览器会自动添加最后坐标，以实现图形的封闭。第二章 HTML语言2.7.3 音频和视频在网页中，适当的插入音频和视频，可以让一个网页呈现出丰富多彩的展示效果，以吸引更多的用户来访问我们的网站。使用HTML 5的和标签，不需要第三方插件就能播放音频和视频，并且用同一的API接口控制，可以很方便的把所需的音频和视频插入到网页当中。1.音频标签标签用于定义网页中的声音，如音乐或音频流等，元素支持MP3、Wav、Ogg等三种常用的格式。该标签的基本语法格式为：第二章 HTML语言 标签的几个属性作用如

49、下：（1）autoplay：如果出现该属性，则音频就绪后马上自动播放。若没有该属性，音频就绪后需手动播放音频。（2）controls：音频控件属性，若出现该属性，则向用户显示控件（静音/播放/暂停音量）。若没有该属性，则控件是不显示的。具体要播放的音频，需要使用嵌套在标签中的标签来定义媒体资源。可以提供两个音频文件供浏览器根据浏览器本身对音频文件类型或编解码器的支持进行选择。该标签主要有以下几个常用的属性：第二章 HTML语言（1）src：表示音频文件的URL地址。（2）type：表示要播放媒体资源的MIME类型，常用音频类型有audio/ogg、audio/mpeg等格式。（3）loop：表

50、示音频循环播放。若没有该属性，音频播放结束后就暂停，若有该属性，音频播放结束后循环开始播放该音频。（4）preload：确定当页面加载时，规定音频是否加载以及如何加载。该属性的取值为：none|auto|metadata，分别对应不加载、自动加载以及元数据。第二章 HTML语言2.视频标签标签用于定义网页中的视频，如电影片段或视频流。支持MP4、Ogg、Webm等常用的视频格式。标签与标签相类似的属性有：autoplay、loop、muted、preload等。特有的属性有：（1）width：定义视频的显示宽度。（2）height：定义视频的显示高度。（3）poster：该属性可以指定在视频开