HTML5超链接和图片基础用法

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

一、HTML5 超链接（链接）

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

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

1.我们通过使用 a 标签在 HTML 中创建链接。

有两种使用 a 标签的方式：

通过使用 href 属性 – 创建指向另一个文档的链接
通过 target 属性：用来指定超链接打开的位置，可选值
通过使用 id 属性 – 创建文档内的书签

1.HTML 链接 –href 属性和target属性

通过 tar get属性：可选值有：

_self 默认值，在当前页面中打开超链接；

_blank在一个新的页面中打开超链接；

&lt;a href="http://www.datutusuibi.com/" target="_blank"&gt;大土土随笔</a&gt;

test.html 完整代码如下：

在这里插入图片描述

运行效果如下图：

在这里插入图片描述

2.HTML 链接 – id 属性

id 属性规定锚（anch o r）的名称。

您可以使用 id 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a id="label"&gt;锚（显示在页面上的文本）</a&gt;

**提示：**锚的名称可以是任何你喜欢的名字。

**提示：**您可以使用name 属性来替代id 属性，命名锚同样有效。

实例：

test.html

<!DOCTYPE html&gt;
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	
	<body>
		<p> <font size="3" color="red">个人博客</font></p>
		
		<a href="http://www.datutusuibi.com/" target="_blank">大土土随笔</a>
		
		<hr />
		
		<p>
		<a href="#bottom">跳转到底部</a>
		</p>
		
		<p>
		<a href="#C4">查看 Chapter 4 满江红</a>
		</p>
		
		<hr />
		
		<h2>Chapter 1   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 2   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 3   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2><a id="C4">Chapter 4 满江红</a></h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter5   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 6   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 7   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 8   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 9   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 10   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 11   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 12   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<h2>Chapter 13   满江红</h2>
		<p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。
		靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
		
		<hr />
		
		<p>
		<a id="bottom" href="#">回到顶部</a>
		</p>
		
	</body>
</html>

运行效果如下：

在这里插入图片描述

二、HTML5 相对 路径

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，相对路径都会使用.或…开头

…/

./表示当前文件所在的目录，在这里当前页面是test.html
./就等于test.html所在的目录

test.html

在这里插入图片描述

运行效果：

在这里插入图片描述

三、HTML5 图片

图片标签用于向当前页面中引入一个外部图片。使用img 标签来引入外部图片，img标签是一个自结束标签。img这种元素属于替换元素(块和行内元素一键，具有两种元素的特点)。

src属性指定的是外部图片的路径（路径规则和超链接是一样的）。

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

width 图片的宽度（单位是像素）

height图片的高度（单位是像素）

宽度和高度中如果只修改了一个，则另外一个会等比例缩放。

注意：一般情况下，不建议修改图片大小，需要多大的图片就裁剪多大，但是在移动端，经常需要对图片进行缩放（大图缩小）。

图片的格式：

jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示图片。

gif：支持的颜色比较少，支持简单透明，支持动图，一般用来显示颜色单一的图片，动图。

png：支持的颜色丰富，支持复杂透明，不支持动图。一般用来显示颜色丰富，复杂透明图片（专为网页而生）。

webp：这种格式是谷歌新推出的专门用来表示网页中的一种图片格式，它具备其他图片格式的所有优点，而且文件还特别的小。它的缺点是兼容性不好。

图片使用原则：效果一样，用小的；效果不一样，用效果好的。

<img src="./img/2023-04-14_HTML5_06.jpg" alt="日落" width="200">

在这里插入图片描述

运行效果如下：

在这里插入图片描述

原文地址:https://blog.csdn.net/u013541325/art icle/de tail s/130166144

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_22148.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.co m进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

属性文档超链接

一、HTML5 超链接（链接）

1.HTML 链接 –href 属性和target属性

2.HTML 链接 – id 属性

二、HTML5 相对路径

三、HTML5 图片

相关文章

发表回复 取消回复

发表回复取消回复