1.5添加超链接（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 能够表述超链接的两种常见用法。 能够识别和编写网页中的超链接。 能够应用不同的超链接方式完成D清单网页菜单栏等内容的超链接制作。 任务目标 任务5 添加超链接 本次任务要求分析D清单网页中超链接内容，在任务4的基础上添加D清单网页的超链接。完成后的部分效果图如图1-5所示。 任务描述 图1-5 添加超链接后的网页效果图 任务5 添加超链接 要完成D清单网页中超链接的制作，需要： 学习HTML超链接标签的用法、语法； 学习HTML超链接标签的href、name、target属性； 分析D清单页面中的超链接内容，正确运用超链接标签完成D清单网页中的超链接制作。 D清单网页效果图的超链接内容分析，如图1-5-1所示（红色框部分），包括菜单栏超链接、按钮超链接、下载文件超链接等内容。 任务分析 任务5 添加超链接 任务分析 图1-5-1 D清单网页效果中的超链接内容分析 任务5 添加超链接 知识与技能准备 超链接标签<a>的两种使用方式： 使用href属性创建指向另一个文档的链接来跳转到新的文档。 使用name属性创建文档内的书签来跳转到文档中的某个部分。 1、超链接的用法 网页中使用超级链接来跳转到新的文档或者当前文档中的某个部分。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 知识与技能准备 超链接标签<a>是给文本内容加修饰标签，添加后默认链接样式为蓝色文字，有下划线。其语法形式如下： 2、超链接的语法 <a href=”链接地址”>超链接文本内容</a> 知识与技能准备 href 属性的值可以是任何有效文档的相对或绝对URL。 （1）绝对URL 绝对URL是一般指向另一个站点。这种方式通常用于链接文档的位置与目前浏览的网页位于不同的服务器。 （2）相对URL 相对URL是指向站点内的某个文件。 （3）锚URL 锚URL是指向页面中的锚点。锚点能完成页面的跳转。 3、超链接的href属性 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-5-1 给文字添加超链接 1 2 3 4 <p><a href="test.html">本相对链接</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="https://hao.360.com/">本绝对链接</a> 是一个指向万维网上的页面的链接。</p> 显示效果如下： 课堂练习1-5-1 给文字添加超链接 图1-5-2给文字添加超链接 知识与技能准备 name属性规定锚的名称。有些HTML页面中会有书签，在网页中称为锚点，命名锚有两个方法，分别是： （1）name命名锚 （2）id命名锚 id属性相当于在文档中放置了一个标识，而href属性就可以直接链接到这个标识中。 注意：锚的名称是由用户自行命名的，但是要注意锚点名称不能使用数字开头，要使用英文开头。 4、超链接的name属性 <a name=”锚点名称”>锚点所在位置文字</a> <a id=”锚点名称”>锚点所在位置文字</a> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-5-2 为页面添加锚点 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <p><a id="top">唐诗三百首</a></p> <p><a>出塞</a></p> <p><a>春晓</a></p> <p><a>寻隐者不遇</a></p> <p><a name="sec1" >《出塞》</a></p> <h5>[唐]王昌龄</h5> <p>秦时明月汉时关，万里长征人未还。</p> <p>但使龙城飞将在，不教胡马度阴山。</p> <p><a name="sec2">《春晓》</a></p> <h5>[唐]孟浩然</h5> <p>春眠不觉晓，处处闻啼鸟。</p> <p>夜来风雨声，花落知多少。</p> <p><a name="sec3">《寻隐者不遇》</a></p> <h5>[唐]贾岛</h5> <p>松下问童子，言师采药去。</p> <p>只在此山中，云深不知处。</p> <p><a>回到顶部</a></p> 显示效果如下： 课堂练习1-5-2 为页面添加锚点 图1-5-3 为页面添加锚点 从图1-5-3中可以看到加入锚点后页面中是没有任何变化的，而且书签要实现跳转就要配合href属性一起使用，要在href属性中指定对应的锚点名称，并在名称前加一个“#”符号。 打开课堂练习1-5-2的代码，在<body>标签中输入如下代码： 课堂练习1