HTML网页制作第二章PPT课件.ppt

1、HTML网网页制作页制作 第二章第二章 网页常用标签网页常用标签 图片、超级链接、列表、滚动效果本章主要内容本章主要内容表格和层及表单 教学要求教学要求了解在网页中图片的添加及每个页面之间链接的形成。认识网页中的表格和层，及用表格进行网页布局2.2.网页常用标签网页常用标签2.1 2.1 图片图片1 1）图片标记）图片标记在网页中我们可以使用标签插入图片，标签的语法如下: 注意注意: :在使用标签时，不是英语单词中的image单词拼写方式，在html页面中可以插入图像，网页中常用的图像格式有jpg和gif两种。例例2-1:2-1:标签的使用标签的使用/ 我们在这里插入图片! 2.2.网页常用标

2、签网页常用标签2.1 2.1 图片图片 页面中插入图片可以起到美化的作用，插入图片的标记只有一个，那就是标记，插入图片的时候，仅仅使用标记是不够的，需要配合其它的属性来完成。如表2-12 2）属性介绍）属性介绍src:图像的源文件。 alt:提示文字。width:宽度。 height：高度。border:边框。 align:排列。2.2.网页常用标签网页常用标签2.1 2.1 图片图片 图文混排是制作精美网页常用的功能之一，通过将适当的图像与文字有效的排列组合在一起，可以大大丰富版面，在很大程度上提高版面的可视性。 图文混排是指当文字和图片在一起时他们的排列方式，通过图片的align属性设置，

3、一般有如下几种值：3 3）图文混排）图文混排left:表示图片在文字的左边显示。right:表示图片在文字的右边显示。top:表示文字和图片的顶端对齐。bottom:表示文字和图片的底端对齐。middle：表示文字和图片中部对齐。2.2.网页常用标签网页常用标签2.1 2.1 图片图片3 3）图文混排）图文混排 例2-2:图文混排图文混排 图片在文字的右边显示！ 文字和图片中部对齐！2.2.网页常用标签网页常用标签2.2 2.2 超级链接超级链接超级链接也称超链接或链接。超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。所谓的超链接是指从一个网页指向一个目

4、标的连接关系。按照链接路径按照链接路径: :内部链接内部链接-点击该超链接连接到同一网站 的另外一个页面。锚点链接锚点链接-点击该超链接连接到同一页面的某一个位置。外部链接外部链接-点击该超链接连接到其它的网站上的某一个页面按使用对象按使用对象: :文本超链接文本超链接-建立在文本上的超连接。图像超链接图像超链接-建立在图片上的超连接。E-mailE-mail链接链接-超链接的目标是打开邮件发送。锚点链接锚点链接-超链接的目标是在同一个页面之内。多媒体文件链接多媒体文件链接-超链接的目标是多媒体文件。空链接空链接-超链接没有目标。2.2.网页常用标签网页常用标签2.2 2.2 超级链接超级链接

5、超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则打开一个新的网页，其语法如下:href表示超链接的目标路径，href的值一般有三种形式的值: (1)绝对URL的超链接。URL就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径，称为内部链接。如。 (2)第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去，称为外部链接。 (3)第三种称为同一网页的超链接，这种超链接又叫做书签或者锚标记。1 1）超链接）超链接2.2.网页常用标签网页常用标签2.2 2.2 超级链接超级链接例2-3:超级链接的使用a.htmlb.h

6、tml/ 我们现在学习的是超级链接的使用! 1 1）超链接）超链接/ 链接到另外一个页面2.2.网页常用标签网页常用标签2.2 2.2 超级链接超级链接锚标记的作用是链接到同一页面的某一个段落，它的语法和超链接的语法几乎一样，只是src属性的书写有些变化和属性的使用,其锚标记的定义语法如下:a name=“ 文本内容文本内容注意:锚标记的使用需要先使用标签和name属性定义一个锚标记，然后使用标签的href属性去链接。2 2）锚标记）锚标记锚标记的使用语法如下:a href=“# 文本内容文本内容2.2.网页常用标签网页常用标签2.2 2.2 超级链接超级链接例2-4：锚标记的使用2 2）锚标

7、记）锚标记/ 第一章为“锚”标记。 除了链接到另外一个HTML文件，也可以在一篇文章内随心所欲地链接。 这和前面两种稍有不同，需要先做出一个“锚”标记，即链接的目标地， 再做到“锚”的链接。到“锚”的链接与平常相同。 从这里可链接到第一章2.2.网页常用标签网页常用标签2.2 2.2 超级链接超级链接外链接是指超链接的目标是当前网站之外的页面路径，其语法格式和超链接的语法格式完全相同，比如我需要在我的页面中使用百度的搜索功能。例例2-5:2-5:外链接的使用外链接的使用3 3）外链接）外链接/ 使用百度搜索2.2.网页常用标签网页常用标签2.3 2.3 滚动效果滚动效果在网页上我们经常看到文字

8、和图片可以自上而下滚动，也可以从左至右滚动，能够使这些僵硬的文字和图片变的活跃起来的大功臣便是标签。其语法是：marquee 2” 内容内容2.2.网页常用标签网页常用标签2.3 2.3 滚动效果滚动效果标签的属性align 用于按设定的值对齐滚动的内容，可以设定的值有：left、center、top、bottom。loop 用于设定滚动内容的滚动次数。当loop的值为“infinite”或是“-1”时，则内容会无限制的滚动。scrollamount 用于设定每个连续滚动内容后面的间隔，该间隔用像素表示。scrolldelay 用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。bgcol

9、or 用于设定内容的背景颜色。direction 用于设定内容滚动的方向。可以设定的值有:left、right、down、up。height 用于设定滚动内容的高度。width 用于设定滚动内容的宽度。hspace 用于设定滚动内容左右的空白空间。vspace 用于设定滚动内容上下的空白空间。注意:标签的属性，不是所有的属性都必须使用。2.2.网页常用标签网页常用标签2.4 2.4 列表列表1)有序列表有序列表是指列表结构中的列表项有先后顺序的列表形式。从上到下有序列编号，由标签和列表项实现。其语法如下： 第一项 第二项 第三项注意:type属性用于设置有序列表项前的编号类型，而start属性

10、用于设置起始值。Type属性的值可以有很多种。 有序列表的属性值 type=1 表示列表项用的数字标号(1、2、3.) type=A 表示列表项用大写字母标号(A、B、C.) type=a 表示列表项用小写字母标号(a、b、c.) 2.2.网页常用标签网页常用标签2.4 2.4 列表列表1）有序列表 有序列表的使用 网页前台技术列表 HTML CSS JavaScript JQuery 例2-6:有序列表的使用2.2.网页常用标签网页常用标签2.4 2.4 列表列表2)无序列表无序列表是指列表结构中的列表项没有先后顺序的列表形式。大部分网页应用的列表均采用无须列表，由标签和列表项实现。其语法如

11、下： 第一项 第二项 第三项注意:type属性用于设置无序列表项前的提示符类型。Type属性的值可以有很多种。 无序列表的属性值无序列表的属性值 type=“disc” 表示列表项前的提示符为实心圆。 type=“circle” 表示列表项前的提示符为空心圆。 type=“square” 表示列表项前的提示符为方块。 2.2.网页常用标签网页常用标签2.4 2.4 列表列表1）有序列表 无序列表的使用 网页后台技术列表 J2EE ASP.NET PHP Struts 例2-7:无序列表的使用2.2.网页常用标签网页常用标签2.5 2.5 表格表格 表格是网页制作中使用最多的技术之一。表格通常用

12、来显示分类数据，在网页中表格更多地用在网页布局和定位上，通过使用表格相关属性，可以实现对网页中的文字和图片进行合理的布局和定位，使得网页在形式上丰富多彩，在组织上井然有序。 表格是由指定数目的行和列组成，表格的基本结构有表格标题、表格主体部分、行、列、单元格。表格标题、表格主体部分、行、列、单元格。在HTML中，表格至少由、这三种标签组成，否则就不能成为表格。标签中间将包括所有的表格元素，表格元素主要有行、列、单元格等。 创建表格创建表格 语法格式如下语法格式如下: : table 2” 表格标题表格标题 !- 标题列标题列1!1- 例例1 1值值1!1- 1 1）表格的基本结构和属性）表格的

13、基本结构和属性2.2.网页常用标签网页常用标签2.5 2.5 表格表格标签的含义标签的含义: :标签标签:标签用于在HTML文档中创建表格，它包含表明和表格本身内容的代码。标签标签:用于定义表格的标题，标题将在表格的最上方显示，默认居中，定义表格时可以省略该标签。标签标签：表格的主体内容，所有的航都在该标签之下。在一个表格中该标签只能定义一个，该标签也可 以省略，即使没有显示的定义，默认也存在该标签。标签标签:用于定义表格的行，行有多个单元格构成，如果标签被省略则必须放在之内。标签标签：用于定义列头，该属性的内容默认加粗，并且居中对齐。该标签必须放在之内。标签标签:表格由多行构成，而每行又由多

14、个单元格构成，使用标签定义单元格，应该嵌套在标签之内。1 1）表格的基本结构和属性）表格的基本结构和属性2.2.网页常用标签网页常用标签2.5 2.5 表格表格 创建规则的表格学生考试成绩 HTML学习班成绩 学号 姓名 性别 电话 NY01 张三 男 20 2 2）创建规则的表格）创建规则的表格2.2.网页常用标签网页常用标签2.5 2.5 表格表格标签的属性标签的属性width 宽度； height 高度； border 边框值；cellspacing 用于设置单元格之间的距离，即td与td之间的距离。cellpadding 用于设置单元格内容和单元格边框的距离。bordercolorli

15、ght 表格的亮边框颜色。bordercolordark 表格的暗边框颜色。bgcolor 表格的背景色。background 表格的背景图片。bordercolor 表格边框的颜色。 3 3）美化表格）美化表格2.2.网页常用标签网页常用标签2.5 2.5 表格表格4 4）创建不规则表格）创建不规则表格不规则表格是指每一行、每一列的单元格数量不完全相同的表格。通过标签的colspan和rowspan属性实现。其中colspan属性用于指定当前单元格由规则表格的几个水平单元格构成。rowspan属性用于指定当前单元格由单元格的几个垂直单元格构成。例例2-82-8：不规则表格的使用：不规则表格的

16、使用/ table cellspacing=“0” cellpadding=“6” bordercolor=“#006699” border=“1” align=“center” width=“350px” 吴 用狗头军师 电话: QQ:10000email: 重庆能源职业学院 2.2.网页常用标签网页常用标签2.6 2.6 表格布局表格布局5 5）使用表格布局表格）使用表格布局表格 我们在网页制作的时候经常使用不规则表格，也常用表格对网页进行布局。例例2-92-9：使用表格布局：使用表格布局/ 2.2.网页常用标签网页常用标签2.7 2.7 层层 层(div)元素是用来为HTML文档内大块的

17、内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是要你过来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式来进行控制。现在所有的浏览器都支持div标签。创建层的基本语法如下: 其中div常用的属性有: align 设置层内容的对齐方式，可以是left(左对齐)、right(右对齐)、center(居中对齐) title 设置层的提示信息，当鼠标移动到层上时的提示信息。 style 用于设置层的样式，所有的层的样式设置都在该属性中，比如宽、高、边框、背景等，该属性我们在CSS中讲解，当使用层布局网页时必须使用该属性。2.2.网页常用标签网页常用标

18、签2.7 2.7 层层 层(div)元素是用来为HTML文档内大块的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是要你过来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式来进行控制。现在所有的浏览器都支持div标签。例2-10：层的使用 层的使用 下面是层中的图片 提示:纯粹使用标签而不加任何CSS内容，其效果与用标签没有多大区别。2.2.网页常用标签网页常用标签2.8 2.8 的用法和元素相同。不同之处在于: 是块级元素，可以包含段落、标题、表格等，所有能写在网页主体中的内容都可以写在中，由于是块级元素，所以在段落开始、结束都会插入一个换

19、行。 是一个行内元素，他不能包含除文本以外的其它网页元素，比如段落、标题、表格、图片等，显示的时候也不会像一样换行。最常见的用法就是嵌入某一标签中，突出某部分文本或者某个字符。例2-11：span的使用 span的使用 重庆能源职业学院 新校区投入使用 一期工程很漂亮噢！ 2.2.网页常用标签网页常用标签2.9 2.9 表单表单表单的主要功能是收集信息，具体说是手机浏览者的信息。典型的表单应用有:用户注册、用户登录、网上购物、用户注册、用户登录、网上购物、意见调查、搜索功能意见调查、搜索功能等。 1）表单的创建 在HTML中表单使用标签实现，所有的表单内容，比如登录的帐号、密码等都是在标签之内

20、，语法如下: 表单语法表单语法 form 2” 表单内容表单内容 标签常用的属性有： name：用于设置表单名，通过为表单命名可以方便我们控制用户和页面交互信息,也可以控制表单与后台程序之间的关系。 action:用来指定表单提交的路径，即网站处理表单功能的程序路径。 method:用于设置表单的提交方式，即用户(客户端)向网站(服务器段)发送表单数据的方式。 客户端向服务器端发送数据使用HTTP协议。2.2.网页常用标签网页常用标签2.9 2.9 表单表单表单的主要功能是收集信息，具体说是手机浏览者的信息。典型的表单应用有:用户注册、用户登录、网上购物、用户注册、用户登录、网上购物、意见调查

21、、搜索功能意见调查、搜索功能等。 method属性就是用于设置传送数据的方式。每种方式传输数据各有自己的优缺点，使用get方式传输数据的时候会将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用”?”连接，而各个变量之间使用“&”连接，所以getget方式的特点有: 1)数据量小。 2)安全性差。 3)数据较快。 post方式的所有操作对用户来说都是不可见，其特点有： 1)数据量大，理论上是无限的。 2)安全性高。 3)数据较慢。注意:我们在使用表单是要根据实际情况选择提交方式，一般使用post方式发送表单数据。target:指定表单提交后返

22、回信息的显示方式，其常见值如表: _blank 返回信息在新打开的浏览器窗口中_parent 返回信息显示在父级浏览器窗口中_self 返回信息显示在当前浏览器窗口中_top 返回信息显示在顶级浏览器窗口中2.2.网页常用标签网页常用标签2.9 2.9 表单表单例例2-122-12：formform表单登录表单登录 欢迎登录欢迎登录 帐号帐号: 密码密码: input type=“submit” value=“ / 2.2.网页常用标签网页常用标签2.9 2.9 表单表单表单控件表单控件根据表单控件的作用和使用效果我们可以将表单空间分为文本标签、输入控件、文本域控件、下拉框、按钮等。根据表单控

23、件的作用和使用效果我们可以将表单空间分为文本标签、输入控件、文本域控件、下拉框、按钮等。1 1、文本框、文本框 2 2、密码框、密码框 3 3、文本域、文本域 默认值 name:用于设置控件的名称，和标签的name属性作用相同。 rows:设置文本域控件显示的高度。比如rows=“5”,表示文本域在网页中显示高度为5行字符的高度。 cols:用于设置文本域控件显示的宽度，作用和标签的size属性类似。4 4、下拉列表控件、下拉列表控件 显示内容 name:用于指定元素的名称，表单提交时会将name属性与所选者的值一起提交。 multiple:允许用户选择多个选项。 size:在多个选项可以滚动查看时，用于指定可以同时查看到多个选项。p 经常不断地学习,你就什么都知道。你知道得越多,你就越有力量p Study Constantly, And You Will Know Everything. The More You Know, The More Powerful You Will Be写在最后谢谢大家荣幸这一路，与你同行ItS An Honor To Walk With You All The Way演讲人：XXXXXX 时 间：XX年XX月XX日