Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务3 图像和超链接
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<a href="#item4">二十四番花信风</a><br>
<a href="#item5">各地有关节气的谚语</a><br>
示例：在网页中插入超链接
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" /> <title>无标题文档</title> </head> <body> <a href="http://www.baidu.com" target="_self">百度主页，原窗口打开</a> <br> <a href="http://www.sina.com" target="_blank">新浪主页，新窗口打开</a> <br> <a href="http://www.baidu.com" title="百度" target="_blank"><img src="images/baidu.png" width="270" height="129" ></a> </body> </html> 提示：href属性的内容可以是站点内网页文件的相对路径，也可以是网页的网址等。
光标停留在图像上时，显示提示文字。
width
设置图像的宽度。
定义图像顶部和底部的空白。（不推
vspace
荐使用）
知识准备
示例：在网页中插入图像
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" /> <title>无标题文档</title> </head> <body> <center> <img src="images/1.gif" alt="女孩" title="女孩" > <img src="images/2.gif" width="240" height="320" > <img src="images/3.gif" border="1" > <img src="images/4.gif" > </center> </body> </html>
知识准备
示例：绝对路径和相对路径
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" /> <title>无标题文档</title> </head> <body> <center> <img src="../images/1.gif" title="图片1" alt="图片1" > <img src="2.gif" title="图片2" alt="图片2" width="240" height="320" border="1" > <img src="../3.gif" title="图片3" alt="图片3" > <img src="images/4.gif" alt="图片4" title="图片4" > </center> </body> </html>
知识准备
3. 超链接标签
语法格式：<a href="url" target="目标窗口的弹出方式">链接文本</a> href属性：描述链接的地址 target属性：描述链接页面的打开方式
• _self：默认值，表示在原网页窗口中打开链接 • _blank：在新窗口中打开链接
知识准备
知识准备
2. 绝对路径和相对路径
绝对路径：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存 放在c 盘的 images 文件夹下， 那么该图 像的绝对 路径表示 方法为 c:\images\top.jpg。
相对路径：相对于当前文件的路径。网页中的图片、超链接等一般 都使用相对路径来表示。
<img src=" ../top.jpg"> <img src=" ../imBaidu Nhomakorabeages/top.jpg">
图文均在同一目录 图在网页下一层目录
图在网页上一层 图文在同一层但不同目录
提 示 ： “ ../ ” 指 回 到 上 一 层 目 录 ， “ images/ ” 指 进 入 下 一 层 目 录 images，“../images/”指回到上一层目录，然后再进入目录images中。
知识准备
示例：在网页中插入锚点链接
（因篇幅有限，仅列出部分代码和效果截图）
…………
<p>
创建目标位置的锚点名称
<a name="menu"></a> <a href="#item1">节气谣谚诗歌</a><br>
创建锚点链接
<a href="#item2">节气分类</a><br>
<a href="#item3">节气的安排及含义</a><br>
图像标签的属性：
属性
描述
属性
描述
src
规定显示图像的URL。
alt
图像不能显示时的替换文本。
align 规定如何根据周围的文本来排列图像。（不推荐使用） border 定义图像周围的边框。（不推荐使用）
height hspace
title
定义图像的高度。 定义图像左侧和右侧的空白。（不推荐使用）
知识准备
4. 锚点标签
锚点链接：可以帮助浏览者快速定位网页内的目标内容，实现网页内 的链接跳转。
创建方法： • 第一步：使用<a name="锚点名称"></a>创建目标位置的锚点名称 • 第二步：使用<a href="#锚点名称">链接文本</a>创建锚点链接 这样，鼠标点击链接文本，网页窗口即可定位到目标位置。
知识准备
2. 绝对路径和相对路径
相对路径常见的表示方法
Html文档的位置 图像的位置
相对路径
情形说明
c:\demo c:\demo c:\demo c:\demo
c:\demo c:\demo\images
c:\ c:\images
<img src="top.jpg"> <img src="images/top.jpg">
第二单元 HTML5语言基础
任务3 图像和超链接
学习目标
掌握
图像标签 绝对路径和相对路径
超链接标签 锚点标签
学习目标
了解:
网页中常用的图片格式
任务目标
实战演练——制作网页技术介绍页面
任务目标
强化训练——制作“文章故事网”页面
知识准备
1. 图像标签
语法格式：<img src="url" alt="some_text">