html中span标签和 a 标签

最新推荐文章于 2024-07-23 08:49:01 发布

淮南草

最新推荐文章于 2024-07-23 08:49:01 发布

阅读量8.6k

点赞数 2

分类专栏： WEB前端

本文链接：https://blog.csdn.net/zhuisaozhang1292/article/details/81107058

版权

WEB前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div style="background-color: red;display: inline;">asdf</div>-->
    <!--<span style="background-color: red;display: block;">asdf</span>-->
    <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">hcl</span>
    <a style="background-color: red;">jane</a>
</body>
</html>

输出：

通过a标签跳转

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border: 0;
        }
    </style>
</head>
<body>
    <a href="https://blog.csdn.net/zhuisaozhang1292/article/category/7811344" >淮南草的博客</a>
    <a href="https://blog.csdn.net/zhuisaozhang1292/article/category/7811344">
        <img src="1.jpg" style="width: 200px;height: 300px;">
    </a>
</body>
</html>

输出：

输入：点击跳转至顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom:100px;
    right: 100px;
    ">
    	返回顶部
    </div>
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>    
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>
</html>

输出：