HTML5链接的使用示例-创新互联

这篇文章主要介绍HTML5链接的使用示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司提供高防主机、云服务器、香港服务器、绵阳主机托管等

这次给大家带来H5链接的使用，H5链接使用的注意事项有哪些，下面就是实战案例，一起来看一下。

HTML链接算是一个HTML文档活力的表现，只因HTML链接才能让整个HTML文档更加灵活，可以任意跳转，查找自己喜欢的内容。

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML超链接：

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

HTML链接语法：

<a href="url">链接文本</a>

href 属性描述了链接的目标。

实例：

<a href="/"></a>

实现代码显示：访问壹聚教程

上面链接能把用户带到壹聚教程的首页。

这里我们要注意的是"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

<a href="http://www.php.com/" target="_blank">访问</a>

定义链接为链接首页，target属性为blank，意义为链接将在新窗口打开首页。

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例：

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="http://www.php.cn/html/html-links.html#tips">
访问有用的提示部分</a>

需要注意的地方：

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.111cn.com/html/”

图片链接实例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>)</title> 
</head>
<body>
<p>创建图片链接:
<a href="/wy/148886.htm">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="/wy/148886.htm">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>

跳出框架实例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title> </title> 
</head>
<body>
<p>跳出框架?</p> 
<a href="http://www.php.com/" target="_top">点击这里!</a> 
</body>
</html>

当前指定页面链接到指定位置：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<a href="#C4">查看章节 4</a>
</p>
<h3>章节 1</h3>
<p>这边显示该章节的内容……</p>
<h3>章节 2</h3>
<p>这边显示该章节的内容……</p>
<h3>章节 3</h3>
<p>这边显示该章节的内容……</p>
<h3><a id="C4">章节 4</a></h3>
<p>这边显示该章节的内容……</p>
<h3>章节 5</h3>
<p>这边显示该章节的内容……</p>
<h3>章节 6</h3>
<p>这边显示该章节的内容……</p>

以上是“HTML5链接的使用示例”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：HTML5链接的使用示例-创新互联
当前URL：https://www.cdcxhl.com/article8/dpesip.html

成都网站建设公司_创新互联，为您提供服务器托管、微信公众号、网站设计公司、品牌网站设计、微信小程序、移动网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容