好文档就是一把金锄头!
欢迎来到金锄头文库![会员中心]
电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

chap02XHMTL语言基础课件.ppt

67页
  • 卖家[上传人]:枫**
  • 文档编号:575948782
  • 上传时间:2024-08-19
  • 文档格式:PPT
  • 文档大小:1.17MB
  • / 67 举报 版权申诉 马上下载
  • 文本预览
  • 下载提示
  • 常见问题
    • 第第第第2 2 2 2章章章章 XHMTLXHMTLXHMTLXHMTL语言基础语言基础语言基础语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础主要内容主要内容2.1￿从HTML到XHTML2.2￿网页文本及标记2.3￿使用页面列表2.4￿超链接东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.5￿插入多媒体和表格2.6￿表单和框架chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTMLHTMLHTML:应用广泛,使用简单,应用成熟着重于将文件数据显示在浏览器中XMLXML:着重于将文件数据以结构化的形式展示•RSS订阅的基础XHMTLXHMTL:以HTML为范本,依XHMTL的语法重新规范HTML语言,W3C希望最终能够以XHTML取代HTMLchap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.1 2.1.1 初识初识HTMLHTML标记标记•实例:•主要规则:−以“<标记名>”表示标记的开始,以“”表示标记的结束 。

      −成对标记又称之为容器,一对标记中还可以嵌套其他的标记 −单独标记不需要与之配对的结束标签标记,又称之为空标记,例如
      −属性设置的一般格式为:属性名=属性值,属性值部分可以用英文的双引号( " )或单引号( ' )引起来,也可以不使用任何引号 chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.2 HTML2.1.2 HTML文档的基本结构文档的基本结构chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.3 XHTML2.1.3 XHTML文档的新增规范文档的新增规范•(1) XHTML文档的基本结构增加了声明文档类型部增加了声明文档类型部分分 增加了命名空间的声明增加了命名空间的声明部分部分 在文档头部分强制要求在文档头部分强制要求声明所用的语言编码声明所用的语言编码 chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.3 XHTML2.1.3 XHTML文档的新增规范文档的新增规范•(2) 代码规范−①所有的标记都必须要有一个相应的结束标记。

      −②所有标记的名称和属性的名字都必须使用小写 −③所有的标记都必须合理嵌套−④所有的属性值必须用双引号括起来−⑤把所有的“<”、“>”和“&”特殊符号用编码表示−⑥给所有的属性赋一个值−⑦不要在注释中使用“--”chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.4 2.1.4 声明文档类型声明文档类型•DOCTYPE声明必须放在每一个XHTML文档的顶部,在所有代码和标记之前其格式为: DTD-url> •XHTML 1.0提供了三种DTD声明可供选择,这三种DTD的名称分别是 :−①过渡的(过渡的(TransitionalTransitional)) :"-//W3C//DTD XHTML 1.0 Transitional//EN"−②严格的(严格的(StrictStrict)) :"-//W3C//DTD XHTML 1.0 Strict//EN"−③框架的(框架的(FramesetFrameset)) :"-//W3C//DTD XHTML 1.0 Frameset//EN"指定DTD的根元素根元素名称。

      在HTML文件中所有的控制标记必须以HTML为根控制标记,所以在DTD声明中elment-name必须是htmlhtml￿指定DTD是属于标准公用的或是私人制定的,若设为PUBLIC,则表示该DTD是标准公用的,若设为SYSTEM,则表示是私人制定的￿指定DTD的文件名称其中的DTD叫做文档类型定义,里面包含了文档的规则￿chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.5 XHTML2.1.5 XHTML文档根标记与声明命名空间文档根标记与声明命名空间 • •((1 1))XHTMLXHTML文档根标记文档根标记• •((2 2)声明命名空间)声明命名空间− −xmlsxmls是是XHTML namespaceXHTML namespace的缩写,叫做的缩写,叫做“ “命名空间命名空间” ”声明− −XMLXML允许设计者定义自己的标记,避免同一标记多人定义的混淆允许设计者定义自己的标记,避免同一标记多人定义的混淆发生,发生,XMLXML采用声明命名空间,以通过不同的网址指向来识别。

      采用声明命名空间,以通过不同的网址指向来识别 − −因为因为XHTML1.0XHTML1.0不能自定义标记,所以它的命名空间都相同不能自定义标记,所以它的命名空间都相同,就是 文档的内容文档的内容chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.1.6 XHTML2.1.6 XHTML的文档头和文档主体的文档头和文档主体 • •((1 1)文档头和文档标题标记)文档头和文档标题标记• •((2 2)文档主体标记)文档主体标记 网页的标题网页的标题 网页的内容网页的内容所有要显示在页面中所有要显示在页面中所有要显示在页面中所有要显示在页面中的内容必须放置在主的内容必须放置在主的内容必须放置在主的内容必须放置在主体标记内!!体标记内!!体标记内!!体标记内!!chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML• •((3 3)文档主体标记()文档主体标记(bodybody)的属性)的属性属属属属 性性性性用用用用 途途途途示示示示 例例例例设置背景颜色设置背景颜色设置背景颜色设置背景颜色蓝色背景蓝色背景蓝色背景蓝色背景"URL">设置背景图片设置背景图片设置背景图片设置背景图片背背背背景图片为景图片为景图片为景图片为imagesimages文件夹下的文件夹下的文件夹下的文件夹下的bg.jpgbg.jpg设置文本颜色设置文本颜色设置文本颜色设置文本颜色红色文本红色文本红色文本红色文本设置超链接颜色设置超链接颜色设置超链接颜色设置超链接颜色超链接为绿色超链接为绿色超链接为绿色超链接为绿色设置已使用的超链接的颜设置已使用的超链接的颜设置已使用的超链接的颜设置已使用的超链接的颜色色色色已使用的超链接为已使用的超链接为已使用的超链接为已使用的超链接为红色红色红色红色设置正在被单击的超链接设置正在被单击的超链接设置正在被单击的超链接设置正在被单击的超链接的颜色的颜色的颜色的颜色被单击的超链接被单击的超链接被单击的超链接被单击的超链接为黄色为黄色为黄色为黄色">设置页面左边的空白设置页面左边的空白设置页面左边的空白设置页面左边的空白页面左边的空页面左边的空页面左边的空页面左边的空白为白为白为白为5050个像素个像素个像素个像素">设置页面上方的空白设置页面上方的空白设置页面上方的空白设置页面上方的空白页面上方的空页面上方的空页面上方的空页面上方的空白为白为白为白为3030个像素个像素个像素个像素chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.2 2.2 网页文本及标记网页文本及标记2.2.1 2.2.1 注释标记注释标记2.2.2 2.2.2 段落和换行标记段落和换行标记2.2.3 2.2.3 标题标记标题标记2.2.4 2.2.4 特殊字符特殊字符2.2.5 2.2.5 水平线标记水平线标记2.2.6 2.2.6 文本格式和字体标记文本格式和字体标记2.2.7 2.2.7 滚动字幕及设置滚动字幕及设置可以实现对网可以实现对网页文本内容的页文本内容的常规编辑。

      常规编辑chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML2.2.1 2.2.1 注释标记注释标记•浏览器会忽略注释标记中的文字而不作显示,注释标记的使用目的是为文中的不同部分加以说明,以方便以后的阅读和修改,注释标记的格式为-->•结束标记与开始标记可以不在一行上,长度不受限制chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML2.2.2 2.2.2 段落和换行标记段落和换行标记•段落:−段落标记放在一个段落的头尾,用于定义一个段落段落标记除了具有标识段落的作用外,还能使本段的前后多一个空行,以区别不同段落− 格式:文字文字•换行标记:−由于浏览器会忽略XHTML文档中由键所产生的换行符,若要强制换行可在该位置使用
      标记。

      −强制换行标记的格式为:文字文字

      −使用
      分隔的内容之间是换行不换段, chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML2.2.2 2.2.2 段落和换行标记段落和换行标记•段落的属性:−标记有一个属性align, 用来设置段落文字在网页上的对齐方式−left(左对齐)、center(居中)、或right(右对齐)默认为leftchap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML2.2.3 2.2.3 标题标记标题标记 标题文字标题文字•一般文章都有标题、副标题、章和节等结构,而网页中的信息可以分为主要点和次要点,可以通过设置不同大小的标题为文章增加条理。

      •标题文字标记的基本格式为:标题文字标题文字•#用来指定标题文字的大小,#取1~6的整数值,取1时文字最大,取6时文字最小•通过align属性来设置标题在页面中的对齐方式:left(左对齐)、center(居中)、或right(右对齐)默认为leftchap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML• •2.2.4 2.2.4 特殊字符特殊字符•在XHTML文档中,有些符号有特殊含义,例如,“<”与“>”是用来识别标记的,若要在网页中显示“<”或“>”,就要将其作为特殊字符 特殊字符特殊字符特殊字符特殊字符字符代码字符代码字符代码字符代码说说说说 明明明明< <<<小于号小于号小于号小于号> >>>大于号大于号大于号大于号  空格空格空格空格&&&&&&" """双引号双引号双引号双引号© ©©©版权符版权符版权符版权符® ®®®注册符注册符注册符注册符chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML• •2.2.5 2.2.5 水平线标记水平线标记•在页面中插入一条水平标尺线(Horizontal Rules),可以把不同功能的文字分隔开。

      基本格式为



      •常见属性 :属属 性性用用 途途alignalign设置水平线的对齐方式,可选值为:设置水平线的对齐方式,可选值为:left、、center(默认)、(默认)、rightwidthwidth设置水平线的宽度,单位为像素或所在对象大小的百分比,设置水平线的宽度,单位为像素或所在对象大小的百分比,默认值为默认值为100%sizesize设置水平线的粗细,以像素为单位,默认为设置水平线的粗细,以像素为单位,默认为2 colorcolor设置水平线的颜色,由设置水平线的颜色,由IE引进,引进,W3C未规定该属性未规定该属性noshadenoshade删除水平线的阴影删除水平线的阴影chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML• •2.2.6 2.2.6 文本格式及字体标记文本格式及字体标记•(1)特定文字样式标标 记记用用 法法将文本显示为粗体将文本显示为粗体将文本显示为斜体将文本显示为斜体为文本添加下划线,尽量避免使用,易与链接混淆为文本添加下划线,尽量避免使用,易与链接混淆为文本添加删除线(不推荐)为文本添加删除线(不推荐)将文本显示为比正常字体大将文本显示为比正常字体大将文本显示为比正常字体小将文本显示为比正常字体小用于将文字缩小后显示于上方用于将文字缩小后显示于上方用于将文字缩小后显示于下方用于将文字缩小后显示于下方使文本强调或突出于周围文本,通常加粗显示使文本强调或突出于周围文本,通常加粗显示使文本以强调方式显示,通常以斜体显示使文本以强调方式显示,通常以斜体显示chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室1.1 1.1 从从HTMLHTML到到XHTMLXHTML• •2.2.6 2.2.6 文本格式及字体标记文本格式及字体标记•(2)字体标记•虽然字体标记被W3C列为不建议使用的标记,但在非标准网页仍大量使用。

      字体标记的格式为">被设置的文字被设置的文字−size用来设置文字的大小取值范围从1~7,取1时最小,7最大−face用来设置字体当字体为汉字时,属性face中的“字体名”可以是Word中的“字体”工具栏中显示的字体名−color用来设置文字颜色颜色可以用相应英文单词或以“#”引导的一个十六进制代码来表示chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础部分颜色说明black | 黑色 | Red | 红色   Line | 石灰色 | Maroon | 栗色 Gray | 灰色 | Silver | 银白色 Navy | 海军蓝 | Olive | 橄榄绿 Purple | 紫色 | Yellow | 黄色 Aqua | 浅绿色 | Blue | 蓝色 Green | 绿色 | Fuchsia | 紫红色 White | 白色 | Teal | 暗蓝绿chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.1 2.1 从从HTMLHTML到到XHTMLXHTML• •2.2.7 2.2.7 滚动字幕滚动字幕•滚动字幕的基本格式为滚动文字或(和)图片滚动文字或(和)图片•标记中可以设置的属性包括:direction(方向)、behavior(方式)、loop(次数)等 。

      属属 性性 名名用用 途途取值范围及说明取值范围及说明directiondirection设置字幕的滚动方向设置字幕的滚动方向left/right/up/downbehaviorbehavior设置字幕的滚动方式设置字幕的滚动方式scroll 字幕单向滚动;字幕单向滚动;slide 字幕到达边界停止;字幕到达边界停止;alternate 字幕到达边界后反向滚动字幕到达边界后反向滚动looploop设置字幕的循环次数设置字幕的循环次数正整数正整数-1或或infinite时为无限循环时为无限循环scrollamountscrollamount设置字幕一次滚动的距离设置字幕一次滚动的距离取值为正整数(单位:像素),取值越大,速度越取值为正整数(单位:像素),取值越大,速度越快快scrolldelayscrolldelay设置字幕滚动两次之间的设置字幕滚动两次之间的延迟时间延迟时间IE默认为默认为60(单位:毫秒),(单位:毫秒), 取值越大,移动越慢取值越大,移动越慢(小于(小于60,,IE仍默认为仍默认为60))chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础•其余属性hspace设置字幕左边的空白空间设置字幕左边的空白空间取值为像素数取值为像素数vspace设置字幕上方的空白空间设置字幕上方的空白空间取值为像素数取值为像素数align按设定的值对齐滚动的文本按设定的值对齐滚动的文本left/center/right/top/bottombgcolor设置字幕的背景色设置字幕的背景色取值为颜色名或取值为颜色名或16进制颜色值进制颜色值width设置字幕的宽设置字幕的宽取值为像素数或相对于窗口宽的百取值为像素数或相对于窗口宽的百分比分比height设置字幕的高设置字幕的高取值为像素数取值为像素数chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.2 网页文本及标记练习题•搜索关于中秋节的文字素材,并根据本节所学的各种标记来编辑一张中秋节网页,使得页面条理清晰,重点突出,易于阅读。

      chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.3 2.3 使用页面列表使用页面列表• •2.3.1 2.3.1 无序列表无序列表• •2.3.2 2.3.2 有序列表有序列表• •2.3.3 2.3.3 定义列表定义列表• •2.3.4 2.3.4 列表嵌套列表嵌套chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.3 2.3 使用页面列表使用页面列表• •2.3.1 2.3.1 无序列表无序列表•当网页内容出现并列选项时,可采用无序列表(Unordered List,也称项目列表)无序列表的每一个表项的前面是项目符号(如●、■■等符号)无序列表始于

        标记每个列表项始于
      • 标记•无序列表的使用格式为:
          • 第一个列表项第一个列表项第一个列表项第一个列表项
          • 第二个列表项第二个列表项第二个列表项第二个列表项
          • ... ...
        chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.3.1 2.3.1 无序列表无序列表•在默认情况下,无序列表的项目符号是圆点,可以通过设置
        • 标记的type属性来更换项目符号的形式。

          −“disc”(实心圆点●)−“circle”(空心圆点○)−“squre”(方块■■)•将type属性添加到

            标记内,所有的项目列表都采用相同的项目符号•将type属性添加到li标记内,它只能改变当前列表项的项目符号,通过这种方法可为列表内的项目设置不同的项目符号
              >
            • >第一个列表项第一个列表项第一个列表项第一个列表项
            • 第二个列表项第二个列表项第二个列表项第二个列表项
            • ... ...
          chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.3 2.3 使用页面列表使用页面列表• •2.3.2 2.3.2 有序列表有序列表•当网页中的某些内容存在排序关系时,可采用有序列表(Ordered List,也称编号列表)有序列表的每一个表项的前面带顺序号。

          •有序列表的使用格式为:

            1. 第一个列表项第一个列表项第一个列表项第一个列表项
            2. 第二个列表项第二个列表项第二个列表项第二个列表项
            3. ... ...
          chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.3 2.3 使用页面列表使用页面列表• •2.3.3 2.3.3 定义列表(自学)定义列表(自学)chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.3.4 2.3.4 列表嵌套列表嵌套•当网页中需要复合层次的列表效果时,就可以通过对已有的列表标记进行适当的嵌套使用来实现
            1. 第一个列表项第一个列表项第一个列表项第一个列表项
                • 第一个列表项第一个列表项第一个列表项第一个列表项
                • 第二个列表项第二个列表项第二个列表项第二个列表项
                • ... ...
            2. 第二个列表项第二个列表项第二个列表项第二个列表项
            3. ... ...
          chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.3 练习•在1.2节关于中秋节的网页基础上,在网页的适当内容处添加有序和无序列表或者2者的嵌套。

          chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.1 2.4.1 超链接基本格式超链接基本格式• •2.4.2 URL2.4.2 URL链接链接• •2.4.3 2.4.3 本地链接本地链接• •2.4.4 2.4.4 书签链接书签链接• •2.4.5 2.4.5 下载文件链接下载文件链接• •2.4.6 2.4.6 邮件链接邮件链接chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.1 2.4.1 超链接基本格式超链接基本格式•基本的超链接包括两个部分:链接源和链接目标XHTML 使用(锚)标记来创建超链接,其最基本的格式为:">链接源链接源•target属性:标记还具有target属性,用来设置单击超链接后在浏览器中打开链接目标的方式。

          −如在同一个窗口中打开目标页面(默认)−在新窗口中打开目标页面(_blank)等•根据链接目标,超链接可以分为URL链接、本地链接和一些特殊功能的链接chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.2 URL2.4.2 URL链接链接•指的是本地站点以外文档的链接 •创建URL链接时,需要给出URL链接完整的网址例如:•关于URL地址的概念 chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础URL地址统一资源定位器统一资源定位器,又叫做,又叫做URL(Uniform Resource Locator),是专,是专为标识为标识Internet网上资源位置而设置的一种编址方式,网上资源位置而设置的一种编址方式,是互联网是互联网的文件命名系统的文件命名系统。

          只要给出文件的只要给出文件的URL地址,就能在地址,就能在Internet信息海洋中准确无误信息海洋中准确无误地定位该文件,就象是一个地定位该文件,就象是一个全球定位器全球定位器URL的一般语法格式为的一般语法格式为: 协议名称协议名称协议名称协议名称://://机器地址:端口号机器地址:端口号机器地址:端口号机器地址:端口号/ /路径名路径名路径名路径名/ /文件名文件名文件名文件名chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础协议名称协议名称协议名称协议名称://://机器地址:端口号机器地址:端口号机器地址:端口号机器地址:端口号/ /路径名路径名路径名路径名/ /文件名文件名文件名文件名协议名称是属于协议名称是属于TCP/IP的具体协议,可用的具体协议,可用http、、ftp、、telnet、、file等等 http://表示用表示用HTTP(HyperText Transfer Protocol)协议连通协议连通WWW服务器服务器 表示用表示用 Transfer Protocol)协议来连通协议来连通FTP服务器,此时,服务器,此时,hostdnorip项项前还可以加上用户名前还可以加上用户名(userid)和密码和密码(passwd),即,即URL的具体格式形如的具体格式形如 [userid:passwd@]hostDNorIP[:port/path/file]•载入本机文件,其载入本机文件,其URL为:为:driver:/path/file (绝对地址)(绝对地址)例如:例如:http:///chn/index.htmchap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.3 2.4.3 本地链接本地链接•在一台机器上对不同文件进行链接叫本地链接。

          •为了便于网站的发布及维护,要养成将所有本地的链接目标都放置在站点指定目录下的习惯,学会文件管理例如:• chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础 •采用相对路径(或相对地址)的方式实现各种本地链接−链接和当前页面同级的文件地址只要用“文件名”即可;−链接当前页面下级子目录下的文件用“目录名/文件名”;−链接当前页面上一级目录下的文件用“../文件名”;链接同级但在另外一个子目录中的文件用“../目录名/文件名”;chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础实例实例若当前位置在:若当前位置在:则则绝对路径:绝对路径:绝对路径:绝对路径:f:/ykz/web/music/music_index.htm相对路径:相对路径:相对路径:相对路径:music/music_index.htm若当前位置在:若当前位置在:若当前位置在:若当前位置在:则则则则和和和和的相对路径是怎样的?的相对路径是怎样的?的相对路径是怎样的?的相对路径是怎样的?采用相对地址,即使采用相对地址,即使采用相对地址,即使采用相对地址,即使webweb这个文件夹移到这个文件夹移到这个文件夹移到这个文件夹移到其他路径,文件之间其他路径,文件之间其他路径,文件之间其他路径,文件之间的位置不会改变,则的位置不会改变,则的位置不会改变,则的位置不会改变,则相对地址也不会改变。

          相对地址也不会改变相对地址也不会改变相对地址也不会改变chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.4 2.4 建立超链接建立超链接2.4.3￿￿2.4.3￿￿本地链接本地链接在网站中提倡用相对地址,为什么?￿例如,若有一个index.htm,其间引用了images目录的一些图片•如果使用相对地址,搬家的时候只需把原来这些文件全部上传到新的空间即可,因为文件彼此之间的相对位置关系没有改变,所以这些地址仍然是有效的•但如果插入图片的时候使用了绝对地址,那空间地址一变,引用处的图片路径也要随之改变当然,有时也会用到绝对地址,例如友情链接别人的主页等等￿chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.4 2.4.4 书签链接书签链接•(1)书签:在内容较多的网页内建立内部链接时,它的链接目标不是其他文档,而是网页内的其他位置,也叫做书签。

          −定义书签的格式为">书签内容书签内容−或">书签内容书签内容为了能够兼容更多的浏览器,一般建议在书签的定义中同时使用name和id属性,并且设为相同的属性值,即同一个书签名称￿养成低碳生活习惯养成低碳生活习惯养成低碳生活习惯养成低碳生活习惯在默认情况下,它将跳转到页面的顶部￿chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.4 2.4.4 书签链接书签链接•(2)链向书签的超链接:−同一个网页中书签链接的格式为">链接源链接源−如果链接指向其他文件的某一部分,格式为">链接源链接源 绝对路径绝对路径绝对路径绝对路径 :相对路径:相对路径:相对路径:相对路径:../index.html#part1../index.html#part1这里的目标文件的地址,可以是相对的,也可以是绝对的。

          这里的目标文件的地址,可以是相对的,也可以是绝对的例如:例如:chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.4 2.4.4 书签链接书签链接•(3)空链接——特殊的书签链接:−格式为">链接源链接源−在默认情况下,它将跳转到页面的顶部 −在页面设计初期,当链接目标不确定时可以使用空链接;或者链接的目标本身就是当前网页,也用空链接chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.4 2.4 建立超链接建立超链接• •2.4.5 2.4.5 下载文件链接下载文件链接•如果链接到的文件不是XHTML文件,而是作为下载的文件,其格式为">链接源链接源• •2.4.6 2.4.6 邮件链接邮件链接•指向电子邮件链接的格式为">链接源链接源• 也可以增加设置邮件主题的subject属性,其格式为">超链接显示文本超链接显示文本chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.4 建立超链接链习•(1)建立新页面,新页面为中秋网页内容的目录•(2)在上面建立的新页面各个条目上建立超链接,使之转向中秋网页对应位置的内容。

          •(3)在网页下方建立电子邮件链接,单击链接后用户可以给自己发送邮件chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.5 2.5 插入多媒体插入多媒体• •2.5.1 2.5.1 插入图像插入图像• •2.5.2 2.5.2 音频、视频及动画音频、视频及动画• •2.5.3 2.5.3 背景音乐背景音乐chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.5 2.5 插入多媒体插入多媒体• •2.5.1 2.5.1 插入图像插入图像•在网页中使用的图像格式一般为GIF、JPEG和PNGXHTML使用标记在网页中插入图像,其基本格式为:" />•图像也可以做成超链接的链接源,方法与文本超链接类似,只要将特定图像的标记放置在超链接标记之间,并在标记中指明链接目标就可以了,其格式为 " />chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.5 2.5 插入多媒体插入多媒体• •2.5.1 2.5.1 插入图像插入图像•属性:属属 性性用用 途途src设置图片来源设置图片来源width设置以像素为单位的图片宽度设置以像素为单位的图片宽度height设置以像素为单位的图片高度设置以像素为单位的图片高度hspace设置以像素为单位的图片左右两侧空白空间的大小设置以像素为单位的图片左右两侧空白空间的大小vspace设置以像素为单位的图片上下两边空白空间的大小设置以像素为单位的图片上下两边空白空间的大小align设定图像与文本混合排版时图片的水平(环绕方式)或垂直(对齐方式)设定图像与文本混合排版时图片的水平(环绕方式)或垂直(对齐方式)方向的位置。

          可选值有:方向的位置可选值有: left(默认)、(默认)、right 、、top、、middle、、bottomalt用于描述图片的文字,若使用的浏览器不能显示该图片时,这些文字将会用于描述图片的文字,若使用的浏览器不能显示该图片时,这些文字将会代替图片被显示若浏览器显示了该图片,当鼠标移至图上该文字也会代替图片被显示若浏览器显示了该图片,当鼠标移至图上该文字也会显示显示border设置以像素为单位的图片边框尺寸(设置以像素为单位的图片边框尺寸(0将不显示边框)将不显示边框)chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.5 2.5 插入多媒体插入多媒体• •2.5.2 2.5.2 插入音频、视频及动画插入音频、视频及动画•使用标记嵌入音视频文件的基本格式为" />属属 性性用用 途途src设置多媒体文件来源设置多媒体文件来源width设置控制面板的宽度,单位为像素或百分比设置控制面板的宽度,单位为像素或百分比height设置控制面板的高度,单位为像素或百分比设置控制面板的高度,单位为像素或百分比autostart设置是否要自动播放多媒体文件,设置是否要自动播放多媒体文件,true自动播放,自动播放,false需要单击需要单击“播放播放”按钮才播放。

          默认为自动播放按钮才播放默认为自动播放loop设置播放重复次数,设置播放重复次数,n表示重复表示重复n次(如次(如3次),次),true表示无限次播放,表示无限次播放,false表示播放一次即停止默认播放一次表示播放一次即停止默认播放一次hidden设置是否隐藏控制面板,设置是否隐藏控制面板,true为隐藏,为隐藏,no为否为否type指定多媒体的播放类型,如指定多媒体的播放类型,如type="application/x-shockwave-flash"表示播放表示播放的类型为的类型为flash文件文件chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.5 2.5 插入多媒体插入多媒体• •2.5.3 2.5.3 背景音乐背景音乐•对于IE浏览器,有一个专用的背景音乐标记,其基本格式为还有一个属性为loop,用来设置播放的次数,取值为数字,而不再有true或false的取值。

          如需要无限制的重复播放,只需将loop设置为-1即可•用设置的背景音乐有两个特点:−(1)只适用于在IE浏览器中播放背景音乐;−(2)当页面窗口最小化时,就会暂停播放背景音乐,直到重新还原或最大化窗口时才继续播放 chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.5 练习•为自己的中秋网页选择合适的图片并插入•选择合适的背景音乐并插入(注意,选择midi格式的音乐)chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室2.6 2.6 使用表格使用表格• •2.6.1 2.6.1 表格的基本标记和基本结构表格的基本标记和基本结构• •2.6.2 2.6.2 表格的基本属性表格的基本属性• •2.6.3 2.6.3 利用表格来布局利用表格来布局chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.6 表格2.6.1 2.6.1 表格的基本标记和基本结构表格的基本标记和基本结构•(1) 表格表格标记−

          、、(定(定义行)、行)、
          (定(定义表表头单元格)、元格)、(定(定义普普通通单元格)元格)•(2) 表格的基本表格的基本结构构
          第第1行第行第1列表列表头内容内容 第第1行第行第2列表表列表表头内容内容
          第第1行第行第1列列单元格内容元格内容 第第1行第行第2列列单元格内容元格内容
          chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.6.2 2.6.2 表格的基本属性表格的基本属性•(1)表格的宽和高−width:指定整个表格/表格某一行/某个单元格的宽度,单位可以是百分比(%)也可以是像素(px)。

          −Height:指定整个表格/表格某一行/某个单元格的高度,单位可以是百分比(%)也可以是像素(px) •(2)边框及其颜色−border:设定边框粗细−Bordercolor:设定边框颜色2.6 表格chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础•(3)(3)背景颜色和背景图像−bgcolor−background•(4)对齐方式−align:left/center/right−valign:top/middle/bottom/baseline (仅行和单元格)•(5)间距(单元格间的距离)和边距•(6)单元格跨越的行数和列数−colspan−rowspan2.6 表格chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.6.3 2.6.3 利用表格来布局利用表格来布局•可以利用表格很好地来划分内容区域,使各种文字、图片按照要求整齐地摆放在一起,形成一个整体 2.6 表格chap02 XHMTL语言基础 东方学院信息分院电子商务教研室东方学院信息分院电子商务教研室第第2章章 XHMTL语言基础语言基础2.7 表单 用于用于实现与服与服务器端的交互。

          器端的交互如上网注册如上网注册时用于填写个人用于填写个人资料,而后按料,而后按[递交交]按按钮,,这样,,服服务器即可器即可处理理递交的信息,交的信息,这个个页面即面即为表表单主要包括:主要包括:

          、、、、