ᠰᠦᠯᠵᠢᠶ᠎ᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ 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标记常用属性：,多媒体标记综合示例,,,,,,Web上的视频,直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，多数视频是通过插件 ︵比如 Flash︶ 来显示的。然而，并非所有浏览器都拥有同样的插件。 需要谙熟大量技巧，以确保视频文件在所有浏览器中 ︵Internet Explorer, Chrome, Firefox, Safari, Opera︶ 和所有硬件上 ︵PC, Mac , iPad, iPhone︶ 都能够播放。,Web上的视频,标签 问题 HTML4 无法识别 标签。您的页面无法通过验证。 如果浏览器不支持 Flash，那么视频将无法播放 iPad 和 iPhone 不能显示 Flash 视频。 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。,Web上的视频, 标签 问题 如果浏览器不支持 Flash，将无法播放视频。 iPad 和 iPhone 不能显示 Flash 视频。 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。,Web上的视频, 标签是 HTML 5 中的新标签 视频格式,Web上的视频,标签 control 属性供添加播放、暂停和音量控件 video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式： Your browser does not support the video tag. ,Web上的视频,标签 问题 必须把视频转换为很多不同的格式。 元素在老式浏览器中无效。 元素无法通过 HTML 4 和 XHTML 验证。,Web上的视频,最好的 HTML 解决方法 HTML 5 + + ,,Web上的视频,HTML 5 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 元素。 问题 必须把视频转换为很多不同的格式 元素无法通过 HTML 4 和 XHTML 验证。 元素无法通过 HTML 4 和 XHTML 验证。,设置背景音乐,访问者访问页面时自动播放背景音乐 基本语法 bgsound标记常用属性：,Web上的音频, 标签是 HTML 5 中的新标签 Your browser does not support the audio tag. ,Web上的音频,,上机练习,建立一个网页，按如下要求进行设置 1︶ 包括外部链接、书签链接、文件下载链接 2︶ 包括图片链接，设置图片大小为300*300像素 3︶ 嵌入从左往右滚动的字幕 4︶ 设置背景音乐 5︶ 在适当的位置插入视频,,,表格标记,使用表格标记，可在网页中创建表格。表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容 构成表格的主要标记,表格标记,基本语法 ︵︶ ᠁ ︵︶ ᠁ ᠁ ︵︶ ᠁ ︵︶ ᠁ ᠁ ᠁ ᠁ , 表格基本结构 第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︶ 将第六、七行的第一、二单元格合并；将第三、四单元格合并，分别在合并后各单元格内输入文字 ︵森林猜想曲等 ᠁︶ ，文字均设为超链接，文字大小均为2px。 4对表格C进行以下操作： ︵1︶ 设置表格的对齐方式为底部对齐； ︵2︶ 将前6行各单元格合并，分别插入图片与文字； ︵3︶ 在第七、八行的单元格中分别插入图片和文字，“新闻”部分文字前面加列表的前导符，左对齐，“三维”部分文字居中对齐；,, ︵4︶ 该表格中所有文字均设为超链接，文字大小均为2px。 5调整表格之间的大小与搭配，完成示例。,