HTML/Xhtml
☘ 主页 > 网页 > HTML/Xhtml >

HTML img标签和超链接标签详细介绍

2025-06-21 | 佚名 | 点击：次

img 标签

img 是一个单标签

src 属性

img 标签必须搭配 src 使用（指定图片的路径）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<html>

    <head>

        图片插入演示

    </head>

    <body>

        <p>

            <strong>

                相对路径下插入图片：

            </strong>

            在本目录下：<img src="cloud.png">

            <br/>

            在本目录文件夹中：<img src="img/cloud.png">

            <br/>

            <strong>

                绝对路径下插入图片：

            </strong>

            <br/>

            输入图片路径：<img src="D://My Computer/cloud.png">

            <br/>

            网络上的图片资源：<img src="https://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png">

        </p>

    </body>

</html>

alt 属性

1

2

3

4

5

6

7

8

9

10

<html>

    <head>

        <title>这是 img 其他属性演示</title>

    </head>

    <body>

        <p>

            白云图片：<img src="cloud.pnggg" alt="白云图片加载出现问题">

        </p>

    </body>

</html>

title 属性

1

2

3

4

5

6

7

8

9

10

11

<html>

    <head>

        <title>这是 img 其他属性演示</title>

    </head>

    <body>

        <p>

            白云图片：<img src="cloud.png" alt="白云图片加载出现问题"

            title="这是一张美丽的白云图片">

        </p>

    </body>

</html>

width/height 属性

1

2

3

4

5

6

7

8

9

10

11

<html>

    <head>

        <title>这是 img 其他属性演示</title>

    </head>

    <body>

        <p>

            白云图片：<img src="cloud.png" alt="白云图片加载出现问题"

            title="这是一张美丽的白云图片" wight="200px">

        </p>

    </body>

</html>

border 属性

加上边框，参数是宽度的像素，但是一般是使用 CSS 来设定

1

2

3

4

5

6

7

8

9

10

11

<html>

    <head>

        <title>这是 img 其他属性演示</title>

    </head>

    <body>

        <p>

            白云图片：<img src="cloud.png" alt="白云图片加载出现问题"

            title="这是一张美丽的白云图片" wight="200px" border="10px">

        </p>

    </body>

</html>

border 后面跟边框的大小

  • 标签后面的属性顺序是没有要求的，顺序对显示结果没有影响
  • 每个属性之间用 空格 或者 回车 隔开都可以
  • value 都写在 “” 里面

超链接标签：a

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>href 演示</title>

</head>

<body>

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

    <a href="https://www.baidu.com/"><img src="baidu.png" border="5px"></a>

    <a href="#">跳转到当前页面</a>

</body>

</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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <table border="1px" width="800" height="400" cellspacing="0"

    cellpadding="50" align="center">

        <tr>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

        </tr>

        <tr>

            <td>张三</td>

            <td>男</td>

            <td>18</td>

        </tr>

        <tr>

            <td>李四</td>

            <td>男</td>

            <td>19</td>

        </tr>

        <tr>

            <td>王五</td>

            <td>女</td>

            <td>18</td>

        </tr>

    </table>

</body>

</html>

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中

  • align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式）
  • border 表示边框，1 表示有边框（数字越大，边框越粗）， "" 表示没边框.
  • cellpadding：内容距离边框的距离，默认 1 像素
  • cellspacing：单元格之间的距离，默认为 2 像素
  • width / height：设置尺寸
    注意： 这几个属性 vscode 都提示不出来

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <table border="1px" width="800" height="400" cellspacing="0"

    cellpadding="50" align="center">

        <thead>

            <tr>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>张三</td>

                <td>男</td>

                <td>18</td>

            </tr>

            <tr>

                <td>李四</td>

                <td>男</td>

                <td>19</td>

            </tr>

            <tr>

                <td>王五</td>

                <td>女</td>

                <td>18</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

一般把表头的信息放在 thead 中，表格信息放在 tbody 中

合并单元格

将需要合并的单元格数量直接加在 td 后面

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <table border="1px" width="800" height="400" cellspacing="0"

    cellpadding="50" align="center">

        <thead>

            <tr>

                <th>姓名</th>

                <th>性别</th>

                <th>年龄</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>张三</td>

                <td rowspan="2">男</td>

                <td>18</td>

            </tr>

            <tr>

                <td>李四</td>

                <!-- <td>男</td> -->

                <td>19</td>

            </tr>

            <tr>

                <td colspan="2">王五/女</td>

                <!-- <td>女</td> -->

                <td>18</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

原文链接：
相关文章
最新更新