html布局模板

admin 2024年02月10日 14:28 36 0

以下是一个简单的 HTML 布局模板，包括页面的头部、主体和底部：

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>页面头部</h1>
  </header>
  <main>
    <section>
      <h2>主要内容 1</h2>
      <p>这里是主要内容 1 的描述。</p>
    </section>
    <section>
      <h2>主要内容 2</h2>
      <p>这里是主要内容 2 的描述。</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2023 页面所有者。版权所有。</p>
  </footer>
</body>
</html>

这个模板包含以下部分：

* ``：声明文档类型为 HTML5。

* ``：HTML 根元素。

* ``：包含元数据和链接到外部资源。

* ``：定义浏览器标签页的标题。

* ``：设置文档的字符编码为 UTF-8。

* ``：设置视口属性，使页面适应不同设备。

* ``：链接到外部样式表文件。

* ``：包含页面的可见内容。

* ``：定义页面头部区域。

* ``：定义页面的主要内容区域。

* ``：定义页面中的独立部分。