Chs04.01HTML语言概要.ppt

2019年6月7日,第 4 章 Web应用基础知识,从页面组成来看，HTML描述了页面的结构，CSS用于控制页面的外观表现，XML则规定了页面上显示的信息内容,而嵌入式脚本则定义了页面的行为与操作。可见，HTML是Web应用的基础；XML是基于Web的信息交换的基础与标准；而ASP（活动服务页面）实现页面的交互功能。 因此，HTML、 XML 和ASP是Web页面的基础知识。尽管ASP.NET与ASP有本质区别，但ASP.NET是在ASP的基础上发展起来的，并且，ASP.NET中的一些数据绑定仍然要用到ASP的标记等内容，了解ASP对于ASP.NET的学习和掌握有一定帮助； 本章较系统地介绍了这些Web应用的基础知识。,HTML概要,XML结构及语法,ASP动态页面技术,2019年6月7日,第 4 章 Web应用基础知识 之 HTML概要,2019年6月7日,4.1.1、HTML文档的基本结构,为什么要讲HTML 尽管ASP.NET 采用代码与页面分离技术，但其页面控件仍然是扩展的标记语言 HTML是任何基于Web开发的基础。 下面我们回顾一下HTML标记语言的结构及常用的HTML标记。,2019年6月7日,4.1.1、HTML文档的基本结构,HTML是超文本标记语言(Hyperlink Text Markup Language)的缩写。 超文本是相对于普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本中含有指向其它位置的超级链接，通过这些链接使文档构成了网状结构。 HTML的超链接功能使各个网页之间可以相互链接起来，网页与网页之间的链接就构成了网站，而网站与网站的链接就构成了绚丽多彩的WWW。 HTML是一种简单的、通用的标记语言。它允许建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的浏览器。,2019年6月7日,4.1.1、HTML文档的基本结构,HTML是表示网页的一种规范，它使用描述性的标记符(称为标签)来指明文档的不同内容。 在 HTML 文档中，通过使用标签，浏览器就知道该如何显示网页，即确定内容的显示格式。 浏览器按由上到下的顺序读取 HTML 文件，然后根据HTML 标签内容解释和显示各种内容。,2019年6月7日,4.1.1、HTML文档的基本结构,标记符又称标签，HTML是规定网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果 在格式上，HTML文件是标准的ASCII文件，文件名称以.html 或.htm作为扩展名。HTML的主要语法是元素和标记符，标记符号用表示，例如，。 绝大多数标记符都是成对出现的，包括起始标签和结尾标签。网页显示的内容在一对标签之间,HTML的标记符,2019年6月7日,4.1.1、HTML文档的基本结构,标记符的格式是： 内容 如： 表示标签的开始 表示标签的结束 所有的标签都要关闭，有的标签是自关闭的，比如分行的标签是这样的：,2019年6月7日,4.1.1、HTML文档的基本结构,每一个元素都有名称和可选择的属性，属性是用来描述元素的特性。 在HTML中，所有的属性都放置在起始标注内标明，属性与标签之间用空格分隔，属性的值放在相应属性之后，用等号分隔，并且它们的值总是在引号“ ”中，而不同的属性之间用空格分隔。HTML元素和属性是不区分大小写的，但通常约定标记符使用大写字母。 例如： /起始标记 名称 属性 属性值,标记符的属性,2019年6月7日,4.1.1、HTML文档的基本结构,HTML标记符的一般格式为： 网页显示的内容 例如：This is HTML file test 一般来讲，HTML的标记有下列三种表示方法： 文件或超文本 文本成超文本 仅用于一些特殊的元素，比如分段元素P，它没有结尾标注。,2019年6月7日,注释,注释标记 一般的形式是 用于在HTML文当中书写说明性文字，内容在浏览器中不显示。注释可以根据需要安排多行。,2019年6月7日,标记类型,“单标记”,是指只需单独使用就能完整地表达意思的一类标记，这类标记的语法是： 常用的单标记有，表示换行，代表一个水平线等。 “双标记”，由“首标记”和“尾标记”两部分构成，必须成对使用，其中首标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。首标记前加一个斜杠（/）即成为尾标记。这类标记的语法是： 文档内容 例如：欢迎光临,2019年6月7日,4.1.1、HTML文档的基本结构,例如： /起始标记 demo This is my first HTML file. /结尾标记,其中，body 是元素名称(标注名)。 需要注意的是“和元素名之间不能有空格，元素名称不分大小写。Background是属性名，“back-ground.gif“是属性值，属性的值通常放在引号“ “之内，属性名、和属性值合起来构成一个完整的属性，属性及其属性值不分大小写。一个元素可以有多个属性，各个属性用空格分开。,2019年6月7日,4.1.1、HTML文档的基本结构,HTML文件仅由一个HTML元素组成，即文件以开始，以结尾，文件其部分都是 HTML的元素体。HTML元素的元素体又由两大部分，即头元素和体元素和一些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。 典型的HTML文本的基本结构形式如下： 文本标题 文本或超级链接内容 ,【说明】 （1）三对顶级标记、。 标记可理解为整个HTML文档的开始与结束。 标记头部，用于提供与Web页有关的各种信息，在标记中，使用标记来指定网页的标题。 所括住的是整个文档的正文。 (2) 注释由开始标记构成。 （3）HTML标记不区分大小写，通常用大写字母表示。,2019年6月7日,4.1.1、HTML文档的基本结构,例子程序 4.1是一个最简单的HTML文档，用Note等文本编辑器编辑后，保存为FirstHtml.html文件即可，用浏览其可直接打开.html文件。 例子程序4.1 FirstHtml.html 我的第一个网页 HTML静态网页制作实验 华中科技大学 2009年8月 ,2019年6月7日,常用HTML编辑工具,记事本、写字板 Dreamweaver FrontPage,常用HTML编辑工具,2019年6月7日,4.1.2、HTML文档结构标签,从HTML文档的典型结构看出： 一个HTML文档是标识的元素组成 HTML元素的元素体又分为两大部分，即： 由标识的头元素 由标识的体元素两部分组成。,文档标识标签,标签表示文档是用超文本标识语言编写的。处于文档的最前端，表示文档的开始；而则位于文件的最后一行。现在的Web浏览器一般都能自动识别HTML文档，在文档中并不需要有标签，但写上标签是一个程序员的好习惯。,2019年6月7日,4.1.2、HTML文档结构标签,是HTML文件头标记符，用来描述HTML首部的内容，其作用是说明文档的整体信息。 所有首部信息并不会出现在利用WWW浏览器所看到的窗体中。通常与某些标记符一起使用，如标记符。 标签中的一般结构如下： . /指定 网页的标题 标签 /用来说明与网页有关的其他信息 ,头标签,2019年6月7日,4.1.2、HTML文档结构标签, 文档标题标签 在头部标签中，最基本、最常用的标签是标题标签 和 ，它用于定义网页的标题。 通常，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。 网页标题可被浏览器用作书签和收藏清单。 当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。 对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。,2019年6月7日,4.1.2、HTML文档结构标签, 标签 在头部标签中的 标签用于说明与 Web 页有关的信息。例如，可以说明文件创作时间、文件作者等信息。 Meta用于网页的与中，其属性有两种：name 和 http-equiv。 name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎查找、分类（目前几乎所有的搜索引擎都能自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。其中，name 属性给出特征名，而 content 属性给出特征值。,2019年6月7日,4.1.2、HTML文档结构标签,name 属性： 用以说明生成工具(如FrontPage 4.0）等； 向搜索引擎说明你的网页的关键词； 告诉搜索引擎你的站点的主要内容； 告诉搜索引擎你的站点的制作的作者； 其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。,2019年6月7日,4.1.2、HTML文档结构标签, 和用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集； 定时让网页在指定的时间n秒内，跳转到页面http;/yourlink； 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。 cookie设定，如果网页过期，存盘的cookie将被删除。 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用。,2019年6月7日,4.1.2、HTML文档结构标签, 标签的http-equiv一个常用功能是设置网页的自动转址功能，就是使浏览器自动从一个地址跳转到另一个地址。例如： META例子 在此实例中，当前文档加载 10 秒后将自动转到另一URL网址（即http: /）,注意：要实现以上效果，必须使“URL =”后指定的网址存在。在该例子中，指定跳转的目标为某个网站。在实际使用此功能时，也可以直接指定一个完整的文档（例如 Ttile.htm）。,2019年6月7日,4.1.2、HTML文档结构标签,区域还有两个常用的标签，分别是和。 通常用来指定页面要引用的外部文件。例如： 表示网页的css规范。 表示页面的收藏夹图标。 通常用来指定页面使用的脚本语言以及要引用的外部程序的脚本文件，也可以在标签内直接写脚本代码。 我们建议所有的JavaScript的调用尽量采取外部调用。例如： ,2019年6月7日,4.1.2、HTML文档结构标签, 之间包含 Web 页的具体内容，包括文字、图形、声音、超链接等信息。 在标记符内的内容都可以经浏览器正确地显示在浏览器窗体中。如果没有其他标签修饰，文档主体标签中的文字将以无格式的形式显示。 标签中还定义了一些属性，通过设置这些属性的值可以改变页面的显示风格，这些属性包括： bgcolor = color：可以为网页设置背景颜色。 Background = “URL”：用特定图案作为页面的背景，URL为背景图案的地址。 还可以通过text、link、vlink和alink等属性设置文字和超链接的颜色，其中，text属性用于设置正文的颜色；link属性用于设置未被访问的超链接的颜色；vlink用于设置已被访问过的超链接的颜色；alink用于设置活动超链接（即当前选定的超链接）的颜色。,文档主体标签,2019年6月7日,HTML文本设计,body属性,颜色属性的值有两种表示方法 使用颜色名称来指定，例如红色、绿色和蓝色分别用red、green和blue表示； 使用十六进制RGB格式表示，表示形式为color=“#RRGGBB”或color=“RRGGBB”,2019年6月7日,4.1.3、版面风格控制,通常，HTML文档可分为文档头和文档主体两个部分。即： 由文档头规定文档标题和文档属性。 由标识的文档主体。 中的内容就是我们在浏览器窗口中看到的内容。 缺省状态下，文档主体标签中的文字将以无格式的形式显示。 但可以通过各种标签来控制这些内容的显示方式，即可以通过不同的标签来控制版面的风格。这些风格控制的标签包括： 标题处理标签 字体标签 段落处理/ 水平线 列表清单(List) 表格,2019年6月7日,4.1.3、版面风格控制,在HTML中，用户可以通过标记符来标识文档中的标题和副标题，其中n是1到6的数字。表示最大的标题，表示最小的标题。 标题文字标记符的格式为： 标题文字 以加粗的字体显示标题，使用的字体比默认的文本字体大，而使用默认字体大小。标题标签意味着换行。 通常情况下，浏览器会在所有标题标签的前后插入一些垂直方向上的空格。 属性align用来设置标题在页面中的对齐方式，其值为：left、center或right。 标记符默认显示宋体。 与HEAD中的定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。 如： 华中科技大学 ,标题处理标签,2019年6月7日,2019年6月7日,4.1.3、版面风格控制,在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型和颜色，通常用标记符来完成。标记符设置格式为： 被设置的文字 size属性是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。 face属性是字体标记符，用来指定字体样式。 color属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值 如： 武汉大学 ,字体标签,2019年6月7日,字符格式化,1设置字体、字号和颜色 用FONT标记的FACE、SIZE和COLOR属性来设置文本的字体、字号和颜色。字号的取值可以从1到7，默认值为3，SIZE值越大，显示的字就越大。还可使用或号来指定相对字号，也即相对默认字体大小的增量。,字符格式化,2019年6月7日,例2-4 设置字体、字号与颜色, Web程序设计教程 Web程序设计教程 Web程序设计教程 Web程序设计教程 Web程序设计教程 Web程序设计教程 ,设置字体、字号与颜色,2019年6月7日,2设置字体样式,2019年6月7日,例: 字体样式设置, 字体样式 网上教学作业编辑器说明 编辑器允许用户设置粗体、下划线、斜体、删除线，以及设置文字的上标和下标等。 请合理选择使用 ,2019年6月7日,4.1.3、版面风格控制,在HTML中段落处理是通过段落标记来完成的，常用的段落标记符有： 强制换行标记符 强制换行标记符为，放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。 强制换段标记符 在HTML文档中，无法用多个回车、空格、Tab键来调整文档段落的格式。要用HTML的标记符来强制换行、分段。 设置段落标记符的格式为： 文字 ,段落处理,2019年6月7日,2设置对齐方式,ALIGN属性的取值可以是：left（左对齐）、center（居中对齐）、right（右对齐）以及justify（两边对齐）。 对于不同的标记，ALIGN属性的默认值是有所不同的,设置对齐方式,2019年6月7日,例: 设置对齐方式, 新书介绍 新书介绍 Web程序设计教程 希望本书能帮助您快速掌握Web开发技术 第一章 Web编程基础知识 第二章 VBScript脚本语言 第三章 ASP 程序设计 ,2019年6月7日,4.1.3、版面风格控制,显示预排格式标记符 当用其他编辑工具编排好了一段文字后，其中很可能有一些HTML文件不支持的控制符号，如同车、多个空格、Tab键等。如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式，可以使用标记符将预先排好的格式保留下来。 显示预排格式标记符的格式为： 预先排好的格式 例如： 会议通知： 定于2010年1月10日下午2：30，在107教室召开 2010年度国家自然科学基金申请工作动员大会。 请学院所有拟申请2010年国家基金的科研人员 所有博士后及相关师生参加。 管理学院 2010.01.8 ,2019年6月7日,例标记的作用, 送友人 李白 青山横北郭,白水绕东城。 此地一为别，孤蓬万里征。 浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。 ,标记的作用,2019年6月7日,4.1.3、版面风格控制,在页面中插入一条水平标尺线（Horizontal Rules），可以使不同功能的文字分隔开，看起来整齐、明了。 水平线标记符的格式为： 如： ,水平线,2019年6月7日,4.1.3、版面风格控制,HTML文件通过列表(List) ，将文件内容标题列出，就好象是普通文件的目录一样，但它还起着与相关标题链接的作用。 每一个表条目（List Item）用标记元素进行标记。 列表的方式有三种： 有序表(Ordered List) 无序表（Unordered List） 自定义表（Definition List）DL,列表清单(List),2019年6月7日,4.1.3、版面风格控制,有序表(Ordered List) 有序表的每个条目前面带有序号，这些序号可以是数字、英文字母、罗马字母等。有序列表的格式为： 列表项1 列表项2 列表项n 参数type定义用哪种序号，格式为：type =序号种类，意义如下： type =1 以数字表示,表示阿拉伯数字1、2、3等，此为默认值。 type =A 以大写字母表示,表示大写字母A、B、C等。 type =a 以小写字母表示,表示小写字母a、b、c等。 type =I 以大写罗马字母表示,表示大写罗马数字I、II、III、IV等。 type =i 以小写罗马字母表示,表示小写罗马数字i、ii、iii、iv等。 参数start定义第一条的序号，格式为start =起始值，缺省的起始值是从第一个序号开始。,2019年6月7日,有序列表,标记可以具有属性value，它把这一项的列表编号指定为特定值。 列表可以嵌套，但不能直接嵌套；即标签后不能直接是。嵌套列表必须是标签的内容。 有序列表可以嵌套到无序列表中，反之亦然。 下面例子说明有序列表标记的使用：,2019年6月7日,2019年6月7日,4.1.3、版面风格控制,无序表（Unordered List） 无序表条目项前面无序号，但有一个符号，这个符号也由参数type指定，因此，无序列表的格式为： 参数type = 符号名， 常用符号名如下： type = “Disc” 实心圆（默认值） type = “circle” 空心圆 type = “square” 空心方块 如： 华中科技大学 ,2019年6月7日,无序列表-举例,2019年6月7日,例: 列表项的使用,以下演示无序列表的使用 第一章 Web编程基础知识 第二章 VBScript脚本语言 第三章 ASP 程序设计 以下演示有序列表 第一章 Web编程基础知识 第二章 VBScript脚本语言 第三章 ASP 程序设计 ,2019年6月7日,4.1.3、版面风格控制,自定义表（Definition List）和标记。 用定义的条目显示时，原样显出该条目，就好象字典里面的词条一样，故DT为字典术语（Dicursive Topic）的缩写。 随后用给出对之间内容的解释。显示时，向里缩进一些。DD可以是多个段落，每个段落用括起来，用来解释同一个术语。DT和DD标签必须配合使用。其格式为：,2019年6月7日,定义列表-语法, 项目 项目的定义1 项目的定义2 项目 项目的定义 定义列表可以有属性compact，该属性使项目和它的定义在同一行显示。 示例如下：,2019年6月7日,定义列表-举例,定义列表应用示例 定义列表的使用 列表数据项的有序集合。 标号程序中指令的标识符。 磁盘文件的标识说明记录。 数据集中或附加在数据集上的字符，它包括数据集的信息。 列表数据项的有序集合。 ,2019年6月7日,使用图像 1. 在网页中插入图像,使用IMG标记在网页中插入一个图像。以下为IMG标记最常用的四个属性。 SRC属性：给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。 ALT属性：给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。 HEIGHT属性：设置图像的高度，所用单位可以是像素或百分数。 WIDTH属性：设置图像的宽度。,2019年6月7日,2. 设置图像格式与布局,(1) 设置图像的边框 使用IMG标记的BORDER属性可以给图像添加边框效果 例如： (2) 设置图像与文本之间的空白 (3) 设置图像在页面上的对齐方式 如果插入的图像在页面上单独占一行，则可以将IMG标记置于和标记之间，并通过标记的ALIGN属性来设置图像在页面上的对齐方式。例如： ,2019年6月7日,(4) 设置图像与文本的对齐方式 当在页面中进行图文混排时，可以使用IMG标记的ALIGN属性来设置图像与文本在垂直方向的对齐方式，此时ALIGN属性的取值如下： top：图像与文本顶部对齐。 middle：图像与文本中央对齐。 bottom：图像与文本底部对齐。 通过设置IMG标记的ALIGN属性，也可以在图像的左、右绕排文本： left：图像居左，文本居右。 right，图像居右，文本居左。,2019年6月7日,例: 图文混排, 送友人(李白) 青山横北郭,白水绕东城。 此地一为别，孤蓬万里征。 浮云游子意，落日故人情。 挥手自兹去，萧萧班马鸣。 ,2019年6月7日,2.3.2 使用字幕和背景音乐 1. 插入字幕,要滚动显示的文本信息 MARQUEE标记的主要属性有： (1) ALIGN：指定字幕与周围文本的对齐方式，其取值可以是top、middle或bottom。 (2) BEHAVIOR：指定文本动画的类型，其取值可以是scroll、slide或alternate。 (3) BGCOLOR：指定字幕的背景颜色。 (4) DIRECTION：指定文本的移动方向，其取值可以是down、left、right或up。 (5) HEIGHT：指定字幕的高度，以像素或百分比为单位。,2019年6月7日,(6) HSPACE：指定字幕的外部边缘与浏览器窗口之间的左右边距，以像素为单位。 (7) LOOP：指定字幕的滚动次数。 (8) SCROLLAMOUNT：指定字幕文本每次移动的距离，以像素为单位。 (9) SCROLLDEALY：指定与前段字幕文本延迟多少ms后重新开始移动文本。 (10) VSPACE：指定字幕的外边缘与浏览器窗口之间的上下边距，以像素为单位。,2019年6月7日,2. 插入背景音乐,标记的下列属性可以对音乐的播放进行控制： (1) BALANCE：指定如何将声音分成左声道和右声道。取值为-10,000+10,000，默认值为0。 (2) LOOP：指定声音播放的次数。如果设置为0，则播放一次；如果设置大于0，则播放指定的次数；如果设置为-1，则声音反复播放，直到页面卸载。 (3) SRC：指定要播放的声音文件的URL。常用的声音文件类型是波形文件（.wav）、MIDI文件（.mid）、AIFF文件（.aif）、AU文件（.au）以及MP3文件（*.mp3）等。 (4) VOLUME：指定音量高低，其取值为-10,0000，默认值为0。,2019年6月7日,文字移动示例 信息技术分析与设计 其它还有闪烁文字，浮动窗口，影像地图等标签，不再详述。,2019年6月7日,4.1.3、版面风格控制,表格(table)是信息的一种表现形式，很多信息以表格的形式显示使得显示效果直观、漂亮。 在HTML中，表格作为一种元素也是通过标签来定义的，表格的基本定义形式如下： 一个表由开始，以结束，表格的内容由，和定义。 说明表的一个行，表格有多少行就有多少个； 说明表的列数和相应栏目的名称，表格有多少个栏就有多少个； 则填充由和组成的表格，即表格单元中填充的内容。,表格,2019年6月7日,表格标签的使用格式：, 表格标题 第1列表头第2列表头第n列表头 第1行，第1列表项第1行，第2列表项第1行第n列表项 第n行，第1列表项第n行，第2列表项第n行第n列表项 ,2019年6月7日,4.1.3、版面风格控制,元素的基本格式为： 其中，border属性定义表格的单元的之间是否用表格线分开，缺省状态下是没有分割线的。 width=# 和 height=#属性说明表的大小。前者为表宽，后者为表高，#是以象素为单位的整数。 cellspacing=#表示表格间距即划分表格的线的粗细，#的单位是象素，表示文本与表框的距离。 例如：下面的代码定义了一个 2x2的表格 球类其他 /每个表示一行 网球武术 /每个表示一列 ,2019年6月7日,表格标签应用示例,表格标签应用示例 07-08学年课程表 节次 星期一 星期二 星期三 星期四 星期五 上午1 语文 数学 语文 数学 语文 上午2 数学 语文 数学 语文 数学 上午3 语文 体育 语文 音乐 数学辅导 上午4 体育 思想品德 体育 体育 体育 下午1 信息 英语 语文辅导 英语 美术 下午2 书法 音乐 美术 思想品德 班会 ,2019年6月7日,2019年6月7日,4.1.3、版面风格控制,有通栏的表分为有横向通栏的表和有纵向通栏的表两种。 有横向通栏的表用属性说明，colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。 例如：table1 Morning Menu FoodDrinkSweet ABC 其中： colspan=3 表示第一行占3列的位置，显示结果如下：,2019年6月7日,4.1.3、版面风格控制,有纵向通栏的表用属性说明：rowspan表示纵向栏距，#表 示通栏占据的网格数，应小于纵向网格数。需要说明的是有纵向通栏的表，每一行必须用明确给出一横向栏目结束，这是和表的基本形式不同的。 Morning Menu Food A Drink B Sweet C 其中： rowspan=3 表示第一列占3行的位置，显示结果如下：,2019年6月7日,若扩展单元格数量大于表格中单元格数目，浏览器会把单元格数目扩展到指定数目，并为表格增加相应的行列单元格。 例如上例可修改代码，显示效果如下：,2019年6月7日,注意修改部分,2019年6月7日,4.1.3、版面风格控制,表格中文本水平对齐方式用align=#说明，#的值有：left，center和right，分别表示左对齐，居中和右对齐，align属性可修饰，和标注。 垂直对其方式分用valign=#说明，#的取值是：top，middle，bottom，baseline。分别表示上对齐，文本中线与表格中线对齐，下对齐，文本基线与表格中线对齐，同样，valign可以修饰，中的任何一个。 表格中单元格的颜色用bgcolor=#指定。#是16进制的6位数，格式为rrggbb，分别表示红、绿、蓝三色的分量。或者是16种已定义好的颜色名称。 例子程序 Resume.html表格综合应用的例子,2019年6月7日,4.1.3、版面风格控制,程序4.2：Resume.html HTML 个人简历 姓名春 华性别男生日1978.10 毕业学校华中科技大学时间 2000.6 所学专业计算机信息管理学历本科 特 长计算机、乒乓球 爱 好旅游、交友、游泳 ,2019年6月7日,4.1.3、版面风格控制,网络已成为信息发布的媒体，正如报纸一个版面有不同的栏目的一样，一个页面也可以分割为不同的几个区域，每个区域显示不同的信息。 常用的版面控制高级技术主要有： 版面分割 (DIV) HTML样式表(CSS),2019年6月7日,4.1.3、版面风格控制,DIV标签允许你分割一个Web页面，以此来进行信息的格式化显示。即用DIV元素为HTML文档内大块（block-level）的内容提供结构和背景的元素。 DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制。 将某一段文字分割出来，自成一段，分割出来的部分还可以居左居右排列。例如： 文字分割示例 HTML是一种标记语言，而：XML已以成为基于网络的信息交换标准，也使得信息的搜索更方便 显示结果见下页：,版面分割(DIV),2019年6月7日,4.1.3、版面风格控制,显示结果：,2019年6月7日,4.1.3、版面风格控制,当然，DIV的使用不是如此简单， 下面介绍DIV的属性 标签的主要的属性包括所定义区域的左上角的坐标，相对或绝对位置，边线的式样、宽度与颜色，区域的宽度与高度等属性。 DIV通常与下面要讲的CSS结合使用，通过CSS来定义Div区域的属性，具体的定义方法与使用例子在CSS之后再讲。,2019年6月7日,4.1.4 HTML中显示特殊字符,有些字符在HTML中有特别的含义，比如小于号“”就表示HTML标记的开始，这个小于号是不显示在我们最终看到的网页中的。如果希望在网页中显示一个小于号，该怎么办呢？这就要用到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成3部分： 第一部分是一个“”。 HTML常用的字符实体如表4.1所示。,2019年6月7日,4.1.4 HTML中显示特殊字符,表4.1 常用的字符实体,2019年6月7日,4.1.5 文件的链接,HTML的一个重要特点是超链接（Hyperlink）。超链接使得浏览者能够在HTML文件的页面之间任意地跳跃。跳跃的基本依据是统一资源定位（Uniform Resource Location，URL）。 URL是一种标准化的资源命名方法，用于指定Internet上资源的地址，是获取信息资源的基本依据。浏览信息、传输文件、收发电子邮件等都要用到URL，一个Web信息页也是用URL来唯一标识的。 URL的一般格式如下： 访问协议 :/目的地址 它包括两个部分：传输协议和目的地址。两部分之间用“:/”隔开。目的地址通常又包括主机名、域名、端口号、目录路径和文件名等部分。例如： /Library/computer/computer.htm,统一资源定位,主机地址除用域名外，还可以使用IP地址，两者效果相同。,2019年6月7日,4.1.5 文件的链接,访问协议除http外还有多种，如ftp、telnet、gopher、wais、news、mailto(发送电子邮件)、file等。随着访问协议的不同，冒号后面的参数格式也会不同。下面是一些URL的例子： /pub/usehtml.htm 表示用文件传输协议传输中pub目录下的文件usehtml.htm。 mailto: 表示向发送电子邮件。 file:/c:/HTML/sample.htm 表示打开文件sample.htm，该文件在本地机硬盘的c:HTML目录中。,2019年6月7日,4.1.5 文件的链接,HTML中的超链接是由锚(Anchor)元素产生的，一个锚元素由两部分组成： 一部分是可被显示在Web浏览器中的超文本及图像； 另一部分是用以描述当超链接被触发以后所指向的URL信息，即资源地址。超链接以作为标记，其格式如下： 超链文本及图像 其中，其中各属性描述如下： (1) HREF：该属性是必选项，用于指定目标端点的URL地址。 (2) TARGET：该属性是可选项，用于指定一个窗口或框架的名称，目标文档将在指定窗口或框架中打开。 (3) TITLE：该属性也是可选项，用于指定鼠标移到超级链接上时所显示的标题文字。 锚元素的颜色可以用标签的link、alink和vlink参数进行定义。 HREF（Hypertext REFerence）属性是锚元素中最重要的属性，它表明了超链被触发后所指向的URL。,锚标签,2019年6月7日,表2-4 TARGET属性的取值及作用,2019年6月7日,4.1.5 文件的链接,由锚点标签定义元素不仅仅限于文字，也可以是图像。当用图形代替文字时，可链接部分显示的是图像，单击该图像，即可激发此超链接，转到被链接的地方去。 有了图像链接，可以使浏览画面显得更加丰富多采。图像锚点格式如下： 例如： ,用图像作为锚点,2019年6月7日,4.1.5 文件的链接,在设计Web页时，利用超链接，可以将一个特殊的链接指向作者的电子邮件地址。浏览者单击，就可把自己的意见用电子邮件传给相应的地址。链接电子邮件的标签元素格式如下： 提示语句 例如： 联系我们,电子邮件链接,2019年6月7日,4.1.5 文件的链接,FTP（File Transfer Protocol）文件传输协主要用于在计算机之间复制文件。如果Web作者希望用户在访问自己的页面时下载一个文件，或者某个程序，便可建立一个链接，指向文件的URL地址。格式如下： 提示语句 为了安全考虑，许多FTP站点设置了访问权限，用户必须在登录时输入合法的用户名和口令，才能使用某些资源。这种情况下，连接时可以提示用户输入的用户名和口令。语句格式如下： 提示语句 由于一般公共站点不要求用户提供名字和口令，故省略了这两项。而大多数站点利用21号端口作为公共访问端口，故可将端口号省略。,与FTP站点链接,2019年6月7日,4.1.5 文件的链接,如果希望浏览者能够直接访问其他计算机，可以通过Telnet链接实现。语句格式如下： 提示语句 一旦用户登录到public主机后，就建立起与该机的直接连接，成为它的一个终端，就能使用里面的各种资源。,通过telnet访问远程服务器,2019年6月7日,4.1.6 HTML表单,表单(Form)在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。主要用于采集和提交用户输入的信息，从而完成了从客户端到服务器之间的反馈和交流。 一个表单是由各种输入元素组成的，表单元素又称为表单控件(Form Controls)，表单控件规定了各个表单项输入的内容与输入方式，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。,2019年6月7日,2.7.1 表单处理概述,1. 表单的基本语法 表单用FORM标记定义，基本语法格式如下： FORM标记具有以下属性： (1) NAME：指定表单的名称，以标识表单。 (2) METHOD：指定将表单数据传输到服务器的方法。 (3) ACTION：指定将要接收表单数据的服务器端程序或动态网页的网址。 (4) onSubmit：指定提交表单时调用的事件处理程序。 (5) onReset：指定重置表单时调用的事件处理程序。 (6) TARGET：指定表单提交后打开新文档的目标窗口,2019年6月7日,4.1.6 HTML表单,HTML表单是由来标记的，即用.标记表单的起止位置。 标记的主要属性是：action和method。 action属性就指明了处理表单数据程序的文件名称、程序的url地址或者是用action=mailto:指定的邮件地址，即action规定了用什么程序来处理用户输入的表单信息。 Method属性表示了发送表单信息到服务器的方式。method有两个值：get和post。当method=get时，将输入数据加在action指定的地址后面传送到服务器。当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，或者用电子邮件接收用户信息。 那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。 常用name属性设定表单的名称。,表单标记,2019年6月7日,4.1.6 HTML表单,HTML表单中主要包括下列元素： button普通按钮 radio 单选按钮 checkbox复选框 select 下拉式菜单 text 单行文本框 textarea多行文本框 password密码输入框 submit提交按钮 reset 重填按钮 hidden隐藏按钮 image图像文件 表单可以看作是表单元素的集合，这些元素用不同的标记来标识。 用HTML设计表单常用的标记是：、等标记。,2019年6月7日,4.1.6 HTML表单,此标记在表单中使用频繁，大部分表单元素需要用到此标记。其基本语法如下： /设定在输入多行文本时的最大输入字符数,表单输入标记,2019年6月7日,INPUT标记表单控件的使用,1单行文本框 单行文本框用于获取一行信息，其基本语法格式为： 其中： SIZE属性指定文本框的宽度； MAXLENGTH属性指定允许在文本框内输入的最大字符数。 VALUE属性指定文本框的默认值，如果不设置默认值，可省略该属性。,2019年6月7日,显示效果,2019年6月7日,2密码域,如果要求站点访问者输入密码后才能进入站点时，则应在表单中添加密码域。当站点访问者在这个域中键入数据时，浏览器以星号显示密码。其基本语法格式为： ,2019年6月7日,2019年6月7日,3按钮, 对该标记的属性说明如下： （1）TYPE：指定按钮的类型，取值可以是： submit：创建一个提交按钮。 reset：创建一个重置按钮。 button：创建一个自定义按钮。 （2）VALUE：指定显示在按钮上的标题文本。,2019年6月7日,4图形化按钮, 其中：TYPE=“image“表示以一个图像作为提交按钮，SRC属性给出图像的URL地址， VALUE属性提供图像的替换文本。,2019年6月7日,4.1.6 HTML表单,在HTML中， 标签没有结束标签。但在XHTML中， 标签必须被正确地关闭。 例如： your name： 标记了一个名称为yourname的单行文本输入框，其显示效果如图4.4所示。,2019年6月7日,4.1.6 HTML表单, 定义了一个提交按钮，通过提交(input type=submit)可以将表单中的信息提交给表单的action所指向的文件。显示效果如图4.5所示。,2019年6月7日,单选按钮,单选按钮用于从一组选项中选择其中之一，基本语法格式如下： 选项文本 其中若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项；VALUE属性指定提交时的值；CHECKED属性是可选的，若某个选项拥有该属性，则打开表单时该单选按钮处于选中状态。,2019年6月7日,源代码 显示效果,2019年6月7日,表单-checkbox,复选框用于收集用户的多重选择输入。 它是一个按钮，表示开或关，即选中与否。 复选框，一般形式是： 每个复选按钮对应的标签都必须具有属性name和value。 很多情况下，多个复选按钮以清单的形式出现，每个按钮的名称都是相同的。 示例以及演示效果如下：,2019年6月7日,源代码 显示效果,2019年6月7日,4.1.6 HTML表单,下面的语句定义了一个名为fruit的选择项列表，并通过checked属性指定“桔子”为其默认值。 苹果 芒果 桔子 其显示效果如图4.6所示。,2019年6月7日,4.1.6 HTML表单,下面的语句定义了一个图标按钮： input type=image 相当于 input type=submit。所不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。其显示结果如图4.7所示。,2019年6月7日,select标签,复选框和单选按钮是收集用户多重选择数据的有效方式。但是如果可能的选择数目比较大，就很难显示出来了。这时需要用到菜单。 菜单使用标签指定。 分类：分为一次只能选择一个菜单项的菜单类型和一次可以选择多个菜单项的菜单类型。默认情况时一次选择一个。 其中的条目使用标签指定，它嵌套在元素中。其中的内容只能是文本（不能包含其它标签）。,2019年6月7日,4.1.6 HTML表单,标记的语法格式如下： 其中， name：设定下拉式菜单的名称。 size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size=1）。 multiple：设定为可以进行多选。 selected：表示当前项被默认选中。,Select下拉菜单标记,2019年6月7日,4.1.6 HTML表单,标记中的value表示该项对应的值。例如： 苹果 桔子 芒果 其显示数量如图4.8所示。,2019年6月7日,4.1.6 HTML表单,是建立多行文本输入框的专用标记。其语法格式如下： 其中， name：文本框名称。 clos：宽度。 rows：高度（行数）。 wrap：换行控制。 off：不自动换行。 hard：自动硬回车换行，换行标记一同被传送到服务器中去。 soft：自动软回车换行，换行标记不会传送到服务器中去，默认值为soft。,2019年6月7日,4.1.6 HTML表单,例如： 这是一个多行文本输入框，共3行，每行可输入50个字符，可自动换行。 其显示效果如图4.9所示。,2019年6月7日,框架,使用框架可以把浏览器窗口划分成几个大小不同的子窗口，每个子窗口显示不同的页面，可以在同一时间浏览不同的页面。,2019年6月7日,框架集,浏览器窗口中的框架数目以及它们的布局都是通过标签指定的，一个文档可以或者拥有一个标签，或者拥有一个标签，但是不能同时拥有两个。 语法： rows:说明窗口水平分割情况，“行高列表”是一组用“，”分开的数值，可以用百分数来表示，也可以用像素表示，指定了各子窗口的高度。 cols:说明窗口垂直分割情况，“列宽列表”是一组用“，”分开的数，定义了各子窗口的宽度。 frameborder:指定框架中所有子窗口是否显示边框，0是不显示边框，1为显示边框。 border:指定分割窗口框架的宽度，以像素为单位。 bordercolor:指定框架的颜色。,2019年6月7日,框架集-举例,例1： 例2： 若给出两个“*”，表示将窗口的剩余部分进行等分为两个框架。 属性cols和属性rows的功能类似。,2019年6月7日,框架,内容通过标签指定。该标签只能用于元素的内容中。 框架集中的框架是按照行的顺序进行显示的。 语法： 这两个属性都是必须赋值的。src是源文件名(包括网络路径，即相对路径或网址)，浏览器将会显示src指定的HTML文件；name是子窗口的名字，这个名字是用来供超文本链接标志中的target属性