欢迎来到淘文阁 - 分享文档赚钱的网站! | 帮助中心 好文档才是您的得力助手!
淘文阁 - 分享文档赚钱的网站
全部分类
  • 研究报告>
  • 管理文献>
  • 标准材料>
  • 技术资料>
  • 教育专区>
  • 应用文书>
  • 生活休闲>
  • 考试试题>
  • pptx模板>
  • 工商注册>
  • 期刊短文>
  • 图片设计>
  • ImageVerifierCode 换一换

    网页设计与制作 第2章学习和使用HTML.ppt

    • 资源ID:67551929       资源大小:309.50KB        全文页数:68页
    • 资源格式: PPT        下载积分:16金币
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录   QQ登录  
    二维码
    微信扫一扫登录
    下载资源需要16金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    网页设计与制作 第2章学习和使用HTML.ppt

    通过本章学习,应该掌握以下内容:通过本章学习,应该掌握以下内容:1.HTML及其功能及其功能2.HTML文件的基本结构文件的基本结构3.利用利用HTML处理网页文本和图像处理网页文本和图像4.利用利用HTML处理网页中的超链接处理网页中的超链接5.利用利用HTML处理网页表格和表单处理网页表格和表单6.利用利用HTML处理框架网页处理框架网页第第2章章 学习和使用学习和使用HTML 2.1HTML概述概述2.1.1 什么是什么是HTML HTML(HypertextMarkupLanguage)是是一一种种专专门门用用于于Web页页制制作作的的编编程程语语言言,用用来来描描述述超超文文本本各各个个部部分分的的内内容容,告告诉诉浏浏览览器器如如何何显显示示文文本本,怎怎样样生生成与别的文本或图像的链接点。成与别的文本或图像的链接点。HTML作作为为一一种种网网页页编编辑辑语语言言,易易学学易易懂懂,能能制制作作出出精精美美的的网网页页效效果果,其其他他的的专专用用网网页页编编辑辑器器(如如FrontPage、Dreamweaver)都都是是以以HTML为为基基础的。础的。2.1.2 一个简单的网页示例一个简单的网页示例 1标记符标记符标标记记符符又又称称标标签签,HTML是是影影响响网网页页内内容容显显示示格格式式的的标标记记符符集集合合,浏浏览览器器根根据据标标记记符符决决定网页的实际显示效果。定网页的实际显示效果。2.2HTML文件的基本结构文件的基本结构2.2.1 标记符与属性标记符与属性 在在HTML中中,所所有有的的标标记记符符都都用用尖尖括括号号括括起起来来。例例如如,表表示示HTML标标记记符符。绝绝大大多多数数标标记记符符都都是是成成对对出出现现的的,包包括括开开始始标标记记符符和和结结束束标标记记符符。开开始始标标记记符符和和相相应应的的结结束束标标记记符符定定义义了了标标记记符符所所影影响响的的范范围围。结结束束标标记记符符与与开开始始标标记记符符的的区区别别是是有有一一个斜线。如:个斜线。如:.HTML标标记记符符是是不不区区分分大大小小写写的的,但但通通常常约约定定标标记符使用大写字母,这有利于记符使用大写字母,这有利于HTML文档的维护。文档的维护。属属性性是是用用来来描描述述对对象象特特征征的的特特性性。在在HTMLHTML中中,所所有有的的属属性性都都放放置置在在开开始始标标记记符符的的尖尖括括号号里里,属属性性与与标标记记符符之之间间用用空空格格分分隔隔,属属性性的的值值放放在在相相应应属属性性之之后后,用等号分隔,而不同的属性之间用空格分隔。格式为:用等号分隔,而不同的属性之间用空格分隔。格式为:受受影响的内容影响的内容 HTMLHTML属属性性通通常常也也不不区区分分大大小小写写。本本书书中中为为了了区区分分标标记记符符及及其其属属性性,标标记记符符均均使使用用大大写写字字母母表表示示,而而属属性均使用小写字母表示。性均使用小写字母表示。2属性属性2.2.2 HTML文档的基本结构文档的基本结构 文本标题文本标题文本内容文本内容这这两两个个标标记记符符是是HTML文文档档的的标标记记符符。处处于于文文档档的的最最前前端端,表表示示文文档档的的 开开 始始,即即 浏浏 览览 器器 从从 开开 始始 解解 释释。而而则则位位于于文文件件的的最最后后一一行行,这这样样的的结结果果表表示示这一整份的文档都是这一整份的文档都是HTML语法的文档。语法的文档。(1 1)HTML标记标记符符 是是HTML文文件件头头标标记记符符,用用来来描描述述HTML首首部部的的内内容容,说说明明文文档档的的整整体体信信息息。所所有有首首部部信信息息并并不不会会出出现现在在利利用用WWW浏浏览览器器所所看看到到的的窗窗体体中中。通通常常与与某某些些标标记记符符一一起起使用,如使用,如标记符。标记符。(2 2)HEADHEAD标记符标记符 (3)TITLE标记符标记符 指指的的是是一一份份文文档档的的标标题题。通通常常来来说说,每每一一份份文文档档都都应应该该有有一一个个标标题题来来简简述述这这一一份份文文档档的的特特色色或或是是主主题题。对对于于WWWWWW浏浏览览器器而而言言,标标题题所所在在的的位位置置虽虽然然依依照照浏浏览览器器的的不不同同而而不不同同,但但是是大大部部分分都都位位于于浏浏览览器的最上方。器的最上方。(4)BODY标记标记符符 指指的的是是定定义义出出一一个个HTMLHTML文文档档的的体体部部,位位于于首首部部下下面面。在在标标记记符符内内的的文文字字,所所有有使使用用标标记记符符的的地地方方都都可可以以经经浏浏览览器器正正确确地地显显示示在在浏浏览览器器窗窗体中。体中。也是一个建议选项也是一个建议选项 。2.2.3 创建和测试创建和测试Web页页 (1 1)创建创建WebWeb页页由由于于HTML文文件件的的实实质质就就是是文文本本文文件件,因因此此可可以以用用任任何何文文本本编编辑辑器器编编辑辑HTML文文件件,通通常常可可以以使使用用Windows系统中的系统中的“记事本记事本”程序。程序。(2)测试)测试Web页页 保保存存了了Web页页之之后后,在在所所选选择择的的文文件件夹夹中中将将包包含含所所创创建建的的Web页页,该该Web页页文文件件左左边边有有一一个个图图标标,表表示示可可以以由由IE将将其其打打开开。找找到到刚刚创创建建的的Web页页并并用用鼠鼠标标左左键键双双击击,则则可可以以自自动动启启动动IE浏浏览览器器,此此时时所所创创建建Web页中的内容将在浏览器中显示。页中的内容将在浏览器中显示。(3)发布)发布Web页页 (1 1)申请域名和主页空间)申请域名和主页空间 域域名名有有两两种种类类型型,一一种种是是收收费费的的,另另一一种种是是免免费费的。的。(2 2)测试网页)测试网页 (3 3)上传网页到)上传网页到InternetInternet2.3.1 标题处理标题处理 在在HTML中中,用用户户可可以以通通过过Hn标标记记符符来来标标识识文文档档中中的的标标题题和和副副标标题题,其其中中n是是1到到6的的数数字字。表表示最大的标题,示最大的标题,表示最小的标题。表示最小的标题。标题文字标记符的格式:标题文字标记符的格式:标题文字标题文字属属性性align用用来来设设置置标标题题在在页页面面中中的的对对齐齐方方式式:left(左对齐)、左对齐)、center(居中)或居中)或right(右对齐)。右对齐)。2.3网页文本的处理网页文本的处理2.3.2 段落处理段落处理 在在HTML中中段段落落处处理理是是通通过过段段落落标标记记来来完完成成的的,常常用用的的段段落落标标记记符符有有:注注释释标标记记符符、强强制制换换行行标标记记符符、强制换段标记符、分区显示标记符和水平线等。强制换段标记符、分区显示标记符和水平线等。HTML的注释标记符的格式为:的注释标记符的格式为:注注释释并并不不局局限限于于一一行行,长长度度不不受受限限制制。结结束束标标记记符符不不必必与与开开始始标标记记符符在在同同一一行行。注注释释的的内内容容不不在在浏浏览器中显示。览器中显示。1注释标记符注释标记符 2强制换行标记符强制换行标记符 强强制制换换行行标标记记符符为为,放放在在一一行行的的末末尾尾,可可以以使使后后面面的的文文字字、图图片片、表表格格等等显显示示于于下下一一行行,而而又不会在行与行之间留下空行,即强制文本换行。又不会在行与行之间留下空行,即强制文本换行。强制换行标记符的格式为:强制换行标记符的格式为:文字文字 浏浏览览器器解解释释时时,从从该该处处换换行行。换换行行标标记记符符单单独独使使用,可使页面清晰、整齐。用,可使页面清晰、整齐。3.强制换段标记符强制换段标记符 换换段段标标记记符符有有两两个个:一一个个为为强强制制换换段段标标记记符符,另另一个为设置段落标记符。一个为设置段落标记符。(1)强制换段标记符)强制换段标记符强制换段标记符的格式为:强制换段标记符的格式为:文字文字 标标记记不不但但能能使使后后面面的的文文字字换换到到下下一一行行,还还可可以以使两段之间多一空行。使两段之间多一空行。(2)设置段落标记符)设置段落标记符设置段落标记符的格式为:设置段落标记符的格式为:P align=文字文字 /P其其中中属属性性alignalign用用来来设设置置段段落落的的对对齐齐方方式式,可可以以为为leftleft、centercenter或或rightright,分分别别表表示示居居左左、居居中中、居居右。默认方式为右。默认方式为leftleft。4显示预排格式标记符显示预排格式标记符如如果果希希望望在在浏浏览览网网页页时时仍仍保保留留在在编编辑辑工工具具中中已已经经排排好好的的段段落落格格式式,可可以以使使用用标标记记符符将将预预先先排排好好的格式保留下来。的格式保留下来。显示预排格式标记符的格式为:显示预排格式标记符的格式为:预先排好的格式预先排好的格式 在在预预排排格格式式中中,仍仍可可以以用用HTMLHTML语语言言对对文文字字的的格格式式进行设置,如文字的颜色、大小等。进行设置,如文字的颜色、大小等。5分区显示标记符分区显示标记符 分区显示标记符的格式为:分区显示标记符的格式为:DIV align=文本或图像文本或图像 6水平线水平线 在在页页面面中中插插入入一一条条水水平平标标尺尺线线,可可以以使使不不同同功功能能的文字分隔开,看起来整齐、明了。的文字分隔开,看起来整齐、明了。水平线标记符的格式为:水平线标记符的格式为:HR 在在网网页页中中为为了了增增强强页页面面的的层层次次,其其中中的的文文字字可可以以用用不不同同的的大大小小、字字体体、字字型型和和颜颜色色,通通常常用用FONTFONT标记符来完成。标记符来完成。FONTFONT标记符设置格式为:标记符设置格式为:FONT 被设置的文字被设置的文字 2.3.3 文本格式处理文本格式处理 1文字设置文字设置 (1)size属性属性 sizesize属属性性是是字字号号属属性性,用用于于控控制制文文字字的的大大小小,它它的的取取值值既既可可以以是是绝绝对对值值,也也可可以以是是相相对对值值。使使用用绝绝对对数数值值时时,字字号号属属性性的的值值可可以以从从1 1到到7 7(3 3是是默默认认值值),值值越越大大,显显示示的的文文字字越越大大。使使用用相相对对数数值值时时,可可以以用用“”或或“”来来指指定定相相对对于于当当前前默默认认值值的的字号,例如字号,例如+1+1表示比当前默认字号大表示比当前默认字号大1 1号。号。(2)face属性属性 face属属性性是是字字体体标标记记符符,用用来来指指定定字字体体样样式式。字字体体样样式式也也就就是是通通常常所所说说的的“字字体体”。例例如如,常常用用的的英英文文字字体体有有“TimesNewRoman”、“Arial”等等;常常用用的的中中文文字字体体有有“宋宋体体”、“楷楷体体”等等。在在编编写写网网页页时时,通通过过在在FONT标标记记符符中中指指定定face属属性性,用用户可以指定一个或几个字体名称户可以指定一个或几个字体名称(用逗号隔开用逗号隔开)。(3)color属性属性 FONT标标记记符符的的color属属性性可可用用来来控控制制文文字字的的颜颜色,属性值可以是颜色名称或十六进制值。色,属性值可以是颜色名称或十六进制值。2格式处理格式处理 HTML中的格式标记符有:中的格式标记符有:这这些些标标记记符符都都是是在在标标记记符符中中的。的。(1)设置页面背景颜色)设置页面背景颜色 在在标标记记符符中中使使用用bgcolorbgcolor属属性性可可以以为为网网页设置背景颜色,有页设置背景颜色,有1616种标准颜色可供选择。种标准颜色可供选择。(2)设置页面背景图像)设置页面背景图像单单纯纯使使用用一一种种颜颜色色作作为为背背景景显显然然有有些些单单调调,网网页页设设计计者者也也可可选选择择特特定定图图案案作作为为页页面面的的背背景景,使使用用BODYBODY标记符的标记符的backgroundbackground属性即可。属性即可。HTMLHTML语句为:语句为:BODY background=3.设置页面属性设置页面属性 (3)设置文字和超链接的颜色)设置文字和超链接的颜色 在在设设置置了了背背景景图图案案或或背背景景颜颜色色后后,常常常常需需要要更更改改正正文文字字符符和和超超链链接接的的颜颜色色,以以便便与与背背景景相相适适应应。设设置置正正文文和和超超链链接接颜颜色色时时,可可以以使使用用BODY标标记记符符的的text、link、vlink和和alink属属性性。其其中中,text属属性性用用于于设设置置正正文文的的颜颜色色;link属属性性用用于于设设置置未未被被访访问问的的超超链链接接的的颜颜色色;vlink用用于于设设置置已已被被访访问问过过的的超超链链接接的的颜颜色色;alink用用于于设设置置活活动动超超链链接接(即即当当前前选选定定的的超链接)的颜色。超链接)的颜色。2.4.1 网页图像格式网页图像格式 GIFGIF格格式式(Graphics Graphics Interchange Interchange Format Format 图图像像交交换换格格式式)采采用用无无损损压压缩缩(所所谓谓无无损损压压缩缩是是指指在在压压缩缩过过程程中中图图像像的的质质量量不不会会丢丢失失)算算法法进进行行图图像像的的压压缩缩处处理理,是是目目前前在在网网页页设设计计中中使使用用最最普普遍遍、最最广广泛泛的的一一种种图图像像格式。格式。GIF格格式式可可以以高高度度压压缩缩图图像像;GIF格格式式支支持持图图像像游游离离在在背背景景之之上上的的视视觉觉效效果果;GIFGIF格格式式的的图图像像可可以以被被交交错错下载下载;可以将很多幅图像结合在一个可以将很多幅图像结合在一个GIF文件中。文件中。1GIF格式格式2.4 网页图像处理网页图像处理 2JPEG格式格式 JPEG格格式式(JointPhotoExpertGraphics,联联合合图图形形专专家家组组图图片片格格式式)是是另另一一种种在在Web上上应应用用广广泛泛的的图图像像格格式式。由由于于它它支支持持的的颜颜色色数数几几乎乎没没有有限限制制,因因此此适适用用于于使使用用真真彩彩色色或或平平滑滑过过渡渡色色的的照照片片和和图图片片。与与GIF格格式式采采用用无无损损压压缩缩不不同同,JPEG格格式式使使用用有有损损压压缩缩来来减减小小图图片片文文件件的的大大小小,因因此此用用户户将将看看到到随随着着文文件件的减小,图片的质量也降低了。的减小,图片的质量也降低了。1.支支持持24位位图图像像,能能够够很很好好地地表表现现照照片片等等全全彩彩色色的的图图像;像;2.可可以以生生成成类类似似GIF格格式式的的交交错错关关联联图图像像渐渐变变JPEG;3.可以制作透明可以制作透明JPEG图像。图像。JPEG格式图像的优点:格式图像的优点:1.有损压缩使之不适合表达高清晰度的图像:有损压缩使之不适合表达高清晰度的图像:2.最最高高只只能能以以256色色显显示示的的用用户户,可可能能无无法法观观看看JPEG图像;图像;3.当当图图像像中中包包含含fine字字体体时时应应避避免免用用JPEG格格式式,在在该该字字体体与与纯纯颜颜色色重重叠叠的的地地方方,JPEG压压缩缩作作品品看看上上去只是一种外观近似。去只是一种外观近似。4.采采用用JPEG格格式式对对图图像像进进行行压压缩缩后后,不不能能再再重重新新打打开图像。开图像。5.JPEG格式不支持透明色,也没有动画的概念。格式不支持透明色,也没有动画的概念。JPEG格式图像的缺点:格式图像的缺点:PNG格格式式(PortableNetworksGraphics,可可移移植植的的网网络络图图形形格格式式)是是近近年年来来新新出出现现的的一一种种图图像像格格式式,它它适适于于任任何何类类型型、任任何何颜颜色色深深度度的的图图片片。该该格格式式用用无无损损压压缩缩来来减减小小图图片片文文件件的的大大小小,同同时时保保留留图图片片中中的的透透明明区区域域。此此外外,该该格格式式是是仅仅有有的的几几种种支支持持透透明明度度概概念念的的图图片片格格式式之之一一(透透明明GIF的的透透明明度度只能是只能是50%,但,但PNG格式可以是格式可以是0%50%)。)。3PNG格式格式 GIF、JPEG、PNG这这几几种种格格式式都都是是标标准准的的位位图图格格式式,但但现现在在Web上上还还可可以以使使用用新新的的矢矢量量格格式式。所所谓谓位位图图格格式式就就是是指指用用图图片片上上每每一一点点的的信信息息来来描描述述图图像像,而而矢矢量量格格式式则则是是用用线线条条和和填填充充色色等等数数学学信信息息来来描描述述图图像像。相相比比而而言言,矢矢量量格格式式的的文文件件要要比比位位图图格式的文件小得多,但表现力丝毫不逊色。格式的文件小得多,但表现力丝毫不逊色。除除了了表表现现一一般般的的静静态态画画面面以以外外,动动画画是是矢矢量量格式具有巨大优势的另一个领域。格式具有巨大优势的另一个领域。4矢量格式矢量格式 在在HTML中中,使使用用IMG标标记记符符可可以以在在网网页页中中加加入入图图像像。它它具具有有两两个个基基本本属属性性:src和和alt,分分别别用用于设置图像文件的位置和替换文本。于设置图像文件的位置和替换文本。src表表示示要要插插入入图图像像的的文文件件名名,必必须须包包含含绝绝对对路路径径或或相相对对路路径径,图图像像可可以以是是GIF文文件件、JPEG文文件件或或PNG文文件件。alt表表示示图图像像的的简简单单文文本本说说明明,用用于于不不能能显显示示图图像像的的浏浏览览器器或或浏浏览览器器能能显显示示图图像像但但显显示时间过长时先显示。示时间过长时先显示。2.4.2 将图像放到网页中将图像放到网页中 2.4.3 设置图像属性设置图像属性 在在 HTML中中,使使 用用 IMG标标 记记 符符 的的 width和和height属属性性可可以以指指定定图图像像的的宽宽度度和和宽宽度度,以以告告诉诉浏浏览览器器Web页页应应分分配配给给图图像像多多少少空空间间(以以像像素素为为单单位位)。当当浏浏览览器器解解释释Web页页时时,在在实实际际下下载载图图像像之之前前会会给给图图像像预预留留出出空空间间,以以避避免免在在每每个个图图像像下下载载时时重重新新绘绘制制网网页页,从从而而加加快快网网页页的的下下载载速速度度。width和和height属属性性的的取取值值既既可可以以是是像像素素数数,也也可可以以是是百百分分数。数。1指定图像的宽和高指定图像的宽和高2图像的边框图像的边框使使用用IMG标标记记符符的的border属属性性,可可以以给给图图像像添加边框效果,边框的取值是像素数。添加边框效果,边框的取值是像素数。3设置图像周围的空白设置图像周围的空白可可 以以 在在 IMG标标 记记 符符 内内 使使 用用 属属 性性 hspace和和vspace设设置置图图像像周周围围空空白白,其其中中hspace示示水水平平方方向向的的空空白白,vspace表表示示垂垂直直方方向向的的空空白白,它它们们的的取取值值都都是是像像素素数数。通通过过指指定定图图像像周周围围的的空空白白,可可以使页面的版式更加合理。以使页面的版式更加合理。(1 1)图像在页面中的对齐)图像在页面中的对齐设设置置图图像像在在页页面面中中的的对对齐齐与与设设置置文文本本对对齐齐类类似似,可可以以使使用用DIVDIV或或P P标标记记符符将将IMGIMG标标记记符符括括起起来来,然然后后使用使用alignalign属性。属性。(2 2)图像与周围内容的垂直对齐)图像与周围内容的垂直对齐使使用用IMGIMG标标记记符符的的alignalign属属性性,可可以以控控制制图图像像与与周周围围内内容容的的垂垂直直对对齐齐。此此时时,alignalign属属性性的的值值可可以以是是:toptop、middlemiddle、bottom bottom 分分别别表表示示图图像像与与周周围围内内容容的顶部、中央、底部对齐。的顶部、中央、底部对齐。4图像的对齐图像的对齐 (3 3)图文混排时的图像对齐)图文混排时的图像对齐如如果果要要在在图图像像的的左左、右右环环绕绕文文字字,也也应应该该使使用用IMGIMG标标记记符符的的alignalign属属性性,此此时时,alignalign属属性性的的值值可可以是:以是:leftleft 表示图像居左,文本在图像右侧;表示图像居左,文本在图像右侧;right right 表示图像居右,文本在图像左侧。表示图像居右,文本在图像左侧。用用HTML创创建建超超链链接接需需要要使使用用A标标记记符符(结结束束标标记记符符不不能能省省略略),它它的的最最基基本本属属性性是是href,用用于于指指定定超超链链接接的的目目标标。通通过过为为href指指定定不不同同的的值值,可可以以创创建建出出不不同同类类型型的的超超链链接接。另另外外,在在和和之之间间可可以以用用任任何何可可单单击击的的对对象象作作为为超超链链接接的的源源,例例如如文文字字或或图像。图像。2.5超链接处理超链接处理2.5.1 页面链接页面链接 如如果果要要设设置置锚锚记记超超链链接接,首首先先应应为为页页面面中中需需要要跳跳转转到到的的位位置置命命名名。命命名名时时应应使使用用A标标记记符符的的name属属性性,在在标标记记符符与与之之间间可可以以包包含含内内容容,也也可可以以不不包包含内容。含内容。对对于于锚锚记记链链接接,应应将将href的的值值指指定定为为符符号号#后后跟跟锚锚记记名名称称。如如果果将将href的的值值指指定定为为一一个个单单独独的的#号号,则表示空链接,不做任何跳转。则表示空链接,不做任何跳转。2.5.2 锚记链接锚记链接如如果果将将href属属性性的的取取值值指指定定为为“mailto:电电子子邮邮件件地地址址”,那那么么就就可可以以获获得得电电子子邮邮件件链链接接的的效效果果。例例如如,使用以下使用以下HTML代码可以设置电子邮件超链接:代码可以设置电子邮件超链接:作者邮箱作者邮箱 当当浏浏览览网网页页的的用用户户单单击击了了指指向向电电子子邮邮件件的的超超链链接接后后,系系统统将将自自动动启启动动邮邮件件客客户户程程序序,并并将将指指定定的的邮邮件件地地址址填填写写到到“收收件件人人”栏栏中中,用用户户可可以以编编辑辑并并发发送该邮件。送该邮件。2.5.3电子邮件链接电子邮件链接在在HTMLHTML中一个普通的表格应包括以下标记符:中一个普通的表格应包括以下标记符:1TABLE TABLETABLE标标记记符符用用于于定定义义整整个个表表格格,表表格格内内的的所所有内容都应该位于有内容都应该位于和和之间。之间。2CAPTION 如如果果表表格格需需要要标标题题,那那么么就就应应该该使使用用CAPTIONCAPTION标标记记符符将将表表格格标标题题包包括括在在和和之间。之间。CAPTIONCAPTION标记符的格式为:标记符的格式为:标题标题 2.6网页表格处理网页表格处理2.6.1 表格的基本构成表格的基本构成 3TR TRTR标标记记符符用用于于定定义义表表格格的的行行,对对于于每每一一个个表表格格行行,都都对对应应一一个个TRTR标标记记符符。TRTR标标记记符符的的结结束束标标记记符符可可以以省省略。略。4TD和和TH 在在表表格格行行中中的的每每个个单单元元格格,都都对对应应于于一一个个TDTD标标记记符符或或者者THTH标标记记符符,用用于于标标记记表表格格的的内内容容,其其中中可可以以包包括括文文字字、图图像像或或其其他他对对象象。TDTD与与THTH的的功功能能和和用用法法几几乎乎完完全全相相同同,唯唯一一不不同同之之处处在在于于TDTD表表示示普普通通表表格格数数据据,而而THTH表表示示表表格格的的行行列列标标题题数数据据。TDTD和和THTH的的结结束束标标记记符符都可以省略,并且可以不包括任何内容。都可以省略,并且可以不包括任何内容。1合并单元格合并单元格 2.6.2 表格的编辑及属性设置表格的编辑及属性设置在在和和标标记记内内使使用用rowspan属属性性可可以以进进行行行行合合并并,rowspan的的取取值值表表示示垂垂直直方方向向上上合合并并的的行行数。数。在在和和标标记记内内使使用用colspan属属性性可可以以进进行行列列合合并并,colspan的的取取值值表表示示水水平平方方向向上上的的合合并并的的列数。列数。在在TABLETABLE标标记记内内使使用用frameframe、rulesrules和和borderborder属属性性可以设置表格的边框和单元格分隔线。可以设置表格的边框和单元格分隔线。表表格格边边框框表表示示表表格格最最外外层层的的四四条条框框线线,可可以以用用frameframe属属性性进进行行控控制制;rulesrules属属性性用用于于控控制制是是否否显显示示单单元元格格之之间间的的分分隔隔线线;borderborder属属性性用用于于设设置置边边框框的的宽宽度度,其其值值为为像像素素数数。如如果果设设置置border=0border=0,则则意意味着味着frame=voidframe=void,rules=none rules=none。2边框与分隔线边框与分隔线 在在TABLETABLE标标记记符符中中使使用用cellspacingcellspacing属属性性可可以以控控制制单单元元格格之之间间的的空空白白,使使用用cellpaddingcellpadding属属性性可可以以控控制制表表格格分分隔隔线线和和数数据据之之间间的的距距离离,这这两两个个属属性性之之间的取值通常采用像素数。间的取值通常采用像素数。3控制单元格空白控制单元格空白 (1 1)表格的页面对齐)表格的页面对齐 表表格格在在页页面面中中的的对对齐齐与与其其他他页页面面内内容容一一样样,可可以以直直接接在在TABLETABLE标标记记符符中中使使用用alignalign属属性性。另另外外,也也可可以以用用DIVDIV标标记记符符的的alignalign属属性性设设置置表表格格的的对对齐齐,方方法法是是:将将TABLETABLE标标记记符符包包含含在在DIV align=“”和和之间。之间。(2 2)表格的内容对齐)表格的内容对齐表表格格单单元元格格内内容容的的对对齐齐包包括括各各数数据据项项在在水水平平方方向向和垂直方向上的对齐。和垂直方向上的对齐。4表格的对齐表格的对齐 5控制表格和单元格的大小控制表格和单元格的大小 由由于于表表格格能能将将网网页页划划分分为为任任意意大大小小的的矩矩形形区区域域,所所以以表表格格在在网网页页中中更更多多地地是是用用作作排排版版工工具具。如如果果要要分分割割页页面面区区域域,经经常常要要做做的的就就是是设设置置表表格格和和单单元元格格大小。大小。可可以以使使用用标标记记符符的的widthwidth和和heightheight属属性性设设置置表表格格和和单单元元格格大大小小,这这两两个个属属性性的的取取值值可可以以是是像像素素数数,也可以是百分比,但一般都使用绝对的像素数。也可以是百分比,但一般都使用绝对的像素数。6设置表格和单元格的背景设置表格和单元格的背景 与与设设置置整整个个页页面面的的背背景景类类似似,表表格格或或单单元元格格也也可可以设置背景颜色或图案;设置方法为:以设置背景颜色或图案;设置方法为:在在TABLETABLE、TRTR或或TDTD标标记记符符内内使使用用bgcolorbgcolor属属性性设设置背景颜色;使用置背景颜色;使用backgroundbackground属性设置背景图案。属性设置背景图案。利利用用HTML也也可可以以创创建建表表单单,创创建建表表单单时时要要用用到到表单标记符和表单输入标记符。表单标记符和表单输入标记符。2.7利用利用HTML处理表单处理表单2.7.1 表单标记符表单标记符HTML中中表表单单标标记记符符为为FORM,其其主主要要作作用用是是设设定定表表单单的的起起止止位位置置,并并指指定定处处理理表表单单数数据据程程序序的的URL地址。其基本语法结构如下:地址。其基本语法结构如下:FORMaction=URLmethod=GET/POST其其中中Action用用于于设设定定处处理理表表单单数数据据程程序序URL的的地地址。址。method指指定定数数据据传传送送到到服服务务器器的的方方式式。有有两两种种主主要要的的方方式式,当当method=GET时时,将将输输入入数数据据加加在在action指指 定定 的的 地地 址址 后后 面面 传传 送送 到到 服服 务务 器器;当当method=POST时时则则将将输输入入数数据据按按照照HTTP输输送送协协议中的议中的POST传输方式传送到服务器。传输方式传送到服务器。INPUT是是表表单单输输入入标标记记符符,在在表表单单创创建建中中使使用用频频繁繁,大部分表单内容需要用到此标记符。其语法如下:大部分表单内容需要用到此标记符。其语法如下:各项的意义是:各项的意义是:type:text表示输入单行文本。表示输入单行文本。type:textarea表示输入多行文本。表示输入多行文本。type:password表示输入数据为密码,用表示输入数据为密码,用“*”表示。表示。2.7.2 表单输入标记符表单输入标记符type:checkbox表示复选框。表示复选框。type:radio表示单选框。表示单选框。type:submit表示提交按钮,数据将被送到服务器。表示提交按钮,数据将被送到服务器。type:reset表示清除表单数据,以利于重新输入。表示清除表单数据,以利于重新输入。type:file表示插入一个文件。表示插入一个文件。type:hidden表示隐藏按钮。表示隐藏按钮。type:image表示插入一个图像。表示插入一个图像。type:button表示普通按钮。表示普通按钮。创建单行文本框的基本语法如下:创建单行文本框的基本语法如下:其其中中name属属性性指指定定了了控控件件的的名名称称;value属属性性指指定定了了控控件件的的初初始始值值;sizesize属属性性指指定定了了文文本本框框的的宽宽度度;maxlengthmaxlength属属性性指指定定了了在在文文本本框框中中可可以以输输入入的的最最长长文文本数。本数。2.7.3 控件定义方法控件定义方法 1文本框和口令框文本框和口令框 创创建建复复选选框框和和单单选选框框也也是是使使用用INPUT标标记记符符,语法分别如下:语法分别如下:type属属性性为为checkbox,说说明明该该控控件件是是一一个个复复选选框框,type属属性性为为radio,说说明明该该控控件件是是一一个个单单选选框框;name属属性性和和value属属性性的的值值都都是是程程序序处处理理表表单单数数据据时需要的;时需要的;checked属性是可选的,属性是可选的,2复选框与单选按钮复选框与单选按钮 创创建建提提交交按按钮钮、重重置置按按钮钮和和自自定定义义按按钮钮的的语语法法分分别别如下:如下:3按钮按钮利利用用HTML创创建建多多行行文文本本框框应应使使用用TEXTAREA标记符,其使用格式如下:标记符,其使用格式如下:默默认认多多行行文文本本 其其中中name属属性性用用于于指指定定控控件件名名;rows属属性性用用于于设设置置多多行行文文本本框框的的行行数数(用用户户的的输输入入可可以以多多于于这这个个行行数数,超超过过可可视视区区域域的的内内容容可可以以用用滚滚动动条条进进行行控控制制操操作作);cols属性用于设置多行文本框的列数属性用于设置多行文本框的列数。4多行文本框(文本区)多行文本框(文本区)要要创创建建选选项项菜菜单单应应使使用用SELECT标标记记符符,并并将将每每个个可可独独立立选选取取的的项项用用一一个个OPTION标标记记符符标标出出来来。创创建选项菜单的语法如下:建选项菜单的语法如下:选选项项1内内容容选选项项2内内容容 5选项菜单选项菜单 其其中中,SELECT标标记记符符的的name属属性性用用于于指指定定控控件件名名;size属属性性用用于于指指定定选选项项菜菜单单中中一一次次显显示示多多少少行行(默默认认值值为为1);multiple属属性性用用于于设设置置允允许许用用户户选选择择多多个个选选项项(如如果果不不设设置置此此属属性性,则则仅仅允允许许选选择择一一个个选选项项)。OPTION标标记记符符的的label属属性性可可以以为为选选项项指指定定一一个个标标记记符符,当当使使用用此此属属性性时时,浏浏览览器器将将采采用用此此属属性性的的值值而而非非OPTION标标记记符符中中的的内内容容作作为为选选项项标标记记符符;selected属属性性用用于于设设置置当当前前选选项项为为预预先先选选中中状状态态;value属性指定了控件的初始值。属性指定了控件的初始值。(1 1)只只要要单单击击某某一一个个框框架架区区域域内内的的超超链链接接,其其指指向向的的网网页页就就会会在在另另一一个个框框架架区区域域中中显显示示,而而不不必必将将整整个浏览器窗口中的内容更换一遍。个浏览器窗口中的内容更换一遍。(2 2)固定网页中的某些内容。)固定网页中的某些内容。(3 3)并并不不是是所所有有的的浏浏览览器器都都能能显显示示框框架架网网页页,这这也是框架网页的一个局限。也是框架网页的一个局限。框架网页的特点框架网页的特点 2.8 2.8 框架网页处理框架网页处理2.8.1 创建框架创建框架 利利用用HTML创创建建框框架架网网页页时时首首先先要要指指定定框框架架结结构构。即即必必须须有有一一个个网网页页用用于于指指定定整整个个浏浏览览器器窗窗口口如如何何划划分分,也也就就是是所所谓谓的的框框架架集集网网页页。在在框框架架集集网网页页中中不不包包含含任任何何可可显显示示的的内内容容,而而只只是是包包含含如如何何组组织织各各个个框框架架的的信信息息和和框框架架中中的的初始页面信息。初始页面信息。1指定框架的结构指定框架的结构 在在框框架架集集网网页页中中,除除了了基基本本的的HTML、HEAD等等标标记记符符以以外外,主主要要包包括括框框架架集集标标记记符符FRAMESET(必必须须有有结结束束标标记记符符)和和框框架架标标记记符符FRAME(没有结束标记符没有结束标记符)。使使用用FRAMESET标标记记符符的的rows属属性性或或cols属属性性分分别别可可以以构构造造出出横横向向分分隔隔框框架架和和纵纵向向分分隔隔框框架架;根根据据rows属属性性或或cols属属性性的的取取值值,可可以以确确定定框框架架结结构构中中包包含含多多少少框框架架,相相应应也也就就必必须须设设置置对对应应个个数数的的FRAME标标记记符。符。rows属属性性和和cols属属性性的的取取值值包包括括三三种种类类型型,一一是是直直接接指指定定像像素素数数;二二是是指指定定百百分分数数(即即相相对对于于浏浏览览器器窗窗口口大大小小的的百百分分数数);三三是是使使用用n*(其其中中n是是1的的整整数数)指指定定相相对对大大小小。指指定定属属性性值值时时,数数值值之之间间用用逗逗号号分分开开并并且且不不能能有有空空格格,根根据据值值的的个个数数和和设设置置可可以以确确定定框架数目和位置。框架数目和位置。当当属属性性值值为为n时时,表表示示框框架架的的大大小小为为由由前前两两种种方方法法(即即像像素素数数或或百百分分数数)指指定定框框架架大大小小后后浏浏览览器器窗窗口口的的剩剩余余部部分分。如如果果

    注意事项

    本文(网页设计与制作 第2章学习和使用HTML.ppt)为本站会员(s****8)主动上传,淘文阁 - 分享文档赚钱的网站仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知淘文阁 - 分享文档赚钱的网站(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于淘文阁 - 版权申诉 - 用户使用规则 - 积分规则 - 联系我们

    本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

    工信部备案号:黑ICP备15003705号 © 2020-2023 www.taowenge.com 淘文阁 

    收起
    展开