html教程-第二章-3.pptx

第一章网页设计与网站建设的基础知识第二章HTML超文本标记语言第三章网页设计工具Dreamweaver第四章CSS层叠样式表第五章JavaScript脚本编程,HTML超文本标记语言,第二章,主要内容,HTML文档机构,头部及主体标记,文字、段落、列表及图片标记,超链接、多媒体及表格标记,框架及表单标记,超链接标记,浏览者通过单击文本或图片对象，可以从一个页面跳到另一个页面，或从页面的一个位置跳到另一个位置，实现这样的功能的对象称之为超链接创建超链接的条件：必须同时存在两个端点。一个是源端点；另一个是目标端点源端点：指网页中的提供链接单击的对象，如链接文本或链接图像目标端点：指链接跳过去的页面或位置，如某网页、书签等,超链接标记,创建超链接使用的标记为超链接标记常用属性：,超链接类型,根据超链接的目标端点来分，超链接可分为：内部链接外部链接书签链接脚本链接文件下载链接根据超链接的源端点来分，超链接可分为：文本链接图像链接图像映射,内部链接,内部链接是指在同一个网站内部，不同网页之间的链接关系基本语法链接文字/图片语法解释通过“href”属性指定目标端点；“file_name”为要链接文件的路径，一般使用相对路径；提供给鼠标单击的内容，即源端点，既可以使用“文字”，也可以使用“图片”,内部链接,创建超链接我的第一个超链接,内部链接,welcom.html恭喜您！超链接创建成功！,外部链接,外部链接是指跳转到当前网站外部，和其他网站中的页面或其他元素之间的链接关系。基本语法链接文字/图片语法解释通过“href”属性指定目标端点；“URL”为要链接文件的路径，一般情况下，该路径需要使用绝对路径；提供给鼠标单击的内容，即源端点，既可以使用“文字”，也可以使用“图片”,外部链接,创建内部和外部链接内部超链接链接到外部网站意见或建议(邮件链接）,邮件链接,意见或建议(邮件链接）邮件1：收件人邮箱地址subject：设置邮件主题cc:设置抄送邮箱地址注意：？，&两个符号后面都不能包含空格,书签链接,书签链接：指目标端点为网页中的某个设置了称为书签标记的位置的链接创建书签链接步骤：创建书签为书签制作链接,书签链接,建立书签基本语法文字/图片语法解释文字/图片中的“”表示文字或图片可有可无，书签将在光标处建立一个名为“name”属性值所规定的书签,书签链接,基本语法链接到同一页面中的书签：链接文字链接到其他页面中的书签:链接文字语法解释“书签名”是已定义的书签名，“file_name”是要跳转到的页面路径。示例,*脚本链接,在链接语句中，可以通过脚本来实现HTML语言完成不了的功能。基本语法链接内容语法解释在javascript:后面编写的就是具体的脚本,文件下载链接,要创建文件下载，只要在链接地址处输入文件路径即可，当用户单击链接后，浏览器会自动判断文件类型，以做出不同情况的处理，如直接打开，或弹出下载对话框供下载可用于下载的文件类型有.doc、.Rar、.cab、.zip、.exe等,文件下载链接,基本语法链接文字文件下载示例,word文档文件下载可执行文件下载压缩文件下载,图像链接,图像链接是指源端点为图像文件的超链接基本语法语法解释“filename_link”为要跳转到的文件路径，“filename_img”为图像文件路径，默认情况下，图像链接会显示蓝色边框线，如果不想显示边框，应设置border=0,主体区域,连接文字颜色基本语法语法解释link：设定默认的没有单击过的链接文字颜色；alink：设定鼠标按下链接文字时的链接文字颜色；vlink：设定单击过后的链接文字颜色。color_value指定链接文字的颜色值。,主体区域,设置页面链接文字的颜色设定不同的链接颜色默认的链接颜色正在按下的链接颜色访问过后的链接颜色,多媒体标记,为增强网页的功能以及动感，现在的网页一般都会加入诸如声音、动画、视频等多媒体内容。常用多媒体标记：,滚动文字设置,基本语法滚动文字marquee常用属性:,滚动文字设置,示例：默认情况下，滚动文字从右向左滚动文字从下往上循环滚动文字从右往左循环往反交替滚动文字在一个宽为245，高为200的背景颜色为天蓝色的区域从下往上滚动.,嵌入多媒体内容,在网页中可以使用标记嵌入MP3、电影等多媒体内容基本语法embed标记常用属性：,多媒体标记综合示例,设置背景音乐,访问者访问页面时自动播放背景音乐基本语法bgsound标记常用属性：,上机练习,建立一个网页，按如下要求进行设置1）包括外部链接、书签链接、文件下载链接2）包括图片链接，设置图片大小为300*300像素3）嵌入从左往右滚动的字幕4）设置背景音乐,表格标记,使用表格标记，可在网页中创建表格。表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容构成表格的主要标记,表格标记,基本语法()()()(),表格基本结构第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,标记,标记常用属性,表格基本结构第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,表格的边框,表格的宽度和高度,第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,表格的对齐方式,第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,表格的背景颜色、图片,第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,表格的边距,第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,表格的间距,第1行中的第1个单元数据第1行中的第2个单元数据第2行中的第1个单元数据第2行中的第2个单元数据,表格标记示例,标记,标记常用属性：,tr标记属性示例,、标记,、标记常用属性：,td、th标记属性示例,跨行操作,文具订单表文具价格数量合计钢笔￥2.50/支3￥12.5铅笔￥0.50/支10,跨列设置,文具订单表文具价格数量钢笔￥2.50/支3铅笔￥0.50/支10合计￥12.5,caption标记,caption标记用于设置表格题注概括表格的内容提供关于表格内容的一些信息基本语法常用属性,嵌套表格,在网页排版中，通常需要通过表格的嵌套来完成表格的嵌套是指在一个表格的单元格中插入另一个表格,嵌套表格,在网页排版中使用嵌套表格的原因：一是利于简化表格制作：网页的排版有时会很复杂，在外部需要有一个表格控制总体布局，如果这时一些内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难二是提高浏览器响应速度：浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，表格下载耗时相对长，浏览者要等很长时间才能看到网页的内容,表格嵌套设置示例,小结,创建超链接必须具备的条件是同时存在源端点和目标端点在创始超链接时经常涉及的路径有两种：绝对路径、文件相对路径通常外部链接需要使用绝对路径，内部链接一般使用文件相对路径超链接必设的一个属性是href通过target属性，可使用目标端点在不同的窗口打开,小结,根据源端点，超链接可分为文本超链接、图像超链接和图像映射；根据目标端点，超链接则可分为内部链接、外部链接、书签链接和文件下载链接创建书签链接的步骤有两步：一是创建书签；二是为书签制作链接表格的内容必须放置在或之间在排版网页时通常需要嵌套表格，所谓表格的嵌套，是指在一个表格的单元格中插入另一个表格,上机练习,步骤,1插入一个3x2的表格A，宽度设为600px；将第一行、第二行各列分别合并；然后在第一列插入一个SWF文件，设置适当的高度和宽度，在第二行插入图片。2在第三行第一列插入7x4的表格B，宽度为380px，并设为左对齐；在第三行第二列插入8x2的表格C，宽度为200px，并设为右对齐。3对表格B进行以下操作：（1）将第一、三、五行各单元格合并，分别插入图片“动画”、“桌面”、“音乐”，并设置每个图片的宽度为70px；,（2）在第二、四行各单元格分别插入图片与文字、并将各图片与文字设置成超链接，链接地址为“#”，均为居中对齐，文字大小均为1号字；（3）将第六、七行的第一、二单元格合并；将第三、四单元格合并，分别在合并后各单元格内输入文字（森林猜想曲