您所在位置：网站首页 > 办公文档 > 工作计划 > HTML学习文档

HTML学习文档.ppt

84页

卖家[上传人]：pu****.1

文档编号：576873317

上传时间：2024-08-20

文档格式：PPT

文档大小：625.51KB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

20金贝

下载

/ 84 举报版权申诉马上下载

文本预览

下载提示

常见问题

超文本标记语言HTML HTML（（Hyper Text Markup Language，，超文本标记语言）超文本标记语言）是表示网页的一种规范（或者是一种标准），它通过标记符定是表示网页的一种规范（或者是一种标准），它通过标记符定义了网页内容的显示格式在文本文件的基础上，增加了一系义了网页内容的显示格式在文本文件的基础上，增加了一系列描述文本格式、颜色等的标记，再加上声音、动画甚至视频列描述文本格式、颜色等的标记，再加上声音、动画甚至视频等等，形成精彩的画面等等，形成精彩的画面超文本标记语言HTML主要内容主要内容一一. HTML基本语法与基本结构基本语法与基本结构二二. 文本格式的应用文本格式的应用三三. 在网页中使用图片在网页中使用图片四四. 在网页中使用超链接在网页中使用超链接五五. 表格与框架的应用表格与框架的应用六六. 表单的应用表单的应用超文本标记语言HTML1. HTML基本语法基本语法基本语法基本语法开始标记结束标记网页内容属性及属性值记事本2. HTML文档的编辑环境文档的编辑环境Ø网页编辑软件网页编辑软件Ø记事本记事本一一. HTML基本语法与基本结构基本语法与基本结构超文本标记语言HTML3. HTML文档的基本结构文档的基本结构网页标题，显示在浏览器的标题栏中网页标题，显示在浏览器的标题栏中这里是页面上显示的内容。

是网页的主要部分这里是页面上显示的内容是网页的主要部分举例超文本标记语言HTML习题习题1写出写出HTML文件的总体结构在文件的总体结构在HTML中，标题标记中，标题标记和和<META>标记有何作用标记有何作用一一. HTML基本语法与基本结构基本语法与基本结构超文本标记语言HTML通常文本是网页的主体，所以文本格式的通常文本是网页的主体，所以文本格式的应用就是网页设计过程中最基本、最关键的问应用就是网页设计过程中最基本、最关键的问题之一，下面将就文本的段落格式、文字的显题之一，下面将就文本的段落格式、文字的显示效果等问题进行详细的讨论示效果等问题进行详细的讨论记事本二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML1.文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用（（1）标题标记符）标题标记符<Hn>（（2））分段标记符分段标记符<P>（（3））换行标记符换行标记符<BR>（（4））水平线标记符水平线标记符<HR>（（5））分节标记符分节标记符<DIV>（（6））段落居中标记符段落居中标记符<CENTER> 超文本标记语言HTML1.文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用（（1））标题标记符标题标记符<Hn> …</Hn>功能：功能：设置文档标题，设置文档标题，n取取1至至6的整数，结的整数，结束标记不可省。</p> <p>束标记不可省1级标题最大级标题最大属性：属性：align:设置对齐方式，取值设置对齐方式，取值left | right | center , 缺省值为缺省值为left格式：格式：<Hn align=对齐方式对齐方式>标题文字标题文字</Hn>举例：举例：超文本标记语言HTML1.文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用（（2）分段标记符）分段标记符<P>…</P>功能：功能：将文档划分成段落，结束标记将文档划分成段落，结束标记</P>可省略属性：属性：align:设置对齐方式，取值设置对齐方式，取值left | right | center, 缺省值为缺省值为left 格式：格式：<P align=对齐方式对齐方式>文字文字举例举例1 举例举例2 （（3）换行标记符）换行标记符<BR> 功能：功能：在文档中强制断行，但不分段，无结束标记在文档中强制断行，但不分段，无结束标记格式：格式：文字文字<BR> 举例举例超文本标记语言HTML1.文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用（（4）水平线标记符）水平线标记符<HR>功能：功能：在网页中添加粗为在网页中添加粗为2像素的水平线，无结束标记。</p> <p>像素的水平线，无结束标记属性：属性：size:水平线的粗细程度，取值为整数，缺省值为水平线的粗细程度，取值为整数，缺省值为2pxwidth: 水平线的长度，取值既可以是像素，也可以是百分比水平线的长度，取值既可以是像素，也可以是百分比noshade:缺省的水平线为带阴影的缺省的水平线为带阴影的3D线线,该属性设置不带阴影该属性设置不带阴影color:设置水平线的颜色设置水平线的颜色align:设置对齐方式，取值设置对齐方式，取值left | right | center缺省值缺省值center格式：格式：<HR align=对齐方式对齐方式 size=粗细粗细 width=宽度宽度 color=颜色颜色 noshade> 举例举例超文本标记语言HTML1.文本段落格式文本段落格式二二. HTML文本格式的应用文本格式的应用（（5）分节标记符）分节标记符<DIV>… </DIV>功能：功能：文档分节标记符，可将位于文档分节标记符，可将位于<DIV></DIV>之之间的段落设置为一节设置多个段落对齐，方法为间的段落设置为一节设置多个段落对齐，方法为使用使用<DIV>标记符将要设置的段落包起来，然后在标记符将要设置的段落包起来，然后在DIV标记符中使用标记符中使用align属性。</p> <p>结束标记不能省结束标记不能省属性：属性：align:设置对齐方式，取值设置对齐方式，取值left | right | center , 缺省值为缺省值为left 举例：举例：（（6）段落居中标记符）段落居中标记符<CENTER> …<CENTER> 超文本标记语言HTML格式的嵌套原则格式的嵌套原则Ø如果所设置的格式是相容的，则取格式的叠如果所设置的格式是相容的，则取格式的叠加效果Ø如果所设置的格式是冲突的，则取最近格式如果所设置的格式是冲突的，则取最近格式的效果Ø不同标记符的开始标记和结束标记不能交错不同标记符的开始标记和结束标记不能交错举例举例二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML2. 文本的显示效文本的显示效果果二二. HTML文本格式的应用文本格式的应用（（1）字体控制标记符）字体控制标记符<FONT>（（2））字体样式标记符字体样式标记符超文本标记语言HTML2. 文本的显示效果文本的显示效果二二. HTML文本格式的应用文本格式的应用（（1）字体控制标记符）字体控制标记符<FONT></FONT>功能：功能：控制字符的显示样式，结束标记不可省。</p> <p>控制字符的显示样式，结束标记不可省格式：格式： <FONT size=大小 color=颜色 face=字体>文字</FONT>size设设置字体大小，取置字体大小，取绝对值时绝对值时，可取，可取1到到7（（3为为缺省缺省值值），），且其且其值值越大，文字越大，文字显显示越大；取相示越大；取相对值时对值时，，+1表示比表示比默默认认字体大字体大1号，反之亦然号，反之亦然color设设置文字的置文字的颜颜色，默色，默认值为认值为黑色，其黑色，其值值可取可取颜颜色名称色名称或十六或十六进进制制值值face设设置字体置字体样样式可指定一个或几个字体名称式可指定一个或几个字体名称(用逗号隔用逗号隔开开)，中文默，中文默认值为认值为“宋体宋体”，英文默，英文默认认字体字体为为“Times New Roman” 举举例例超文本标记语言HTML2. 文本的显示效文本的显示效果果二二. HTML文本格式的应用文本格式的应用（（2）字体样式标记符）字体样式标记符标记标记符符功能功能标记标记符符功能功能<B> </B>粗体粗体 <STRIKE> </STRIKE>删删除除线线<I> </I>斜体斜体 <S> </S>删删除除线线<U> </U>下划下划线线 <SUB> </SUB>下下标标<BIG> </BIG>大字体大字体 <SUP> </SUP>上上标标<SMALL></SMALL> 小字体小字体 <TT> </TT>固定固定宽宽度度常用物理字符样式常用物理字符样式超文本标记语言HTML2. 文本的显示效果文本的显示效果二二. HTML文本格式的应用文本格式的应用常用逻辑字符样式常用逻辑字符样式标记标记符符功能功能<ADDRESS></ADDRESS>网网页设计页设计者或者或维护维护者的信息，通常者的信息，通常显显示示为为斜体斜体<CITE> </CITE>表示文本属于引用，通常表示文本属于引用，通常显显示示为为斜体斜体<CODE> </CODE>表示程序代表示程序代码码，通常，通常显显示示为为固定固定宽宽度字体度字体<DFN> </DFN>表示定表示定义义了的了的术语术语，通常，通常显显示示为为黑体或斜体黑体或斜体<EM> </EM>强强调调某些字某些字词词，通常，通常显显示示为为斜体斜体<KBD> </KBD>表用表用户户的的键盘输键盘输入，通常入，通常显显示示为为固定固定宽宽度字体度字体<SAMP> </SAMP>表示文本表示文本样样本，通常本，通常显显示示为为固定固定宽宽度字体度字体<STRONG></STRONG>特特别别强强调调某些字某些字词词，通常，通常显显示示为为粗体粗体<VAR> </VAR>表示表示变变量，通常量，通常显显示示为为斜体斜体举例超文本标记语言HTML3. 列表格式列表格式 (1) 有序列表有序列表(2) 无序列表无序列表(3) 定义列表定义列表二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML(1) 有序列表有序列表<OL type=符号类型符号类型 start=列表开始值列表开始值> <LI type=符号类型符号类型 value=列表项值列表项值>列表项列表项1</LI> <LI type=符号类型符号类型 value=列表项值列表项值>列表项列表项2</LI> <LI type=符号类型符号类型 value=列表项值列表项值>列表项列表项3</LI></OL> OLtype取取值为值为1|A|a|i|I，，缺省缺省值为值为1。</p> <p>常用）常用）start列表的数字序列的起始列表的数字序列的起始值值，取，取值为值为任意整数任意整数LItype列表列表项项数字序列数字序列样样式，取式，取值为值为1|A|a|i|Ivalue列表列表项项的起始的起始值值，以，以获获得非得非连续连续的数字序列，的数字序列，取取值为值为任意整数任意整数二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML(2) 无序列表无序列表<UL type=符号类型符号类型 > <LI type=符号类型符号类型 >列表项列表项1</LI> <LI type=符号类型符号类型 >列表项列表项2</LI> <LI type=符号类型符号类型 >列表项列表项3</LI></UL> ULtype设设置无序列表的置无序列表的项项目符号目符号样样式，取式，取值为值为disc（（实实心心圆圆、缺省、缺省值值））|circle（（空心空心圆圆））|square（（方方块块））常用）LItype设设置列表置列表项项的的项项目符号目符号样样式，取式，取值为值为disc（（实实心心圆圆、缺省、缺省值值））|circle（（空心空心圆圆））|square（（方方块块）。</p> <p>不常用）（不常用）二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML(3) 定义列表定义列表<DL> <DT> <DD></DL>定义列表的制作需要以下几个标记符：定义列表的制作需要以下几个标记符：列表标记符列表标记符<DL>…</DL>，，用来指定定义列表的开用来指定定义列表的开始与结尾；始与结尾；术语标记符术语标记符<DT>，，用来指定第一层数据；用来指定第一层数据；描述标记符描述标记符<DD>，，用来指定第二层数据用来指定第二层数据举例二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML用用HTML标记设计如图所示的列表标记设计如图所示的列表二二. HTML文本格式的应用文本格式的应用超文本标记语言HTML1. Web页页图像基础图像基础（（1）网页中常用的图形文件格式）网页中常用的图形文件格式1））GIF格式：格式：(Griphic Interchange Format 图形交换格式图形交换格式)采用采用无损压缩算法；可高度压缩图像，但只能包含无损压缩算法；可高度压缩图像，但只能包含256色，因此只适色，因此只适合于线条图以及使用大块纯色的图片；具有透明色的特点；可合于线条图以及使用大块纯色的图片；具有透明色的特点；可支持动画效果，即所谓的动画支持动画效果，即所谓的动画GIF（（Animated GIF）。</p> <p>2））JPEG格式：格式：(Joint PhotoGraphics Expert，，联合图形专家组联合图形专家组图片格式图片格式) 采用有损压缩来减小图片文件的大小，因此用户将看采用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了，这也是该格式的典到随着文件的减小，图片的质量也降低了，这也是该格式的典型特点，即可以控制图片的压缩比率；能支持几乎所有颜色，型特点，即可以控制图片的压缩比率；能支持几乎所有颜色，因此适合于使用真彩色或平滑过渡的照片和图片；不具有透明因此适合于使用真彩色或平滑过渡的照片和图片；不具有透明色的特点；不支持动画效果色的特点；不支持动画效果三三. 在在网页中使用图形网页中使用图形超文本标记语言HTML1. Web页页图像基础图像基础（（1）网页中常用的图形文件格式）网页中常用的图形文件格式3））PNG格式：格式：(Portable Networks Graphics，，可移植可移植的网络图片格式的网络图片格式)它适用于任何类型、任何颜色深度的它适用于任何类型、任何颜色深度的图片；采用无损压缩算法减小文件大小，同时保留图图片；采用无损压缩算法减小文件大小，同时保留图片中的透明区域。</p> <p>片中的透明区域4）矢量格式：）矢量格式：前几种格式均为位图格式所谓位图格前几种格式均为位图格式所谓位图格式就是指用图片上每一点的信息描述图像，而矢量格式就是指用图片上每一点的信息描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像；矢量式则是用线条和填充色等数学信息来描述图像；矢量图要比位图文件小的多，但表现力丝毫不逊色支持图要比位图文件小的多，但表现力丝毫不逊色支持矢量动画矢量动画三三. 在在网页中使用图形网页中使用图形超文本标记语言HTML1. Web页页图像基础图像基础（（2）常见图形图像处理软件）常见图形图像处理软件 1) Photoshop 2) Firework 3) Flash（（3））网页中使用图像的原则网页中使用图像的原则 1) 尽可能使图形图像文件小尽可能使图形图像文件小 l l 使图像的尺寸适当，不可太大使图像的尺寸适当，不可太大 l l 采用正确的图像格式采用正确的图像格式 2) 控制图像的数量和质量控制图像的数量和质量 3) 合理使用动画合理使用动画三三. 在在网页中使用图形网页中使用图形超文本标记语言HTML2. <IMG>标记符标记符三三. 在在网页中使用图形网页中使用图形功能：功能：在网页中插入图片或视频。</p> <p class='cssnone'>在网页中插入图片或视频属性：属性：（（1）插入图片）插入图片l lsrc:设设置置图图像像文文件件的的位位置置，，取取值值为为要要插插入入图图像像的的文件名文件名（相对路径和绝对路径）（相对路径和绝对路径）lalt:alt:表表示示图图像像的的简简单单文文本本，，用用于于不不能能显显示示图图像像或或图图像显示时间过长时显示文字像显示时间过长时显示文字举例举例超文本标记语言HTML2. <IMG>标记符标记符三三. 在在网页中使用图形网页中使用图形（（2）设置图像的高和宽）设置图像的高和宽l lwidth:设置图像的宽度，取值为像素数或百分数设置图像的宽度，取值为像素数或百分数l lheight: 设设置置图图像像的的高高度度，，取取值值为为像像素素数数或或百百分数3）设置图像边框）设置图像边框l l border:设置图像边框效果，取值是像素数设置图像边框效果，取值是像素数4）设置图片周围空白）设置图片周围空白l l hspace:设置图像周围水平方向空白取值为像素数设置图像周围水平方向空白取值为像素数l l vspace: 设设置置图图像像周周围围垂垂直直方方向向空空白白。</p> <p class='cssnone'>取取值值为为像素数举例举例超文本标记语言HTML2. <IMG>标记符标记符三三. 在在网页中使用图形网页中使用图形（（5）设置图像的对齐格式）设置图像的对齐格式l l 图像在页面中的对齐图像在页面中的对齐方法：方法：<DIV align=””center””> <IMG src=””””> </DIV> 或或 <P align=””center””> <IMG src=””””> </P> 举例举例超文本标记语言HTML2. <IMG>标记符标记符三三. 在在网页中使用图形网页中使用图形（（5）设置图像的对齐格式）设置图像的对齐格式l l 图像与文本的对齐方式图像与文本的对齐方式align: 控制图像与周围内容的对齐方式取值如下：控制图像与周围内容的对齐方式取值如下： top-----图像与文本顶端对齐图像与文本顶端对齐垂垂 middle-----图像与文本底部中间对齐图像与文本底部中间对齐直直 absmiddle-----图像与文本完全中间对齐图像与文本完全中间对齐 bottom(缺省值缺省值)----- 图像与文本底部对齐图像与文本底部对齐水水 left----- 图左字右图左字右平平 rightright----------图右字左图右字左举例举例1 举例举例2超文本标记语言HTML2. <IMG>标记符标记符三三. 在在网页中使用图形网页中使用图形（（6）图像）图像映射映射的的引用的的引用usmapusmap: :引用引用MAPMAP标记符中定义的映射区。</p> <p class='cssnone'>标记符中定义的映射区例：例：<IMG <IMG srcsrc=“image.gif” =“image.gif” usmapusmap=”=”ssss”>”> 超文本标记语言HTML2. <IMG>标记符标记符三三. 在在网页中使用图形网页中使用图形(6) 设置视频播放设置视频播放l l src:指定传输视频过程预显示的图片文件名指定传输视频过程预显示的图片文件名l l dynsrc:指定视频文件名指定视频文件名l l start:设置视频开始播放的方式取值为设置视频开始播放的方式取值为fileopen(缺省值缺省值,达达开始播放开始播放)|mouseover(鼠标悬停播放鼠标悬停播放)二者可同时使用，用二者可同时使用，用逗号分隔逗号分隔l l loopdelay:播放延时，单位为毫秒播放延时，单位为毫秒l l loop:设置播放循环次数设置播放循环次数"infinite"表示无限次播放表示无限次播放l l controls:设置是否有视频播放按钮设置是否有视频播放按钮例：例：<IMG src=””图像文件图像文件”” dynsrc=””视频文件视频文件”” start=””开始开始方式方式”” loopdelay=””时延时延”” loop=””播放次数播放次数”” controls> 举举例例超文本标记语言HTML1. 超链接超链接<A>…</A>四四. 超链接与图像映像超链接与图像映像功能：功能：创建超链节。</p> <p class='cssnone'>结束标记不能省创建超链节结束标记不能省属性：属性： href:用来指定超链接目标用来指定超链接目标 name:书签名书签名 target：：用来指定超链接的目标框架名用来指定超链接的目标框架名超文本标记语言HTML四四. 超链接与图像映像超链接与图像映像1）本）本地网页链接地网页链接例：例：•源网页为源网页为Index.htm<A href="Folder2/interest.htm">兴趣兴趣</A> •源网页为源网页为photo.htm<A href="../index.htm">返回首页返回首页 </A><A href="../Folder2/interest.htm">兴趣兴趣</A> •源网页为源网页为favorite.htm<A href="../index.htm">返回首页返回首页</A><A href="../Folder1/photo.htm">相册相册</A><A href="interest.htm">兴趣兴趣</A>超文本标记语言HTML四四. 超链接与图像映像超链接与图像映像2）外部链接）外部链接所谓外部链接是指建立链接的源网页与待链接的所谓外部链接是指建立链接的源网页与待链接的目标网页不在同一站点内。</p> <p class='cssnone'>创建这样的超链接必须目标网页不在同一站点内创建这样的超链接必须使用绝对路径，例如下面的代码创建了连接到使用绝对路径，例如下面的代码创建了连接到“搜搜狐狐”主页的超链接：主页的超链接：例：例：<A href=””>链接到链接到“搜狐搜狐”</A> 超文本标记语言HTML四四. 超链接与图像映像超链接与图像映像3）书签链接）书签链接建立书签链接的步骤如下：建立书签链接的步骤如下：• 建立书签建立书签在需要跳转到的每一个位置插入具有在需要跳转到的每一个位置插入具有name属性的属性的<A>标记，标记，在在<A>与与</A>之间不需要任何文字，之间不需要任何文字，name属性的值就是该属性的值就是该书签的名称例如，插入名为书签的名称例如，插入名为top的书签代码为：的书签代码为：<A name=”top”>目录目录</A>• 建立超链接建立超链接在需要建立书签链接的位置插入具有在需要建立书签链接的位置插入具有href属性的属性的<A>标记例如链接到名为如链接到名为top的书签的超链接代码为：的书签的超链接代码为： <A href=”#top”>返回目录返回目录</A> 举例超文本标记语言HTML四四. 超链接与图像映像超链接与图像映像4）电子邮件链接）电子邮件链接如果将如果将<A>标记的标记的href属性的值指定为属性的值指定为“mailto:邮件地址邮件地址”，那么就可以连接到指定的电子邮件。</p> <p class='cssnone'>那么就可以连接到指定的电子邮件例如使用下面的代码可以设置电子邮件超链接：例如使用下面的代码可以设置电子邮件超链接：<A href=”mailto:zylwzw@”>请与本书的作请与本书的作者联系者联系</A> 超文本标记语言HTML四四. 超链接与图像映像超链接与图像映像5）链接到多媒体对象）链接到多媒体对象如果将如果将<A>标记的标记的href属性的值指定为其它文件，属性的值指定为其它文件，那么就可以连接到指定的其它类型的文件例如使那么就可以连接到指定的其它类型的文件例如使用下面的代码可以设置视频文件和音乐文件的超链用下面的代码可以设置视频文件和音乐文件的超链接：接：<P><A href="2357.jpg">打开图片打开图片</A></P><P><A href="钢琴钢琴.mp3">播放音乐播放音乐</A></P> 举例举例超文本标记语言HTML 2. 图像映像图像映像四四. 超链接与图像映像超链接与图像映像（（1 1）什么是图像映像？）什么是图像映像？所所谓谓图图像像映映像像是是指指在在一一幅幅图图中中定定义义若若干干个个区区域域（（即即热热点点）），，对对每每个个区区域域指指定定一一个个特特定定的的超超链链接接，，当当在在浏浏览览器器中中单单击击不不同同区区域域时时便便可可以以链链接接到到相相应应的的目目标标页页面面。</p> <p class='cssnone'>图图像像映映像像在在Web上上的的应应用用非非常常广广泛泛，，如如电电子子地地图、页面导航图等图、页面导航图等超文本标记语言HTML 2. 图像映像图像映像四四. 超链接与图像映像超链接与图像映像（（2）图形映射中常用的标记符）图形映射中常用的标记符用用<MAP>……</MAP>和和<AREA>标标记记符符定定义义映映射射区域，结构如下：区域，结构如下：<MAP> <AREA> ………… <AREA></MAP></MAP> 超文本标记语言HTML 2. 图像映像图像映像四四. 超链接与图像映像超链接与图像映像（（2）图形映射中常用的标记符）图形映射中常用的标记符1）） <MAP> </MAP>功能功能：定义映射区域定义映射区域属性：属性：l l name:指定图像映射的名称，为以后引用做准备指定图像映射的名称，为以后引用做准备例：例：<MAP name=”<MAP name=”mymapmymap”></MAP>”></MAP> 超文本标记语言HTML 2. 图像映像图像映像四四. 超链接与图像映像超链接与图像映像（（2）图形映射中常用的标记符）图形映射中常用的标记符 2））<AREA> 功功能能：：添添加加映映射射区区域域信信息息，，无无结结束束标标记记，，每每个个映映射射区区域域用用一个一个AREA标记符。</p> <p class='cssnone'>标记符属性：属性： l l href:与与A标记符中标记符中href用法相同用法相同 l l shape:设设置置图图像像映映射射区区的的形形状状，，区区值值为为rect（（矩矩形形））|circle（（圆形）圆形）|poly（（多边形）多边形）|default（（整个图像区域）整个图像区域） l l coords:用来标识图映射区域的边界用来标识图映射区域的边界Coordinate)超文本标记语言HTML 2. 图像映像图像映像四四. 超链接与图像映像超链接与图像映像（（3）图形映像应用）图形映像应用 1）创建映像区域）创建映像区域<MAP name="mymap"> <AREA href="page1.htm" shape="rect" coords="1,1,30,30"> <AREA href="page2.htm" shape="circle" coords="300,300,100"> <AREA href="page3.htm" shape="poly" coords="250,200,300,250,200,250"></MAP> 超文本标记语言HTML 2. 图像映像图像映像四四. 超链接与图像映像超链接与图像映像 2）用）用<IMG>标记符对映射区域进行引用标记符对映射区域进行引用 <IMG src="图像文件图像文件" usemap="#mymap"> （（4）举例）举例超文本标记语言HTML1.表格的基本构成表格的基本构成 <TABLE> <CAPTION> 表格标题表格标题 </CAPTION> <TR> <TH> 第一行第一个单元格第一行第一个单元格 </TH> <TH> 第一行第二个单元格第一行第二个单元格 </TH> …… </TR> <TR> <TD>第二行第一个单元格第二行第一个单元格 </TD> <TD>第二行第二个单元格第二行第二个单元格 </TD> …… </TR></TABLE> 举例五五.表格表格超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（1））<TABLE> </TABLE> 功能：功能：定义整个表格，表格中的所有内容都必须位于定义整个表格，表格中的所有内容都必须位于<TABLE>和和</TABLE>之间。</p> <p class='cssnone'>之间属性：属性： 1）边框与分隔线）边框与分隔线 frame：：控制表格最外层的四条框线，其取值如下控制表格最外层的四条框线，其取值如下表：表：超文本标记语言HTML 2.表格标记符及其属性表格标记符及其属性五五.表格表格值意意义值意意义void缺省缺省值，无，无边框框above仅有上有上边框框lhs仅有左有左边框框below仅有下有下边框框rhs仅有右有右边框框hsides仅有上、下有上、下边框框box包含全部四个包含全部四个边框框vsides仅有左、右有左、右边框框border 包含全部四个包含全部四个边框框（（1））<TABLE> </TABLE>1）边框与分隔线）边框与分隔线超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（1））<TABLE> </TABLE>1）边框与分隔线）边框与分隔线 rules：：控制是否显示及如何显示单元格之间的分隔线控制是否显示及如何显示单元格之间的分隔线值：值：none为缺省值，表示无分隔线为缺省值，表示无分隔线 rows表示仅有行分隔线。</p> <p class='cssnone'>表示仅有行分隔线 cols表示仅有列分隔线表示仅有列分隔线 all表示包括所有分隔线表示包括所有分隔线Bordercolor:设置表格边框颜色设置表格边框颜色举例超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（1））<TABLE> </TABLE> 2）控制单元格空白）控制单元格空白 cellspacing：：控制单元格之间的空白取值为像控制单元格之间的空白取值为像素素 cellpadding：：控制表格分隔线与数据之间的空白控制表格分隔线与数据之间的空白其取值为像素数其取值为像素数举例举例 3）控制表格的高度或宽度）控制表格的高度或宽度 Width: 设置表格列宽，可取像素值或百分比值。</p> <p class='cssnone'>设置表格列宽，可取像素值或百分比值 height: 设置表格行高，可取像素值或百分比值设置表格行高，可取像素值或百分比值超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（1））<TABLE> </TABLE> 3）表格在页面中的对齐方式）表格在页面中的对齐方式 align：：控制表格在页面中的对齐方式，（控制表格在页面中的对齐方式，（left | center | right）例如：例如：<TABLE align=”center”> 注：教材P48Valign属性的讨论 4）设置表格背景色与背景图）设置表格背景色与背景图 bgcolor：：设置背景颜色设置背景颜色 background：：设置背景图案设置背景图案超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（2））<CAPTION> </CAPTION> 功能：功能：定义表格标题，表格标题位于定义表格标题，表格标题位于<CAPTION>和和</CAPTION>之间。</p> <p class='cssnone'>之间属性：属性： align：：设置表格标题的位置，取值为设置表格标题的位置，取值为 (top | bottom)，，top为缺省值为缺省值超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（3））<TR> 功能：功能：定义表格行结束标记可以省略定义表格行结束标记可以省略属性：属性： 1）设置表格行对齐方式）设置表格行对齐方式 align：：控制表格整行内容的水平对齐控制表格整行内容的水平对齐值：值：center表示单元格内容水平方向居中对齐表示单元格内容水平方向居中对齐 left为缺省值，表示单元格内容左对齐为缺省值，表示单元格内容左对齐 right表示单元格内容右对齐表示单元格内容右对齐举例举例超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（3））<TR> 属性：属性： 1）设置表格行对齐方式）设置表格行对齐方式 valign：：控制表格整行内容的垂直对齐。</p> <p class='cssnone'>控制表格整行内容的垂直对齐值：值：top表示数据靠单元格顶部表示数据靠单元格顶部 bottom表示数据靠单元格底部表示数据靠单元格底部 middle为缺省值，表示数据靠单元格的垂直方向为缺省值，表示数据靠单元格的垂直方向居中超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格（（3））<TR> 2）设置表格行宽度和高度）设置表格行宽度和高度 height：：控制控制当前行的当前行的高度，其取值为像素数高度，其取值为像素数 width：：控制控制当前行的当前行的宽度，其取值为像素数宽度，其取值为像素数 3）设置表格行背景色和背景图）设置表格行背景色和背景图 bgcolor：：设置设置当前行的当前行的背景颜色背景颜色 background：：设置设置当前行的当前行的背景图案背景图案 4））bordercolor:设置当前行的边框颜色设置当前行的边框颜色超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格(4) <TH> 功能：功能：定义表格行列标题单元格内容。</p> <p class='cssnone'>结束标记可定义表格行列标题单元格内容结束标记可以省略属性：属性： 1）合并单元格）合并单元格 rowspan：：行合并，其取值表示纵向方向上合并行合并，其取值表示纵向方向上合并的行数 colspan：：列合并，其取值表示横向方向上合并的列合并，其取值表示横向方向上合并的列数举例超文本标记语言HTML2.表格标记符及其属性表格标记符及其属性五五.表格表格(4) <TH> 2）单元格对齐方式）单元格对齐方式 align：：控制表格标题单元格内容的水平对齐控制表格标题单元格内容的水平对齐 valign：：控制表格标题单元格内容的垂直对齐控制表格标题单元格内容的垂直对齐 3）设置单元格高度和宽度）设置单元格高度和宽度 height：：控制单元格高度，其取值为像素数控制单元格高度，其取值为像素数 width：：控制单元格宽度，其取值为像素数。</p> <p class='cssnone'>控制单元格宽度，其取值为像素数 4）设置单元格背景色和背景图）设置单元格背景色和背景图 bgcolor：：设置背景颜色设置背景颜色 background：：设置背景图案设置背景图案超文本标记语言HTML3. 表格的分组显示表格的分组显示 (1) 按行分组(2) 按列分组五五.表格表格超文本标记语言HTML3. 表格的分组显示表格的分组显示 (1) 按行分组按行分组结构：结构：<TABLE> <THEAD>表头表头</THEAD> <TBODY>表体表体1</TBODY> …… <TBODY>表体表体2</TBODY> <TFOOT>表尾表尾</TFOOT> </TABLE>五五.表格表格超文本标记语言HTML3. 表格的分组显示表格的分组显示 (1) 按行分组按行分组结构：结构： <TABLE> <THEAD>表头</THEAD> <TBODY>表体1</TBODY> …… <TBODY>表体2</TBODY> <TFOOT>表尾</TFOOT> </TABLE>五五.表格表格提示：提示：在同一个在同一个<TBODY>中，中，所用各行的列数所用各行的列数必须相同。</p> <p class='cssnone'>必须相同在浏览器中在浏览器中显示时，各分组显示时，各分组之间都用边框线之间都用边框线分开举例超文本标记语言HTML3. 表格的分组显示表格的分组显示 (2) 按列分组按列分组<COLGROUP span=列数列数 width=列宽度列宽度><COL span=列数列数 width=列宽度列宽度> 提示：提示： <COL>不分组举举例例五五.表格表格超文本标记语言HTML3. 表格布局的应用表格布局的应用 (1) 设设置表格框线效果置表格框线效果 (2) 设置竖线分隔效果设置竖线分隔效果五五.表格表格超文本标记语言HTML习题习题2_3：请画出下面：请画出下面HTML文件在浏览器中的显示效果文件在浏览器中的显示效果 <TABLE border="1"> <TR> <TD colspan=3>aaa<TD>bbb<TD>ccc <TR> <TD>ddd<TD rowspan=3>eee<TD>fff <TD rowspan=2 colspan=2>ggg <TR> <TD>hhh<TD>iii <TR> <TD>jjj<TD>kkk<TD>mmm<TD>nnn <TABLE> 五五.表格表格aaabbbcccdddeeefffggghhhiiikkkmmnnnjjj超文本标记语言HTML练习题：请编写练习题：请编写HTML文件，完成下表。</p> <p class='cssnone'>文件，完成下表五五.表格表格超文本标记语言HTML1.什么是框架网页什么是框架网页六六. 框架网页框架网页所谓框架网页是指将浏览器窗口划分为不同的部分，所谓框架网页是指将浏览器窗口划分为不同的部分，每部分加载一个独立的网页，从而获得在一个浏览器每部分加载一个独立的网页，从而获得在一个浏览器窗口同时显示多个网页的特殊效果另外，通过为超窗口同时显示多个网页的特殊效果另外，通过为超链接指定目标框架，可以实现页面导航功能链接指定目标框架，可以实现页面导航功能举例超文本标记语言HTML2. 框架的结构框架的结构六六. 框架框架<HTML><HEAD></HEAD><FRAMESET rows="64,*"> <FRAME> <FRAME> <NOFRAMES> <BODY> <P>此网页使用了框架，但您的浏览器不支持框架此网页使用了框架，但您的浏览器不支持框架 </BODY> </NOFRAMES></FRAMESET></HTML>超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（1））<FRAMESET>…</FRAMESET>功能：功能：设置框架集网页，结束标记不能省略。</p> <p class='cssnone'>设置框架集网页，结束标记不能省略属性：属性：rows：设置横向框架的数量和高度设置横向框架的数量和高度cols：：设置纵向框架的数量和宽度设置纵向框架的数量和宽度超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（1））<FRAMESET>…</FRAMESET>rows和和cols的值有以下三种方式：的值有以下三种方式：• 像素值像素值• 百分数百分数• n*(n>=1)：表示浏览器窗口的剩余部分例如：：表示浏览器窗口的剩余部分例如： cols=”30%,*” cols=”*,*,*” cols=”*,2*,3*” cols=”*,200,3*”超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（1））<FRAMESET>…</FRAMESET>提示：提示：• rows和和cols的取值个数确定了的取值个数确定了<FRAME>标记的个数标记的个数• rows和和cols各个值之间用各个值之间用“，，”号分开，且不能有空号分开，且不能有空格• rows和和cols一般不同时使用，如果需要构造同时包含一般不同时使用，如果需要构造同时包含纵横框架的网页，可用网页的嵌套。</p> <p class='cssnone'>纵横框架的网页，可用网页的嵌套超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（2））<FRAME> 属性：属性：src：：指定框架中显示的页面指定框架中显示的页面name：：设置框架名称，与设置框架名称，与<A>标记的标记的target属性配合，可完成目标属性配合，可完成目标框架的超链结框架的超链结例：例：<A href=”外部网页名外部网页名” target=”目标框架网页目标框架网页”></A>注：注：target的取值也可为以下特殊框架：的取值也可为以下特殊框架：_top：表示将超链接的目标文件装入整个浏览器窗口表示将超链接的目标文件装入整个浏览器窗口self：表示将超链接的目标文件装入当前框架，此值为缺省值表示将超链接的目标文件装入当前框架，此值为缺省值blank：表示将超链接的目标文件装入一个新的浏览器窗口表示将超链接的目标文件装入一个新的浏览器窗口超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（2））<FRAME> 属性：属性：frameborder：：控制是否显示框架边框其中值控制是否显示框架边框。</p> <p class='cssnone'>其中值1为缺省为缺省值，表示生成值，表示生成3D边框；而边框；而0表示不显示边框表示不显示边框scrolling：：控制是否在框架内加入滚动条其中值：控制是否在框架内加入滚动条其中值： yes同时加入垂直和水平滚动条；同时加入垂直和水平滚动条； no不加入垂直和水平滚动条；不加入垂直和水平滚动条； auto为缺省值，表示需要时加入滚动条为缺省值，表示需要时加入滚动条noresize：：控制框架的位置和大小固定不变该属性不控制框架的位置和大小固定不变该属性不需要任何取值例：需要任何取值例：<FRAME noresize>超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（2））<FRAME> 属性：属性：marginheight：：控制框架内容和框架左右边框之间的距控制框架内容和框架左右边框之间的距离，其取值为像素数离，其取值为像素数marginwidth：：控制框架内容和框架上下边框之间的距控制框架内容和框架上下边框之间的距离，其取值为像素数离，其取值为像素数。</p> <p class='cssnone'> 超文本标记语言HTML3.常用标记符及其属性常用标记符及其属性六六. 框架框架（（3））<NOFRAME>… </NOFRAME> 包含了框架不能正常显示时的替代内容，包含了框架不能正常显示时的替代内容，<NOFRAME>和和</NOFRAME>必须成对使用，且必须必须成对使用，且必须包含一个包含一个<BODY>标记符超文本标记语言HTML4.框架网页的应用框架网页的应用六六. 框架框架（（1）创建框架集网页）创建框架集网页举例（（2）指定初始化网页）指定初始化网页举例（（3）创建创链接并指定目标框架）创建创链接并指定目标框架举例超文本标记语言HTML六六. 框架框架 P73 习题习题4 AAABBBCCC超文本标记语言HTML六六. 框架框架 P73 习题习题4 <HTML> <HEAD> <TITLE>习题2_4 超文本标记语言HTML1. 什么是表单什么是表单七七.表单表单所谓表单是指用于实现客户端（网页浏览者）与所谓表单是指用于实现客户端（网页浏览者）与服务器端（网页拥有者）之间信息交互的一种页面元服务器端（网页拥有者）之间信息交互的一种页面元素，在素，在WWW上它被广泛用于各种信息的搜索和反馈。

上它被广泛用于各种信息的搜索和反馈常见的表单有用户登录、搜索引擎、注册、用户留言常见的表单有用户登录、搜索引擎、注册、用户留言等举例超文本标记语言HTML2. 表单的构成表单的构成 •文本框•复选框•单选框•按钮•选项菜单•多行文本七七.表单表单超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（（1）表单标记符）表单标记符

功能：功能：在网页中添加表单，结束符不可省且表单不在网页中添加表单，结束符不可省且表单不能嵌套语法及属性：语法及属性：超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（（2））…控件名称控件名称Type属性属性值控件名称控件名称Type属性属性值单行文本框text提交按钮submit密码框password重置按钮reset复选框checkbox自定义按钮button单选按钮radio不同控件的不同控件的type值如下表值如下表超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（（2））…•单行文本框单行文本框 •密码框密码框举例超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（（2））…•复选框复选框 • 单选按钮单选按钮举例超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（（2））…•提交按钮提交按钮 • 重置按钮重置按钮 • 自定义按钮自定义按钮超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（（3））举例超文本标记语言HTML3. 表单及表单域标记符表单及表单域标记符七七.表单表单（4）

关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们

QQ咨询
微信客服
返回顶部