2.4 超链接-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元2 HTML基础 2.4 超链接 PART 01 <a>标签 主要内容 CONTENTS PART 03 图片超链接 PART 02 锚点超链接 2 <a>标签 <a href="path" target="目标窗口位置">链接文本或图像</a> 链接目标的路径 链接在哪里打开 常用值：_self、_blank <a href="a.html" target="_blank">首页</a> <a href="c.html" target="top">返回</a> 示例 内部链接 链接目标为站内指定的文件或图片，通常使用相对路径 外部链接 使用完整的URL地址，在网址的前面必须添加http:// 锚点超链接 跳转到锚点的超链接跟普通的超链接格式是一样的， 普通的超链接，<a href="路径"></a> 是跳转到不同的页面。 而锚点超链接，<a href="#id名"></a> 可以在页面中不同的位置间跳转, 其实就是在同一页面元素间跳转，通过创建锚点链接，用户能够快速定位到目标内容。 使用锚点超链接的步骤： 1．先建立锚点目标 给目标元素增加id属性，例如：<div id="test" name="test"></div> 2．创建跳转到锚点的超链接 例如，跳转到id="test"的div元素的锚点超链接：<a href="#test"></a>  注意：锚点的超链接路径一定包含"#",而后面紧跟元素的id。 如果要跳转到不同的页面上的锚点，超链接的语法格式如下： <a href="目标页面的url# id属性值"></a>， 点击超链接，先跳转到目标页面，然后再寻找id=id属性值的元素，定位到锚点目标内容。 【案例2.4.1】同一个页面内的锚点超链接 【案例2.4.2】不同页面的锚点超链接 图片超链接 若要在html页面中实现图片超链接，可以通过将图像元素嵌套在a元素中，使其成为一个超链接，语法格式如下： <a href="链接地址" target="目标窗口打开方式"> <img src=”图像文件的地址> </a> 例如： <a href="b.html" target="_self"> <img src="images/flower.jpg"/> </a> 感谢观看 $