HTML教学-ppt课件.ppt

1、第2章 超文本标记语言HTML 网页设计与制作教程1ppt课件 2.2 文字和段落标记 2.3 列表标记2.1 HTML文件的基本结构 2.4 图片标记目 录 2.5 表格标记 2.6 超链接标记 2.7 表单标记 2.8 框架标记2ppt课件2.1 HTML文件的基本结构2.1.1 HTML概述2.1.2 HTML语法2.1.3 HTML文件的基本结构3ppt课件2.1.1 HTML概述 HTML是一种描述性语言，用HTML可以创建能在互联网上传输的信息页，即通常所称的主页或网页。HTML语言使用描述性标记符（称为标记）来指明文本的不同内容。HTML是一种语言，但并不算是“程序”语言。HTM

2、L文档包含两种信息：页面本身的文本和表示页面元素、结构、格式、及其他超文本链接的HTML标记。4ppt课件2.1.2 HTML语法 受标记影响的内容受标记影响的内容例如，可以用字体标记的字号属性size指定文字的大小，HTML语句如下：本行字将以较小字体显示5ppt课件2.1.3 HTML文件的基本结构网页的标题文档主体，正文部分6ppt课件2.1.3 HTML文件的基本结构1. HTML文件头2. HTML文件主体7ppt课件1. HTML文件头 TITLE 标记：标题名 META标记：给浏览器、搜索引擎或其他应用程序提供本HTML文件的有关信息（如作者，终止日期，关键词列表等等）。8ppt

3、课件META标记的格式为：9ppt课件name属性主要用于描述网页，其常用的选项有GENERATOR、Keywords、description、robots、author等。GENERATOR用来说明制作本网页所用的编辑工具，Keywords用来告诉搜索引擎本网页的关键字是什么，description用来告诉搜索引擎本网页的主要内容，robots用来告诉搜索机器人那些页面需要索引，哪些页面不需要索引，author用来标注网页的作者。10ppt课件http-equiv属性相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，其常用的选项有Content-T

4、ype、Expires、Refresh等等。Content-Type用以说明网页所使用的字符集；Expires用于设定网页的到期时间；一旦网页过期，必须到服务器上重新传输；Refresh用于自动刷新并指向新页面。Name属性和http-equiv属性不能在同一个标记中使用。11ppt课件Content属性则根据name选项或http-equiv选项的定义来决定此项填写什么样的字符串。例如：向搜索引擎说明本网页的关键词。告诉搜索引擎本网站的主要内容。12ppt课件 通知浏览器本HTML文件使用了gb2312字符集，是简体中文网页。可以使当前网页在2秒后自动转到北京化工大学北方学院的主页（http

5、:/） 去，这就是META的刷新作用，在Content中，2代表设置的时间（单位为秒），而URL就是在指定的时间后自动连接的网页地址。如果网页地址就是本页的地址，那么就是自动刷新。13ppt课件使用META标记，还可以在进入网页或者离开网页时实现动画效果。例如的意思是，进入本页面（http-equiv=”Page-Enter”）时，页面将按水平百叶窗（transition=9）的形式展开，整个展开过程历时3秒（duration=3）。的意思是离开本网页时，页面将按圆形收缩的形式切换成其他网页，并且整个切换时间为5秒。14ppt课件2. HTML文件主体 HTML文件主体标记的格式为：网页的内容

6、15ppt课件Background：设置网页的背景图像；Bgcolor：设置网页的背景色；Text：设置文本的颜色Link：设置尚未被访问过的超文本链接的颜色；Vlink：设置已被访问过的超文本链接的颜色；Alink：设置超文本链接在被访问瞬间的颜色。16ppt课件颜色的表示方法以命名方式定义常用的颜色，如RED、blue等。以RGB值表示，如#FF0000表示red，#0000ff表示blue。17ppt课件常用16种色彩的英文名和RGB值对照预定义色彩预定义色彩RGB值值预定义色彩预定义色彩RGB值值Aqua#00FFFFgray#808080Navy#000080silver#C0C0C

7、0Black#000000green#008000Olive#808000teal#008080Blue#0000FFlime#00FF00Purple#800080yellow#FFFF00Fuchsia#FF00FFmaroon#800000Red#FF0000white#FFFFFF18ppt课件例2-1 一个简单的HTML文件一个简单的HTML示例我是中国人，我热爱我的祖国。19ppt课件2.2 文字和段落标记2.2.1 标题文字标记标题文字标记2.2.2 文字标记文字标记2.2.3 段落标记段落标记20ppt课件2.2.1 标题文字标记标题文字标记21ppt课件标题文字标记的格式为：

8、标题文字标题文字属性n用来指定标题文字的大小，可以取16的整数值，取1时文字最大，6时文字最小。在一个标题行中无法使用不同大小的字体。属性align用来设置标题在页面中的对齐方式，有left（左对齐）、center（居中）和right（右对齐）三种选择。22ppt课件例2-2 用设置标题设置标题 第1级标题H1 第2级标题H2 第3级标题H3 第4级标题H423ppt课件2.2.2 文字标记文字标记24ppt课件文字标记的格式为：被设置的文字25ppt课件 属性size用来设置文字的大小文字的大小。数字的取值范围从17，size取1时文字最小，取7时文字最大。 属性face用来设置字体字体。如

9、黑体、宋体、楷体_GB2312、仿宋_Gb312、隶书、Times New Roman等。 属性color用来设置文字颜色文字颜色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，参见表2-1。 26ppt课件例2-3 用设置文字的大小、字体和颜色。用FONT标记设置文字大小、字体和颜色普通文字1号字7号字宋体4号字华文彩云3号字红色蓝色隶属6号字27ppt课件受影响的文字粗体受影响的文字斜体受影响的文字加下划线受影响的文字标准打印机字体受影响的文字大型字体受影响的文字小型字体受影响的文字闪烁效果受影响的文字下标受影响的文字上标受影响的文字加删除线表2-2 设置各种字型的标记2

10、8ppt课件例2-4 设置字型设置字型普通文字 加粗字 斜体字 加下划线 大型字体小型字体 加删除线 X2+Y2=Z229ppt课件2.2.3 段落标记1. 强制换行标记2. 强制换段标记3. 设置段落标记4. 水平线30ppt课件1. 强制换行标记强制换行的格式为：文字31ppt课件例2-5 强制换行标记的使用 强制换行标记的使用登鹤雀楼白日依山尽黄河入海流欲穷千里目，更上一层楼。br登鹤雀楼白日依山尽， 黄河入海流。欲穷千里目， 更上一层楼。32ppt课件2. 强制换段标记 段落标记放在一段文字的末尾，就定义了一个新段落的开始。标记不但能使后面的文字换到下一行，还可以是两段之间留一空行。由

11、于一段的结束意味着新一段的开始，所以使用也可省略结束标记。强制换段标记的格式为：文字强制换段标记可以看作两个强制换行标记33ppt课件3. 设置段落标记设置段落标记的格式为：文字其中属性align用来设置段落的对齐方式，可以为left、center或right，分别表示段落左对齐、段落居中、段落右对齐。默认为left。34ppt课件例2-6 段落标记的使用。段落标记的使用登鹤雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。35ppt课件4. 水平线 水平线标记的格式为：。36ppt课件Align属性： 设定线条放置的位置，可选择left、right或 center。Size属性： 设定线条

12、厚度，以像素作单位，默认为2。Width属性： 设定线条长度，可以是绝对值或相对值， 默认值为100%。Color属性： 设定线条颜色，默认为黑色。Noshade属性：设定线条为平面显示（没有三维效果），若 缺省，则有阴影或立体效果。37ppt课件例2-7 水平线标记的使用水平线标记的使用38ppt课件2-3 列表标记2.3.1 无序列表无序列表2.3.2 有序列表有序列表2.3.3 列表的嵌套列表的嵌套39ppt课件2.3.1无序列表无序列表中每一个表项的前面是项目符号（如 、 等）。建立无序列表使用标记和表项标记。格式为： 第一个列表项 第二个列表项 40ppt课件标记：是单标记，即一个表

13、项的开始，就是前一个表项的结束。Type： 指定每个表项左端的符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），还可以自己设置图片， 如默认为实心圆点。41ppt课件例2-8 无序列表标记的使用 无序列表标记的使用 网络的拓扑结构 总线结构星型结构环型结构42ppt课件2.3.2 有序列表 使用标记可以建立有序列表，表项的标记仍为LI，格式为： 第一个表项 第二个表项 43ppt课件type属性可设定5种序号：数字（type=1）、大写英文字母（type=A）、小写英文字母（type=a）、大写罗马字母（type=I）、小写罗马字母（type=i），缺省的序号

14、标记是数字。44ppt课件例2-9 有序列表标记的使用。 有序列表标记的使用通过拨号网络连接Internet的步骤安装调制解调器创建拨号连接设置拨号网络设置拨号网络45ppt课件2.3.3 列表的嵌套 列表嵌套可以把网页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且可以互相嵌套。46ppt课件例2-10 无序列表中套无序列表。例2-11 有序列表中套无序列表。47ppt课件2.4 图片标记2.4.1 网页中的图片网页中的图片2.4.2 图片标记图片标记2.4.3 设定图片的布局设定图片的布局48ppt课件2.4.1 网页中的图片 Web中图片的几种常用

15、格式为GIF、JPEG和PNG，此外还可使用矢量格式。其中最常用的是GIF和JPEG格式，几乎所有浏览器都支持这两种格式。49ppt课件2.4.2 图片标记 图片标记的格式为：50ppt课件2.4.3 设定图片的布局 布局是图像放在网页中的位置以及图像与文本的排放关系。实现这种功能，除了利用标记的align属性外，还有、等标记。1. 设置图像的对齐方式2.设置图像与文本间的关系 51ppt课件1. 设置图像的对齐方式 图像可放在页面的左边（left）、中间（center）和右边（right）。使用标记的align属性可实现图像的居左、居中和居右。格式为：另外，实现图像居中还可以使用标记，格式为

16、： 52ppt课件例 2-12 设置图像的对齐方式53ppt课件2. 设置图像与文本间的关系 （1）设置图像与文本之间的空白（2）文本与图像在垂直方向上的对齐（3）文本环绕图像54ppt课件2. 设置图像与文本间的关系 （1）设置图像与文本之间的空白标记的hspace和vspace属性可实现该功能。55ppt课件2. 设置图像与文本间的关系 （2）文本与图像在垂直方向上的对齐文本 文本其中align的值可取：top文本与图像的顶部对齐；middle文本与图像的中央对齐；bottom文本与图像的底部对齐。56ppt课件2. 设置图像与文本间的关系 （3）文本环绕图像文本其中align的值可取：l

17、eft 图像居左，文本在图像的右边；right 图像居右，文本在图像的左边。使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图像，可用标记，其后的文本将不再环绕图像。其格式为：57ppt课件例 2-13 设置图像与文本间的关系58ppt课件2.5 表格标记2.5.1 建立简单表格建立简单表格2.5.2 表格的属性设置表格的属性设置59ppt课件2.5.1 建立简单表格建立简单表格一般格式为： 标题 表头1 表头2表头n 表项11表项12表项1n 表项m1表项m2表项mn60ppt课件例 2-14 一个简单的表格61ppt课件2.5.2 表格的属性设置 1.

18、表格标记属性 2. 单元格的合并 3. 表格的分组显示 4. 表格边框和分隔线的显示控制62ppt课件2.5.2 表格的属性设置 1. 表格标记属性 （1）标记的属性设置 （2）标记的属性设置 （3）标记的属性设置 63ppt课件2.5.2 表格的属性设置 1. 表格标记属性 （1）标记的属性设置 64ppt课件2.5.2 表格的属性设置 1. 表格标记属性 （2）标记的属性设置 65ppt课件2.5.2 表格的属性设置 1. 表格标记属性 （3）标记的属性设置 66ppt课件例 2-15 表格的属性设置67ppt课件2.5.2 表格的属性设置 2. 单元格的合并 其中，i表示合并的列数，j表

19、示合并的行数。68ppt课件例 2-16 表格单元格的合并69ppt课件例 2-17 表格单元格的随意合并70ppt课件2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 （2）按列分组71ppt课件2.5.2 表格的属性设置 3. 表格的分组显示 （1）按行分组 表头 表尾 表体1 表体n 72ppt课件例2-18 按行组制作表格。73ppt课件2.5.2 表格的属性设置 3. 表格的分组显示 （2）按列分组 标记可一次设定列组中的列数以及各列属性。其格式为： 标记可以设定一列的属性，它可以放在中使用，也可单独用于定义列组以外列的属性，但它不能构造列组。其格式为：74ppt课件

20、例2-19 设置列组。75ppt课件2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 （1）边框的显示可以通过在标记中设置frame属性来控制。其方法为：属性值box（显示所有4个边框）、above（只显示上边框）、below（只显示下边框）、hsides（只显示上、下边框）、vsides（只显示左、右边框）、lhs（只显示左边框）、rhs（只显示右边框）和void（不显示任何边框）。76ppt课件2.5.2 表格的属性设置 4. 表格边框和分隔线的显示控制 （2）分隔线的显示可以通过在标记中设置rules属性来控制。其方法为：属性值可以为all（显示所有分隔线）、groups（只

21、显示组与组之间的分隔线）、rows（只显示行与行之间的分隔线）、cols（只显示列与列之间的分隔线）、none（不显示任何分隔线）。77ppt课件2.6 超链接标记2.6.1 超链接标记超链接标记2.6.2 页面链接页面链接2.6.3 书签链接书签链接2.6.4 电子邮件链接电子邮件链接78ppt课件2.6.1 超链接标记超链接标记热点属性href为超文本引用，它的值为一个URL地址，是目标资源的有效地址。 可以是相对路径或者绝对路径。属性name指定当前文档内的一个字符串，作为链接时可以使用的有效的 目标资源的地址。属性target用于设定链接被按后结果所要显示的窗口。可选值为_blank

22、（或new）、_parent、_self、_top、框架名称。79ppt课件2.6.2 页面链接页面链接字符串80ppt课件2.6.3 书签链接书签链接 首先在目标位置设置标记，称为书签，设置格式为：text在跳转调用处定义超链接，格式为：text如果在一个网页中（如A页面）要建立指向其他页面（如B页面）中某一处的超链接，方法为：在B页面中要跳转到的目标位置设置标记，格式为：在A页面中定义超链接，格式为：text。81ppt课件2.6.4 电子邮件链接电子邮件链接热点文本82ppt课件例2-21 超链接标记的使用。83ppt课件2.7 表单标记2.7.1 表单的标记表单的标记2.7.2 常用的

23、表单域常用的表单域84ppt课件2.7.1 表单的标记表单的标记HTML中与设计表单有关的常用标记有、等标记。85ppt课件2.7.1 表单的标记表单的标记（1）表单标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的URL地址。其基本格式为：86ppt课件2.7.1 表单的标记表单的标记（1）Action 属性用于设定处理表单数据程序的URL地址。这样的程序通常是ASP之类的应用程序，采用电子邮件方式时，用action=”mailto：指定的电子邮件地址”。Method 属性指定数据传送到服务器的方式。有两种主要的方式，其中POST方式较为常用。当method=get 时，将输入数据

24、加在action指定的地址后面传送到服务器；当method =post 时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。Name 属性用于设定表单的名称。Onsubmit 和 onreset 主要针对“submit”按钮和“reset”按钮来说的，分别设定在按下相应的按钮之后要执行的子程序。Target 属性指定输入数据结果显示在哪个窗口，这需要与标记配合使用。87ppt课件2.7.1 表单的标记表单的标记（2）标记在表单中使用最频繁，大部分表单内容需要用到此标记。它主要用来设计表单中提供给用户的输入形式。其基本格式为：88ppt课件2.

25、7.1 表单的标记表单的标记（2）name属性设定当前表项的名称，主要在处理表单时起作用。type 属性决定了表单中表项的类型。其选项较多，有text、password、checkbox、radio、submit、reset、file、hidden、image、button等。value属性用于设定输入默认值，即如果用户不输入的话，就采用此默认值。src属性是针对type=image的情况来说的，设定图像文件的URL地址。checked属性表示选择框（单选钮或复选框）中，此项被默认选中。maxlength属性表示在输入单行文本的时候，最大输入字符个数。size属性用于设定单行文本区域的宽度。8

26、9ppt课件2.7.2 常用的表单域常用的表单域1. 文本框和密码框2. 单选钮和复选框3. 列表框4. 多行文本框5. 按钮90ppt课件2.7.2 常用的表单域常用的表单域1.文本框和密码框（1）单行文本框的基本格式为：（2）密码框的基本格式为：在密码框中输入的表单内容将以“*”显示。91ppt课件2.7.2 常用的表单域常用的表单域2.单选钮和复选框（1）单选钮就是从一组选择项中选取一项。其基本格式为：注意同组单选钮必须具备相同的name名称。（2）复选框就是可以从一组选择项中选取多项。其基本格式为：同组复选框也必须具备相同的name名称。在其中还可以加入checked属性表示默认选定值

27、。92ppt课件2.7.2 常用的表单域常用的表单域3 . 列表框一个列表框的基本格式为： 选项1 选项2 选项n93ppt课件2.7.2 常用的表单域常用的表单域4 . 多行文本框基本格式为：94ppt课件2.7.2 常用的表单域常用的表单域5.按钮按钮包括“提交”按钮（type=submit）、“重置”按钮（type=reset）和普通按钮（type=button）。“提交”按钮是将表单内容提交给服务器的按钮，“重置”按钮是将表单内容全部清除，让浏览者重新填写的按钮。按钮的基本格式为：95ppt课件例2-22 表单的使用。96ppt课件2.8 框架标记2.8.1 建立框架建立框架2.8.2

28、 框架的属性设置框架的属性设置2.8.3 框架间的链接框架间的链接97ppt课件2.8.1 建立框架建立框架一个框架的基本结构为： 1. 标记 2.标记 3. 标记98ppt课件2.8.1 建立框架建立框架 1. 标记基本格式为：99ppt课件2.8.1 建立框架建立框架 2.标记标记是一个单标记，其格式为：100ppt课件2.8.1 建立框架建立框架 3. 标记。例如： 很抱歉，您使用的浏览器不支持框架功能，请转用新的浏览器。 101ppt课件例2-23 框架的嵌套。102ppt课件2.8.2 框架的属性设置框架的属性设置1. 设定框架的有无和颜色2固定边框3页面空白区域的设置4滚动条的设置

29、103ppt课件2.8.2 框架的属性设置框架的属性设置1. 设定框架的有无和颜色（1）frameborder属性可以设定有无边框。格式为：或（2）bordercolor属性可以给边框着色。格式为：或104ppt课件2.8.2 框架的属性设置框架的属性设置2固定边框 在缺省情况下，浏览者可用鼠标拖动边框改变页面的大小。使用标记的noresize属性可以固定边框的位置。其格式为：Noresize属性没有属性值，加入noresize属性则固定边框。105ppt课件2.8.2 框架的属性设置框架的属性设置3页面空白区域的设置 的marginhigh和marginwidth属性可以设置框架内容与框架的

30、边框之间的空白，其中marginhight属性设置框架内容与上下边框间保留的空间，marginwidth属性设置框架内容与左右边框间保留的空间。标记中的framespacing属性可以用来设置各个框架窗口之间的空白。106ppt课件2.8.2 框架的属性设置框架的属性设置4滚动条的设置 在标记中的属性scrolling用来设置滚动条，它可以取“yes”、“no”和“auto”3种值，分别表示始终有滚动条、始终没有滚动条和自动启动滚动条，默认值是自动启动滚动条。107ppt课件例2-24 框架嵌套修改后的页面。108ppt课件2.8.3 框架间的链接框架间的链接在很多网页中，常在一个框架内显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应的内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示目标文件的框架。使用标记的target属性就是可以控制目标文件在哪个框架内显示。当单击热点文本时，目标文件就会出现在由target指定的框架内。109ppt课件例2-25 框架间的链接。图2-25 框架间的链接110ppt课件例2-25 框架间的链接。图2-26 单击热点“李白”后的显示效果111ppt课件例2-25 框架间的链接。图2-27 单击热点“送孟浩然之广陵”后的显示效果112ppt课件113ppt课件