HTML5项目实战（模板）

最新推荐文章于 2024-05-24 16:55:01 发布

孤心_AUTO

最新推荐文章于 2024-05-24 16:55:01 发布

阅读量162

点赞数 1

分类专栏： #web前端基础文章标签： html5 html css 前端

本文链接：https://blog.csdn.net/m0_73058235/article/details/130155158

版权

#web前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

该文介绍了如何创建一个基于HTML5的新页面结构，强调了最大利用新结构元素如<header>,<main>,<nav>,<section>,<article>,<aside>和<footer>。页面包括标题部分（网站标题、副标题、提示）和主要内容（导航、文章块含标题和脚注、侧边栏、网页脚注）。此模板为高效网页设计提供了基础。

摘要由CSDN通过智能技术生成

设计：

第一步：新建HTML5文档，保存为****.html

第二步：根据前面讲述的知识，最大额度的使用HTML新结构元素

所设计的模板页面基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>[网页标签]</h1>
        <h1>[次级标签]</h1>
        <h1>[标题提示]</h1>
    </header>
    <main>
        <nav>
            <h3>[导航栏]</h3>
            <a herf="******">链接1</a>
            <a herf="******">链接2</a>
            <a herf="******">链接3</a>
        </nav>
        <section>
            <h2>[文章块]</h2>
            <article>
                <header>
                    <h1>[文章标题]</h1>
                </header>
                <p>[文章内容]</p>
                <footer>
                    <h2>[文章脚注]</h2>
                </footer>
            </article>
        </section>
        <aside>
            <h3>[辅助信息]</h3>
        </aside>
        <footer>
            <h2>[网页脚注]</h2>
        </footer>
    </main>
</body>
</html>

整个页面包含两个部分：标题部分和主要内容部分

标题部分：网站标题、副标题、提示性表体

主要内容部分：导航、文章块、侧边栏、脚注

文章块：标题部分、正文部分、脚注部分

我们可根据上述代码模板来编写自己想要的网页