在html页面首次加载时默认打开导航栏

基础概念

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。导航栏（Navigation Bar）是网页上用于链接到不同页面或网站主要部分的元素集合。

类型

水平导航栏：位于页面顶部的导航栏。
垂直导航栏：位于页面左侧或右侧的导航栏。
下拉导航栏：包含子菜单的导航栏，通常用于分类较多的情况。

应用场景

几乎所有的网站都会使用导航栏，特别是在以下场景中：

电子商务网站：帮助用户快速找到商品类别或搜索功能。
新闻网站：帮助用户快速切换到不同的新闻类别。
企业网站：帮助用户快速找到公司的不同部门或服务。

如何在HTML页面首次加载时默认打开导航栏

要在HTML页面首次加载时默认打开导航栏，可以使用CSS和JavaScript来实现。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="navbar">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

#navbar {
    display: none;
}

#navbar.active {
    display: block;
}

JavaScript部分（script.js）

document.addEventListener("DOMContentLoaded", function() {
    var navbar = document.getElementById("navbar");
    navbar.classList.add("active");
});

解释

HTML部分：定义了一个简单的导航栏结构。
CSS部分：默认情况下，导航栏是隐藏的（display: none;），当导航栏添加了active类时，它会显示出来（display: block;）。
JavaScript部分：在页面加载完成后，通过添加active类来显示导航栏。