HTML 课程 |构建主要内容 – 第 3 节(1)

📌 相关文章

📜 HTML 课程 |构建主要内容 – 第 3 节(1)

📅 最后修改于: 2023-12-03 14:41:56.856000 🧑 作者: Mango

HTML 课程 | 构建主要内容 - 第 3 节

在这一节课中我们将学习如何构建 HTML 文档的主要内容，这是在创建网站时必不可少的基础知识。

HTML 文档结构

在编写 HTML 文档时，我们应该先定义文档的结构。一个基本的 HTML 文档结构如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        页面内容
    </body>
</html>

<!DOCTYPE html> 是声明文档类型为 HTML5 的语句。
<html> 标签包含整个 HTML 页面。
<head> 标签包含文档的元数据，如页面标题，引入的 CSS 和 JavaScript 文件等。
<title> 标签定义页面的标题，会显示在浏览器的标签页中。
<body> 标签包含页面的主要内容。

主要内容标签

在 <body> 标签中，我们通常使用以下标签来构建页面的主要内容：

<header> 标签定义页面或节的标题。
<nav> 标签定义导航链接的部分。
<main> 标签定义页面的主要内容。
<footer> 标签定义页面的页脚部分。

另外，我们还可以使用标题标签 <h1> 到 <h6> 来定义标题的级别，段落标签 <p> 来定义正文内容，以及其他各种标签来定义列表，表格，图片等内容。

示例代码

下面是一个简单的 HTML 页面示例，用来展示主要内容标签的用法：

<!DOCTYPE html>
<html>
    <head>
        <title>示例页面</title>
    </head>
    <body>
        <header>
            <h1>欢迎来到本站</h1>
            <nav>
                <a href="#">首页</a>
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
            </nav>
        </header>
        <main>
            <h2>我们提供以下服务</h2>
            <ul>
                <li>服务1</li>
                <li>服务2</li>
                <li>服务3</li>
            </ul>
            <p>我们非常注重客户的满意度，欢迎联系我们了解更多。</p>
            <img src="image.jpg" alt="示例图片">
            <table>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                </tr>
                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>内容3</td>
                </tr>
            </table>
        </main>
        <footer>
            版权所有 © 2021 本站
        </footer>
    </body>
</html>

以上代码演示了如何使用 HTML 主要内容标签来构建简单的页面结构，你可以根据自己的需要进行修改和扩展。