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

相关文章
|
1月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
95 49
|
29天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
41 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
117 6
|
1月前
|
JavaScript 前端开发
HTML 链接5
空链接是指在HTML中不指向任何实际资源的链接。常见设置方法包括:`href=&quot;#&quot;`(导航到页面顶部)、`href=&quot;javascript:void(0)&quot;`(阻止默认行为,不刷新页面)、`href=&quot;&quot;`(刷新当前页面)、`href=&quot;about:blank&quot;`(打开空白页面)和`role=&quot;button&quot;`(链接表现为按钮,无默认行为)。选择合适的方法取决于具体应用场景。注意:链接应始终包含正斜杠以避免不必要的HTTP请求。
HTML 链接4
`id`属性用于在HTML文档中创建书签。书签在页面中不可见,但可以通过链接直接跳转到指定位置。例如,在页面内或从其他页面链接到带有`id=&quot;tips&quot;`的元素:`&lt;a href=&quot;#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;` 或 `&lt;a href=&quot;https://www.runoob.com/html/html-links.html#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;`。
|
1月前
|
前端开发 安全 搜索推荐
HTML 链接3
HTML 链接属性包括 `href`(定义链接目标)、`target`(定义打开方式)、`rel`(定义关系)、`download`(提示下载)、`title`(显示工具提示)、`id`(链接锚点)、`hreflang`(目标语言)、`type`(资源类型)、`class`(类名)和 `style`(内联样式)。这些属性帮助实现丰富的链接功能。
|
1月前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
142 1