网站的骨架 —— HTML结构篇

前言

欢迎来到“从零开始构建中国风网站”系列教程！在开始之前，咱们先看一眼“毕业作品”——也就是我们最终要完成的网站首页。是不是很漂亮？

梦回长安 - 我们的第一个中国风页面.png

别怕，这个看起来很棒的页面，我们会一步步地教你如何搭建。这一章，我们的目标非常纯粹：只用HTML，搭建出这个页面的完整骨架。完成之后，它看起来会很朴素，甚至有点“丑”，但这非常正常！因为我们还没给它“化妆”（CSS）。

搭建你的第一个页面

首先，请确保你的项目文件夹里有一个名为index.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>梦回长安 - 我们的第一个中国风页面</title>
    <!-- 我们暂时假装没看到这行，下一章再来揭秘 -->
    <!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>

    <header>
        <h1>梦回长安</h1>
        <p>一个带你领略中华传统文化之美的网站</p>
    </header>

    <nav>
        <a href="#">首页</a>
        <a href="#">诗词歌赋</a>
        <a href="#">琴棋书画</a>
        <a href="#">关于我们</a>
    </nav>

    <main>
        <article>
            <header>
                <h2>诗词歌赋</h2>
            </header>
            <img src="https://p5.ssl.qhimgs1.com/t0159754e63f283177f.jpg" alt="书卷与笔墨">
            <p>“关关雎鸠，在河之洲。窈窕淑女，君子好逑。” 从诗经的质朴纯真，到唐诗的雄浑壮丽，再到宋词的婉约清丽，文字的韵律之美，在此间流淌千年。</p>
            <a href="#">了解更多 »</a>
        </article>

        <article>
            <header>
                <h2>琴棋书画</h2>
            </header>
            <img src="http://5b0988e595225.cdn.sohucs.com/images/20180707/5dbbf487ba124c2d98e09fb92985260f.jpeg" alt="古风建筑">
            <p>一张琴，一局棋，一幅字，一卷画。古代文人骚客的“四般闲事”，是生活的艺术，亦是心灵的修行。在这里，我们一同探寻东方美学的独特魅力。</p>
            <a href="#">了解更多 »</a>
        </article>
    </main>

    <footer>
        <p>版权所有 © 2024 梦回长安。</p>
    </footer>

</body>
</html>

骨架解析：这些标签都是啥？

现在，用你的浏览器打开这个 index.html 文件。看到没？一个朴素的页面，但内容都在。这就是我们网站的“骨架”。我们来认识一下这些“骨头”：

<header> (页眉): 页面顶部的“门脸”。我们放了主标题 <h1> 和副标题 <p>。
<nav> (导航): 这是“导航栏”，里面的 <a> 标签就是链接，可以带我们去别的页面（现在用 #表示哪儿也不去）。
<main> (主要内容): 页面的核心区域，所有正文都在这里。
<article> (文章/板块): 在 <main>里面，我们用了两个 <article>，分别代表“诗词歌赋”和“琴棋书画”这两个独立板块。这让结构更清晰。
<img> (图片): 用来显示图片。src是图片地址，alt是图片加载失败时显示的文字。
<footer> (页脚): 页面底部的区域，我们放了版权信息。

动手做

仔细看看浏览器里的页面，再对照代码，试着理解每个部分是如何显示的。
尝试修改一下 <p>标签里的文字，或者 <h2>的标题，然后刷新浏览器看看变化。

恭喜你！你已经成功搭建了一个完整网页的HTML骨架！下一章，我们将揭开CSS的神秘面纱，学习如何为这个“素颜”的骨架“化妆”，让它变得光彩照人！

前言

搭建你的第一个页面

骨架解析：这些标签都是啥？

动手做

切换评论系统

热门文章