第三章 网页编程语言—HTML.ppt

《第三章 网页编程语言—HTML.ppt》由会员分享，可在线阅读，更多相关《第三章 网页编程语言—HTML.ppt（70页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第三章网页编程语言HTML孙雨生Saturday,January14,2023内容简介HTML语言基础知识HTMLHTML简介简介HTMLHTML编辑与运行环境编辑与运行环境网页编辑流程网页编辑流程HTML脚本的基本结构：元素、标签和属性HTML常用元素及各自标签和属性：文本、图像、列表、表格、链接3.1HTML的编辑与运行环境HTMLHTML（HypertextMarkupLanguageHypertextMarkupLanguage）超文本标记语言，它是一种用于编写超文本文档的标记语言。超文本标记语言，它是一种用于编写超文本文档的标记语言。平台无关性平台无关性，是一种结构语言，只需要浏览器

2、。，是一种结构语言，只需要浏览器。采用纯文本文档编辑器，比如记事本，UltraEdit；不要使用字处理软件，比如word运行在Web浏览器上最常用的两种浏览器是最常用的两种浏览器是NetscapeNetscape公司的公司的NetscapeNetscapeCommunicatorCommunicator（最新：（最新：FirefoxFirefox）和微软公司的）和微软公司的IEIE。平时见到的网页均可查看其源文件平时见到的网页均可查看其源文件3.1.2网页编辑流程用记事本编写代码保存代码，注意在命名时，必须以*.htm结尾点击所做的网页，即可打开改网页，前提是已经安装了浏览器3.2HTML脚本

3、的基本结构HTMLHTML的主要语法是元素和标签的主要语法是元素和标签HTMLHTML以标签来标识、排列各对象。标签本身以以标签来标识、排列各对象。标签本身以“”标识，标标签内的内容称为元素（标识，标标签内的内容称为元素（elementelement），元素代表了标），元素代表了标签的意义，元素是与大小写无关的。签的意义，元素是与大小写无关的。元素是符合元素是符合DTDDTD（文档类型定义）的文档组成部（文档类型定义）的文档组成部分分 如如titletitle（文档标题）、（文档标题）、IMGIMG（图像）、（图像）、tabletable（表格）等等。（表格）等等。HTMLHTML用标签来规定

4、元素的属性和它在文档中的用标签来规定元素的属性和它在文档中的位置位置在在HTMLHTML中，所有的标签都用尖括号括起来，例如，中，所有的标签都用尖括号括起来，例如，表示表示HTMLHTML标签。绝大多数标签都是成对出现的，包括开始标标签。绝大多数标签都是成对出现的，包括开始标签和结束标签。签和结束标签。如：如：.HTML.单独标签的格式单独标签的格式为为 ，它的作用是在相应的位置插入元素。，它的作用是在相应的位置插入元素。HTMLHTML标签是不区分大小写的，但通常约定标签使用大写字母，标签是不区分大小写的，但通常约定标签使用大写字母，这有利于这有利于HTMLHTML文档的维护。文档的维护。属

5、性属性用来描述对象特征的特性。在用来描述对象特征的特性。在HTMLHTML中，所有的属性都放置在中，所有的属性都放置在开始标签的尖括号里，属性与标签之间用空格分隔，属性的值开始标签的尖括号里，属性与标签之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。通常不区分大小写。隔。通常不区分大小写。格式为：格式为：2受影响的受影响的内容内容 典型典型HTML文本结构文本结构 HTML文本标题文本标题文本标题文本标题 TITLE HEADBODY BGCOLOR=BODY BGCOLOR=BODY BGCOLOR=文档

6、的主体部分文档的主体部分文档的主体部分文档的主体部分 BODY HTMLHTMLHTML标签标签HTML这两个标签是这两个标签是HTMLHTML文档的标签。文档的标签。处于文档的最前端，表示文档的开始，即浏览器从处于文档的最前端，表示文档的开始，即浏览器从开始解释。开始解释。HTML则位于文件的最后一行，这样则位于文件的最后一行，这样的结果表示这一整份的文档都是的结果表示这一整份的文档都是HTMLHTML语法的文档。该标签不语法的文档。该标签不带任何属性。带任何属性。HEADHEAD标签标签 HEAD是是HTMLHTML文件头标签，用来描述文件头标签，用来描述HTMLHTML首首部的内容，说明

7、文档的整体信息。所有首部信息并不会出现在部的内容，说明文档的整体信息。所有首部信息并不会出现在利用利用WWWWWW浏览器所看到的窗体中。浏览器所看到的窗体中。HEAD通常通常与某些标签一起使用，如与某些标签一起使用，如TITLE标签。标签。TITLE标签TITLE指的是一份文档的标题。通常指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份来说，每一份文档都应该有一个标题来简述这一份文档的特色或主题。对于文档的特色或主题。对于WWWWWW浏览器而言，标题浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最

8、上方。（出现在部分都位于浏览器的最上方。（出现在WebWeb浏览器浏览器窗口的标题栏中）窗口的标题栏中）TITLETITLE标签可以嵌套，表示多个主题标签可以嵌套，表示多个主题BODY标签BODY指的是定义出一个指的是定义出一个HTMLHTML文档文档的体部，位于首部下面，就是的体部，位于首部下面，就是WebWeb浏器窗口的用户浏器窗口的用户区内看到的内容。区内看到的内容。在在标签中可以规定整个文档的一些基本属标签中可以规定整个文档的一些基本属性：性：n n“BGCOLOR”BGCOLOR”，指定，指定HTMLHTML文档的背景色。文档的背景色。n n“TEXT”TEXT”，指定，指定HTML

9、HTML文档中文字的颜色。文档中文字的颜色。n n“LINK”LINK”，设定，设定HTMLHTML页面默认的连接颜色。页面默认的连接颜色。n n“ALINK”ALINK”，设定鼠标正在单击时的连接颜色，设定鼠标正在单击时的连接颜色。n n“VLINK”VLINK”，设定访问后连接文字的颜色。，设定访问后连接文字的颜色。n n“BACKGROUND”BACKGROUND”，指定，指定HTMLHTML文档的背景图片。文档的背景图片。实例bodyBGCOLOR=SILVERTEXT=OLIVELink=yellowALINK=greenVLINK=blue欢迎光临武汉大学，请选择您想浏览的部分欢迎

10、光临武汉大学，请选择您想浏览的部分Ahref=.htmtarget=_blank学校简学校简介介Ahref=.htm校训释义校训释义Ahref=.htm现任领导现任领导3.3常用HTML元素文本标签标签是换行标签，作用相当于插入一个回车符，标签是换行标签，作用相当于插入一个回车符，它是单独出现的。如果没有换行标签，它是单独出现的。如果没有换行标签，WebWeb浏览器浏览器将根据浏览器窗口宽度尽可能长地显示文本，而不将根据浏览器窗口宽度尽可能长地显示文本，而不是按照是按照HTMLHTML文档中的文本格式显示。文档中的文本格式显示。标签（标签（i=1i=1，2 2，3 3，4 4，5 5，6 6）

11、标签是成对出现的，夹在标签是成对出现的，夹在和和之间的文之间的文字是字是HTMLHTML文档中的标题。文档中的标题。标题文字都用黑体显示，上级标题总比下面各级标标题文字都用黑体显示，上级标题总比下面各级标题要更大些、粗些，具体有多大则因浏览器的不同题要更大些、粗些，具体有多大则因浏览器的不同而不同。而不同。标签隐含有换行标签的作用，文本从下一行开标签隐含有换行标签的作用，文本从下一行开始。始。标签的属性有标签的属性有COLORCOLOR、ALIGNALIGN，分别标识标题，分别标识标题的颜色和位置。的颜色和位置。ALIGNALIGN的值为的参数值为的值为的参数值为leftleft、center

12、center或或rightright之一，分别表示标题位于浏览器窗口之一，分别表示标题位于浏览器窗口的左侧、中间和右侧。的左侧、中间和右侧。body这是第一级标题。这是第一级标题。/H1这是第二级标题。这是第二级标题。/H2这是第三级标题。这是第三级标题。/H3这是第四级标题。这是第四级标题。/H4这是第五级标题。这是第五级标题。/H5这是第六级标题。这是第六级标题。/H6标签P P即即paragraphparagraph（段落），（段落），标签用于划分段落，标签用于划分段落，作用是换行并插入一个空白行，它可以单独使用，作用是换行并插入一个空白行，它可以单独使用，也可以成对使用。也可以成对使用

13、。当当和和标签成对使用时，可以添加标签成对使用时，可以添加ALIGNALIGN属属性，用以标识段落在浏览器中的位置。性，用以标识段落在浏览器中的位置。段落位于左侧。段落位于左侧。段落位于中间。段落位于中间。段落位于右侧。段落位于右侧。标签标签 HRHR即即HorizontalRuleHorizontalRule，它的作用是换行并在该行下画一条水平直线，它的作用是换行并在该行下画一条水平直线，直线的上下两端都会留出一定的空白。直线的上下两端都会留出一定的空白。标签的属性有：标签的属性有：SIZESIZE（水平线高度）、（水平线高度）、WIDTHWIDTH（水平线宽度）（水平线宽度）和和ALIGN

14、ALIGN（水平线在浏览器窗口的位置）。（水平线在浏览器窗口的位置）。水平线位于左侧。水平线位于左侧。水平线位于中间。水平线位于中间。水平线位于右侧。水平线位于右侧。宽度为百分比宽度为百分比宽度缺省宽度缺省标签标签是预格式化标签，标签是预格式化标签，WebWeb浏览器按编辑文浏览器按编辑文档时的字符位置将档时的字符位置将和和标签之间的内标签之间的内容忠实地、一成不变地显示出来。容忠实地、一成不变地显示出来。电子商务电子商务网站设计网站设计HTMLHTML当用其他编辑工具编排好了一段文字后，其中很可能有一些当用其他编辑工具编排好了一段文字后，其中很可能有一些HTMLHTML文件不支持的控制符号，

15、如同车、多个空格、文件不支持的控制符号，如同车、多个空格、TabTab键等。键等。如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格如果希望在浏览网页时仍保留在编辑工具中已经排好的段落格式，可以使用式，可以使用标签将预先排好的格式保留下来。标签将预先排好的格式保留下来。字符格式标签字符格式标签主要有主要有（BoldBold）、）、（ItalicItalic）、和）、和（UnderlinedUnderlined）三）三种种 这是黑体文字。这是黑体文字。这是斜体文字。这是斜体文字。这是带下划线的文字。这是带下划线的文字。(二)图像（IMG标签）Web浏览器可以显示JPEG和GIF图像。GIFG

16、IF：8 8位位256256色，占空间小，下载快色，占空间小，下载快JPEGJPEG：2424位，画面质量高位，画面质量高标签共有9个属性:SRCSRC属性属性 n n指出被引用的图像文件所在位置（必须有）指出被引用的图像文件所在位置（必须有）n n绝对表示法范例：绝对表示法范例：IMGSRC=“http”n n相对表示法范例：相对表示法范例：IMGSRC=“”确定图像大小的属性确定图像大小的属性:WIDTH:WIDTH:确定图像的宽度确定图像的宽度 HEIGHT:HEIGHT:确定图像的高度确定图像的高度 ALIGNALIGN属性：参数值为属性：参数值为toptop、middlemiddle

17、或或bottombottom之一之一，表示与图象相邻的文字位于图象的上方、中间和下方表示与图象相邻的文字位于图象的上方、中间和下方 确定图像边距的属性确定图像边距的属性 n nVSPACEVSPACE：图像与其垂直方向上相邻对象之间的距离：图像与其垂直方向上相邻对象之间的距离 n nHSPACEHSPACE：图像与其水平方向上相邻对象之间的距离：图像与其水平方向上相邻对象之间的距离 BORDERBORDER属性属性 n n指定图像边框的宽度或取消边框（指定图像边框的宽度或取消边框（BORDER=OBORDER=O）图像示范图像示范!-(注释注释)!-自然风光一自然风光一（标题居中）（标题居中）

18、山涧溪水！山涧溪水！!-IMGsrc=“WIDTH=170HEIGHT=170山涧溪水！山涧溪水！自然风光二自然风光二热带沙滩热带沙滩!imgsrc=“HEIGHT=170热带沙滩热带沙滩!列表元素列表元素无序列表无序列表无序列表标签无序列表标签“UL”“UL”即即UnorderedListUnorderedList，列表项标签列表项标签WebWeb浏览器在显示无序列表时，会在每一列表项的开头加上无浏览器在显示无序列表时，会在每一列表项的开头加上无序列表的标记符号。例如：序列表的标记符号。例如：PIII1GCPUPIII1GCPU256M256M内存内存 40G40G硬盘硬盘有序列表有序列表n

19、 n有序列表标签：有序列表标签：“LI”“LI”即即 OrderedListOrderedList，n n列表项标签：列表项标签：n nWebWeb浏览器在显示排序列表时，会自动对列表进行排序，浏览器在显示排序列表时，会自动对列表进行排序，并在每一列表项开头加上以阿拉伯数字形式表示的序号。并在每一列表项开头加上以阿拉伯数字形式表示的序号。我们可以在我们可以在标签中添加标签中添加startstart属性来指定序列的起始属性来指定序列的起始号。缺省时，序列的起始号为号。缺省时，序列的起始号为1 1。计算机主要配件清单：计算机主要配件清单：PIII1GCPUPIII1GCPU256M256M内存内存

20、40G40G硬盘硬盘计算机主要配件清单计算机主要配件清单PIII1GCPUPIII1GCPU256M256M内存内存40G40G硬盘硬盘目录列表HTMLHTML使用使用和和标签来定义目录列表标签来定义目录列表 目录列表的列表项开头也必须用项目标签目录列表的列表项开头也必须用项目标签标识标识A-FA-FG-KG-KL-PL-PQ-ZQ-Z描述性列表 HTMLHTML使用使用、和和标签来定义描述性标签来定义描述性列表列表 即即DefinitionList:DefinitionList:是描述性列表标签是描述性列表标签:描述项标签描述项标签:解释项标签解释项标签 和和标签通常是成对出现的，即一个描述

21、标签通常是成对出现的，即一个描述项对应于一个解释项。项对应于一个解释项。和和标签也隐含有标签也隐含有标签的作用，标签的作用，WebWeb浏览器在显示时会自动换行。浏览器在显示时会自动换行。在显示时，解释项的内容会自动缩进一定的距离，在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。使列表的结构更加清晰。示例：示例：描述性列表测试描述性列表测试主流主流CPUCPU配件配件PIII1GPIII1G内存内存256M256M硬盘硬盘40G40G(四)表格元素（table)创建基本表格可以用可以用标签创建一个表格，标签创建一个表格，并在它的中间加入标题和需要的数据。表格定义的并在它的中间

22、加入标题和需要的数据。表格定义的代码为：代码为：具体表格内容具体表格内容(1).表格的标题元素定义了表格的说明。如：元素定义了表格的说明。如：在这里输入标题在这里输入标题行里的内容行里的内容标题的属性标题的属性ALIGNALIGN决定了标题的对齐方式（左、中、决定了标题的对齐方式（左、中、右）右）VALIGNVALIGN属性（上、下）属性（上、下）TOPTOP是将标题放在表是将标题放在表格的顶部；格的顶部；BOTTOMBOTTOM将标题放在表格的下面。将标题放在表格的下面。（2）行、表头和数据定义一个表格，需从第一行逐级向下，并且按行中定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开

23、始定义。行、表头和数据定义的代单元格的顺序开始定义。行、表头和数据定义的代码为：码为：表头表头数据数据标签ALIGNALIGN属性（属性（leftleft、centercenter和和rightright）表示该行中各单）表示该行中各单元格内容对齐方式元格内容对齐方式VALIGNVALIGN属性（属性（toptop、middlemiddle和和bottombottom）表示该行中）表示该行中各单元格内容对齐方式各单元格内容对齐方式和标签规定单元格内容，表头标签用于规定表头元素的内容，表头元素一般位于每列的首行，用以说明该列的具体数据是关于哪个对象的。2、表格及文字的对齐与布局（1 1）表格的页

24、面对齐）表格的页面对齐n n表格的页面对齐，可以直接在表格的页面对齐，可以直接在TABLETABLE标签中使用标签中使用alignalign属性。属性。其常用的取值可以是：其常用的取值可以是：centercenter、leftleft、rightright。（2 2）表格的内容对齐）表格的内容对齐n n表格单元格内容的对齐包括各数据项在水平方向和垂直方表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。设置水平对齐的方法是：在标签向上的对齐。设置水平对齐的方法是：在标签、内使用内使用alignalign属性，其常用的取值可以是：属性，其常用的取值可以是：centercenter、le

25、ftleft、rightright、justifyjustify。n n设置表格数据在垂直方向的对齐，应在设置表格数据在垂直方向的对齐，应在TRTR、TDTD或或THTH标签标签中使用中使用valignvalign属性，其常用取值包括：属性，其常用取值包括：toptop、bottombottom、middlemiddle。3、设置表格尺寸（1 1）设置表格边框尺寸设置表格边框尺寸利用利用的的BORDERBORDER属性可以设置属性可以设置表格边框的尺寸，它以指定的粗度来显示表格边框。表格边框的尺寸，它以指定的粗度来显示表格边框。如：如：（2 2）设置表格尺寸设置表格尺寸利用利用的的WIDTHW

26、IDTH和和HEIGHTHEIGHT属性可以设置表属性可以设置表格尺寸。如：格尺寸。如：TABLEBORDER=2WIDTH=75%HEIGHT=25%（3）设置表元间隙利用利用标签的标签的CELLSPACINGCELLSPACING属性可以设置属性可以设置表元的间隙（单元格之间的空隙）。如：表元的间隙（单元格之间的空隙）。如：TABLEBORDER=1CELLSPACING=8（4）设置表元内部空白利用利用标签中的标签中的CELLPADDINGCELLPADDING属性，用于属性，用于指定单元格内容与单元格边界之间空白距离的大小，指定单元格内容与单元格边界之间空白距离的大小，如：如：（5）a

27、lign属性（left、center和right），表示表格和与相邻文字的关系。4、设置表格的色彩设置表格、行或行中单元的相关颜色，可以在设置表格、行或行中单元的相关颜色，可以在、和和标签里使用标签里使用BGCOLORBGCOLOR、BORDERCOLORBORDERCOLOR等属性。等属性。COLORCOLOR的值可以是以十六进制表示的颜色，或者是的值可以是以十六进制表示的颜色，或者是1616种颜色（种颜色（BLACKBLACK、WHITEWHITE、GREENGREEN、MAROONMAROON、OLIVEOLIVE、MAVYMAVY、PURPLEPURPLE、GRAYGRAY、REDRE

28、D、YELLOWYELLOW、BLUEBLUE、TEALTEAL、LIMELIME、AQUAAQUA、FUCHSIAFUCHSIA和和SILVERSILVER）中的一种。）中的一种。5、创建跨多行、多列的表元（1）跨越多列在在或或标记符里利用标记符里利用COLSPANCOLSPAN属性，并属性，并在其后写上想要跨越的列数。在其后写上想要跨越的列数。（2）跨越多行在在或或标记符里利用标记符里利用ROWSPANROWSPAN属性，并属性，并在其后写上想要跨越的行数。在其后写上想要跨越的行数。表格的例子表格范例程序表格范例程序 tableborder=1width=500“height=450ali

29、gn=center=10CAPTIONalign=center=bottom表表11学生成绩统计学生成绩统计=middle 姓名姓名/=SILVER数据库基础数据库基础/操作系统操作系统/英语英语/=middletd 张张航航/td929290908888/=middletd align=center=red楚云楚云/td868688889595/=middletd align=center=OLIVE王小王小龙龙/td7878td 82=OLIVE82td 79=red79/=middle 刘刘洁洁/td909080807878/（五）文档的超链接HTMLHTML中的链接包括两部分：锚标（鼠

30、标移到上面中的链接包括两部分：锚标（鼠标移到上面时变成小手状）和目标点（链接到的文档）。时变成小手状）和目标点（链接到的文档）。首标签首标签和尾标签和尾标签之间的内容就是锚标；之间的内容就是锚标；hrefhref，用于指定链接目标点的位置，用于指定链接目标点的位置 超链接主要有超链接主要有3 3种：不同文档之间的跳转、跳转到标种：不同文档之间的跳转、跳转到标记位置、链接地图记位置、链接地图（很少用）（很少用）不同文档之间的跳转不同文档之间的跳转 n n 用户可以通过点击锚标从当前文档直接跳转至目标文档用户可以通过点击锚标从当前文档直接跳转至目标文档 n n A有关苹果的说明有关苹果的说明 An

31、 nA”跳转到标记位置跳转到标记位置 n nHTMLHTML中标识记号的格式为：中标识记号的格式为：ANAME=“目标目标点点；n n引用记号的格式为引用记号的格式为A 锚标名称锚标名称/A不同文档之间的跳转bodyBGCOLOR=SILVERTEXT=OLIVELink=yellowALINK=greenVLINK=blue欢迎光临武汉大学，请选择您想浏览的部分欢迎光临武汉大学，请选择您想浏览的部分Ahref=.htmtarget=_blank学校简学校简介介Ahref=.htm校训释义校训释义Ahref=.htm现任领导现任领导文档跳转链接测试-图像锚标bodyBGCOLOR=SILVER

32、TEXT=OLIVELink=yellowALINK=greenVLINK=blue欢迎光临武汉大学，请选择您想浏览的部分欢迎光临武汉大学，请选择您想浏览的部分Ahref=SRC=whu.jpgAhref=.htm校训释义校训释义Ahref=.htm现任领导现任领导跳转到标记位置欢迎光临武汉大学，请选择您想浏览的部分欢迎光临武汉大学，请选择您想浏览的部分Ahref=学校简学校简介介Ahref=校训释校训释义义Ahref=现任领现任领导导ANAME=链接地图链接地图 将链接源点的图像划分为若干个区域，每个区域都对应着自将链接源点的图像划分为若干个区域，每个区域都对应着自己的目标文档己的目标文档

33、首先要为链接源点的图像添加首先要为链接源点的图像添加ISMAPISMAP属性，将图像定义为地图属性，将图像定义为地图 然后必须使用然后必须使用USEMAPUSEMAP属性说明该图像是遵循哪个地图定义属性说明该图像是遵循哪个地图定义的。的。USEMAPUSEMAP属性的参数值为属性的参数值为“#地图名地图名”HTMLHTML是通过是通过标签和标签和标签定义地图标签定义地图地图标签地图标签有一个不可缺省的属性有一个不可缺省的属性NAMENAME，它的参数值是，它的参数值是地图的名字地图的名字 标签有标签有3 3个属性：个属性：shapeshape、coordscoords和和hrefhref，分别用以规定，分别用以规定该区域的形状、范围和对应的目标文档该区域的形状、范围和对应的目标文档 链接地图示例：html 链接地图测试 IMG SRC=map.jpgISMAP USEMAP=SS area jpg area jpg area area jpg shape=circle shape=circle coordscoords=223=223，169 169 253253，169 169 hrefhref=ml.jpgml.jpg 本章小结HTML的编辑与运行环境纯文本文档编辑器和网页浏览器网页编辑流程HTML脚本的基本结构常用HTML元素文本、图像、表格、列表、超链接本章结束