Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3-图像和超链接课件.pptx

1、任务3 图像和超链接第二单元 HTML5语言基础锚点标签图像标签绝对路径和相对路径超链接标签掌握学习目标网页中常用的图片格式了解:学习目标实战演练制作网页技术介绍页面任务目标强化训练制作“文章故事网”页面任务目标1.图像标签n 语法格式：n 图像标签的属性：属性描述属性描述src规定显示图像的URL。alt图像不能显示时的替换文本。align规定如何根据周围的文本来排列图像。（不推荐使用）border定义图像周围的边框。（不推荐使用）height定义图像的高度。width设置图像的宽度。hspace定义图像左侧和右侧的空白。（不推荐使用）vspace定义图像顶部和底部的空白。（不推荐使用）ti

2、tle光标停留在图像上时，显示提示文字。知识准备示例：在网页中插入图像 无标题文档 知识准备2.绝对路径和相对路径n 绝对路径：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存放在c盘的images文件夹下，那么该图像的绝对路径表示方法为c:imagestop.jpg。n 相对路径：相对于当前文件的路径。网页中的图片、超链接等一般都使用相对路径来表示。知识准备2.绝对路径和相对路径n 相对路径常见的表示方法Html文档的位置图像的位置相对路径情形说明c:democ:demo图文均在同一目录c:democ:demoimages图在网页下一层目录c:democ:图在网页上一层c:demo

3、c:images图文在同一层但不同目录n 提示：“./”指回到上一层目录，“images/”指进入下一层目录images，“./images/”指回到上一层目录，然后再进入目录images中。知识准备示例：绝对路径和相对路径 无标题文档 知识准备3.超链接标签n 语法格式：链接文本n href属性：描述链接的地址n target属性：描述链接页面的打开方式_self：默认值，表示在原网页窗口中打开链接_blank：在新窗口中打开链接知识准备示例：在网页中插入超链接 无标题文档 百度主页，原窗口打开 新浪主页，新窗口打开 提示：href属性的内容可以是站点内网页文件的相对路径，也可以是网页的网址

4、等。知识准备4.锚点标签n 锚点链接：可以帮助浏览者快速定位网页内的目标内容，实现网页内的链接跳转。n 创建方法：第一步：使用创建目标位置的锚点名称第二步：使用链接文本创建锚点链接这样，鼠标点击链接文本，网页窗口即可定位到目标位置。知识准备示例：在网页中插入锚点链接（因篇幅有限，仅列出部分代码和效果截图）节气谣谚诗歌 节气分类 节气的安排及含义 二十四番花信风 各地有关节气的谚语 节气谣谚诗歌回到菜单创建锚点链接创建目标位置的锚点名称创建目标位置的锚点名称创建锚点链接知识准备案例描述：设计并制作网页技术介绍页面，单击index.html页面中的图片时，跳转显示page1.html页面，网页效果如下。制作网页技术介绍页面index.htmlpage1.htmlpage2.html实战演练案例描述：设计并制作“文章故事网”页面，网页效果如下。制作“文章故事网”页面强化训练01图像标签02绝对路径和相对路径03超链接标签04锚点标签任务小结设计并制作旅游景点网页面，效果如图所示。课后实训谢谢观看