html链接

分享于 

5分钟阅读

Web开发

 

在html中创建链接

链接或超链接是从一个web资源到另一个web资源的连接,链接允许用户在世界任何地方的任何服务器上无缝地从一个页面移动到另一个页面。

html链接语法

在html中,使用 <a> 标签。

链接或超链接可以是单词,词组或图像。

href="URL"链接文字< /a>

<a> 标记和结束标记 </a> 标记成为用户在浏览器中看到和单击的链接的一部分,以下是链接的一些示例:

例子


<a href="https://www.google.com/">Google Search</a>
<a href="https://www.tutorialrepublic.com/">Tutorial Republic</a>
<a href="images/kites.jpg">
 <img src="kites-thumb.jpg" alt="kites">
</a>

href 属性指定链接的目标,其值可以是绝对URL或相对URL 。

绝对URL是包含URL格式的每个部分的URL,例如,协议,主机名和文档的路径,例如,https://www.google.com/https://www.example.com/form.php等,相对路径,例如,contact.htmlimages/smiley.png等. 相对路径不包含 http:// 或者 https:// 前缀。

设置链接的目标

target 属性告诉浏览器打开链接文档的位置,有四个已定义的目标,每个目标名称以下划线(_ )字符开头:

_blank -在新窗口或标签中打开链接的文档,_parent -在父窗口中打开链接的文档,_self -在与源文档相同的窗口或选项卡中打开链接的文档,这是默认值,因此不需要显式指定此值,_top -在整个浏览器窗口中打开链接的文档,

请尝试以下示例以便了解链接的目标基本工作原理:

例子


<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
 <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>

提示: 如果你的网页位于iframe内,则可以使用,target="_top" 断开iframe的链接并在全浏览器窗口中显示目标页。

创建书签定位点

你还可以创建书签定位点,以允许用户跳转到网页的特定部分,如果你有一个很长的网页,书签特别有用。

创建书签需要两个步骤: 首先添加 id 属性,然后使用它 id 属性值前面带 ( # )符号 对象 <a> 标记,如下面的示例所示:

例子


<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

提示: 你甚至可以通过指定页面的url以及锚点(i)跳转到其他网页的一部分,#elementId )中 href 属性,例如. <a href="mypage.html#topicA">Go to TopicA</a>

创建下载链接

你还可以创建与放置文本链接完全相同的文件下载链接,只需将目标url指向要下载的文件。

在以下例子中,我们创建了ZIP,PDF和JPG文件的下载链接。

例子


<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

备注: 单击指向pdf或图像文件的链接时,文件不会直接下载到硬盘驱动器,它将在web浏览器中打开文件。


link  links  
相关文章