Web编程基础HTML语言.ppt

2.1 HTML概述 2.2 文字风格设置 2.3 段落控制标记 2.4 超链接标记,第2章 Web编程基础HTML语言,2.5 表格标记 2.6 表单标记 2.7 框架结构标记 2.8 CSS样式,补充知识,通过Internet浏览世界各地的网络资源，或者要把信息通过Internet以Web方式发布到全球，就必须使用网页。网页就是用户在浏览器上看到的一个个画面。通过网页，即便是一个不懂计算机的人，也能借助于浏览器在网络上浏览和查询自己所需要的信息，可在家中上网购物、办理银行转账等，甚至一些无法想象的事情也能在Web的世界中实现。而Web应用开发的基础语言就是HTML语言。,WWW的出现，使得Internet风行全球。这其中的一个主要原因在于WWW上的信息资源主要是以一个个网页(Web Page)来呈现的。网页实际上是存放在世界上某台接入Internet的计算机中的一个文件，这个文件是用浏览器能够识别和解释的语言编写的。当我们在浏览器地址栏输入网址(URL)后，经过网络复杂而快速的解析，网页文件会被传送到本地计算机，再通过浏览器解释网页的内容，最后将内容展示到用户的面前。,2.1 HTML 概 述,2.1.1 网页与HTML 最早的网页设计语言就是HTML(Hyper Text Markup Language)，它的中文译名是超文本标记语言。虽然随着技术的进步而产生了各种网页设计语言，例如Dynamic HTML、XML、JavaScript、VBScript等，但它们依然是建筑在HTML之上，并没有舍弃已有的HTML。可以说，HTML是构成网页的最“基础”的要素。,从信息资源提供者或商家的角度看，如果要把信息通过Internet以Web方式发布到全球，就必须开发网页。开发网页的方法主要有两种：一种是书写HTML源代码；另一种就是使用网页制作软件(如FrontPage、DreamWeaver等)来制作网页。不论哪种方法，它们所使用的基础语言都是HTML。HTML是WWW中用于描述其超文本文件的标记语言。,使用网页制作软件来制作网页，因为它是“所见即所得”的，即在编辑画面上看到什么，在浏览器中就是那个样子，非常方便，而且不用记忆HTML的标记命令，所以，大部分的网页制作者都是使用这种方法来制作网页。但是，网页制作软件的源代码仍然以HTML为基础。因此，如果要对网页进行一定的修改，或是要在网页中进行必要的运算，或是要加入WWW的其它组件(如Java及脚本语言)等，都要求网页开发者必须懂得HTML源代码。通常情况下，网页制作者通过交互的使用这两种方法来开发网站。因此，要成为一个真正的网页开发者，首先必须学会HTML语言。,2.1.2 HTML的产生和发展 HTML语言最早是由Tim Berners Lee等人于1989年与WWW的概念同时提出的，是一种在WWW上描述页面内容和结构的标准语言。当时推出的HTML1.0只是一个非常简单的语言。也正是由于它的简单性，一经推出便受到国际上网络编程者的青睐。随后推出的HTML2.0便被推荐为Internet的标准之一。从这时开始，HTML空前繁荣，很快被发展成许多各具特色的不同版本。,1995年11月，IETF(Internet Engineering Task Force)为了解决这种混乱局面，整理了以前的各种版本，倡导并主持开发了HTML2.0规范，同年推出HTML3.0技术规范。1996年，W3C(World Wide Web Consortium，万维网协会)的HTML Working Group开始编写新的规范，于1997年1月推出了HTML3.2，并加入了许多多媒体的功能，如图文混合、表格以及更精细的文字排版控制等。1999年推出的HTML4.0在原有HTML的基础上增加了新的编程技术，如可以在HTML中嵌入JavaScript、VBScript、CGI和ASP等，使传统的静态网页很快地进入绚丽多彩、充满互动性的动态网页。,超文本标记言HTML（HyperText Markup Language）是SGML（Standard Generalized Markup Language）语言的一个应用，是WWW“世界”的通用“语言”。 WWW“世界”诸服务器与浏览器之间通过它互相沟通。 WWW“世界”中的信息可以通过它来“表现”。没有HTML就没有WWW“世界” 。 HTML 不是程序设计语言，而是一种结构语言。 HTML 与平台无关，只要是相同的浏览器。,HTML有许多元素，文档通过元素置标就形成了所谓的HTML文档。 HTML 也是文本文件，所以可以用纯文本编辑器来编辑（如Windows 的记事本、写字板) 其后缀名必须是 .html 或 .htm 只有通过浏览器才可以对HTML文档进行相应的解释。,2.1.3 HTML语法 HTML语言是一种文本型标记语言，每个标记都有其特定的含义。我们可以把HTML文档中的每个标记理解为一个特定指令，一个完整的HTML文档就是这样一个指令序列。当浏览器接收到一个HTML文档后，将按照HTML语法对这些标记进行解释和执行。 HTML语言中的所有标记都是用小于号“”括起来的英文字母，即以小于号“”做为结束标志。标记中的英文字母可以大写，也可以小写，甚至可以大小写混合使用，即HTML语言对标记中字母的大小写不加区分。本书为醒目起见，对标记中的字母一律使用大写。例如，、等。,HTML文档的基本架构, 网页的标题 网页的内容，很多标记都作用于此。 ,特点解说： 整份文件处于标记与之间。 用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。 文件分两部分，由至称为开头，至称正文。基本上两者各有适用的标记，如只可出现于开头部分。 开头部分用以存载重要信息，而只有本文部分会被显示。所以大部分标记会运用于本文部分。 所标示的是文件的标题。会出现于浏览器顶部及为别人使用时的名称，所以每页有不同而明确的标题是需要的。,从HTML标记的表现形式上看，可将HTML标记分为双边标记和单边标记两类。 (1) 双边标记是成对出现的标记，它往往表示一个复杂结构的开始和结束。例如，等都属于这类。,(2) 单边标记是指可以单独出现的标记。这类标记通常出现在双边标记内部，起一些辅助性的作用，如换行标记、列表中的行标记和输入元素标记等。 此外，HTML的大多数标记是带有属性的，可将此类标记称为带属性的标记。例如，标记就具有BACKGROUND、BGCOLOR、TEXT、 LINK、VLINK、ALINK等许多属性。如果将标记理解为指令的话，则可以将标记的属性理解为指令的一些可调参数，网页设计者可通过这些参数值的变化来实现绚丽多彩的页面效果。,在书写带属性的标记时，标记名与属性之间，以及属性与属性之间均用空格分隔，属性名与属性值间用赋值号“=”连接。带属性的标记的一般格式为 例如，通常浏览器窗口的背景颜色为白色，文本为黑色，超链接文本呈现蓝色等。如果希望使浏览器窗口背景呈黑色，而文字为白色，则可以使用如下带属性的标记： ,2.1.4 HTML文档结构 一个完整的HTML文档是由包含于HTML起始标记和结束标记内的头部(Head)和正文(Body Text)两部分构成的，这两个部分共同构成一个Web页面。HTML文档的基本结构如图2.1所示。,图2.1 HTML文档的基本结构,头部的内容用于对页面中元素的样式、窗口的标题、使用的脚本语言等进行说明和设置。这些设置是通过在头部嵌入下述一些标记引导的内容来实现的：，。头部的内容一般在网页上是不显示的，但位于和间的内容是窗口的标题，显示在窗口标题栏的左上角。头部也可以省略，当省略头部时，浏览器仍会将页面内容正常显示出来，但窗口的标题等内容就不存在了。,正文部分含有实际构成段落、列表、图像和其它元素的文本，这些元素都用一些标准的HTML标记来说明，它们是网页要让用户浏览的主要内容。在正文部分除了可以书写正文文字外，还可以嵌入许多由专用标记引导的内容。这些内容将在后续章节中陆续介绍。 为了使读者有一个感性的认识，下面我们写一个简单的HTML文档。,由于HTML文件是一种文本文件，我们可以使用任意一种编辑软件来建立，只是要记住必须将文件的扩展名指定为 .HTM或 .HTML。通常我们直接使用Windows操作系统提供的“记事本”或“写字板”来创建HTML文件。这里我们启动Windows自带的记事本或写字板，将例2.1中的代码照样输入到新文件中，输入完成后保存该文件，为其指定存放目录，并将其命名为CH2-1.html。 观察您刚才指定的目录，会看到一个文件名为CH2-1、图标为浏览器网页的文件。如果要观察该文件的运行效果，只需双击该文件图标，便可在浏览器中看到如图2.2所示的页面。,例2.1一个基本的网页文件示例，文件名CH2-1.html。 我的第一个Web页面 这是一个说明网页基本构成的HTML文档。一个HTML文档是由头部和正文两部分构成的。,头部主要用于对页面中元素的样式、窗口的标题、使用的脚本语言等进行说明和设置，这些内容在网页上是不显示的。正文部分书写需要用户浏览的内容，可以包括文字、表格、图形、动画和超链接等。 这个例子虽然简单，但其结构还是比较完整的。可以说，不论一个HTML文件有多么复杂，其基本结构都与此类似。,通过这个例子我们可以看到，在HTML文件中大部分标记都是成对出现的。例如，和，和，和，和，这便是双边标记。也有一部分标记是不成对的，如这个文档中的，这类标记被称为单边标记。另一方面，一些标记可以嵌套在另一些双边标记之间。例如，和就嵌套在与之间，和就嵌套在与之间，和就嵌套在与之间。,此外，在页面上的换行及空格等也需要用HTML标记来控制，与文档在编辑器中的书写格式无关。例如，我们在书写这个文件时在之后并没有换行，而在浏览器中却换行了；尽管我们在“两部分构成的。”之后换了行，但在浏览器中却没有换行，等等。有关这方面的内容，我们将在后面各节中陆续讲解。,2.1.5 HTML文档的四个顶级标记 HTML的顶级标记共有四对，分别是、和。其中前三对已经在我们的第一个示例文件CH2-1.html中出现过。下面对这些标记的格式和作用做一个简要的介绍。,1. HTML文档开始与结束标记 标记格式： 标记用于标记一个页面的开始和结束。每一个HTML文档的开始处必须用一个标记，而结尾也要用一个标记。Web浏览器在收到一个HTML文件后，当遇到标记时，就开始按HTML语法解释其后的内容，并按要求将这些内容显示出来，直到遇到结束标记为止。,2. 标记 标记格式： 标记称为头部标记，主要用于对页面中使用的字符集、脚本语言、页面的标题、背景音乐、样式表单等进行说明和设置。具体的设置方法是在与之间嵌入一些以标记、等标识的内容来实现的。例如，在例2.1中我们就嵌入了标记，使浏览器窗口具有了我们给出的标题。,mata标记 （1）描述网页关键字 关键字是网络搜索引擎借以分类的关键词 （2）定义网页语言编码 使用如上标记，浏览器自动选用GB2312编码作为本网页的字符编码 （3）（定义页面刷新） 只要进入网页，经过20秒，网页自动刷新 成sohu主页,3. 标记 标记格式： 标记用于标记一个页面输出显示的开始和结束。夹于之间的是Web页面的具体内容，这些内容包括文字、图形、图像、超链接等各种HTML对象。每一个Web页面通常都必须有标记。前已述及该标记是一个带属性的标记，其属性主要用于对浏览器窗口背景色、前景色以及超链接对象的颜色等进行设置。关于属性的用法我们将在学习了有关字体颜色的设置方法之后再做详细的讲解。,标记 - 文本体中可以规定整个文档的一些属性： Bgcolor - 背景色 text - 文本色 Link - 超级链接对象的颜色 Alink - 连接中对象的颜色 Vlink - 连接后对象的颜色 Background - 背景文件 Bgproperties -背景图片是否跟着卷动,格式： ,4. 标记 标记格式： 标记被称为框架标记，其作用是将浏览器窗口划分成几个小窗口，在这些小窗口中可以同时显示相同或不同的HTML页面。该标记可以替代标记，也可以在标记内部嵌入、等。这个双边标记的用法相对比较复杂，我们本着由浅入深的原则，将在2.7节再行讲解。,2.1.6 HTML文档的注释 标记格式: 功能：注释标记的作用是供网页制作者对HTML文件中的某些内容进行注释。 例如： 注意： 注释标记对浏览HTML源代码的任何人都是可见的； 注释标记应放在区中，而不能放在区中； 在JSP中，还有格式的注释，这种注释将由JSP服务器编译处理后，把处理结果发送给客户端浏览器。,2.2.1 字体标记 字体标记是一个带有属性的标记，通过其属性可以设置文本的字体、字号和颜色等。 标记格式： 其中： 字体可以是浏览器支持的各种字体，例如宋体、华文楷体、楷体_GB2312、隶书等中文字体或Times New Roman、Arial Unicode MS等西文字体。系统默认的字体为宋体。,2.2 文字风格设置,字号可以取1到7之间的值，1号字最小，7号字最大。系统默认字号为3号字。因此，在给字号赋值时既可以直接写出字号值，也可以在3号字的基础上进行加或减运算，例如，SIZE=5和SIZE=+2具有相同的效果。 颜色值可以是以#号开头的6位十六进制值，也可以用表2.1中的HTML预定义的色彩名，系统默认的字符颜色为Black(黑色)。,表2.1 HTML预定义的16种标准色彩名及其RGB值,颜色的设定,颜色值是一个关键字或一个RGB格式的数字。 颜色是由 “red” “green” “blue ” 三原色组合而成的，在 HTML 中对颜色的定义是用十六进位的，对於三原色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成16777216种颜色。 例如： 白色的组成是 red=ff, green=ff, blue= ff,RGB 值即为ffffff 红色的组成是 red=ff, green= 00, blue= 00, RGB值即为ff0000 绿色的组成是 red=00, green=ff, blue= 00, RGB值即为 00ff00 蓝色的组成是 red=00, green= 00, blue= ff, RGB值即为0000ff 黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000 应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor=“#336699“,用英文名字表示颜色时直接写名字。如 bgcolor=green RGB颜色可以有四种表达形式:： #rrggbb (如，#00cc00) #rgb (如，#0c0) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如， rgb(0%,80%,0%) Windows VGA(视频图像阵列)形成了16个关键字: aqua，black， blue，fuchsia, gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow,下面通过一个具体的例题来说明其设置方法。 例2.2 标记示例，文件名CH2-2.html。 FONT标记示例 系统默认(3号黑色宋体,缺省FACE、SIZE和COLOR属性时) 1号红色宋体字,2号绿色隶书字 3号蓝色楷体字 4号黄色黑体字 5号黑色行楷,6号橄榄色彩云字 7号灰色幼圆字 这个HTML文件在浏览器中看到的页面效果见图2.3。,图2.3 CH2-2.html的执行效果,2.2.2 标题字标记 标记格式： 其中：i=1，2，6。即标题字共分6级，分别用H1至H6表示，H1标记的字最大，H6标记的字最小。ALIGN属性的对齐方式可以是left(左对齐)、center(居中对齐)、right(右对齐)、justify(两端对齐)四种中的某一种。省略ALIGN属性时取系统默认的左对齐。标题字的样例如下：,注意： 标题字标记的结束标记含有换行功能，本样例为了节省篇幅而排在了一行中； 该标记与标记的SIZE属性所标示的字号相反； 该标记中的文字都是加粗的。, How to make Webs 标题元素显示效果1 标题元素显示效果2 标题元素显示效果3 标题元素显示效果4 标题元素显示效果5 标题元素显示效果6 ,实例,2.2.3 文字辅助变化标记 为了进一步强化文字效果，HTML语言还提供了、等双边标记，用于设置字体的外观。HTML提供的常用文字辅助变化标记如表2.2所示。,表2.2 字体辅助标记,上标元素SUP与下标元素SUB 这是一个上下标测试网页 H2O E=me2 北京欢迎你 ,实例,2.2.4 划线标记 标记格式： 该标记的作用是画一条水平线，线的粗细和长度通过SIZE和WIDTH的值来设置。SIZE和WIDTH的取值是一个整数，单位可以是px(像素)、pt(磅)、cm(厘米)等。整数的后面如果省略单位，浏览器通常按像素解释。COLOR的取值方法与标记相同。 例如，如果在某HTML文件中有如下一句： 便会在浏览器页面的相应行出现一条粗细为2个像素、长度为140像素、无阴影的蓝色水平线。, 这是一个绘制线测试网页 这是第一条线段，无size，去默认值；颜色为绿色 这是第二条线段，size=3，宽度为整个窗口的50%，居左显示 这是第三条有线段，noshade，居中显示 ,实例,例2.3 文字样式的变化标记示例，文件名CH2-3.html。 文字变化标记示例 文字的变化 B标记使字加粗 I标记使字倾斜,U标记在字下加线 STRIKE标记给字加删除线 SUB标记使字下错半行 SUP标记使字上错半行 这个HTML文件在浏览器中看到的页面效果如图2.4所示。在这个例子中我们使用了文字变化标记和划线标记。,图2.4 执行CH2-3.html文件后在浏览器中看到的效果,2.2.5 转义字符与特殊字符 在HTML语言中，由于一些符号已被标记或标记的属性所占用，例如“”等，因此，当使用这些符号时就必须使用HTML提供的特殊符号来表示。 HTML对这些特殊符号的表示由三部分构成：开始处用一个转义字符“&”引导，中间是说明该特殊字符的描述(通常是该字符的英文缩写)，最后用一个分号“；”结束。表2.3给出了几个常用特殊字符在HTML文档中的表示方法。,表2.3 常用特殊字符与HTML表示法对照表,2.2.6 文字移动标记 标记格式1： 标记格式2： ,标记的功能：标记的作用是让文字在页面上指定的区域内来回移动，从而出现动态的效果。其中，移动方向的取值可为left(从右向左移动)或right(从左向右移动)；移动方式的取值可为scroll(从右向左不停地绕圈移动)、slide(从右边移动到左边后即停止不动)、alternate(先从右移动到左，再从左移动到右，如此反复地来回移动)。BGCOLOR用于设置文字移动区域的背景颜色。此外，该标记中也可以加入HEIGHT和WIDTH属性，用来指定文字移动区域的上下和左右边界。由于文字移动通常只针对少量的单行文字，所以HEIGHT属性一般不用。,例2.4 文字移动标记示例，文件名CH2-4.html。 MARQUEE标记示例 认真学习，天天进步 逆水行舟，不进则退,忧郁徘徊，飘忽不定 这个文件在浏览器中执行时，“认真学习，天天进步”八个字在一行绿色背景的衬托下，自右向左不断移动；“逆水行舟，不进则退”八个字在第二行中200个像素的红色区域内自左向右移动；而“忧郁徘徊，飘忽不定”八个字则在400个像素的黄色区域内来回移动。,测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果. ,一个页面有很多元素，每一个元素都有自己的格式和风格，因而就要用不同的标记来进行说明。本节介绍一些常用的页面控制标记。,2.3 段落控制标记,2.3.1 分行和禁行标记 1. 换行标记 标记格式： 标记是一个单边标记，其作用是强迫该标记之后的文字在浏览器中换到下一行中显示出来。 HTML中有一些标记隐含带有换行的作用，如上节讲述的标题字标记、划线标记和后面将要讲到的段落标记等，但用这些标记换行往往会在新行前插入一个空行，实际上等于换了两行。而标记仅仅完成换行，行与行之间是没有空行的。,2. 禁行标记 标记格式： 这个双边标记的作用是禁止自动换行和结束禁止自动换行。一个HTML页面中的内容在默认情况下会随浏览器窗口的宽度自动调整内容的宽度而换行。如果使用禁行标记，则在该标记中的内容将不会随浏览器窗口宽度自动换行。如果我们在HTML文档中书写的某段内容的长度大于浏览窗口的宽度，而且使用了禁行标记，则在浏览器窗口上下边会出现水平滚动条，浏览者可通过滚动条来移动浏览内容。,2.3.2 段落标记 标记格式： 段落标记的作用是另起一段，它不仅具有换行的作用，而且还要在新行前面插入一个空行。在例2.1中我们分别使用了段落标记和换行标记，仔细观察图2.2和图2.5的显示效果，不难看出二者的差异。该标记的一个常用属性ALIGN用来设置该段文字的对齐方式。对齐方式可以是left(左对齐)、center(居中对齐)、right(右对齐)、justify(两端对齐)四种中的某一种。省略该属性时取系统默认的左对齐。 该标记常被嵌套在表格标记中，可使表格更加整齐、美观。,例2.5 段落标记及其对齐属性示例，文件名CH2-5.html。 段落标记与属性 床前明月光 疑是地上霜 举头望明月 低头思故乡 这个文件在浏览器中的显示效果如图2.5所示。,图2.5 CH2-5.html的执行效果,2.3.3 预排版标记 标记格式： 预排版标记的作用是让浏览器对该标记内的内容按原始输入格式不做修改地输出。 通常，我们在编辑文本文件时习惯上按段换行，且每个新的段落开头处缩进两字。但是，浏览器在处理HTML文件时，却不能理解我们的这种习惯。为此，HTML中设置了预排版标记来照顾我们的这种习惯。如果您的网页是一篇论文，而且希望浏览者看到的格式与您的输入格式完全一致，则可以在这篇文章的开头处加上，并在结尾处加上就可以了。,例2.6 预排版标记示例，文件名CH2-6.html。 预排版标记 白日依山尽 黄河入海流 欲穷千里目 更上一层楼 这个文件在浏览器中的显示效果如图2.6所示。,图2.6 CH2-6.html的执行效果, 分段换行与预格式 以下是直接写文本的情况： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下是使用了三个换行标记的情况： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下使用分段标记（分为两段）： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下使用预格式： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 ,综合实例,文本中的空格,标记(除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格， 块级元素之间忽略所有空格。 如果要输入多个空格或需要在字符之前输入空格需在源代码中插入（表示一个半角空格）。 行内元素可看成一个字符,文本中的转义字符,在HTML源代码中，有些字符有特别的含义，比如小于号“ , ”符号 在DW的设计视图中输入这些特殊字符，DW会自动在代码视图添加它们对应的转义字符,DW中插入HTML文本元素的快捷键,Enter 插入,2.3.4 列表标记 列表是一种条理化地排列信息的方法，它把信息内容一条一条地水平排列显示，具有直观、清晰的效果。 1. 无序号列表 无序号列表是在每一行文字的左侧放置一个圆点或方块，以达到醒目、条理化的效果。HTML提供了三种无序号列表标记：、，且在这三种标记中每一行文字的最前面都要加一个单边标记，以表示新的一行开始。,标记可以带有属性TYPE。TYPE可以取disc(实心圆点)、circle(空心圆点)、square(实心方块)三种值之一；和两个标记的符号是实心圆点。由于标记的符号比较灵活，所以，目前在网页制作中主要使用标记。,例如： 网页设计 网页设计 网页设计 版面控制 版面控制 版面控制 显示结果如下： 显示结果如下： 显示结果如下： 网页设计 网页设计 网页设计 版面控制 版面控制 版面控制 也可以在标记中写入TYPE属性，以达到设置该列的符号的目的。,例如： 网页设计 页控制标记 列表标记 显示结果如下： 网页设计 页控制标记 列表标记,2. 有序号列表 标记格式1： 标记格式2： 标记格式3： ,有序号列表是在各行的左侧加上数字编号或其它(如a，b，c，；，；等)有序的标号，并且可以设定从何处开始计数编号。同理，在有序号列表标记的中间要嵌入单边标记。 注意：TYPE属性用于非数字符号的有序标号，并且只能从头开始；START属性用于设置数字标号并可以设置开始计数的编号。,例如： 网页设计 网页设计 网页设计 版面控制 版面控制 版面控制 显示结果如下： 显示结果如下： 显示结果如下： 1. 网页设计 a. 网页设计 5. 网页设计 2. 版面控制 b. 版面控制 6. 版面控制,3. 说明列表 说明列表是指在每一行的前面不出现符号或编号，而是通过缩进格式来表现层次的一种列表。说明列表的标记格式如下： ,例如： 页面控制标记段落标记 列表标记符号列表标号列表 显示结果如下： 页面控制标记 段落标记 列表标记 符号列表 标号列表,4. 列表标记的嵌套 上面介绍的几种列表标记是可以嵌套使用的，即在一种列表标记之中可以包含另一种列表标记。但应注意是一个完整的标记包含另一个标记，不能出现交叉的情况。 例2.7 列表标记及其嵌套示例，文件名CH2-7.html。 列表标记示例 Web与HTML 什么是HTML HTML文档的结构 ,图2.7 CH2-7.html的执行效果, HTML标记 页面控制标记 版面风格控制 这个HTML文件在浏览器中的显示效果如图2.7所示。,2.3.5 块标记 1. 标记 标记格式： 功能：将位于该标记间的文本作为一节，从而使本节的文本使用一致的格式。这里的格式是指字形、字体、字符颜色、背景色等，往往通过设置CSS样式来实现。 该标记中的ALIGN属性是个可选属性，用于确定标记块中的文字对齐方式，其取值可以是：left(左对齐)，center(居中对齐)，right(右对齐)，justify(两端对齐)。省略该属性时取系统默认的左对齐。,2. 标记 标记格式： 功能：为文本中的字或词定义特殊的格式。 与的区别主要在于：中的样式只作用到有文字的部分(见图2.8的第一行)；而中的样式的作用范围是文字所在行(见图2.8的第二行)。此外，标记没有ALIGN属性。,例2.8 和标记示例，文件名CH2-8.html。 SPAN和DIV标记 学有所成 学有所成 ,图2.8 CH2-8.html的执行效果,在网页中插入图像、视频或音乐等，可使网页图文声并茂、绚丽多彩。为了达到这一目的，HTML专门提供了、和等几个标记来实现超级链接。这几个标记既有相似之处，又有一定的区别，下面分别介绍之。,2.4 超 链 接 标 记,2.4.1 标记 标记格式： 链接文本 其中：HREF属性用来指明所要链接文件的路径、名称或网络地址；TARGET属性用来指出打开被链接网页的窗口；链接文本也称为热字或热区，是供浏览者点击的提示性文字，它在浏览器中通常为有下划线的蓝色高亮度显示的文字，当浏览者将鼠标悬停在热字或热区的上面时，鼠标形状变为一个小手状，此时如果用户单击鼠标，就会将其链接的对象打开，显示所链接网页的内容。,1. 标记的HREF属性 在标记中，由于用HREF属性来指明所要链接文件的路径、名称或网络地址，因此它是最重要的，也是不可缺省的。对于HREF属性来说： 当这个链接是一个本地链接时(即被链接的文件在当前的机器上)，HREF属性的值是所链接文件的路径和名称； 当这个链接是一个网络链接时，HREF属性的值是域名地址或IP地址(可以包含文件名)； 被链接的资源文件可以是网页、图片、音乐等各种类型，通过文件的扩展名来区分。例如：,下一页链接的是当前目录下的另一个网页； 看影像链接的是上级目录中的一个影像文件； 看图片链接的是与当前目录同级的picture目录下的一幅JPG图片； 听音乐链接的是下级目录music中的一个MID音乐文件； 教育网链接的是中国教育科研网，它是一个网络链接。,超链接的种类根据href的取值,1) 链接到其他网页或文件（jpg, rar等） 内部链接返回首页 外部链接 网易网站 下载链接点击下载 2) 电子邮件链接 给我留言,如果IE不能打开该文件，则会弹出文件下载的对话框,比普通链接多了个”mailto:”, bady的属性实例 设定不同的连接颜色 测试body标签 默认的连接颜色 正在按下的连接颜色, 访问过后的连接颜色, 返回 ,实例,2. 标记的TARGET属性 TARGET属性是一个可以缺省的属性。如果在标记中省略了TARGET属性，则浏览器打开链接页面时，始终将页面显示在同一个窗口中；如果要在另一个(浏览器)窗口中显示链接的页面，则可以使用该属性来实现。例如，在HTML文档中有如下一句代码： 跳到,当用户在浏览中用鼠标单击热字“跳到”时，就会在当前窗口中打开CH2-6.html页面。如果将上述代码改为 浏览器窗口 则当用户在浏览时用鼠标单击热字“浏览器窗口”时，就会打开一个新的浏览器窗口，显示CH2-6.html页面，而不是在原来的浏览器窗口中显示。,3. 用标记的NAME属性设置锚点 当一个页面内有多个链接，而这些链接是链接到同一页面的另一个位置或链接到另一页面的某个地方时，为了能够清楚地表达这种链接，则可以在被链接的页面的链接点设置一个锚，这样标记就能通过锚链接到该页面的正确位置。需要特别提醒的是，设置锚点的方法是链接到一个页面内部的某处，而不是链接到另一个页面。,1) 同一个页面内的链接 如果一个页面较长，为了能够迅速地到达需要浏览的地方，可以在同一页面内嵌入多个链接，形成类似于目录与正文之间关系的链接效果。但是，如何正确地区分这些同一页面内的不同链接呢？显然，为每一个链接起一个惟一的名字是最基本的解决方案，而这个名字便被称为锚。,标记格式： 在这一解决方案中，首先是通过HREF属性来定义锚名，为了和前述HREF属性中的文件名有所区分，在锚名前面必须加上#。另外，还需要注意下述两点： (1) 锚名可以由网页编写者自由定义，但必须保证一个页面内的每个锚名都是惟一的。 (2) HREF属性中的锚名和NAME属性中的锚名必须一致。,2) 不同页面内的链接 如果被链接的文件不在本机上，而是在网络某地机器上时，则在标记的HREF属性中定义锚名时必须用URL引导。其格式为 ,例2.9 超链接标记的用法示例，文件名CH2-9.html。 超级链接示例 点击这里浏览本网站的产品 ,标记链接网页、网站、图片、视频、音乐的语句 点击这里在当前窗口打开新页面 点击这里转到中国教育科研网 点击这里在当前窗口显示图片 点击这里在另一窗口显示图片, 点击这里看视频 点击这里在当前窗口听MP3音乐 点击这里在另一窗口听MP3音乐, 本网站提供的产品 电视机电冰箱手车还有许多 ,在这个HTML文件中，我们首先用标记设置了一个锚，然后又用标记链接了网页、网站、图片、AVI视频、MP3音乐等，最后用标记的NAME属性给出了锚链接的内容。此外，为了使锚链接的内容整齐美观，我们还使用了块标记等。图2.9(a)给出了开始执行这个文件时的情况，图2.9(b)给出了点击页面第一行文字(热字)后的情况。,需要注意的是，锚标记只有对页面内容较多较长，或者窗口较小时效果明显。如果像我们这里只有十几行文字，一屏即可显示全部内容，如果您的浏览窗口设置为全屏显示的话，执行这个文件时，锚链接的内容就已经显示在屏幕的下方，此时点击热字并没有什么效果。,图2.9 CH2-9.html的执行效果,(a) 刚运行CH2-9.html文件时的情形 (b) 点击页面第一行文字后的情形,2.4.2 嵌入图像或视频标记 标记可以链接网页、网站、影像、音乐等各种文件。但是，用这种方法链接的音乐或影像文件，只有当访问者用鼠标点击热字后，浏览器才会下载相应的文件，并且会询问将该文件在当前位置打开还是保存到本地硬盘。若选择在当前位置打开，则浏览器将其保存为临时文件，并且自动调用相应的播放程序播放之。若选择保存到本地硬盘，则要求访问者选择文件的保存路径，然后将文件下载到本地硬盘，但不会自动播放。而使用标记嵌入图像或视频剪辑，则在打开网页的同时，该图像会随网页同时下载和播放。,标记格式1： 标记格式2： ,其中：SRC属性或格式2 中的DYNSRC属性指明资源文件的路径和名称或URL，它们的含义和用法与标记的HREF属性相同；ALIGN属性用来指明紧接在图像后面的文字的排列方式，它可以取top、middle、bottom三个值中的一个，分别表示文字与图像呈顶部对齐、中部对齐或底部对齐，它只适用于单行文本；WIDTH、HEIGHT属性指定图像的宽度和高度，用于控制显示图像的大小；格式1中的ALT属性指出当鼠标在图片上停留时显示的文字信息；格式2中的START属性指出图片的显示时机，其值可以是fileopen或mouseover，表示图片与页面同时显示或当鼠标指向图片区域时再显示。如果给START属性赋予fileopen的值，则其效果与格式1相同。,例2.10 图片链接标记的用法示例，文件名CH2-10.html。 IMG标记示例 用IMG标记链接图片! 注意ALIGN属性和ALT属性 ,该文件的执行效果见图2.10所示。注意，标记中的ALIGN属性只作用于一行文字，而且，当窗口的宽度不足以显示这行文字时，文字自动换到了图片下方，而不论图片的高度范围内还有多少空行。,窗口宽度足够显示一行文字 (b) 窗口不够大，文字换行到图片下方 图2.10 CH2-10.html的执行效果,用图像做超链接： ,使用图像做超链接后，图像会自动增加边框，可设置边框为0去掉,2.4.3 嵌入背景音乐标记 在网页中嵌入背景音乐，使浏览者在浏览