HTML5 + CSS3 链接标签学习笔记(三)

简介: HTML5 + CSS3 链接标签学习笔记(三)

超链接标签的应用


链接标签


链接标签


  • 文本超链接
  • 图像超链接
  • 链接的基本格式


1e03ea80958047769cde0af0789d8ea3.png


<a href="链接路径" target="目标窗口位置">链接文本或图像</a>


  • 使用 a 标签作超链接 但 href 才是超链接的灵魂


超链接标签


  • 页面间链接:从一个页面跳转到另一个页面
  • 锚链接
  • 功能性链接
<!--a标签
href:必填,表示要跳转到那个页面
target:表示窗口再哪里打开
    _blank:再新标签中打开
    _self:在自己的网页中打开

页面间链接


从一个页面跳转到另一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a href="https://www.baidu.com" target="_self">更多内容访问百度</a>
<a href="1.我的第一个网页.html" target="_self">更多内容访问百度</a>
</body>
</html>

563f43cee977429d8b3895c225545cd3.png

当输入超链接的网址有下划线标识时,说明网页输入完整可以放访问

349ee3092e4e4440ae46fbafb91ef472.png

在超链接中嵌套img标签可以实现图片超链接跳转

<a href="1.我的第一个网页.html" target="_self">访问我的第一个网页
    <img src="../resources/images/1.jpg" alt="打开图片失败" width="300">
</a>

锚链接

<!--锚标签 类似与 goto 语句-->
<a name="top">顶部</a>
<hr>
<a href="1.我的第一个网页.html">
    <img src="../resources/images/1.jpg" alt="图片失效" width="300" title="打开有惊喜">
</a>
<br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<img src="../resources/images/1.jpg" alt="测试" width="300"><br>
<hr>
<a href="#top">回到顶部</a>

实现QQ推广


900b3c19dd394e149c0356f90966ce10.png

相关文章
|
10天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
8天前
|
前端开发 安全 UED
HTML 链接怎么写才能好看又拥有最好的性能
要编写既美观又性能优良的 HTML 链接,请遵循以下最佳实践:使用语义化 `&lt;a&gt;` 标签并优化链接文本,使其描述性和简洁;使用 `rel=&quot;noopener noreferrer&quot;` 和 `target=&quot;_blank&quot;` 属性提高安全性和性能;通过 CSS 美化链接样式;合理控制链接数量,避免分散用户注意力;使用图标增强视觉效果;确保链接对所有用户都可访问;利用 CDN 提升加载速度;最后,测试页面性能以保证整体加载速度。
|
7天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
11天前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
12天前
|
JavaScript 前端开发 UED
HTML 链接的高阶写法
在 HTML 中,通过使用不同的属性和技术可以增强链接的功能性和可访问性。
|
6天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
12 0
|
20天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
20天前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`&lt;action&gt;`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
11 0
|
Web App开发 前端开发
CSS学习——关于链接的属性
  这两天,在看CSS,看的是圣思园的视频。里面对样式的优先级是这样说的: 一般来说所有样式有下面的规则(以下优先级由低至高) 1.Browser default 浏览器默认 2.External style sheet 外部样式表 3.Internal style sheet (inside the tag) 内嵌样式表 4.Inline style ( inside an HTML element) 行内样式   在学到后面时,对链接定义它的样式。
604 0
|
29天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果