2 .创建链接最佳实践

2022-04-14  本文已影响0人  skoll

简介

1 .链接非常重要-他们使互联网成为一个整体,是一扇扇打开的门
2 .超链接可以让我们的文档链接到任何其他文档或者资源,也可以链接到文档的指定部分
3 .几乎任何网络内容都可以转换为链接

最简单的<a>标签

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>
的超链接。
</p>

1 .title属性:包含关于链接的补充小心,比如页面包含什么样的信息或者需要注意的事情。鼠标悬浮上去也会出现

1 .链接的标题仅当鼠标悬停在其上时才会显示,这意味着使用键盘来导航网页的人很难获取到标题信息。
2 .如果标题信息对于页面非常重要,你应该使用所有用户能都方便获取的方式来呈现,例如放在常规文本中

块级链接

1 .可以将一些内容转换为链接,甚至是块级元素,比如一张图片,只需要把图像元素放到a标签中间

<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

文档片段

1 .给文档分配一个id属性,然后url的末尾使用一个#号就可以直接匹配到

使用相对链接而不是绝对链接

1 .检查代码比较容易。
2 .相对url更加有效,使用绝对URL的时候,浏览器首先通过DNS去查找服务器的真实位置然后转到该服务器并查找所请求的文件
3 .相对url,浏览器只在同一服务器上查找被请求的文件。效率会高

链接到非HTML资源,要留下清晰的指示

1 .当链接到一个需要下载的资源,比如PDF,word文档,流媒体视频或者潜在的意想不到的效果(比如打开一个新的窗口),可以添加展示小图标,或者提供明确的措辞。用来减少用户的混乱
2 .下载的时候,使用download属性,可以提供一个默认的保存文件名
3 .

链接的最佳实践

1 .使用屏幕阅读器的用户喜欢从页面上的一个链接跳到另一个链接,并且脱离上下文来阅读链接
2 .搜索引擎使用链接文本来索引目标文件,所以链接文本中包含关键词是一个关键的方法,可以方便的描述和链接相关的消息
3 .读者浏览器页面不是阅读每一个字,他们的眼睛会被页面的特征所吸引,比如链接,会自动找到描述性的链接
4 .好的 :<p><a href="https://firefox.com/">下载Firefox</a></p>


image.png

5 .不好的:<p><a href="https://firefox.com/">点击这里</a>下载Firefox</p>


image.png

链接的其他作用-发送邮件

1 .<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
2 .这样一键发送邮件简直方便的雅痞
3 .除了电子邮件地址,还可以提供一些简单的信息

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
上一篇 下一篇

猜你喜欢

热点阅读