《web程序设计第2章.ppt》由会员分享,可在线阅读,更多相关《web程序设计第2章.ppt(50页珍藏版)》请在三一办公上搜索。
1、第二章 HTML基础,HTML基础,一、HTML的概念1.什么是HTML?超文本标记语言(HTMLHyperText Markup Language)是用于设计网页源文件(网页文档)的语言。每一个页面的代码保存为一个网页源文件(.htm文件)。八十年代初,HTML由万维网联盟(W3C:World Wide Web Consortium)制订。HTML包括一些定义页面内容和格式的符号,称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示,还可以通过超链接以访问其它的信息资源。后来,进一步推出了XML(扩展标记语言),该语言可以由程序员自己定义标记。,HT
2、ML基础,2.什么是标记?标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中,大多数标记都成对出现(有开始标记和结束标记)。结束标记和开始标记所用的字符相同,只是前面加一个斜杠。例如:用于标记一个自然段。标记可以具有相应属性即各种参数,如size、color、text、width和noshade等。例如:,HTML基础,标记通常可以分成两种:第一种用来指定网页上的元素或元素的样式。例如,指定一个自然段及其字体和颜色:自然段内容。第二种用来指向其它的资源。例如,指定一个链接地址:武汉大学 指定一个图片文件:,HTML基础,3.什么是超文本、超媒体和超
3、链接?超文本是网页上具有链接功能的文字。例如,娱乐 新闻 电影。超媒体是网页上具有链接功能的多媒体。超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体。超链接分为文字和图像(包括动画)两种,网页中的一段文字、一副图像或图像的某一个部分等都可以定义为超链接。,HTML基础,二、如何编写和浏览HTML网页文档启动IE,然后使用“查看”菜单中的“源文件”菜单项,进入记事本,就可以输入网页源文件了。在输入完之后,另存为.htm文件。或者直接进入记事本,输入网页源文件。在输入完之后,另存为.htm文件(选择保存类型为“所有文件”)。在浏览器中输入该文件名,就能浏览HTML源文件的网页效果。,HT
4、ML基础,例如:学生选课系统 网页制作练习,演示,HTML基础,三、HTML的常用标记 1.HTML文档的结构标记 用来指明一个HTML文档的基本结构。(1)文件标记:整个HTML文档内容均在标记之中。(2)头部标记:整个HTML文档分头部和主体部分。头部使用标记标识,凡是在此标记之内的内容,例如标题等,均属于头部信息。头部信息不显示在Web页中。,HTML基础,(3)头部标题标记:在此标记之间的内容将作为标题显示在浏览器的标题栏。注意:标记只能放在标记之间。(4)主体标记:主体是Web页的主要部分,用标记定义的信息将显示在Web页中。例如:(见下页),HTML基础,结构标记示例斜体字文本 可
5、以建立该网页源文件test2-1.htm,演示,HTML基础,2.格式标记(1)(段落标记)标记用来创建一个段落,在此标记之间的文本将按照段落的格式显示。(2)(换行标记)是一个很简单的标记,它没有结束标记,用来创建一个换行。(3)(两边缩进标记)在标记之间的文本将按照两边缩进的方式显示。,下面一一介绍在标记之间常用的各种标记。,HTML基础,(4)(列表标记)用来创建一个列表;用来创建列表中的上层项目;用来创建列表中最下层项目;和都必须放在标记之间。例2-2 创建一个普通列表:,HTML基础,该网页的HTML源文件test2-2.htm如下:一个普通列表 中国城市 北京 上海 广州 美国城市
6、 华盛顿 芝加哥 纽约,演示,HTML基础,(5)(标有数字或圆点的列表标记)标记用来创建一个标有数字的列表;标记用来创建一个标有圆点的列表;标记只能在或标记之间使用,此标记对用来创建一个列表项。若放在之间,则每个列表项加上一个数字,若在之间,则每个列表项加上一个圆点。,HTML基础,例2-3 标有数字的列表与标有圆点的列表:,HTML基础,该网页的HTML源文件test2-3.htm如下:标有数字与圆点的列表中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约,演示,HTML基础,(6)(分段标记)标记对用来排版大块HTML段落,也用于格式化表,此标记的用法与标记非常相似,同样有ali
7、gn对齐方式属性。align属性,它用来说明对齐方式,语法是:。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。例如:表示标记中的文本居中显示。,HTML基础,3.文本标记(1)(预处理标记)表示标记之间的文本原有格式如word格式仍有效。(2)(六级标题标记)是最大的标题,则是最小的标题。如果要在HTML文档中输出标题,那麽可以使用六对标题标记的任何一对。,HTML基础,(3)(字体标记)之间的文本以黑体字的形式输出;之间的文本以斜体字的形式输出;之间的文本以下加一划线的形式输出。(4)(强调加重标记)用来输出需要强调的文本(通常是斜体加黑体
8、);则用来输出加重文本(通常也是斜体加黑体)。,HTML基础,(5)(字体的大小颜色标记)可以指定输出文本的字体大小、颜色,它主要两个属性size和color。size属性用来指定字体的大小,可以取值:-1、1和+1;color属性用来指定文本的颜色,颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称。例如,#ff0000,引号内的rrggbb是用六位十六进制数字表示的RGB(即红、绿、蓝三色的组合)颜色,#ff0000对应的是红色。,HTML基础,Html语言所给定的颜色名称有:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yell
9、ow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。例如:size取值“+1”、color取值“red”时的文本 表示标记之间的文本按大小为+1,颜色为红色显示。,HTML基础,例2-4 文本标记的综合示例,HTML基础,该网页的HTML源文件test2-4.htm如下:文本标记的综合示例最大的标题使用h3的标题最大的标题黑体字文本 斜体字文本 下加一划线文本 强调的文本加重的文本size取值“+1”、color取值“red”时的文本,演示,HTML基础,4.链接标记(1)(超链接标记)在标记对之间可指定作为超链接的文本或图像,使用标记指定图像。例如,指定超链接
10、及其文本“武汉大学网站”:武汉大学网站 或者,指定超链接及其图像“d:pic1.gif”:在上例中,href的值是武汉大学的网址。(href缩写:http reference含义为http引用。),HTML基础,href的值也可以是mailto:形式,即发送E-Mail形式。语法为:这就创建了一个自动发送电子邮件的链接,mailto:后边紧跟想要自动发送的电子邮件的地址(即E-Mail地址)。例如,链接到我的电子信箱:这是我的电子信箱(E-Mail信箱),HTML基础,还具有target属性,此属性用来指明显示的目标窗口。如果不使用target属性,当浏览者点击了链接之后将在原来的浏览器窗口中
11、显示HTML文档,若target的值等于“_blank”,点击链接后将会打开一个新的浏览器窗口显示HTML文档。例如,进入,并且在新窗口中显示网页:在新窗口中显示,HTML基础,(2)(标签标记)标签标记需要结合标记使用。name属性不可缺少。标记用来在同一网页中创建一个标签(即做一个记号),即在同一网页中创建链接,以便转到同一网页中有标签的地方并显示。例如,在页顶创建一个标签 此处创建了一个标签 要找到标签所在地,就必须使用标记。例如:点击此处将转到标签“Top”的地方显示,注意:href属性的值若是标签名,必须在标签名前头加一个“#”号。,HTML基础,例2-5 链接标记的综合示例链接标记
12、的综合示例创建标签处欢迎想要学习网页制作的同学访问网站武汉大学网站,HTML基础,本网站的主要内容在新窗口中显示欢迎给我来信,我的E-Mail是:点击此处回到标签处,可以建立例2-5的HTML源文件和作为超链的图像文件d:Inetpubwwwrootweb.gif,在浏览器中显示执行结果。,5.图像标记和多媒体标记(1)图像标记:将图形文件嵌入到网页文档中的当前位置。例如,网页文档与图形文件logo.gif在同一个目录下,则可以将代码写成。假如图形文件放在网页文档所在目录的一个子目录(images)下,则代码应为:。此外,标记还有alt(文字代替)、align(对齐)、border(边框)、w
13、idth(宽度)和height(高度)属性。,HTML基础,演示,假如图形文件放在网页文档所在目录的上层目录(如home)下,则相对路径就必须是准网址,即用“./”表示网站,后边紧跟文件在网站中的路径。例如,home是网站下的一个目录,则代码应为:。例如,home是网站下的目录king下边的一个子目录,则代码应为:。,HTML基础,例2-6 图像标记举例图像标记示例,HTML基础,演示,若事先在网站根目录中存放一幅图像logo468_60.gif,则可以在网页中显示它。alt=网页制作属性表示在网页中可以用文字网页制作代替该图像先行显示出来。,(2)多媒体标记 A.设置音乐播放的链接 在Win
14、dows中,可播放的音乐文件格式常有au、mid及wav三种。若要提供音乐文件让浏览者播放,则可建立指向音乐文件的超链接。例如:甜美音乐 B.设置影像播放的链接 常见的影像文件有mov、mpg和avi。可建立超链接到影像文件。当浏览者单击超链接时,将会调用Windows Media Player,进行影像文件播放。例如:本市交通,HTML基础,C.直接将音乐或影像嵌入网页 可以用标记,即:若“播放次数”设为TRUE,则无限次播放,直到单击关闭或停止。若设为NO(默认值),则只播放一次。D.播放网页背景音乐 可运用标记,即:若“次数”设为Infinite,音乐将循环播放,直到网页关闭为止。,HT
15、ML基础,6.表格标记(用于制作表格或网页结构)(1)(创建一个表格)(2)和(创建表格中的每一行和每一格)(3)(创建表格头)。例2-7 用表格标记创建下列表格。,HTML基础,表格标记示例意大利英格兰西班牙,HTML基础,cellpadding设置格子边框与其内容之间的大小;valign是垂直对齐方式;colspan设置一个格子跨占的列数;rowspan设置一个格子跨占的行数。,AC米兰佛罗伦萨曼联纽卡斯尔巴塞罗那皇家社会,HTML基础,尤文图斯桑普多利亚利物浦阿申纳皇家马德里,HTML基础,拉齐奥国际米兰切尔西米德尔斯堡马德里竞技,HTML基础,演示,7.表单标记(用于制作对话框)(1)
16、(表单开始和结束标记)(2)(输入区标记)(3)(列表框标记)(4)(多行文本框标记)分别介绍如下:(1)标记用来创建一个表单,也即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。,HTML基础,标记具有action、method和target属性。action的值是处理程序的程序名。例如:,当用户提交表单时,服务器将执行网站http:/上的counter.cgi程序。method用来定义处理程序从表单中获得信息的方式,可取值为 GET 或 POST。GET方式是程序从当前网页文档中获取数据,然而这种方式传送的数据量是有所限制的,一般限制在1KB以下。POST方式与GET方式相反
17、,它是当前网页文档把数据传送给处理程序,传送的数据量要比使用GET方式大得多。target用来指定显示表单的目标窗口。,HTML基础,(2)标记用来定义一个用户输入区,用户可在其中输入信息。此标记必须放在标记对之间。标记中共提供文本框、按钮、复选框、单选钮等八种类型的输入区域。例如:,HTML基础,(3)标记用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记之间。具有multiple、name和size属性。例如:请选择最喜欢的男歌星:刘德华 张学友 郭富城 黎明,HTML基础,标记指定列表框中的一个选项,此标记具有selected和value属性。value指定选项值,这个值要传送到
18、服务器上。服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项的。,(4)标记创建可以输入多行的文本框,此标记对用于标记对之间。有name、cols和rows属性。name、cols和rows属性分别用来设置文本框的名称、列数和行数。列与行以字符数为单位。例如:,HTML基础,例2-8 建立一个输入密码,以及具有确认和重输按钮的表单。请输入密码:,HTML基础,8.其他常用标记(1)空格标记  建立HTML源文件时,若用空格键输入多个空格,都将被视为一个。因此,如果想要输入多个空格时,必须用多个标记 。(2)原始排版有效标记和 若要使HTML源文件保留原始的文件
19、排版方式(如:Enter表示换行等),只需在该文本前加入标记以及在文本结束后加上标记,即可使浏览器显示文件原始排版方式。,HTML基础,例如:在HTML源文件中使用空格标记窗里窗外,HTML基础,演示,(3)自动切换标记 标记能使网页显示几秒种后,自动切换到另一网页。语法如下:说明:A.标记应当置于标记之后;B.设置http-equiv属性等于”refresh”表示自动更新;C.“秒数;URL=文件名称或网址”用于指定几秒后将执行自动更新,以及更新后所连接的网页地址与名称。,HTML基础,(4)水平线标记 标记是在HTML文档中加入一条水平线,它可以直接使用,具有size、color、width和noshade属性。size是设置水平线的厚度,而width是设定水平线的宽度,默认单位是像素。noshade属性用来加入一条没有阴影的水平线。例如:。,HTML基础,END,