HTML基础教程：[5]链接标签

来源：互联网 2023-03-16 19:19:17 版权归原作者所有，如有侵权，请联系我们

链接是网络的主要特色，因为链接允许你从一个网页跳转到另一个网页——实现了人们在网上浏览和冲浪的想法。

工具/原料

笔记本/

方法/步骤1

1.指向其他网站的链接：

标签：a href="URL">文字说明/a>

我们一起简单的认识一下这个标签，href是标签a>的一个属性，他的值就是你想跳转的那个页面的地址，比如你现在想从这个页面跳转到百度的首页，则这个值就是http://www.baidu.com，而中间的说明文字是为了让你的用户知道你要跳转的页面。

好了，下面我们做个小例子吧！

请在网页源码的body>文件里录入下面代码：

百度经验之HTML基础教程/

ul>

li>a href="http://www.baidu.com">百度首页/a>/li>

li>a href="http://jingyan.baidu.com">百度经验/a>/li>

/ul>

HTML基础教程：[5]链接标签

我们一起看看效果吧！

HTML基础教程：[5]链接标签

3该信息非法爬取自百度经验

这里我们做一下说明，在网页中，如果是链接，那么他的文字就会默认的显示为蓝色，而你点击过的链接会变为紫色，我们看看上面的图，显然可以看出，百度首页已经被点击过，而百度经验没有被点击。

2.在新窗口中打开链接：

我们在a>里面在加一个属性target，这个属性就是来告诉浏览器，我们的这个链接是要在新的窗口打开，他的属性值是“_blank”特别要注意的是不能忘记开始的下划线哦。

好了，我们做个小例子吧！

请在网页源码的body>文件里录入下面代码：

百度经验之HTML基础教程/

ul>

li>a href="http://www.baidu.com" target="_blank">百度首页/a>/li>

li>a href="http://jingyan.baidu.com" target="_blank">百度经验/a>/li>

/ul>

HTML基础教程：[5]链接标签

在预览网页时，我们发现，他的显示效果没有发生变化，但你点击链接的话就会看到，他没有在当前的页打开，而是在新的页面打开了。

好了，赶紧试试吧！

3.链接到当前页面的某个特定位置：

我们常常看看在浏览非常长的网页时，在网页的最底下就会出现，回到顶部，那这个是怎么实现的呢，我们一起来看看吧。

我们先说说id的命名规则吧！

（1）必须以字母或者下划线开头。

（2）不能用HTML标签作为id的名称。

（3）不能使用除了下划线以外的其他飞字母和数字的字符。

我们了解了这些之后，快来跟我一起做个简单的例子吧！

请在网页源码的body>文件里录入下面代码：

百度经验之HTML基础经验/

h2 id="top">网页的顶部/h2>

hr/>br/>hr/>br/>hr/>br/>hr/>br/>hr/>br/>hr/>br/>hr/>br/>

h2 id="zhong">网页的中间/h2>

hr/>br/>hr/>br/>hr/>br/>hr/>br/>hr/>br/>hr/>br/>hr/>br/>

h2 >网页的尾部/h2>

hr/>br/>hr/>br/>hr/>br/>

ul>

li>a href="#top">回到顶部/a>/li>

li>a href="#zhong">中部/a>/li>

/ul>

HTML基础教程：[5]链接标签

上面的蓝色区域是为了让网页显示的长。红色区域是链接的相关内容。

好了，预览一下，滑到最低部，点击回到顶部和回到中部试试看吧！

特别注意：在使用id时，要在id名前加#

HTML基础教程：[5]链接标签

列表标签

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：HTML基础教程：[3]文本标签2 下一篇：用空间HTML日志功能调试，网页预览图

HTML基础教程：[5]链接标签

工具/原料

方法/步骤1

热门文章

标签列表