自学web前端之html(三)超链接、锚链接和功能性链接

前言
前面总结的是头部标签和常用标签,下面这篇帖子就总结一些超链接、锚链接和功能性链接。

超链接

通过点击可以从一个页面跳转到另一个页面,实现页面间的导航。当鼠标移动到超链接时,箭头会变成一只小手。
用法:使用<a>标签创建超链接
语法:

<a href="http://www.baidu.com">点击跳转到百度</a>

属性:
(1)href=“链接地址/路径”。
(2)target=”指定打开链接的位置”
取值:(看应用场景。)
1._self默认值 表示在当前页面打开;
2._blank在空白窗口(新的窗口)打开
3._parent 在父级框架中打开
4._top 在最顶层中打开
5.自定义打开

/*新窗口打开*/
<a href="http://www.baidu.com" target="_blank">
点击跳转到百度</a>

锚链接

通过点击可以从页面跳转到指定的位置(成为锚点)

页面内的锚链接

页面内的跳转

<a name="frist"></a>/*定义锚点名称frist*/
<a href="#frist"></a>/*跳转到frist位置*/

页面间的锚链接

页面间的跳转
从Thefrist.html页面中转入Thesecond.html页面中并且将位置定到second所在的位置。
先在Thesecond.html定义一个名为frist的锚点。

<a name="second"></a>

在Thefrist.html页面中设置锚链接。

<a href="Thesecond.html#second"></a>

功能性链接

实现特殊功能的链接
1.下载图片

<a href="img/qq.jpg">点击下载图片</a>

2.发送邮件

<a href="mailto:1967760xx37qq.com">联系我们</a>

3.引用脚本语言

<a href="javascript:alert('哈哈哈哈')"></a>

心得:学习html语言的过程确实很好玩,html的语言也很有趣,也比c++、python这种编程语言每个标签有很多种属性,可以根据自己的需求设置属性,除了这几个帖子之外还有表单标签和一些新增的标签。下面我会在写css样式中提到,就不再在html中一一总结了。

发布了9 篇原创文章 · 获赞 11 · 访问量 4552

猜你喜欢

转载自blog.csdn.net/JIANGYINGH/article/details/104715292