HTML的图片标签、超链接、表格

听风吹过04

已于 2023-03-09 21:13:33 修改

阅读量80

点赞数 1

分类专栏： HTML入门文章标签： html 前端

于 2023-03-06 20:52:34 首次发布

本文链接：https://blog.csdn.net/qq_61657066/article/details/129370209

版权

HTML入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 <img src="" alt="" title="">

src用于指定图片所在的路径，既可以是相对路径，也可以是绝对路径

绝对路径：是指图片在电脑中完整的路径；

相对路径是指，图片相对于当前页面的位置。

alt属性用于描述图片，当图片无法显示时，显示alt中的文字；

title属性也用于描述图片，当鼠标移到图片上时，显示title中的文字。

返回上一级用 ../

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="">首页</a>
    <a href="Opera art.html">戏曲</a>
    <a href="Calligraphy.html">书法</a>
    <a href="Literature.html">文学</a>
    <a href="Instruction.html">器乐</a>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <p id="top">你如果行善事，人们会说你必定是出于自私的隐蔽动机。不管怎样，<strong>还是要做善事</strong> 。你今天所做的善事明天就会被人遗忘。不管怎样，还是要做善事。</p>
    <br>
    <br><br>
    <br><br>

    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <p>你如果行善事，人们会说你必定是出于自私的隐蔽动机。不管怎样，<strong>还是要做善事</strong> 。你今天所做的善事明天就会被人遗忘。不管怎样，还是要做善事。</p>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br><br><br>
    <br><br>
    <br><br>
    <a href="#top">回到第一句话</a>
    <p>你如果行善事，人们会说你必定是出于自私的隐蔽动机。不管怎样，<strong>还是要做善事</strong> 。你今天所做的善事明天就会被人遗忘。不管怎样，还是要做善事。</p>
</body>
</html>

a标签实现超链接

    <a href=""></a>

href表示想要跳转页面的路径

锚点连接设置一个id

href后面 # 加上id

 <p id="top">你如果行善事，人们会说你必定是出于自私的隐蔽动机。不管怎样，<strong>还是要做善事</strong> 。你今天所做的善事明天就会被人遗忘。不管怎样，还是要做善事。</p>
<a href="#top">回到第一句话</a>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <table border="1" width="500px" height="120px" align="center" bgcolor="pink" cellspacing="0" cellpadding="10">
        <caption>标题</caption>
        <tr>
            <th>哈哈哈</th>
            <th>还没秃</th>
            <th>还有一根</th>
        </tr>
        <tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>

    <table border="1" width="500px" height="120px" align="center" bgcolor="pink" cellspacing="0" cellpadding="10">
        <caption>标题</caption>
        <tr>
            <!-- rowspan合并行 -->
            <th colspan="2">哈哈哈还没秃</th>
            <th>还有一根</th>
        </tr>
        <tr align="center">
            <!-- colspan合并列 -->
            <td rowspan="2">姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>
</body>

</html>

</html>