HTML 基础
常用的元素
工具与规范
实例练习
基本的链接
使用链接可以创建一个指向某个资源(网页、图片、视频等等)的元素,比如点击下面的三眼鸭可以跳转三眼鸭的官网。
$$demo
<p>这里是<a href="https://3yya.com/">三眼鸭</a>的编程教室。</p>
$$
我们可以用 <a>
链接元素创建上面的链接, href
属性的值为跳转的页面地址。
<p>这里是<a href="https://3yya.com/">三眼鸭</a>的编程教室。</p>
新页面打开
注意一下会发现,新的页面是在当前的标签页打开的,如果我们想指定在新的标签页打开可以设置 target
属性为 _blank
。
$$demo
<p>这里是<a href="https://3yya.com/" target="_blank">三眼鸭</a>的编程教室。</p>
$$
<p>这里是<a href="https://3yya.com/" target="_blank">三眼鸭</a>的编程教室。</p>
包含图片
<a>
标签中可以包含任意的元素,我们可以尝试包含一张图片。
$$demo
<a href="https://3yya.com/"> <img src="https://3yya.com/logo-mini.png"/> </a>
$$
<a href="https://3yya.com/">
<img src="https://3yya.com/logo-mini.png"/>
</a>
元素定位
在链接后可以跟 #id
,在打开页面后会定位到对应 id 的元素上。
<a href="https://3yya.com/courseware/chapter/32#万维网联盟" target="_blank">万维网联盟</a>
$$demo
<a href="https://3yya.com/courseware/chapter/32#万维网联盟" target="_blank">万维网联盟</a>
$$
属性
属性名 | 描述 |
---|---|
href | 链接指向的资源地址。 |
target | <p>显示资源的位置。</p><ul><li>_self: 当前页面加载。(默认值)</li><li> _blank: 新窗口打开。</li><li> _parent: 父级窗口打开,只有在 iframe 内起效。</li><li> _top: 顶级窗口打开,只有在 iframe 内起效。</li></ul> |
download | 表明这是一个下载的资源,如果有值则为保存的文件名。<br />注意:仅适用于同源的 URL。 |
练习
- 给你喜欢的人物头像写个链接,指向他的百度百科介绍页,点击后要新窗口打开。