Java网络 1.9 超级链接
【摘要】
超级链接
基本写法a 标签的另外两个属性页面内的锚点a 是一个本文级的标签
基本写法
一个网站, 是由很多 html 网页组成的. html 网页之间能够通过超级链接互相跳转, 从而形成了...
基本写法
一个网站, 是由很多 html 网页组成的. html 网页之间能够通过超级链接互相跳转, 从而形成了 “网”.
语法:
<a href="1.html">结婚照</a>
a 是英语 anchor “锚” 的意思, 就好像这个页面往另一个页面扔出一个锚. 是一个文本级的标签.
href 是英语 hypertext reference 超文本地址的缩写.
a 标签的另外两个属性
title: 悬停文本
<a href="09_img.html" title="很好看哦">结婚照</a>
target 是否在新窗口打开. target 实际上是 “目标” 的意思.
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
blank 就是 “空白” 的意思, 就表示新建一个空白窗口. 为什么有一个_, 就是规定. 也就是说如果不写 target="_blank" 那么就是在相同的标签页打开. 如果写了, 就是在新的空白标签页中打开.
完整的超链接:
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
分清楚 img 和 a 标签的各自的属性:
<img src="1.jpg" />
<a href="1.html"></a>
页面内的锚点
页面当中可以有锚点, 所谓的锚点, 就是一个小标记, 这个小标记是用户不可察觉的, 用户不知道这里有一个标记.
锚点用 name 属性来设置, 一个 a 标签如果有 id 属性, 那么就是页面的一个锚点.
<h1 id="first">第一部分</h1>
那么网址:
Test5.xhtml#second
就能够让这个锚点在页面最顶端显示, 此时页面有卷动. 这样子, 用户的体验会好一点, 用户可以直接看到页面的内容.
完整代码:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
<a href="Test5.xhtml#second">第二部分</a>
<a href="Test5.xhtml#third">第三部分</a>
<h1 id="first">第一部分</h1>
<p>测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
</p>
<h1 id="second">第二部分</h1>
<p>测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
</p>
<h1 id="third">第三部分</h1>
<p>测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法测试锚点用法
</p>
<a href="Test5.xhtml#first">返回顶部</a>
</body>
</html>
a 是一个本文级的标签
如果我们要让一个段落中的所有文字都能够被点击, 那么应该:
p 包裹 a:
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
而不是 a 包裹 p:
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
a 的语义要小于 p. a 可以当做文本来处理, 所以 p 里面相当于放的就是纯文字.
文章来源: iamarookie.blog.csdn.net，作者：我是小白呀，版权归原作者所有，如需转载，请联系作者。
原文链接：iamarookie.blog.csdn.net/article/details/112212703
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）