网页设计与制作 第4章 HTML基本标记.ppt

《网页设计与制作 第4章 HTML基本标记.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第4章 HTML基本标记.ppt（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第4 4章章 HTMLHTML基本标记基本标记第第4 4章章 HTMLHTML基本标记基本标记v4.1 4.1 4.1 4.1 HTMLHTMLHTMLHTML概述概述概述概述 v4.2 4.2 4.2 4.2 顶级标记顶级标记顶级标记顶级标记 v4.3 4.3 4.3 4.3 文本处理标记文本处理标记文本处理标记文本处理标记 v4.4 4.4 4.4 4.4 图像处理标记图像处理标记图像处理标记图像处理标记 v4.5 4.5 4.5 4.5 链接处理标记链接处理标记链接处理标记链接处理标记v4.6 4.6 4.6 4.6 表格处理标记表格处理标记表格处理标记表格处理标记 v4.7 4.7

2、4.7 4.7 表单处理标记表单处理标记表单处理标记表单处理标记 v4.8 4.8 4.8 4.8 框架处理标记框架处理标记框架处理标记框架处理标记v4.9 4.9 4.9 4.9 其他常用标记其他常用标记其他常用标记其他常用标记 v4.10 4.10 4.10 4.10 本章小结本章小结本章小结本章小结 绚丽多彩的网页，绚丽多彩的网页，绚丽多彩的网页，绚丽多彩的网页，本质是由标记语言本质是由标记语言本质是由标记语言本质是由标记语言所组成的。了解所组成的。了解所组成的。了解所组成的。了解HTMLHTML的基本标记的基本标记的基本标记的基本标记的使用，对于用户的使用，对于用户的使用，对于用户的使

3、用，对于用户进一步走入网页设进一步走入网页设进一步走入网页设进一步走入网页设计的世界是非常必计的世界是非常必计的世界是非常必计的世界是非常必要的。在本章中，要的。在本章中，要的。在本章中，要的。在本章中，将介绍顶级标记、将介绍顶级标记、将介绍顶级标记、将介绍顶级标记、文本标记、图片标文本标记、图片标文本标记、图片标文本标记、图片标记、链接标记等基记、链接标记等基记、链接标记等基记、链接标记等基本标记的使用。本标记的使用。本标记的使用。本标记的使用。HTMLHTML是（是（是（是（Hyper Text Markup LanguageHyper Text Markup Language）超文本超文

4、本超文本超文本标记语言的缩写，是网页主要的组成部分标记语言的缩写，是网页主要的组成部分标记语言的缩写，是网页主要的组成部分标记语言的缩写，是网页主要的组成部分 。HTMLHTML语言语言语言语言是由一系列标记是由一系列标记是由一系列标记是由一系列标记 tag组成的，每一种标组成的，每一种标组成的，每一种标组成的，每一种标记向浏览器说明了一种页面元素。记向浏览器说明了一种页面元素。记向浏览器说明了一种页面元素。记向浏览器说明了一种页面元素。标记标记标记标记是由起始标记是由起始标记是由起始标记是由起始标记 tag和结束标记和结束标记和结束标记和结束标记/tag组成的。组成的。组成的。组成的。起始标

5、记表示一种功能的开始，结束标记表示一种功能起始标记表示一种功能的开始，结束标记表示一种功能起始标记表示一种功能的开始，结束标记表示一种功能起始标记表示一种功能的开始，结束标记表示一种功能的结束。的结束。的结束。的结束。4.1 4.1 HTMLHTML概述概述 HEAD头头头头标标标标记记记记用用用用于于于于包包包包含含含含页页页页面面面面文文文文件件件件的的的的基基基基本本本本信信信信息息息息。这这这这些些些些信信信信息息息息是是是是供供供供浏浏浏浏览览览览器器器器阅阅阅阅读读读读和和和和使使使使用用用用的的的的，或或或或是是是是页页页页面面面面制制制制作作作作者者者者用用用用于于于于保留信息

6、的，并不在浏览器的页面区显示。保留信息的，并不在浏览器的页面区显示。保留信息的，并不在浏览器的页面区显示。保留信息的，并不在浏览器的页面区显示。v TITLETITLE标题标记标题标记标题标记标题标记 v METAMETA元数据标记元数据标记元数据标记元数据标记 4.2.1 4.2.1 4.2.1 4.2.1 HEADHEADHEADHEAD头标记头标记头标记头标记 4.2 4.2 顶级标记顶级标记 4.2.2 4.2.2 4.2.2 4.2.2 BodyBodyBodyBody体标记体标记体标记体标记 这这这这个个个个标标标标记记记记组组组组中中中中除除除除了了了了 html、头头头头部部部

7、部标标标标记记记记和和和和框框框框架架架架标标标标记记记记外外外外，其他所有标记都可以在其中。其他所有标记都可以在其中。其他所有标记都可以在其中。其他所有标记都可以在其中。4.3.1 4.3.1 4.3.1 4.3.1 格式标记格式标记格式标记格式标记 1.1.标题标记标题标记标题标记标题标记 标题标记格式：标题标记格式：标题标记格式：标题标记格式：（n=1n=1，2 2，66），），），），这个标记组可以设置各种大小不同标题。这个标记组可以设置各种大小不同标题。这个标记组可以设置各种大小不同标题。这个标记组可以设置各种大小不同标题。2.2.段落标记段落标记段落标记段落标记 段落标记格式为：段

8、落标记格式为：段落标记格式为：段落标记格式为：P，里面包含文本和一里面包含文本和一里面包含文本和一里面包含文本和一些可以放置于内的标记。些可以放置于内的标记。些可以放置于内的标记。些可以放置于内的标记。P标记的结尾标记是可以省略标记的结尾标记是可以省略标记的结尾标记是可以省略标记的结尾标记是可以省略的。的。的。的。4.3 4.3 文本处理标记文本处理标记 4.3 4.3 文本处理标记文本处理标记 4.3.2 4.3.2 4.3.2 4.3.2 列表标记列表标记列表标记列表标记 1.1.有序列表有序列表有序列表有序列表 OL内容内容内容内容/LI内容内容内容内容/LI2.2.无序列表无序列表无序

9、列表无序列表 UL4.3 4.3 文本处理标记文本处理标记 4.3.3 4.3.3 4.3.3 4.3.3 文本格式化标记文本格式化标记文本格式化标记文本格式化标记1.1.字体设置标记字体设置标记字体设置标记字体设置标记 字体设置标记格式为：字体设置标记格式为：字体设置标记格式为：字体设置标记格式为：FONT2.2.字符修饰元素字符修饰元素字符修饰元素字符修饰元素4.3.4 4.3.4 4.3.4 4.3.4 其他格式标记其他格式标记其他格式标记其他格式标记 1.1.置中标记置中标记置中标记置中标记 置中标记格式为：置中标记格式为：置中标记格式为：置中标记格式为：center页面元素页面元素页

10、面元素页面元素/center 2.2.预定义格式标记预定义格式标记预定义格式标记预定义格式标记 预定义格式标记格式为：预定义格式标记格式为：预定义格式标记格式为：预定义格式标记格式为：PRE文本内容文本内容文本内容文本内容/PRE 3.3.段内换行标记段内换行标记段内换行标记段内换行标记 段内换行标记格式为：段内换行标记格式为：段内换行标记格式为：段内换行标记格式为：BR 图图图图像像像像标标标标记记记记的的的的格格格格式式式式：IMG，结结结结尾尾尾尾标标标标记记记记可可可可以以以以省略。省略。省略。省略。基本属性包括：基本属性包括：基本属性包括：基本属性包括：v SrcSrc 通过通过通过

11、通过URLURL给出图像来源的位置，不可缺省给出图像来源的位置，不可缺省给出图像来源的位置，不可缺省给出图像来源的位置，不可缺省v Width Width 设置图像宽度设置图像宽度设置图像宽度设置图像宽度v Height Height 设置图像高度设置图像高度设置图像高度设置图像高度v Alt Alt 设置在图像未载入前图片位置显示的文字设置在图像未载入前图片位置显示的文字设置在图像未载入前图片位置显示的文字设置在图像未载入前图片位置显示的文字v Border Border 设置图像边框，缺省为设置图像边框，缺省为设置图像边框，缺省为设置图像边框，缺省为0 04.4 4.4 图像处理标记图像处

12、理标记 链接标记的格式为：链接标记的格式为：链接标记的格式为：链接标记的格式为：a页面元素页面元素页面元素页面元素/a，页面元素一页面元素一页面元素一页面元素一般为文本和图片。般为文本和图片。般为文本和图片。般为文本和图片。常用的属性为：常用的属性为：常用的属性为：常用的属性为：v HrefHref 链接目标的位置，一般是页面也可以是某链接目标的位置，一般是页面也可以是某链接目标的位置，一般是页面也可以是某链接目标的位置，一般是页面也可以是某一个文件一个文件一个文件一个文件v Name Name 锚点名锚点名锚点名锚点名v Target Target 设置显示链接的目标位置。值可以为：框设置显

13、示链接的目标位置。值可以为：框设置显示链接的目标位置。值可以为：框设置显示链接的目标位置。值可以为：框窗名称，窗名称，窗名称，窗名称，_ _blankblank、_parent_parent、_self_self、_top_top4.5 4.5 链接处理标记链接处理标记 4.6 4.6 表格处理标记表格处理标记 表格是由表格是由表格是由表格是由 table（定义表格）、定义表格）、定义表格）、定义表格）、（定义行）、定义行）、定义行）、定义行）、（定义表头）和定义表头）和定义表头）和定义表头）和 td（定义单元格）标记构成的定义单元格）标记构成的定义单元格）标记构成的定义单元格）标记构成的 4

14、.6.1 4.6.1 4.6.1 4.6.1 TableTableTableTable表格标记表格标记表格标记表格标记 表格标记的格式为表格标记的格式为表格标记的格式为表格标记的格式为：TABLE行标记行标记行标记行标记/TABLE。使用使用使用使用 TABLE只是定义了空表格，还需要定义行和单元只是定义了空表格，还需要定义行和单元只是定义了空表格，还需要定义行和单元只是定义了空表格，还需要定义行和单元格。格。格。格。4.6.2 4.6.2 4.6.2 4.6.2 TRTRTRTR行标记行标记行标记行标记 行标记的格式为：行标记的格式为：行标记的格式为：行标记的格式为：TR单元格标记单元格标记

15、单元格标记单元格标记/TR。使用使用使用使用 TR只是定义了空行，还需要定义单元格。只是定义了空行，还需要定义单元格。只是定义了空行，还需要定义单元格。只是定义了空行，还需要定义单元格。4.6 4.6 表格处理标记表格处理标记 4.6.3 4.6.3 4.6.3 4.6.3 TDTDTDTD单元格标记单元格标记单元格标记单元格标记 单元格标记的格式为：单元格标记的格式为：单元格标记的格式为：单元格标记的格式为：TD页面元素页面元素页面元素页面元素/TD。单元单元单元单元格中可以放置任何格中可以放置任何格中可以放置任何格中可以放置任何 BODY中能够放置的内容。中能够放置的内容。中能够放置的内容

16、。中能够放置的内容。基本属性为：基本属性为：基本属性为：基本属性为：vBgcolorBgcolor设置单元格背景颜色设置单元格背景颜色设置单元格背景颜色设置单元格背景颜色vRowspanRowspan设置单元格所占的行数设置单元格所占的行数设置单元格所占的行数设置单元格所占的行数vColspanColspan设置单元格所占的列数设置单元格所占的列数设置单元格所占的列数设置单元格所占的列数vAlignAlign设置对齐方式设置对齐方式设置对齐方式设置对齐方式vWidthWidth设置单元格宽度设置单元格宽度设置单元格宽度设置单元格宽度vHeightHeight设置单元格高度设置单元格高度设置单元

17、格高度设置单元格高度4.7 4.7 表单处理标记表单处理标记 4.7.1 4.7.1 4.7.1 4.7.1 FormFormFormForm表单标记表单标记表单标记表单标记 表单标记的格式为表单标记的格式为表单标记的格式为表单标记的格式为：FORM表单元素表单元素表单元素表单元素/FORM，其余的表单控件标记都要放在其余的表单控件标记都要放在其余的表单控件标记都要放在其余的表单控件标记都要放在 FORM标记组之中。标记组之中。标记组之中。标记组之中。常用的基本属性：常用的基本属性：常用的基本属性：常用的基本属性：v ActionAction设置表单的处理程序，一般为服务器端脚本语设置表单的处

18、理程序，一般为服务器端脚本语设置表单的处理程序，一般为服务器端脚本语设置表单的处理程序，一般为服务器端脚本语言所编写的程序言所编写的程序言所编写的程序言所编写的程序v MethodMethod设置发送表单的设置发送表单的设置发送表单的设置发送表单的HTTPHTTP方法，一种是方法，一种是方法，一种是方法，一种是getget，另一另一另一另一种是种是种是种是postpostv Name Name设置发送表单的名称设置发送表单的名称设置发送表单的名称设置发送表单的名称4.7 4.7 表单处理标记表单处理标记 4.7.2 4.7.2 4.7.2 4.7.2 InputInputInputInput输

19、入域标记输入域标记输入域标记输入域标记 输入域标记的格式为：输入域标记的格式为：输入域标记的格式为：输入域标记的格式为：INPUT，只有开始标记，只有开始标记，只有开始标记，只有开始标记，没有结尾标记。没有结尾标记。没有结尾标记。没有结尾标记。常用的属性为：常用的属性为：常用的属性为：常用的属性为：TypeType输入域类型输入域类型输入域类型输入域类型 ValueValue输入域的值输入域的值输入域的值输入域的值 SizeSize输入域的显示字符数输入域的显示字符数输入域的显示字符数输入域的显示字符数 MaxlengthMaxlength 能输入的最大字符数能输入的最大字符数能输入的最大字符

20、数能输入的最大字符数 NameName输入域的名称输入域的名称输入域的名称输入域的名称4.7.3 4.7.3 4.7.3 4.7.3 其他标记其他标记其他标记其他标记 1.1.多行输入域标记多行输入域标记多行输入域标记多行输入域标记 利用利用利用利用 TEXTAREA文本文本文本文本/TEXTAREA来产生一个来产生一个来产生一个来产生一个可以输入大量文字的输入区域。可以输入大量文字的输入区域。可以输入大量文字的输入区域。可以输入大量文字的输入区域。2.2.选择域标记选择域标记选择域标记选择域标记选择域标记的格式为：选择域标记的格式为：选择域标记的格式为：选择域标记的格式为：SELECT 选项

21、一选项一选项一选项一 OPTION选项二选项二选项二选项二 /SELECT4.7 4.7 表单处理标记表单处理标记 4.8 4.8 框架处理标记框架处理标记 框架的作用是使多个页面可以同时显示在一个浏览框架的作用是使多个页面可以同时显示在一个浏览框架的作用是使多个页面可以同时显示在一个浏览框架的作用是使多个页面可以同时显示在一个浏览器窗口中，这样用户就可以浏览到更多的信息内容。器窗口中，这样用户就可以浏览到更多的信息内容。器窗口中，这样用户就可以浏览到更多的信息内容。器窗口中，这样用户就可以浏览到更多的信息内容。4.8.1 4.8.1 4.8.1 4.8.1 FrameSetFrameSetF

22、rameSetFrameSet框架集标记框架集标记框架集标记框架集标记 框架集标记的格式为：框架集标记的格式为：框架集标记的格式为：框架集标记的格式为：FRAMESET框架标记框架标记框架标记框架标记/FRAMESET。框架集标记定义了一个框架的容器，框架集标记定义了一个框架的容器，框架集标记定义了一个框架的容器，框架集标记定义了一个框架的容器，可以包含很多的框架，每个框架用可以包含很多的框架，每个框架用可以包含很多的框架，每个框架用可以包含很多的框架，每个框架用 frame标记来表明。标记来表明。标记来表明。标记来表明。4.8.2 4.8.2 4.8.2 4.8.2 FrameFrameFr

23、ameFrame框架标记框架标记框架标记框架标记 框架标记的格式为：框架标记的格式为：框架标记的格式为：框架标记的格式为：FRAME，用于说明每一个用于说明每一个用于说明每一个用于说明每一个框架集中的框架。框架集中的框架。框架集中的框架。框架集中的框架。4.9 4.9 其他常用标记其他常用标记 1.1.注释标记注释标记注释标记注释标记 注释标记的格式为：注释标记的格式为：注释标记的格式为：注释标记的格式为：!-。注释标记不。注释标记不。注释标记不。注释标记不被浏览器所解释，用于页面设计者记录制作的信息。被浏览器所解释，用于页面设计者记录制作的信息。被浏览器所解释，用于页面设计者记录制作的信息。

24、被浏览器所解释，用于页面设计者记录制作的信息。2.2.水平线标记水平线标记水平线标记水平线标记 水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：Hr，只有开始标记，没有只有开始标记，没有只有开始标记，没有只有开始标记，没有结束标记。用于修饰页面。结束标记。用于修饰页面。结束标记。用于修饰页面。结束标记。用于修饰页面。3.3.脚本容器标记脚本容器标记脚本容器标记脚本容器标记 脚本容器标记的格式为：脚本容器标记的格式为：脚本容器标记的格式为：脚本容器标记的格式为：Script脚本脚本脚本脚本/Script。在页面中加入脚本程序，扩展页面的功能。在页面中加入脚本程序，

25、扩展页面的功能。在页面中加入脚本程序，扩展页面的功能。在页面中加入脚本程序，扩展页面的功能。4.4.JavaJava小程序容器标记小程序容器标记小程序容器标记小程序容器标记 JavaJava小程序标记的格式为：小程序标记的格式为：小程序标记的格式为：小程序标记的格式为：Applet。可以在页面中嵌入可以在页面中嵌入可以在页面中嵌入可以在页面中嵌入JavaJava小程序。小程序。小程序。小程序。4.104.10 本章小结本章小结 HTML语言是页面制作的基础环节。本章语言是页面制作的基础环节。本章主要介绍了顶级标记的使用、格式标记的使用、主要介绍了顶级标记的使用、格式标记的使用、文本标记的使用、图片标记的使用、链接标记文本标记的使用、图片标记的使用、链接标记的使用、表格标记的使用、表单标记的使用和的使用、表格标记的使用、表单标记的使用和框架标记的使用等。大家通过对这些内容的学框架标记的使用等。大家通过对这些内容的学习，可以更深刻地体会到网页制作中本质内容。习，可以更深刻地体会到网页制作中本质内容。