第二HTML基础.ppt

《第二HTML基础.ppt》由会员分享，可在线阅读，更多相关《第二HTML基础.ppt（60页珍藏版）》请在三一文库上搜索。

1、第二章 HTML基础,彭煜玮 武汉大学计算机学院 2009.9,1,教材和参考书目,网页设计教程 武汉大学出版社 作者： 吴黎兵，罗云芳主编 网页与Web程序设计 机械工业出版社 作者：吴黎兵，熊建强主编,2,内容回顾,WWW具有三个统一： 1.统一的资源命名方式：URL（统一资源定位符，即网址）。 2.统一的资源访问方式：HTTP （超文本传输协议）。 3.统一的信息组织方式：HTML（超文本标记语言）。 WWW是成千上万个网站连結而成的页面式网络信息系统。WWW采用“客户机/服务器”结构。,3,HTTP （超文本传输协议）,Protocol，一组在网络上发送信息的规则和约定。这些规则控制在

2、网络设备间交换消息的内容、格式、定时、顺序和错误控制。 通俗的说就是不同的网络程序的交流语言，我们常见的OICQ使用UDP协议、ICQ使用TCP协议、E-mail程序使用POP3和SMTP协议，正像我们国人使用汉语一样,4,HTTP （超文本传输协议）,超文本传输协议(Hyper Text Transfer Protocol ,简称HTTP)是WWW浏览器和WWW服务器之间的应用层通讯协议。HTTP协议是用于分布式协作超文本信息系统的、通用的、面向对象的协议。 HTTP会话过程包括四个步骤: (1) 连接(Connection); (2) 请求(Request); (3) 应答(Respons

3、e); (4) 关闭(Close)。 HTTP协议是基于TCP/IP之上的协议,它不仅保证正确传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等等。,5,HTTP （超文本传输协议）,HTTP 是一种请求/响应式的协议。 一个客户机与服务器建立连接后，发送一个请求给服务器，请求的格式是：统一资源标识符（URL）、协议版本号，后面是类似 MIME 的信息，包括请求修饰符、客户机信息和可能的内容。 服务器接到请求后，给予相应的响应信息，其格式是：一个状态行包括信息的协议版本号、一个成功或错误的代码，后面也是类似 MIME 的信息，包括服务器信息、实体信息和可能的

4、内容。,6,HTTP （超文本传输协议）,协议结构 HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。请求报文格式如下： 请求行以方法字段开始，后面分别是 URL 字段和 HTTP 协议版本字段，并以 CRLF 结尾。SP 是分隔符。除了在最后的 CRLF 序列中 CF 和 LF是必需的之外，其他都可以不要。,7,HTTP （超文本传输协议）,状态码元由3位数字组成，表示请求是否被理解或被满足。原因分析是对原文的状态码作简短的描述，状态码用来支持自动操作，而原因分析用来供用户使用。客户机无需用来检查或显示语法。,8,HTML基础,一、 HTML的概念 1.什么是HTML ？ 超

5、文本标记语言（HTMLHyperText Markup Language）是用于设计网页源文件（网页文档）的语言。每一个页面的代码保存为一个网页源文件(.htm文件) 。 八十年代初，HTML由万维网联盟（W3C：World Wide Web Consortium）制订。 HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。 后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记 。,9,HTML基础,2.网页的组成 网页由元素构成，每个元素用HTML代

6、码和标记定义。 标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。 标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。例如： 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等 。 例如：,10,HTML基础,标记通常可以分成两种： 第一种用来指定网页上的元素或元素的样式。 例如， 指定一个自然段及其字体和颜色： 自然段内容。 第二种用来指向其它的资源。 例如，指定一个链接地址： 武汉大学 指定一个图片文件： ,11,HTML基

7、础,3.什么是超文本、超媒体和超链接？ 超文本是网页上具有链接功能的文字。 例如，娱乐 新闻 电影 。 超媒体是网页上具有链接功能的多媒体。 超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体。 超链接分为文字和图像（包括动画）两种，网页中的一段文字、一副图像或图像的某一个部分等都可以定义为超链接。,12,HTML基础,二、如何编写和浏览HTML网页文档 启动IE，然后使用“查看”菜单中的“源文件”菜单项，进入记事本，就可以输入网页源文件了。在输入完之后，另存为.htm文件。 或者直接进入记事本，输入网页源文件。在输入完之后，另存为.htm文件（选择保存类型为“所有文件”）。 在浏览器

8、中输入该文件名（全路径）或者双击该文件，就能浏览HTML源文件的网页效果。,13,HTML基础,例如： 学生选课系统 网页制作练习 ,演示,14,网页美的标准,简洁实用 尽量以最高效的方式将用户所需要的信息传递给他。 使用方便 整体性好 一个网站强调的就是一个整体，只有围绕一个统一的目标所作的设计才是成功的。 网站形象突出 页面用色协调，布局符合形式美的要求。 交互性强,15,HTML基础,三、HTML的常用标记 1. HTML文档的结构标记 用来指明一个HTML文档的基本结构。 （1）文件标记： 整个HTML文档内容均在标记之中。 （2）头部标记： 整个HTML文档分头部和主体部分。头部使用

9、标记标识，凡是在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。 头部信息一般是放置一些指示浏览器如何显示该HTML文档的信息。,16,HTML基础,（3）头部标题标记： 在此标记之间的内容将作为标题显示在浏览器的标题栏。注意： 标记只能放在标记之间。 （4）主体标记： 主体是Web页的主要部分，用标记定义的信息将显示在Web页中。 例如： （见下页）,17,HTML基础, 结构标记示例 斜体字文本 可以建立该网页源文件test2-1.htm,演示,18,HTML基础,2.格式标记 （1）（段落标记） 标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。 在

10、段落标记中还可以使用align属性，用来说明对齐方式： ，align可以取值 left：左对齐 center：居中 right：右对齐 例如：表示由这个标记包括的文本采用居中对齐的方式。,19,HTML基础,（2）（换行标记） 是一个很简单的标记，它没有结束标记，用来创建一个换行。 在中产生的行距比在外面产生的行距小。 （3）（两边缩进标记） 在标记之间的文本将按照两边缩进的方式显示。,20,HTML基础,（4）（列表标记） 用来创建一个列表; 用来创建列表中的上层项目; 用来创建列表中最下层项目; 和都必须放在标记之间。 例2-2 创建一个普通列表：,21,HTML基础,该网页的HTML源文

11、件test2-2.htm如下： 一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,演示,22,HTML基础,（5）（标有数字或圆点的列表标记） 标记用来创建一个标有数字的列表； 标记用来创建一个标有圆点的列表； 标记只能在或标记之间使用，此标记对用来创建一个列表项。 若放在之间,则每个列表项加上一个数字，若在之间,则每个列表项加上一个圆点。,23,HTML基础,例2-3 标有数字的列表与标有圆点的列表：,24,HTML基础,该网页的HTML源文件test2-3.htm如下： 标有数字与圆点的列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,演示,25

12、,HTML基础,（6）（分段标记） 标记对用来排版大块HTML段落，也用于格式化表，此标记的用法与标记非常相似，同样有align对齐方式属性 。 align属性，它用来说明对齐方式，语法是：。 align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。 例如：表示标记中的文本居中显示。,26,HTML基础,3. 文本标记 （1）(预处理标记) 表示标记之间的文本原有格式。PRE 元素内的文字是已经格式化的。空格和回车都是保留的。 （2）（六级标题标记） 是最大的标题，则是最小的标题。如果要在HTML文档中输出标题，那麽可以使用六对标题标记的任何一对。,2

13、7,HTML基础,（3）（字体标记） 之间的文本以黑体字的形式输出； 之间的文本以斜体字的形式输出； 之间的文本以下加一划线的形式输出。 （4）（强调加重标记） 用来输出需要强调的文本(通常是斜体加黑体)； 则用来输出加重文本(通常也是斜体加黑体)。,28,HTML基础,（5）（字体的大小颜色标记） 可以指定输出文本的字体大小、颜色，它主要两个属性size和color。 size属性用来指定字体的大小，可以取值： -1、1和+1； color属性用来指定文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称。例如，“#ff0000“，引号内的rrggbb是用六位十六进制数字表

14、示的RGB(即红、绿、蓝三色的组合)颜色，#ff0000对应的是红色。,29,HTML基础, Html语言所给定的颜色名称有： Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。 例如： size取值“+1”、color取值“red”时的文本 表示标记之间的文本按大小为+1，颜色为红色显示。,30,HTML基础,例2-4 文本标记的综合示例,31,HTML基础,该网页的HTML源文件test2-4.htm如下： 文本标记的综合示例 最大的标题 使用h3的标题

15、 最大的标题 黑体字文本 斜体字文本 下加一划线文本 强调的文本 加重的文本 size取值“+1”、 color取值“red”时的文本 ,演示,32,HTML基础,4. 链接标记 （1）（超链接标记） 在标记对之间可指定作为超链接的文本或图像，使用标记指定图像。 例如，指定超链接及其文本“武汉大学网站” ： 武汉大学网站 或者，指定超链接及其图像“d:pic1.gif”： 在上例中，href的值是武汉大学的网址。 （href缩写：http reference含义为http引用。）,33,HTML基础, href的值也可以是mailto:形式，即发送E-Mail形式。语法为： 这就创建了一个自动

16、发送电子邮件的链接，mailto:后边紧跟想要自动发送的电子邮件的地址(即E-Mail地址)。 例如，链接到我的电子信箱： 这是我的电子信箱(E-Mail信箱),34,HTML基础,还具有target属性，此属性用来指明显示的目标窗口。 如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口显示HTML文档。 例如，进入，并且在新窗口中显示网页： 在新窗口中显示,35,（2）（标签标记） 标签标记需要结合标记使用。name属性不可缺少。 标记用来在同一网页中创建一个标签(即做一个记号

17、), 即在同一网页中创建链接，以便转到同一网页中有标签的地方并显示。例如，在页顶创建一个标签 此处创建了一个标签 要找到标签所在地，就必须使用标记。例如： 点击此处将转到标签“Top”的地方显示,HTML基础,注意：href属性的值若是标签名，必须在标签名前头加一个“#”号。,36,HTML基础,例2-5 链接标记的综合示例 链接标记的综合示例 创建标签处 欢迎想要学习网页制作的同学访问网站 武汉大学网站 ,37, 本网站的主要内容 在新窗口中显示 欢迎给我来信，我的E-Mail是： 点击此处回到标签处 ,HTML基础,可以建立例2-5的HTML源文件和作为超链的图像文件d:Inetpubw

18、wwrootweb.gif，在浏览器中显示执行结果。,38,HTML基础,5.图像标记和多媒体标记 （1）图像标记 ： 将图形文件嵌入到网页文档中的当前位置。 例如，网页文档与图形文件logo.gif在同一个目录下，则可以将代码写成。 假如图形文件放在网页文档所在目录的一个子目录(images)下，则代码应为： 。 此外，标记还有alt（文字代替）、align（对齐）、border（边框）、width（宽度）和height（高度）属性。,演示,39,HTML基础,假如图形文件放在网页文档所在目录的上层目录(如home)下，则相对路径就必须是准网址，即用“/“表示网站，后边紧跟文件在网站中的路径

19、。 例如，home是网站下的一个目录，则代码应为： 。 例如， home是网站下的目录king下边的一个子目录，则代码应为： ,40,例2-6 图像标记举例 图像标记示例 ,HTML基础,演示,若事先在网站根目录中存放一幅图像logo468_60.gif ，则可以在网页中显示它。 alt=“网页制作“属性表示在网页中可以用文字“网页制作“代替该图像先行显示出来。,41,HTML基础,（2）多媒体标记 A.设置音乐播放的链接 在Windows中，可播放的音乐文件格式常有au、mid及wav三种。若要提供音乐文件让浏览者播放，则可建立指向音乐文件的超链接。例如： 甜美音乐 B.设置影像播放的链接

20、常见的影像文件有mov、mpg和avi。可建立超链接到影像文件。当浏览者单击超链接时，将会调用Windows Media Player，进行影像文件播放。例如： 本市交通,42,HTML基础,C.直接将音乐或影像嵌入网页 可以用标记，即: 若“播放次数”设为TRUE，则无限次播放，直到单击关闭或停止。若设为FALSE（默认值），则只播放一次。 D.播放网页背景音乐 可运用标记，即： 若“次数”设为Infinite，音乐将循环播放，直到网页关闭为止。,43,HTML基础,6. 表格标记 （用于制作表格或网页结构） （1）（创建一个表格） （2）和（创建表格中的每一行和每一格） （3）（创建表格头

21、） 。 例2-7 用表格标记创建下列表格。,44,表格标记示例 意大利 英格兰 西班牙 ,HTML基础,cellpadding设置格子边框与其内容之间的大小；valign是垂直对齐方式 ； colspan设置一个格子跨占的列数；rowspan设置一个格子跨占的行数。,45,HTML基础, AC米兰 佛罗伦萨 曼联 纽卡斯尔 巴塞罗那 皇家社会 ,46,HTML基础, 尤文图斯 桑普多利亚 利物浦 阿申纳 皇家马德里 ,47,HTML基础, 拉齐奥 国际米兰 切尔西 米德尔斯堡 马德里竞技 ,演示,48,HTML基础,7. 表单标记（用于制作对话框） （1）（表单开始和结束标记） （2）（输入区

22、标记） （3）（列表框标记） （4） （多行文本框标记） 分别介绍如下： （1）标记用来创建一个表单，也即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。,49,HTML基础,标记具有action、method和target属性。 action的值是处理程序的程序名。例如： ，当用户提交表单时，服务器将执行网站http:/ method用来定义处理程序从表单中获得信息的方式，可取值为 GET 或 POST 。 GET方式是程序从当前网页文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。 POST方式与GET方式相反，它是当前网页文档把数据传送给处理程序，

23、传送的数据量要比使用GET方式大得多。 target用来指定显示表单的目标窗口。,50,HTML基础,（2）标记用来定义一个用户输入区，用户可在其中输入信息。此标记必须放在标记对之间。标记中共提供文本框、按钮、复选框、单选钮等八种类型的输入区域 。例如：,51,（3）标记用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记之间。具有multiple、name和size属性。例如： 请选择最喜欢的男歌星: 刘德华 张学友 郭富城 黎明 ,HTML基础,标记指定列表框中的一个选项，此标记具有selected和value属性。value指定选项值，这个值要传送到服务器上。服务器正是通过调用区域

24、的名字的value属性来获得该区域选中的数据项的。,52,HTML基础,（4）标记创建可以输入多行的文本框，此标记对用于标记对之间。 有name、cols和rows属性。 name 、cols和rows属性分别用来设置文本框的名称、列数和行数。列与行以字符数为单位。例如：,53,HTML基础,例2-8 建立一个输入密码，以及具有确认和重输按钮的表单。 请输入密码： ,54,HTML基础,8.其他常用标记 （1）空格标记  建立HTML源文件时，若用空格键输入多个空格，都将被视为一个。因此，如果想要输入多个空格时，必须用多个标记 。 （2）原始排版有效标记和 若要使HTML源文件

25、保留原始的文件排版方式（如：Enter表示换行等），只需在该文本前加入标记以及在文本结束后加上标记，即可使浏览器显示文件原始排版方式。,55,HTML基础,例如：在HTML源文件中使用空格标记窗里窗外 下面是直接用的空格： 信物 席慕容 有谁会将诗集放在行囊里离去 等待在独居的旅舍枕边 一页一页地翻开 灯熄之后 窗里窗外 ,演示,56,HTML基础,（3）自动切换标记 标记能使网页显示几秒种后，自动切换到另一网页。语法如下： 说明： A. 标记应当置于标记之后; B. 设置http-equiv属性等于”refresh”表示自动更新； C.“秒数；URL=文件名称或网址”用于指定几秒后将执行自动更新，以及更新后所连接的网页地址与名称。,57,HTML基础, Meta示例 请稍候，页面5秒后自动跳转到test2-5！ ,58,HTML基础,（4）水平线标记 标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。 例如： 。,59,END,60,