JX-Web应用开发(二)HTML超文本标记语言-8

1、1浙江工业大学计算机学院主讲人：郑建炜主讲人：郑建炜Email : Email : Tel:el:Q: 32352000 QQ: 32352000 2n文字与段落文字与段落n超链接超链接n表格标记表格标记n表单标记表单标记n多媒体标记多媒体标记n小结小结主要内容3HTML基本元素(1)n例2.1网页的标题网页的标题网页的内容网页的内容运行结果运行结果4HTML基本元素(2)HTML 部分文档头部分正文部分欢迎进入欢迎进入 HTML 世界世界这会是一种很有趣的体验这会是一种很有趣的体验基本结构：基本结构：运行结果运行结果n例2.25HTML基本

2、元素(3)n HTML的编辑工具：记事本, UltraEdit, DreamWeaver, FrontPage等。n HTML页面的浏览工具：Microsoft Internet Explorer, Mozilla Firefox等。nHTML 标记的格式组成：标记的格式组成：元素 - 标识标记属性 - 描述标记值 - 分配给属性的内容6HTML基本元素(4) 元素：使用Meta标记提供关于网页的信息提供关于网页的信息 对网页的描述对网页的描述根据关键词生成响应根据关键词生成响应获得文档的作者名称获得文档的作者名称2. 2. 应用：关键词生成响应应用：关键词生成响应Expires: Mon,

3、15 Sep 2003 14:25:27 GMT设置网页的到期值设置网页的到期值 页面显示中文页面显示中文设置网页使用设置网页使用gb2gb23123127HTML基本元素(5) 元素：使用Meta标记3.3.自动刷新页面自动刷新页面4.4.使用网页所使用的编码使用网页所使用的编码应用：如网上实时新闻报道。应用：如网上实时新闻报道。应用：如在不同浏览器上正确显示中文。应用：如在不同浏览器上正确显示中文。8HTML基本元素(6) 元素：使用link和base标记n link link标记显示本文档与其他文档之间的关系，常用于加标记显示本文档与其他文档之间的关系，常用于加载外部载外部CSSCSS文

4、件。文件。其中：rel参数说明两个文档之间的关系，href说明目标文档名。这里须注意的是目标文档名是一个相对路径。n base base标记表示本文档的原始地址标记表示本文档的原始地址这样使得用户在下载之后能够知道文件的下载地址。9nHTML基本元素基本元素n超链接超链接n表格标记表格标记n表单标记表单标记n多媒体标记多媒体标记n小结小结主要内容10HTML基本元素(7) 元素：文字与段落 文字布局标记用于排版页面中的文字。常用的文字布文字布局标记用于排版页面中的文字。常用的文字布局标记可以分为局标记可以分为行控制标记行控制标记、文字分区标记文字分区标记和和列表标记列表标记等。等。n 行控制标

5、记用于控制文本的段落和换行,常用标记有：(段落), (换行)和(不换行)。 左对齐段落左对齐段落 居中段落居中段落 右对齐段落右对齐段落左对齐段落，左对齐段落，左对齐段落，左对齐段落左对齐段落，左对齐段落居中段落居中段落，居中段落，居中段落，居中段落，居中段落是一个双标签标记，一般不常使用。11HTML基本元素(8) 元素：文字与段落n 块标记：和，例2.3可以定义跨段落的内容块。定义段落内的内容块，是为了定义某部分文字的样式而使用的一个容器。学习学习HTML第第1部分部分元素用于组织元素元素用于组织元素DIV通常用于块级元素通常用于块级元素第第2部分部分这是第二部分这是第二部分第二部分向右对

6、齐。第二部分向右对齐。公共格式公共格式应用于这一部分中的所有元素应用于这一部分中的所有元素 12HTML基本元素(9) 元素：文字与段落n 列表标记：用于将文本按照列的形式显示出来。列表可分为无序列表和有序列表,其中列表元素标记为。例2.4：学习学习 HTML星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五13HTML基本元素(10) 元素：文字与段落n 例2.5学习 HTML星期一星期二星期三星期四星期五14HTML基本元素(11) 元素：文字与段落n 例2.6学习 HTML星期一星期二星期三星期四星期五15HTML基本元素(12) 元素：文字与段落文字的预格式化春眠不觉晓，处处

7、闻啼鸟；也来风雨声，花落知多少。n标记：可定义预格式化的文本，常见应用就是用来表示计算机的源代码。被包含在 pre 标记内的文本通常会保存空格和换行符。例2.7：16HTML基本元素(13) 元素：文字与段落文字的预格式化春眠不觉晓，处处闻啼鸟。也来风雨声，花落知多少。n标记：虽然浏览器不对标记内容中的纯文本进行任何格式化处理操作，但是标记中的HTML标记仍然会被识别并执行。例2.8：17HTML基本元素(14) 元素：超链接1、职职 位位：可申请职位可申请职位2、培训资源：培训资源：培训资源培训资源请单击此处查看视频请单击此处查看视频3、联联 盟：盟：产业联盟产业联盟18HTML基本元素(1

8、5) 元素：超链接链接类型链接类型内部链接内部链接到同一文档内到同一文档内或同一网站内或同一网站内的其他部分的的其他部分的链接链接外部链接外部链接到其他网站或到其他网站或服务器上的页服务器上的页面的链接。面的链接。- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -WebWeb站点站点1 1WebWeb站点站点2 2外部链接外部链接外部链接外部链接19HTML基本元素(16) 元素：超链接创建超链接创建超链

9、接要创建超链接，必须指定两个部分：要创建超链接，必须指定两个部分：1)1)要链接的文件的完整地址或要链接的文件的完整地址或 URLURL热点热点2)2)热点可以是一行文字或一个图像热点可以是一行文字或一个图像http:/http:/C:internetindex.htmlC:internetindex.htmlservice/index.htmlservice/index.html 绝对绝对URLURL文件的完整地址文件的完整地址相对相对URLURL20HTML基本元素(17) 元素：超链接HREF Hypertext Protocol Protocol 是协议类型是协议类型 httphttp

10、超文本传输协议超文本传输协议 gophergopher搜索文件搜索文件 telnettelnet打开打开 telnettelnet会话会话 ftpftp文件传输协议文件传输协议 mailtomailto发送电子邮件发送电子邮件 Host.domain Host.domain 是服务器的是服务器的 Internet Internet 地址地址Port Port 是目标服务器的端口号是目标服务器的端口号Hypertext Hypertext 是用户必须单击才能激活链接的文本或图像是用户必须单击才能激活链接的文本或图像语法为语法为: :21 使用链接使用链接 本页的所有内容都讲述关于如何创建到文档的

11、链接本页的所有内容都讲述关于如何创建到文档的链接 单击此处查看文档单击此处查看文档2 文档文档2 这是文档这是文档2。单击文档。单击文档1中的超链接后将显示本页。中的超链接后将显示本页。 返回返回 例 2.9HTML基本元素(18) 链接到其他文档22定义锚点与链接到锚点：定义锚点与链接到锚点：n定义锚点：互联网 (定义了一个名称为Internet的锚点)n链接到锚点： 互联网(链接到Internet锚点)HTML基本元素(19) 链接到文档内部23 使用链接使用链接 互联网互联网 HTML简介简介 多样化和统一性多样化和统一性 互联网互联网 互联网是网络的网络。也就是说，计算机网络可以跨越国

12、家甚互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过至全球的范围连接到其他网络。世界上所有的计算机都可以通过TCP/IP传输传输协议绑定在一起协议绑定在一起。 HTML简介简介 超文本标记语言是超文本标记语言是Web用来创建和识别文档的标准语言。虽然用来创建和识别文档的标准语言。虽然它不是标准通用标记它不是标准通用标记语言语言 (SGML) 的子的子集，但与它有着某种程度上的关联。集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。是一种文档格式语言表示方法。 多样性和统一性多样性和统一性 万事万物都离不开多样性和统

13、一性这样一条基本准则。也就是万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。其他设计元素应在站点的每个部分都保持一致。 例 2.10HTML基本元素(19) 链接到文档内部24nHTML基本元素基本元素n文字与段落文字与段落n超链接超链接n表单标记表单标记n多媒体标记多媒体标记n小结小结

14、主要内容25表格标记(1)n 表格标记用于控制网页布局，有效地使用表格标记能够使网页更美观，条理清晰，易于更新和维护。表标题区域(Caption)行(Row)列(Column)单元格(Cell)列标题区域(Table Header)26表格标记(2)n 常用的表格标记表格表格Table表格行表格行Table Row单元格单元格Table Data Cell表格标题表格标题Caption表格头单元格表格头单元格(列标题列标题)Table Header Cell27表格标记(3)n制作表格使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数张可张可男男80陈春生陈春生女女1828表格标

15、记(4)n 表格基本操作n插入行：在新行要出现的地方插入 和 标记即可。 n插入列：在每行相应的位置添加单元格和。 n删除行：要删除相应的 标记及该 标记内的所有 标记。n删除列：要删除列，应将定义该列的所有 标记都删除。 n合并单元格：跨列合并：在 或 标记中使用 COLSPAN 属性。跨行合并：在 或 标记中使用 ROWSPAN 属性。29表格标记(5)n插入行：在新行要出现的地方插入 和 标记即可。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数张可张可男男80陈春生陈春生女女18李三李三男男6830表格标记(6)n插入行：在新行要出现的地方插入 和 标记即可。使用表格使

16、用表格学员档案信息学员档案信息姓名姓名性别性别分数分数张可张可男男80陈春生陈春生女女18李三李三31表格标记(7)n插入行：在新行要出现的地方插入 和 标记即可。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数张可张可男男80陈春生陈春生女女18李三李三男男68多余多余32表格标记(8)n插入列：在每行相应的位置添加单元格和。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数籍贯籍贯张可张可男男80江西江西陈春生陈春生女女18广东广东李三李三男男68北京北京33表格标记(9)n插入列：在每行相应的位置添加单元格和。使用表格使用表格学员档案信息学员档案信息姓名姓名

17、性别性别分数分数籍贯籍贯张可张可男男80江西江西陈春生陈春生女女18李三李三男男68北京北京34表格标记(10)n插入列：在每行相应的位置添加单元格和。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数张可张可男男80江西江西陈春生陈春生女女18广东广东李三李三男男68北京北京35表格标记(10)n合并单元格-跨列合并：在 或 标记中使用 COLSPAN 属性。使用表格使用表格学员档案信息学员档案信息姓名姓名个个 人人 信信 息息张可张可男男80江西江西陈春生陈春生女女18广东广东李三李三男男68北京北京36表格标记(11)n合并单元格-跨列合并：在 或 标记中使用 COLSPA

18、N 属性。使用表格使用表格学员档案信息学员档案信息姓名姓名个个 人人 信信 息息张可张可男男80江西江西陈春生陈春生女女18广东广东李三李三男男68北京北京37表格标记(12)n合并单元格-跨行合并：在 或 标记中使用 ROWSPAN 属性。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数籍贯籍贯张可张可男男80不详不详陈春生陈春生女女18李三李三男男6838表格标记(13)n合并单元格-跨行合并：在 或 标记中使用 ROWSPAN 属性。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数籍贯籍贯张可张可男男80不详不详陈春生陈春生女女100李三李三男男39表格标

19、记(13)n合并单元格-跨行合并：在 或 标记中使用 ROWSPAN 属性。使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数籍贯籍贯张可张可男男80不详不详陈春生陈春生女女100李三李三男男8040表格标记(14)n 调整表格属性n标记的重要属性：BORDER：定义表格边框的宽度，以像素为单位BORDERCOLOR：表格边框颜色，可用于重点标记CELLSPACING：定义单元格之间的间距CELLPADDING：定义单元格内容与单元格边框之间的间距BACKGROUND：表格背景图片n标记的重要属性：ALIGN：单元格内容横向对齐方式；VALIGN：单元格内容纵向对齐方式；BORD

20、ERCOLOR：单元格边框颜色，可用于重点标记41表格标记(15)n调整表格属性使用表格使用表格学员档案信息学员档案信息姓名姓名性别性别分数分数籍贯籍贯张可张可男男80不详不详陈春生陈春生女女100李三李三男男42nHTML基本元素基本元素n文字与段落文字与段落n超链接超链接n表格标记表格标记n多媒体标记多媒体标记n小结小结主要内容43表单标记(1)n 表单的概念：表单用于向WEB服务器发送数据，常见于提交用户注册信息或购买物品信息等。一个表单示例如下：44表单标记(2)n 表单的使用方法，表单的具体定义格式如下 ：ACTION此属性指定表单数据提交到何处。METHOD此属性指定向服务器提交数

21、据的方法。1. 其值如为GET，浏览器将创建一个请求字符串，该请求包含页面URL、一个问号和表单的值。浏览器会将该查询返回给URL中指定的脚本，以进行处理。2. 其值如为POST，表单上的数据会作为一个数据块发送到脚本，而不使用任何请求字符串，POST方法更为安全。45表单标记(3)n表单内容的编辑：表单包含的内容主要使用输入元素标记来编辑处理。标记的属性如下：TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、IMAGE、FILE、HIDDEN和BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如

22、，如果表单上有几个文本框，可以按照名称来标识它们 - TEXT1、TEXT2或用户选择的任何名称。 VALUE此属性是可选属性，它指定表单元素的初始值 SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的 MAXLENGTH此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的 CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。 SRCSRC=URL。当使用IMAGE作为输入类型时使用此属性，它用于标识图像的位置。 46表单标记(4)n文

23、本框TEXT类型的输入元素源代码示例47表单标记(5)n复选框CHECKBOX类型的输入元素源代码示例48表单标记(6)n单选钮RADIO类型的输入元素源代码示例49表单标记(7)n关于单选钮RADIO编组的问题源代码示例50表单标记(8)n复选框CHECKBOX和单选钮RADIO的默认属性源代码示例51表单标记(9)n提交按钮SUBMIT和重置按钮RESET源代码示例52表单标记(10)n密码PASSWORD类型的输入元素源代码示例53表单标记(11)nIMAGE类型的输入元素源代码示例注意： 点击了IMAGE图片按钮也会提交表单。54表单标记(12)nFILE类型的输入元素源代码示例55表单标记(13)nBUTTON类型的输入元素源代码示例56表单标记(14)n下拉列表的制作：与标记SELECT的重要属性：NAME，SIZE和MULTIPLE，其中SIZE用于控制下拉长度，MULTIPLE表示是否允许多选