本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > html5 >

收藏
分享到

HTML5超链接和图片基础用法介绍

html5 来源：互联网 作者：佚名 发布时间：2025-02-17 20:37:34 人浏览
摘要

一、HTML5 超链接（链接） 超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接

一、HTML5 超链接（链接）

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

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

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

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

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

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

通过target属性：可选值有：

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

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

1

<a href="http://www.datutusuibi.com/" target="_blank">大土土随笔</a>

test.html完整代码如下：

运行效果如下图：

2.HTML 链接 - id 属性

id 属性规定锚（anchor）的名称。

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

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

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

命名锚的语法：

1

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

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

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

实例：

test.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<!DOCTYPE html>

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

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

1

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

运行效果如下：
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • CSS弹性布局常用设置方式

    CSS弹性布局常用设置方式
    一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1v
  • 使用CSS3实现平滑的过渡动画效果
    要使用CSS3实现平滑的过渡动画，可以按照以下步骤进行： 1：定义初始状态：首先，为元素设置其初始样式。这通常是在CSS中直接定义的样
  • HTML5超链接的创建方法
    超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接

  • HTML5超链接和图片基础用法介绍

    HTML5超链接和图片基础用法介绍
    一、HTML5 超链接（链接） 超链接可以是一个文本，也可以是一幅图像，您可以点击这些内容来跳转到新的页面或新的文档或者当前文档中的

  • HTML5 Input日期选择器的介绍

    HTML5 Input日期选择器的介绍
    HTML5 Input DatePicker 对象 1 Input Date 对象表示 HTML `input type=datetime` 元素。 是 HTML5 中的新对象。 访问 Input Date 对象 1 var x = document.getElementById(
  • HTML5 details标签的基础知识
    定义和用法 details标签规定用户可以根据需要打开和关闭的其他详细信息。 details标签通常用于创建用户可以打开和关闭的交互式小部件。默

  • HTML5使用details标签：展开/收缩信息

    HTML5使用details标签：展开/收缩信息
    details 标签提供了一种替代JavaScript的方法，它主要是提供了一个展开/收缩区域。details 标签中可以使用 summary 标签从属于details 标签，单击
  • HTML5实现本地摄像头拍照与照片上传的方法介绍
    HTML5通过input type=file标签及其capture属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScri

  • HTML5元素定位的介绍

    HTML5元素定位的介绍
    1.元素定位 为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。 元素定位有四种，可

  • html5浏览器中实现高德地图定位功能(推荐)

    html5浏览器中实现高德地图定位功能(推荐)
    HTML5是当前Web开发中最常用的技术之一，而地图应用又是其中一个非常常见的需求。高德地图是国内最受欢迎的地图服务提供商之一，他们提
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计