超链接标记及属性码动未来教案篇

一个web页面项目通常由多个单页构成,单页之间的关联是通过超级链接标记a>来实现的,因此,a>标记在所有的页面标记中占有非常重要的地位;此外,base>标记可以为拥有链接地址的元素设置全局性的链接前缀和链接打开的目标。
a标技能目标
理解和掌握a>标记的功能,并能灵活地使用a>标记的相关属性,实现页面中的内部跳转和页面间的相互跳转。
语法格式
a href=“http://www.baidu.com” target="_blank" >
点击链接显示的文本文字
/a>
格式说明
a>标记用于定义可点击的超级链接,标记中的内容为点击链接时显示的文字,“href”属性定义点击链接时跳转的地址,“target”属性设置链接跳转时的方式,常用方式为“_blank”和“_self”,表示在一个新窗口页和本页中打开链接的地址。
案例演示
需求:使用a>标记创建二个超级链接,第一个点击时,在另外一个窗口打开“百度”首页,第二个点击时,在当前页指向某个元素;根据上述功能,新建一个名称为h6_1.html在页面中加入代码。
<!doctype html>
html>
head>
meta charset=“utf-8”>
title>无标题文档
/head>
a href=“http://www.baidu.com” target="_blank">百度/a>
a href="#sina">新浪
br />br />
a href=“http://www.sina.com.cn” name=“sina”>新浪/a>
br />br />
body>
/body>
/html>
/html>
页面文件h7_1.html在chrome浏览器执行后
案例实践
新建一个页面,先添加两个a>标记,命名为“a1”和“a2”,再添加两个和p>标签,命名为“p1”和“p2”,当点击“a1”标签时,链接到“p1”内容,当点击“a2”标签时,链接到“p2”内容。
扩展知识
需要说明的是:a>标记在HTML5框架中新增了很多属性,但在实际的开发过程中,并不是经常使用,使用最多的是“href”和“target”属性。
在这里插入图片描述
base标记 技能目标
熟悉并理解base>标记的基本使用方法,能够合理使用base>标记构建页面的基础链接地址,并能正确使用标记中的属性。
语法格式
base href=“链接目标地址” target=“链接打开的方式” />
格式说明
base>标记的功能是定义页面中所有链接的默认地址,只要带链接地址的标记都会将base>标记的“href”属性值作为链接地址的前缀内容。
案例演示
需求:使用base>标记定义一个链接的地址,并添加“target”属性指定链接是在另外一个窗口中打开,再添加一个a>和img>标记,查看它们链接地址和打开方式的变化,根据上述功能,新建一个名称为h7_2.html在页面中加入如代码。
<!doctype html>
html>
head>
base href=“http://www.baidu.com” target="_blank" />
meta charset=“utf-8”>
title>无标题文档
/head>
body>
br />
img src=“images/ex1.png”
alt=“没找到图片时显示的文字” />br />br />
a href=“h7_1.html”>点我就走
/body>
/html>
页面文件h6_2.html在chrome浏览器执行后,
案例实践
新建一个页面,并添加一个base>标记,通过该标记定义页面链接标记的地址前缀内容和地址打开方式,并添加一个图片和超级链接标记,查看并点击链接效果。
扩展知识
需要说明的是:在HTML中,base>是一个单标记,中间没有包含的内容,它只能放置在header>标记中,“href”和“target”属性的功能与a>标记相同,但它针对的是页面中全部具有链接功能的标记,而a>标记的属性仅仅本身。
更多内容请添加微信:madongweikai,或扫描下方二维码添加
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/share_tiger/article/details/82899797