,JSP 网 页 设 计,商 贸 系,董祥和,JSP 网 页 设 计,第二章 HTML常用标记,本章主要内容,1、,标记,2、,热点标记,3、,图片标记,4、,表格,5、,框架,6、自动刷新页面,7、文字移动,第二章 HTML常用标记,一,标记,HTML文件由标记和被标记的内容组成。,格式为：受标记影响的内容,每个标记都用（大于号）围住，如，以表示这是HTML代码而非普通文本。注意，与标记名之间不能留有空格或其它字符。,在标记名前加上符号/便是其结束标记，表示这种标记内容的结束，如。标记也有不用结尾的，称之为单标记。,一 标记HTML文件由标记和被标记的内容组成。每个标记,标记字母大小写皆可，没有限制。,对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记间的顺序也是任意的。,标记字母大小写皆可，没有限制。,1.标记的属性,标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。标记要通过属性来制作出各种效果。,格式为:,受影响的内容,例如字体标记，有属性size和color等。属性size表示文字的大小，属性color表示文字的颜色。表示为：属性示例,1.标记的属性格式为:标记 属性1=属性值 属,主体标记 属性用于设定网页的总体风格，可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色。,值,说明,background,设置网页的背景图像。,Bgcolor,设置网页的背景色。,Text,设置文本的颜色。,Link,设置尚未被访问过的超文本链接的颜色，默认为蓝色。,vlink,设置已被访问过的超文本链接的颜色，默认为蓝色。,alink,设置超文本链接在被访问瞬间的颜色，默认为蓝色。,示例:1.html,主体标记,二,热点,标记,热点由,标记定义，它在网页上建立超文本链接。通过单击一个,词、句或图片,，可从此处转到另一个链接资源（目标资源），这个目标资源有唯一的地址（URL）。具有以上特点的词、句或图片就称为热点。,标记的格式为：热点,href为超文本引用，它的值为一个URL，是目标资源的有效地址。在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径。,二 热点标记热点由标记定义，它在网页上建立超文本链接,target设定链接被按后结果所要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。,取值,说明,target=_blank或target=new,将链接的画面内容，开在,新的浏览器,窗口中。,target=_parent,将链接的画面内容，显示在直接,父框架窗口,中。,target=_self,将链接的画面内容，显示在,当前窗口,中（默认值）。,target=_top,将框架中连结的画面内容，显示在没有框架的窗口中（即除去了框架）。,target=框架名称,只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架名称是事先由框架标记所命名的。,target设定链接被按后结果所要显示的窗口。可选值为：,链接到,上一级目录,中的网页文件，其格式为：热点,其中./表示退到上一级目录中。,链接到,同级目录,中的网页文件，其格式为：热点,表示先退到上一级目录中，然后再进入到目标文件所在的目录。,示例:20.html,链接到上一级目录中的网页文件，其格式为：,1.创建指向本页中的链接,要在当前,页面内,实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。,超链接标记的格式为：,热点,单击热点文本，将跳转到“记号名”开始的文本。,书签就是用标记对该文本作一个记号。如果有多个链接，不同目标文本要设置不同的书签名，书签名在的name属性中定义。,格式为：,目标文本附近的字符串,示例:2.html,1.创建指向本页中的链接书签就是用标记对该文本作一个,三,图片标记,使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。,格式为：,假设图片名为1.gif，通常src有以下几种形式：,src=1.gif,src=image/1.gif,src=./1.gif,src=http:/ 图片标记使用图片标记，可以把一幅图片加入到网页中。用图片,第一种:src=1.gif 1.gif必须与该html文件放在同一文件夹。,第二种:src=image/1.gif 以该html文件文件夹所在为基础，1.gif必须放在该html文件所在文件夹下的image子文件夹中。,第三种:src=./1.gif 以该html文件所在文件夹为基础，1.gif必须放在该html文件所在文件夹的上一层文件夹(父文件夹)。,第四种:src=http:/ 图像文件1.gif必须放在这个web服务器主目录的image子目录下。,第一种:src=1.gif 1.gif必须与,前三种叫做相对url，第四种叫做绝对url。,名称,说明,src,指出要加入图片的文件名，即“图片文件的路径图片文件名”。,alt,在浏览器尚未完全读入图片时，在图片位置显示的文字。,width,宽度（像素数或百分数）。通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具。,height,设定图片的高度（像素数或百分数）。,hspace,设定图片边沿空白，以免文字或其它图片过于贴近。设定图片左右的空间水平方向空白像素数。,vspace,设定图片上下的空间，空白高度采用像素作单位。,align,图片在页面中的对齐/布局方式，或图片与文字的对齐方式。,前三种叫做相对url，第四种叫做绝对url。名称说明src指,设置图片与文本之间的空白。,适当在图片与文本之间留下空白，可使页面看起来不至于太紧密。标记的hspace和vspace属性可实现该功能。,示例:,3.html、4.html、5.html,设置图片与文本之间的空白。示例:3.html、4.htm,四,表格(,Table),1.表格标记,表格的标记为，行的标记为，表项的标记为。其中，是单标记，一行的结束是新一行的开始。表项内容写在后或与之间。必须成对使用。,格式为：,表头1表头2表头n,表项1表项2表项n,表项1表项2表项n,四 表格(Table)1.表格标记格式为：,在浏览器中显示时，标记的文字按,粗体,显示，属于表头，标记的文字按正常字体显示，属于表项。,表格的整体外观由标记的属性决定，见表。,属性名,说明,Align,定义表格在网页中的位置。,Border,定义表格边框的粗细，,n,取整数，单位是像素。如果省略，则不带边框。,Width,定义表格的宽度，,x,为像素数或占窗口的百分比。,Height,定义表格的高度，,y,为像素数或占窗口的百分比。,在浏览器中显示时，标记的文字按粗体显示，属于表,对于表格的宽度，如果为像素数，则为绝对宽度。如果为百分数%，则为相对于浏览器窗口宽度的比例，也就是100%时表格宽等于窗口的宽度。不管是绝对宽度还是相对宽度，数值太小不足以显示表格中的内容时，会自动以最小的宽度显示。,示例:,6.html,对于表格的宽度，如果为像素数，则为绝对宽度。如果为百分数,2.给表格加上标题,用标记给表格加标题，其格式为：,标题,标记应包含在标记之间。,属性名,说明,align,设置表格标题在,center,（缺省），左边,left,，还是右边,right,valign,设置表格标题放在表的上部,top,（缺省），还是下部,bottom,示例:,7.html,2.给表格加上标题属性名说明align设置表格标题在ce,3.跨多行、多列的表项 使用、标记的colspan和rowspan属性，可以分别制作跨多列(合并列)和跨多行(合并行)的表格。,跨多列表项,跨多列表项的格式为：,表项,表项,表项,其中，x表示合并的列数。,3.跨多行、多列的表项,跨多行表项,跨多行表项的格式为：,表项,表项,表项,其中，y表示合并的行数。,示例:,8.html、9.html,跨多行表项示例:8.html、9.html,同时跨多列多行表项,在中同时使用colspan和rowspan属性可制作多重表头。格式为：,其中，rowspan设置表头跨过x行，colspan设置表头跨过y列。,同时跨多列多行表项,4.表格的分组显示,复杂表格是对表格的行、列、表项的对齐方式进行设置。,按行分组,表格的行从上到下可以分为表头、表体和表尾。分别使用标记、来定义。这种定义方法不但可以实现设置表头，而且可以将表格的行分组。,4.表格的分组显示按行分组,格式为：,题头,表尾,表体1,表体n,可以定义多个表体部分，每个部分定义多行信息，每行的格式与一般表格中的一样，在同一个中，所有各行的列数必须相同。、标记可以是单标记。,示例:,10.html,格式为：可以定义多个表体部分，每个TBODY,五,框架,1.框架标记,框架标记有两个：框架组标记和框架标记。用以划分框架，而每一框架由一个标记所标识，标记用来声明其中框架页面的内容，并且必须在范围中使用。,框架的定义的基本语法为：,五 框架1.框架标记框架的定义的基本语法为：,框架组标记,标记用来定义一个框架组，其语法格式为：,属性名称,说明,rows,设定横向分割的框架数目。,cols,设定纵向分割的框架数目。,border,设定边框的宽度。,bordercolor,设定边框的颜色。,frameborder,设定有无边框。,framespacing,设置各窗口间的空白。,框架组标记属性名称说明rows设定横向分割的框架数目。co,框架标记,标记用于给各个框架指定页面的内容，它将各个框架和包含其内容的那个文件联系在一起。是一个单标记，其语法格式为：,其中框架名由字母开头，用下划线开头的名字无效。例如：,框架标记其中框架名由字母开头，用下划线开头的名字无效。例,属性名称,说明,src,表示该框架对应的源文件。,name,指定框架名。,border,设定边框的宽度。,bordercolor,设定边框的颜色。,Frameborder,设定有（yes）无（no）边框。,marginwidth,设置框架内容与左右边框的空白。,marginheight,设置框架内容与上下边框的空白。,scrolling,设置是（yes）否no自动（auto）加入滚动条。,noresize,不允许各窗口改变大小，缺省设置是允许各窗口改变大小的。,属性名称说明src表示该框架对应的源文件。name指定框架名,标记的个数应等于在标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果标记数目少于中定义的框架数量，则多余的框架为空。,由于与标记的作用相同，所以在HTML文件中一般不能同时出现，否则会导致无法正常显示框架。,标记的个数应等于在标记中所,示例:,左右排列多个窗口：13.html,上下排列多个窗口：14.html,纵横排列的多个窗口：15.html、16.html,示例:,2.框架间的链接,在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。,使用的target属性可以控制目标文件在那个框架内显示。当单击热点文本时，目标文件就会出现在target指定的框架内。target属性的值可以是框架名，其语法格式为：,热点文本,2.框架间的链接使用的target属性可以控制目标文,起始文件L1.html文件的内容为：,框架间的链接,起始文件L1.html文件的内容为：,L2.html文件的内容为：,第二讲例题,第二讲例题,【例2-1】,【例2-2】,【例2-3】,【例2-4】,【例2-5】,L2.html文件的内容为：,L3.html文件的内容为：,第二讲例题,【例2-1】简单的HTML文件。,最简单的网页,执行,L3.html文件的内容为：,网页设