Web前端开发案例教程 第2版 课件2.5 超链接标签_第1页
Web前端开发案例教程 第2版 课件2.5 超链接标签_第2页
Web前端开发案例教程 第2版 课件2.5 超链接标签_第3页
Web前端开发案例教程 第2版 课件2.5 超链接标签_第4页
Web前端开发案例教程 第2版 课件2.5 超链接标签_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

单元二新闻页制作—HTML5常用标签软件技术专业SoftwareTechnologyWeb前端设计与开发

常见的网页中主要包含图片、文字、超链接。这些内容均是使用HTML5标签实现，本单元开始学习HTML的各类标签，掌握网页设计中的相关元素。主要包括：2.1文本标签2.2列表标签2.3分隔线标签2.4图片标签2.5超链接标签2.6多媒体标签-Web页面音视频播放2.7标签类型2.8meta标签课程导学知识点实战举例课程导学单元总结学习目标1.知识目标（1）掌握并熟练应用HTML文本标签；（2）掌握并熟练应用列表标签；（3）掌握并熟练应用图片标签；（4）掌握并熟练应用超链接标签；（5）掌握并熟练应用多媒体标签；（6）掌握并熟练应用头部标签。2.能力目标（1）能熟练使用HTML文本标签、列表标签、图片标签、超链接标签、多媒体标签和头部标签搭建基本静态网页；（2）能使用HTML语言设计一个网页并运行。3.素质目标（1）具有质量意识、安全意识、工匠精神和创新思维；（2）具有集体意识和团队合作精神；（3）具有界面设计审美和人文素养；（4）熟悉软件开发流程和规范，具有良好的编程习惯。课程导学知识点实战举例课程导学单元总结

超链接指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图片、一个邮件地址、一个文件，甚至是一个应用程序。超链接在本质上属于网页的一部分，是一种允许同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能构成一个真正的网站。单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型打开或运行。

网页上的超链接一般分为三种：第一种是绝对URL的超链接，简单的讲就是网络上一个站点或网页的完整路径；第二种是相对URL的超链接，例如将网页上的某一段文字或标题链接到同一网站的其他网页上；第三种是同一网页的超链接，这种超链接又叫书签链接。课程导学知识点实战举例2.5超链接标签单元总结2.5.1文本链接

使用一对<a>标签创建文本链接，其语法格式如下：<a

href="目标URL"

target="目标窗口">指针文本</a>其中，href属性用来指出文本链接的目标资源的URL地址；target属性用来指出在指定的目标窗口中打开链接文档。target属性的取值及其说明见下表：target说明_blank在新窗口中打开目标资源_self默认值，在当前的窗口或框架中打开目标资源_parent在父框架集中打开目标资源_top在整个窗口中打开目标资源框架名称在指定的框架中打开目标资源课程导学知识点实战举例2.5超链接标签单元总结2.5.1文本链接<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>文本链接</title></head><body>

常用的购物网站有：<ul> <li><ahref="/">淘宝</a></li><li><ahref=""target="_blank">京东</a></li><li><ahref=""target="_top">苏宁</a></li></ul></body></html>课程导学知识点实战举例2.5超链接标签单元总结2.5.2书签链接当一个网页内容较多且过长时，浏览网页寻找页面的一个特定目标时，就需要不断的拖动滚动条，且找起来非常不方便，这种情况需要用到书签链接，比如购物网站的“回到顶部”。书签链接可用于在当前页面的书签位置间跳转，也可跳转到不同页面的书签位置。创建书签链接需要两步：创建书签和创建书签链接。（1）创建书签：创建书签的链接与链接标签相同，都是使用<a>标签。其基本语法结构如下：<a

name="书签名">[文字或图片]</a>需要说明的是“[文字或图片]”中的“[]”表示一个可选项，其中的文字或图片是可有可无的，书签将在当前<a>标记位置建立一个name属性值指定的书签。注：书签名不能有空格。（2）创建书签链接：链接到同一页面的书签链接的定义语法如下：<a

href="#书签名">源端点</a>链接到不同页面的书签链接的定义语法如下：<a

href="file_URL#书签名">源端点</a>课程导学知识点实战举例2.5超链接标签单元总结2.5.2书签链接<!DOCTYPEhtml><html><head> <title>书签链接</title> <metacharset="UTF-8"></head><body> <h1id="top">此处是顶部</h1> <p>......</p> <p>......</p> <!--此处添加多个段落标签，实现页面滚动--> <ahref="#top">回到顶部</a></html>课程导学知识点实战举例2.5超链接标签单元总结2.5.3图像链接<a>标记不仅可以为文字设置超链接，还可以为图片设置超链接。为图片设置超链接有两种方式，一种方式是将整个图片设置为超链接，只要单击该图片就可以跳转到链接的URL上；另一种方式是为图片设置热点区域，将图片划分为多个区域，单击图片不同位置将会跳转到不同的链接上。（1）将整个图片设置为超链接。课程导学知识点实战举例2.5超链接标签单元总结<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图片使用</title></head><body><ahref="/s?id=1688271622637551425&wfr=spider&for=pc"><imgsrc="img/xue.jpeg"height="315"width="539"></a></body></html>2.5.3图像链接（2）设置图片的热点区域。在定义图片的热点区域时，除了要定义图片热点区域的名称之外，还要设置其热区范围。可以使用IMG元素中的usemap属性值和<map>标记创建，其语法格式如下：<img

src="图片文件路径"

usemap="#map名"/><map

name="map名"><area

shape="图片热区形状"

coords="热区坐标"

href="链接地址"></map>其中usemap属性值中的“map名”必须是<map>标签中的name属性，因为可以为不同的图片创建热点区域，每个图片都会对应一个<map>标签，不同的图片以usemap的属性来区别不同的<map>标签。需要注意的是，usemap属性值中的“map名”前面必须加上“#”号。<map>标签里至少要包含一个<area>元素，如果一个图片上有多个可单击区域，将会有多个<area>元素。在<area>元素里，必须指定coords属性，该属性值是一组用逗号隔开的数字，通过这些数字可以决定可单击区域的位置。但是coords属性值的具体含义取决于shape的属性值，shape属性值可用于指定单击区域的形状，默认的单击区域是整个图片区域。课程导学知识点实战举例2.5超链接标签单元总结2.5.3图像链接rect:指定可单击区域为矩形，coords的值为“x1,y1,x2,y2”，用以规定矩形左上角（x1,y1）和右下角（x2,y2）的坐标。circle:指定可单击区域为圆形，此时coords的值为“x,y,z”其中x和y代表圆心的坐标，z为圆的半径长度。poly：指多边形各边的坐标，coords的值为“x1,y1,x2,y2,…xn,yn­­­­­”，其中“x1,y1”为多边形第一个顶点的坐标，其他类似。HTML中的多边形必须是闭合的，所以不需要在coords的最后重复第一个顶点的坐标来将整个区域闭合。课程导学知识点实战举例2.5超链接标签单元总结2.5.3图像链接<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图片热点区域</title></head><body><imgsrc="img/dushuri.jpg"height="357"width="268"usemap="#myMap"/><mapname="myMap"><areashape="rect"coords="0,0,150,80"href="/"></map></body></html>说明：黑色方框区域为第一个area热点链接区课程导学知识点实战举例2.5超链接标签单元总结2.5.4E-mail链接点击E-mail链接后，浏览器会使用系统默认的E-mail程序，打开一封新的电子邮件，且该电子邮件地址为链接指向的地址。Href属性值由mailto:和E-mail地址两部分组成。课程导学知识点实战举例2.5超链接标签单元总结2.5.4E-mail链接<!DOCTYPEhtml><htmllang="en"><he

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论