使用HTML5元素制作一个网页

img

img

img


在软件Visual Studio Code中制作一个心灵小屋的网页，其中超链接是空链接
给出相应的代码


<!doctype html>
<meta charset="utf-8" />
<style>
    .more {
        margin: 10px 0;
    }

    .more a {
        cursor: pointer
    }

    .morecontent {
        display: none
    }
    .emotion{display:flex;align-items:center}
    .emotion .progress {
        background: #eee;
        height: 10px;
        border-radius: 10px;
        width: 100px;
        overflow: hidden
    }
    .emotion .progress .bar{background:green;width:80%;height:100%;}
</style>
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/784273998366170.png" />
<ul>
    <li><a href="#article">文章精选</a></li>
    <li><a href="#favor">内容收藏</a></li>
    <li><a href="#emotion">心情列表</a></li>
</ul>
<h2 id="article">文章精选</h2>
<h3>《致橡树》</h3>
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
<div class="more"><a>▶</a> 显示更多</div>
<div id="more1" class="morecontent">更多内容放这个容器里面，巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
<h2 id="article">心灵成长值</h2>
<img src="https://img-mid.csdnimg.cn/release/static/image/mid/ask/598473998366130.png" />
<div class="emotion">
    <span>今日：</span>
    <span class="progress"><div class="bar"></div></span>
    <span>80%</span>
</div>
<br />
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
<div class="more"><a>▶</a> 显示更多</div>
<div id="more1" class="morecontent">更多内容放这个容器里面，巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
<h3>《再别康桥》</h3>
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
<h2>心灵成长值</h2>


<script>
    document.querySelectorAll('div.more a').forEach(i => {
        i.onclick = function () {
            var exp = this.innerHTML == '▶';
            this.parentNode.nextElementSibling.classList[exp ? 'remove' : 'add']('morecontent');
            this.innerHTML = exp ? '▼ ' : '▶';
            this.parentNode.lastChild.data = exp ? ' 收起内容' :' 显示更多'
        }
    })
</script>

这都是很基础的html标签使用，img、li ui等。

哪个超链接？需要解决什么问题

自己学啊，兄弟。这都是非常基础的语法，你现在不写，什么时候写呢？

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632