这个例子将创建一个导航栏,其中包含五个指向不同网站的链接。

html简单五连接网页代码
（图片来源网络，侵删）

完整代码

您可以直接复制以下所有代码,保存为一个 .html 文件（index.html），然后用浏览器打开它。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的简单链接网页</title>
    <style>
        /* 一些简单的CSS样式，让页面更好看 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #1a73e8;
        }
        nav ul {
            list-style-type: none; /* 移除列表前的点 */
            padding: 0;
            margin: 20px 0;
        }
        nav li {
            margin: 10px 0;
        }
        nav a {
            text-decoration: none; /* 移除链接下划线 */
            color: #1a73e8;
            font-size: 18px;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s; /* 添加悬停效果 */
        }
        nav a:hover {
            background-color: #e8f0fe;
            color: #174ea6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这里是一些有用的链接：</p>
        <nav>
            <ul>
                <li><a href="https://www.google.com" target="_blank">访问 Google</a></li>
                <li><a href="https://www.github.com" target="_blank">访问 GitHub</a></li>
                <li><a href="https://www.w3schools.com" target="_blank">访问 W3Schools</a></li>
                <li><a href="https://www.wikipedia.org" target="_blank">访问 Wikipedia</a></li>
                <li><a href="https://www.bilibili.com" target="_blank">访问 Bilibili</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

代码详解

基本HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的简单链接网页</title>
</head>
<body>
    <!-- 网页内容放在这里 -->
</body>
</html>
  • <!DOCTYPE html>: 声明这是一个HTML5文档。
  • <html lang="zh-CN">: 整个网页的根元素，lang="zh-CN" 指定网页语言为中文（中国）。
  • <head>: 包含网页的元数据（信息），比如标题、字符编码、样式表链接等。
  • <meta charset="UTF-8">: 设置字符编码为UTF-8，可以正确显示中文等大部分语言。
  • <title>: 显示在浏览器标签页上的标题。
  • <body>: 包含所有可见的网页内容，比如文本、图片、链接等。

链接部分 (<body> 内部)

<body>
    <div class="container">
        <h1>欢迎来到我的网站</h1>
        <p>这里是一些有用的链接：</p>
        <nav>
            <ul>
                <li><a href="https://www.google.com" target="_blank">访问 Google</a></li>
                <li><a href="https://www.github.com" target="_blank">访问 GitHub</a></li>
                <li><a href="https://www.w3schools.com" target="_blank">访问 W3Schools</a></li>
                <li><a href="https://www.wikipedia.org" target="_blank">访问 Wikipedia</a></li>
                <li><a href="https://www.bilibili.com" target="_blank">访问 Bilibili</a></li>
            </ul>
        </nav>
    </div>
</body>
  • <div class="container">: 一个容器 <div>，用于包裹所有内容，方便我们用CSS进行整体布局和样式设计。
  • <h1>: 一级标题，通常用作页面主标题。
  • <p>: 段落标签，用于显示普通文本。
  • <nav>: 导航标签，专门用于包裹网站的导航链接。
  • <ul>: 无序列表（Unordered List），它会显示为一个带有项目符号的列表。
  • <li>: 列表项（List Item），<ul> 中的每一个项目都是一个 <li>。
  • <a>: 锚标签，用于创建超链接。
    • href="...": 必需属性，指定链接的目标URL。
    • target="_blank": 可选属性，表示点击链接后，将在一个新的浏览器标签页中打开目标网址，如果没有这个属性，会在当前标签页跳转。
    • 访问 Google: 这是链接显示给用户看的文本。

样式部分 (<head> 内部的 <style> 
<style>
    body { ... }
    .container { ... }
    nav ul { ... }
    nav a { ... }
    nav a:hover { ... }
</style>

这部分是CSS（层叠样式表）代码，用来美化HTML元素。

  • body: 设置整个页面的背景色、字体、让内容居中显示。
  • .container: 设置白色背景、内边距、圆角和阴影，让内容看起来像一个卡片。
  • nav ul: 移除了列表默认的项目符号 (list-style-type: none)。
  • nav a: 移除了链接的下划线，设置了颜色和大小。
  • nav a:hover: 当鼠标移动到链接上时，改变其背景色和文字颜色，提供交互反馈。

如何使用

  1. 创建文件: 在您的电脑上新建一个文本文档。
  2. 复制粘贴: 将上面的完整代码复制并粘贴到这个文本文档中。
  3. 保存文件: 点击“文件” -> “另存为”，在“保存类型”中选择“所有文件”，然后将文件名命名为 index.html（确保后缀是 .html）。
  4. 打开网页: 找到您保存的 index.html 文件，用任何浏览器（如 Chrome, Edge, Firefox）双击打开它，您就能看到这个简单的链接网页了。
html简单五连接网页代码
（图片来源网络，侵删）